first

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,57 @@
+<script module>
+  import { tv } from "tailwind-variants";
+
+  export const buttonVariants = tv({
+    base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  });
+</script>
+
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let {
+    class: className,
+    variant = "default",
+    size = "default",
+    ref = $bindable(null),
+    href = undefined,
+    type = "button",
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+{#if href}
+  <a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}