rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Features/shadcn #1

Merged
rehlert merged 17 commits from features/shadcn into main 2026-07-22 19:15:48 +00:00
Conversation 0 Commits 17 Files Changed 45
+85 -66
2 changed files with 85 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 52ca2c24f4 - Show all commits
src/lib/components/icons/IconSettings.svelte
+8
View File
@@ -0,0 +1,8 @@
<svg class="w-fit h-fit" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 17.5834C21.5523 17.5834 22 18.0311 22 18.5834V19.5834H1C0.447716 19.5834 0 19.1357 0 18.5834C0 18.0311 0.447715 17.5834 1 17.5834H21Z" fill="#122F62"/>
<path d="M21 10.5834C21.5523 10.5834 22 11.0311 22 11.5834V12.5834H1C0.447716 12.5834 0 12.1357 0 11.5834C0 11.0311 0.447715 10.5834 1 10.5834H21Z" fill="#122F62"/>
<path d="M21 3.08337C21.5523 3.08337 22 3.53109 22 4.08337V5.08337H1C0.447716 5.08337 0 4.63566 0 4.08337C0 3.53109 0.447715 3.08337 1 3.08337H21Z" fill="#122F62"/>
<circle cx="6.5" cy="3.75" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
<circle cx="15.5835" cy="11.0834" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
<circle cx="6.5" cy="18.4167" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 884 B

src/lib/components/ui/button.svelte
+77 -66
View File
@@ -1,78 +1,89 @@
<script lang="ts" module> <script lang="ts" module>
import { ripple } from "$lib/actions/ripple"; import {ripple} from "$lib/actions/ripple";
import { cn, type WithElementRef } from "$lib/utils.js"; import {cn, type WithElementRef} from "$lib/utils.js";
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"; import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants"; import {type VariantProps, tv} from "tailwind-variants";
import type {Component} from "svelte";
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]", base: "relative overflow-hidden font-bold w-fit min-w-28 hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366] inline-flex items-center justify-center gap-4",
variants: { variants: {
variant: { variant: {
primary: "bg-primary text-primary-foreground", primary: "bg-primary text-primary-foreground",
secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground", secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]", bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
tertiary: "text-primary hover:bg-[#122F621A]", tertiary: "text-primary hover:bg-[#122F621A]",
success: "text-white bg-[#0FAD80]" success: "text-white bg-[#0FAD80]"
}, },
size: { size: {
standard: "px-6 h-8 rounded-[16px]", standard: "px-6 h-8 rounded-[16px]",
large: "px-8 h-12 rounded-[24px]" large: "px-8 h-12 rounded-[24px]"
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "primary", variant: "primary",
size: "standard", size: "standard",
}, },
}); });
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]; export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"]; export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & { WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant; variant?: ButtonVariant;
size?: ButtonSize; size?: ButtonSize;
}; end?: Component;
};
</script> </script>
<script lang="ts"> <script lang="ts">
let { let {
class: className, class: className,
variant = "primary", variant = "primary",
size = "standard", size = "standard",
ref = $bindable(null), end,
href = undefined, ref = $bindable(null),
type = "button", href = undefined,
disabled, type = "button",
children, disabled,
...restProps children,
}: ButtonProps = $props(); ...restProps
}: ButtonProps = $props();
</script> </script>
{#if href} {#if href}
<a <a
use:ripple use:ripple
bind:this={ref} bind:this={ref}
data-slot="button" data-slot="button"
class={cn(buttonVariants({ variant, size }), className)} class={cn("", buttonVariants({ variant, size }), className)}
href={disabled ? undefined : href} href={disabled ? undefined : href}
aria-disabled={disabled} aria-disabled={disabled}
role={disabled ? "link" : undefined} role={disabled ? "link" : undefined}
tabindex={disabled ? -1 : undefined} tabindex={disabled ? -1 : undefined}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</a> {#if end}
{@const Icon = end}
<Icon/>
{/if}
</a>
{:else} {:else}
<button <button
use:ripple use:ripple
bind:this={ref} bind:this={ref}
data-slot="button" data-slot="button"
class={" " + cn(buttonVariants({ variant, size }), className)} class={cn("inline-flex items-center justify-center gap-4", buttonVariants({ variant, size }), className)}
{type} {type}
{disabled} {disabled}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</button> {#if end}
{@const Icon = end}
<Icon/>
{/if}
</button>
{/if} {/if}