@playfast/reform-better-hub-ui-primitives 0.2.1 → 0.3.0

package/README.md

@@ -74,15 +74,15 @@ const Example = () => (
 
 ## Key Concepts
 
-| Concept                | What it is                                                                                    |
-| ---------------------- | --------------------------------------------------------------------------------------------- |
-| Form & action          | `Button` (+ `buttonVariants`), `Input`, `Textarea`, `InputGroup`, `Badge` (+ `badgeVariants`) |
-| Overlays               | `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu` (Radix-backed, compound parts)        |
-| Command palette        | `Command` (cmdk) + `Combobox`                                                                 |
-| Branding & background  | `Logo` / `LogoMark`, `AgentIcon`, `GitHubBackground`, `HalftoneBackground`                     |
-| Live time              | `LiveDuration`, `TimeAgo` (self-ticking displays)                                             |
-| Layout                 | `ResizeHandle`                                                                                |
-| Class utility          | `cn(...)` — `clsx` + `tailwind-merge`                                                          |
+| Concept               | What it is                                                                                    |
+| --------------------- | --------------------------------------------------------------------------------------------- |
+| Form & action         | `Button` (+ `buttonVariants`), `Input`, `Textarea`, `InputGroup`, `Badge` (+ `badgeVariants`) |
+| Overlays              | `Dialog`, `Sheet`, `Popover`, `Tooltip`, `DropdownMenu` (Radix-backed, compound parts)        |
+| Command palette       | `Command` (cmdk) + `Combobox`                                                                 |
+| Branding & background | `Logo` / `LogoMark`, `AgentIcon`, `GitHubBackground`, `HalftoneBackground`                    |
+| Live time             | `LiveDuration`, `TimeAgo` (self-ticking displays)                                             |
+| Layout                | `ResizeHandle`                                                                                |
+| Class utility         | `cn(...)` — `clsx` + `tailwind-merge`                                                         |
 
 Each overlay follows the Radix compound pattern (`Dialog` + `DialogTrigger` +
 `DialogContent`, etc.); `variant`/`size` props are driven by

package/package.json

@@ -1,29 +1,32 @@
 {
   "name": "@playfast/reform-better-hub-ui-primitives",
-  "playbook": "./playbook",
-  "version": "0.2.1",
-  "type": "module",
+  "version": "0.3.0",
   "description": "React UI primitives adapted from better-hub by Better Auth (https://github.com/better-auth/better-hub). Full credit to the Better Auth team.",
   "keywords": [
-    "reform",
-    "effect",
-    "react",
-    "ui",
     "components",
     "design-system",
-    "shadcn",
+    "effect",
     "radix",
-    "tailwind"
+    "react",
+    "reform",
+    "shadcn",
+    "tailwind",
+    "ui"
   ],
+  "bugs": {
+    "url": "https://github.com/playfast/reform/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/playfast/reform.git",
     "directory": "packages/better-hub-ui-primitives"
   },
-  "bugs": {
-    "url": "https://github.com/playfast/reform/issues"
-  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
@@ -33,10 +36,9 @@
     "./styles.css": "./src/foundation/styles.css",
     "./*": "./src/*.tsx"
   },
-  "files": [
-    "src",
-    "README.md"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "clean": "rm -rf dist .tsbuildinfo",
     "check": "tsc --noEmit",
@@ -47,10 +49,6 @@
     "lint": "oxlint src",
     "lint:fix": "oxlint --fix src"
   },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -66,7 +64,9 @@
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.4.1"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "playbook": "./playbook"
 }

package/src/components/agent-icon.tsx

@@ -1,25 +1,22 @@
-// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
-// (apps/web/src/components/ui/agent-icon.tsx). Full credit to the Better Auth team.
-
-import type * as React from "react";
+import type * as React from 'react'
 
 interface AgentIconPropsExternalApi {
-	className?: string;
+  className?: string
 }
 
 export function AgentIcon({ className }: AgentIconPropsExternalApi): React.JSX.Element {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="1em"
-			height="1em"
-			viewBox="0 0 28 28"
-			className={className}
-		>
-			<path
-				fill="currentColor"
-				d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98"
-			/>
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 28 28"
+      className={className}
+    >
+      <path
+        fill="currentColor"
+        d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98"
+      />
+    </svg>
+  )
 }

package/src/components/autocomplete.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { String as Str } from 'effect'
+import { CheckIcon, ChevronDownIcon, Loader2Icon } from 'lucide-react'
+
+import { cn } from '../foundation/cn'
+import { Input } from './input'
+
+export interface AutocompleteItemExternalApi {
+  readonly value: string
+  readonly label?: string
+  readonly description?: string
+}
+
+export interface AutocompletePropsExternalApi {
+  readonly value: string
+  readonly onValueChange: (next: string) => void
+  readonly items: ReadonlyArray<AutocompleteItemExternalApi>
+  readonly placeholder?: string
+  readonly 'aria-label': string
+  readonly loading?: boolean
+  readonly loadingText?: string
+  readonly emptyText?: string
+  readonly disabled?: boolean
+  readonly className?: string
+}
+
+// blur close is delayed so suggestion mousedown (which blurs the input) still lands
+const BLUR_CLOSE_DELAY_MS = 120
+
+const matchesQuery = (suggestion: AutocompleteItemExternalApi, needle: string): boolean =>
+  [suggestion.value, suggestion.label, suggestion.description].some(
+    (text) => text !== undefined && Str.toLowerCase(text).includes(needle),
+  )
+
+export function Autocomplete({
+  value: fieldValue,
+  onValueChange,
+  items: suggestions,
+  placeholder,
+  'aria-label': ariaLabel,
+  loading = false,
+  loadingText = 'Loading…',
+  emptyText = 'No matches — the typed value is used as-is.',
+  disabled = false,
+  className,
+}: AutocompletePropsExternalApi): React.JSX.Element {
+  const [open, setOpen] = React.useState(false)
+  // filter only what was typed since open (empty right after open ⇒ full list)
+  const [query, setQuery] = React.useState('')
+  const [highlighted, setHighlighted] = React.useState(-1)
+  const listId = React.useId()
+
+  const needle = Str.toLowerCase(query)
+  const filtered =
+    query === ''
+      ? suggestions
+      : suggestions.filter((suggestion) => matchesQuery(suggestion, needle))
+  const activeIndex = highlighted >= 0 && highlighted < filtered.length ? highlighted : -1
+  const optionId = (index: number): string => `${listId}-option-${index}`
+
+  React.useEffect(() => {
+    if (activeIndex >= 0) {
+      document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: 'nearest' })
+    }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- optionId is stable per listId
+  }, [activeIndex])
+
+  const openList = (): void => {
+    setQuery('')
+    setHighlighted(-1)
+    setOpen(true)
+  }
+  const pick = (suggestion: AutocompleteItemExternalApi): void => {
+    onValueChange(suggestion.value)
+    setOpen(false)
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!open) {
+        openList()
+        return
+      }
+      if (filtered.length > 0) {
+        setHighlighted(
+          event.key === 'ArrowDown'
+            ? (activeIndex + 1) % filtered.length
+            : (activeIndex <= 0 ? filtered.length : activeIndex) - 1,
+        )
+      }
+      return
+    }
+    if (event.key === 'Enter') {
+      if (open && activeIndex >= 0) {
+        event.preventDefault()
+        pick(filtered[activeIndex]!)
+      } else {
+        setOpen(false)
+      }
+      return
+    }
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  const showEmpty = !loading && query !== '' && filtered.length === 0
+  const showList = open && (loading || filtered.length > 0 || showEmpty)
+
+  return (
+    <div className={cn('relative', className)}>
+      <Input
+        value={fieldValue}
+        onChange={(event) => {
+          onValueChange(event.target.value)
+          setQuery(event.target.value)
+          setHighlighted(-1)
+          setOpen(true)
+        }}
+        onFocus={openList}
+        // oxlint-disable-next-line reform-rules/no-set-timeout-interval -- DOM blur defer; Effect.sleep can't gate a React event handler
+        onBlur={() => globalThis.setTimeout(() => setOpen(false), BLUR_CLOSE_DELAY_MS)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        role="combobox"
+        aria-label={ariaLabel}
+        aria-expanded={showList}
+        aria-controls={listId}
+        aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
+        aria-autocomplete="list"
+        autoComplete="off"
+        spellCheck={false}
+        className="pr-8"
+      />
+      <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+        {loading ? (
+          <Loader2Icon className="size-4 animate-spin" />
+        ) : (
+          <ChevronDownIcon className="size-4" />
+        )}
+      </span>
+      {showList && (
+        <div
+          id={listId}
+          role="listbox"
+          aria-label={`${ariaLabel} suggestions`}
+          className="absolute left-0 right-0 top-full z-50 mt-1 flex max-h-60 flex-col overflow-y-auto rounded-md border bg-card p-1 text-card-foreground shadow-md"
+        >
+          {loading && (
+            <span className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
+              <Loader2Icon className="size-3 animate-spin" />
+              {loadingText}
+            </span>
+          )}
+          {filtered.map((suggestion, index) => (
+            <button
+              key={suggestion.value}
+              id={optionId(index)}
+              type="button"
+              role="option"
+              aria-selected={suggestion.value === fieldValue}
+              // mousedown fires before blur so the pick lands
+              onMouseDown={(event) => {
+                event.preventDefault()
+                pick(suggestion)
+              }}
+              onMouseMove={() => setHighlighted(index)}
+              className={cn(
+                'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm',
+                index === activeIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50',
+              )}
+            >
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate">{suggestion.label ?? suggestion.value}</span>
+                {suggestion.description && (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {suggestion.description}
+                  </span>
+                )}
+              </span>
+              {suggestion.value === fieldValue ? <CheckIcon className="size-4 shrink-0" /> : null}
+            </button>
+          ))}
+          {showEmpty && (
+            <span className="px-2 py-1.5 text-xs text-muted-foreground">{emptyText}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/badge.tsx

@@ -1,59 +1,58 @@
-// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
-// (apps/web/src/components/ui/badge.tsx). Full credit to the Better Auth team.
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-import { Slot } from "radix-ui";
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { ClassProp } from 'class-variance-authority/types'
+import { Slot } from 'radix-ui'
 
-import { cn } from "../foundation/cn";
+import { cn } from '../foundation/cn'
 
 type BadgeVariantsExternalApi = (
-	props?:
-		| ({
-				variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
-		  } & ClassProp)
-		| undefined,
-) => string;
+  props?:
+    | ({
+        variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | undefined
+      } & ClassProp)
+    | undefined,
+) => string
 
 const badgeVariants: BadgeVariantsExternalApi = cva(
-	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-				destructive:
-					"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-				outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-				ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 [a&]:hover:underline",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
 
-type BadgePropsExternalApi = React.ComponentProps<"span"> &
-	VariantProps<typeof badgeVariants> & { asChild?: boolean };
+type BadgePropsExternalApi = React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }
 
 function Badge({
-	className,
-	variant = "default",
-	asChild = false,
-	...props
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
 }: BadgePropsExternalApi): React.JSX.Element {
-	const Comp = asChild ? Slot.Root : "span";
+  const Comp = asChild ? Slot.Root : 'span'
 
-	return (
-		<Comp
-			data-slot="badge"
-			data-variant={variant}
-			className={cn(badgeVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }

package/src/components/button.tsx

@@ -1,75 +1,66 @@
-// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
-// (apps/web/src/components/ui/button.tsx). Full credit to the Better Auth team.
-import { Slot } from "@radix-ui/react-slot";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-import type * as React from "react";
-import { cn } from "../foundation/cn";
+import { Slot } from '@radix-ui/react-slot'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import type { ClassProp } from 'class-variance-authority/types'
+import type * as React from 'react'
+import { cn } from '../foundation/cn'
 
 type ButtonVariantsExternalApi = (
-	props?:
-		| ({
-				variant?:
-					| "default"
-					| "destructive"
-					| "outline"
-					| "secondary"
-					| "ghost"
-					| "link"
-					| undefined;
-				size?: "default" | "sm" | "lg" | "icon" | undefined;
-		  } & ClassProp)
-		| undefined,
-) => string;
+  props?:
+    | ({
+        variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | undefined
+        size?: 'default' | 'sm' | 'lg' | 'icon' | undefined
+      } & ClassProp)
+    | undefined,
+) => string
 
 const buttonVariants: ButtonVariantsExternalApi = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-white shadow-xs hover:bg-destructive/90",
-				outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
 
-type ButtonPropsExternalApi = React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	};
+type ButtonPropsExternalApi = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }
 
 function Button({
-	className,
-	variant,
-	size,
-	asChild = false,
-	...props
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
 }: ButtonPropsExternalApi): React.JSX.Element {
-	const Comp = asChild ? Slot : "button";
-	return (
-		<Comp
-			data-slot="button"
-			className={cn(buttonVariants({ variant, size, className }))}
-			{...props}
-		/>
-	);
+  const Comp = asChild ? Slot : 'button'
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }