@robomous/ui-core 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 /**
  * `@robomous/ui-core` — the Robomous design system.
  *
- * Extracted from Robomous/VisionSet. UI primitives: Radix behaviour under
- * shadcn Nova styling, iconed with lucide; the foundation design tokens; and
- * the status-tone vocabulary. A consumer imports exactly:
+ * Twenty-one React components this package owns outright, the design tokens
+ * they resolve through, and the status-tone vocabulary. A consumer imports
+ * exactly:
  *
  * ```ts
  * import "@robomous/ui-core/styles.css";   // once, in the app's entry
@@ -11,34 +11,33 @@
  * ```
  *
  * The public surface is listed explicitly rather than `export *`, so what this
- * package promises stays auditable. The gates that keep the primitives
- * canonical are published too: `import { ... } from "@robomous/ui-core/gates"`.
+ * package promises stays auditable. The scanners behind this repository's own
+ * design rules are published too, for a consumer to run over its own sources:
+ * `import { ... } from "@robomous/ui-core/gates"`. DESIGN.md names each rule
+ * and the gate that holds it.
  */
-export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens.js";
-export { inlineLink } from "./lib/button.js";
-export { cn } from "./lib/cn.js";
-export { menuSurface } from "./lib/menu.js";
-export { twoLineTrigger } from "./lib/select.js";
-export { progressAria } from "./lib/progress.js";
-export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./statusTone.js";
-export { Button, buttonVariants } from "./primitives/button.js";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./primitives/card.js";
-export { Input } from "./primitives/input.js";
-export { Textarea } from "./primitives/textarea.js";
-export { Label } from "./primitives/label.js";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./primitives/field.js";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./primitives/input-group.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./primitives/combobox.js";
-export { Badge, badgeVariants } from "./primitives/badge.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./primitives/dropdown-menu.js";
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
-export { Progress } from "./primitives/progress.js";
-export { Skeleton } from "./primitives/skeleton.js";
-export { Toaster } from "./primitives/sonner.js";
+export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./theme/tokens.js";
+export { cn } from "cn";
+export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./theme/statusTone.js";
+export { Button, buttonVariants } from "./components/button.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/card.js";
+export { Input } from "./components/input.js";
+export { Textarea } from "./components/textarea.js";
+export { Label } from "./components/label.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./components/field.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./components/input-group.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./components/combobox.js";
+export { Badge, badgeVariants } from "./components/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./components/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./components/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./components/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+export { Progress } from "./components/progress.js";
+export { Separator } from "./components/separator.js";
+export { Skeleton } from "./components/skeleton.js";
+export { Toaster } from "./components/sonner.js";
 export { toast } from "sonner";
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./primitives/table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/table.js";

package/dist/index.js

@@ -1,9 +1,9 @@
 /**
  * `@robomous/ui-core` — the Robomous design system.
  *
- * Extracted from Robomous/VisionSet. UI primitives: Radix behaviour under
- * shadcn Nova styling, iconed with lucide; the foundation design tokens; and
- * the status-tone vocabulary. A consumer imports exactly:
+ * Twenty-one React components this package owns outright, the design tokens
+ * they resolve through, and the status-tone vocabulary. A consumer imports
+ * exactly:
  *
  * ```ts
  * import "@robomous/ui-core/styles.css";   // once, in the app's entry
@@ -11,37 +11,36 @@
  * ```
  *
  * The public surface is listed explicitly rather than `export *`, so what this
- * package promises stays auditable. The gates that keep the primitives
- * canonical are published too: `import { ... } from "@robomous/ui-core/gates"`.
+ * package promises stays auditable. The scanners behind this repository's own
+ * design rules are published too, for a consumer to run over its own sources:
+ * `import { ... } from "@robomous/ui-core/gates"`. DESIGN.md names each rule
+ * and the gate that holds it.
  */
 // The design tokens, and their prose contract in DESIGN.md.
-export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens.js";
-export { inlineLink } from "./lib/button.js";
-export { cn } from "./lib/cn.js";
-export { menuSurface } from "./lib/menu.js";
-export { twoLineTrigger } from "./lib/select.js";
-export { progressAria } from "./lib/progress.js";
+export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./theme/tokens.js";
+export { cn } from "cn";
 // The one home for status colour outside the Badge.
-export { STATUS_INK, TONE_BORDER, TONE_FILL } from "./statusTone.js";
-// Primitives — Radix behaviour under shadcn Nova styling, iconed with lucide.
-export { Button, buttonVariants } from "./primitives/button.js";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./primitives/card.js";
-export { Input } from "./primitives/input.js";
-export { Textarea } from "./primitives/textarea.js";
-export { Label } from "./primitives/label.js";
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./primitives/field.js";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./primitives/input-group.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./primitives/combobox.js";
-export { Badge, badgeVariants } from "./primitives/badge.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./primitives/dropdown-menu.js";
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
-export { Progress } from "./primitives/progress.js";
-export { Skeleton } from "./primitives/skeleton.js";
-export { Toaster } from "./primitives/sonner.js";
+export { STATUS_INK, TONE_BORDER, TONE_FILL } from "./theme/statusTone.js";
+// The components — Radix and Base UI behaviour, iconed with lucide.
+export { Button, buttonVariants } from "./components/button.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/card.js";
+export { Input } from "./components/input.js";
+export { Textarea } from "./components/textarea.js";
+export { Label } from "./components/label.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "./components/field.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "./components/input-group.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./components/combobox.js";
+export { Badge, badgeVariants } from "./components/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./components/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./components/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./components/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+export { Progress } from "./components/progress.js";
+export { Separator } from "./components/separator.js";
+export { Skeleton } from "./components/skeleton.js";
+export { Toaster } from "./components/sonner.js";
 export { toast } from "sonner";
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./primitives/table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/table.js";

package/dist/{tokens.d.ts → theme/tokens.d.ts}

@@ -8,11 +8,11 @@
  * which parses the stylesheet and asserts the two agree, declaration for
  * declaration.
  *
- * `LIGHT_THEME`/`DARK_THEME` are the shadcn preset (`b2iH` — style
- * `nova`, base colour `neutral`, chart palette `neutral`) exactly as the CLI
- * 4.19.0 scratch generated it, plus `brand` (Robomous coral — identity only).
- * Consumer extensions such as VisionSet's `stage` and `origin-*` live in the
- * consumer's own token module. Everything else is shadcn's own vocabulary.
+ * `LIGHT_THEME`/`DARK_THEME` carry the semantic vocabulary on a neutral base
+ * colour and chart palette, plus one name of this package's own: `brand`,
+ * Robomous orange, identity only. A consumer's own vocabulary lives in the
+ * consumer's stylesheet and token module, never here — DESIGN.md,
+ * *Per-consumer extensions*.
  */
 export declare const LIGHT_THEME: Readonly<Record<string, string>>;
 export declare const DARK_THEME: Readonly<Record<string, string>>;

package/dist/{tokens.js → theme/tokens.js}

@@ -8,23 +8,23 @@
  * which parses the stylesheet and asserts the two agree, declaration for
  * declaration.
  *
- * `LIGHT_THEME`/`DARK_THEME` are the shadcn preset (`b2iH` — style
- * `nova`, base colour `neutral`, chart palette `neutral`) exactly as the CLI
- * 4.19.0 scratch generated it, plus `brand` (Robomous coral — identity only).
- * Consumer extensions such as VisionSet's `stage` and `origin-*` live in the
- * consumer's own token module. Everything else is shadcn's own vocabulary.
+ * `LIGHT_THEME`/`DARK_THEME` carry the semantic vocabulary on a neutral base
+ * colour and chart palette, plus one name of this package's own: `brand`,
+ * Robomous orange, identity only. A consumer's own vocabulary lives in the
+ * consumer's stylesheet and token module, never here — DESIGN.md,
+ * *Per-consumer extensions*.
  */
 export const LIGHT_THEME = Object.freeze({
     background: "oklch(1 0 0)",
-    foreground: "oklch(0.145 0 0)",
+    foreground: "oklch(0.2 0 0)",
     card: "oklch(1 0 0)",
     "card-foreground": "oklch(0.145 0 0)",
     popover: "oklch(1 0 0)",
     "popover-foreground": "oklch(0.145 0 0)",
-    primary: "oklch(0.205 0 0)",
+    primary: "oklch(0.2 0 0)",
     "primary-foreground": "oklch(0.985 0 0)",
     secondary: "oklch(0.97 0 0)",
-    "secondary-foreground": "oklch(0.205 0 0)",
+    "secondary-foreground": "oklch(0.269 0 0)",
     muted: "oklch(0.97 0 0)",
     "muted-foreground": "oklch(0.556 0 0)",
     accent: "oklch(0.97 0 0)",
@@ -46,9 +46,9 @@ export const LIGHT_THEME = Object.freeze({
     "sidebar-accent-foreground": "oklch(0.205 0 0)",
     "sidebar-border": "oklch(0.922 0 0)",
     "sidebar-ring": "oklch(0.708 0 0)",
-    // Robomous coral. Identity only — the wordmark and its styleguide swatch
-    // — never a functional-UI colour.
-    brand: "oklch(0.653 0.178 32.3)",
+    // Robomous orange (#F5580B). Identity only — the wordmark and its styleguide
+    // swatch — never a functional-UI colour.
+    brand: "oklch(0.663 0.205 39.9)",
 });
 export const DARK_THEME = Object.freeze({
     background: "oklch(0.145 0 0)",
@@ -82,7 +82,7 @@ export const DARK_THEME = Object.freeze({
     "sidebar-accent-foreground": "oklch(0.985 0 0)",
     "sidebar-border": "oklch(1 0 0 / 10%)",
     "sidebar-ring": "oklch(0.556 0 0)",
-    brand: "oklch(0.653 0.178 32.3)",
+    brand: "oklch(0.663 0.205 39.9)",
 });
 /** The two provenance facts a colour string alone cannot carry. */
 export const THEME = {

package/package.json

@@ -1,36 +1,46 @@
 {
   "name": "@robomous/ui-core",
-  "version": "0.1.1",
-  "description": "Robomous design system: shadcn Nova primitives under Radix behaviour, design tokens, and the gates that keep them canonical. Extracted from Robomous/VisionSet.",
+  "version": "0.2.0",
+  "description": "Robomous design system: twenty-one owned React components, the design tokens they resolve through, and the gates that hold the rules behind them.",
   "license": "Apache-2.0",
-  "repository": { "type": "git", "url": "https://github.com/Robomous/ui-core.git" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Robomous/ui-core.git"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
-    "./styles.css": "./src/styles.css",
-    "./gates": { "types": "./gates/index.d.mts", "import": "./gates/index.mjs" }
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/theme/styles.css",
+    "./gates": {
+      "types": "./dist/gates/index.d.ts",
+      "import": "./dist/gates/index.js"
+    }
   },
-  "files": ["dist", "src", "gates", "shadcn", "components.json"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "test": "vitest run",
-    "test:gates": "node --test gates/*.test.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint src && pnpm run typecheck",
-    "shadcn:add": "bash scripts/shadcn_add.sh"
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/geist": "^5.3.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "cn": "^0.2.4",
     "lucide-react": "^1.32.0",
     "radix-ui": "^1.6.7",
-    "shadcn": "^4.19.0",
     "sonner": "^2.0.8",
-    "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
@@ -50,6 +60,7 @@
     "eslint": "^10.9.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "jsdom": "^30.0.1",
+    "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "^4.3.3",

package/{shadcn → src/components}/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/cn"
+import { cn } from "cn";
 
 const alertVariants = cva(
   "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Alert({
   className,
@@ -31,7 +31,7 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -40,37 +40,30 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="alert-title"
       className={cn(
         "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
         "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
-      {...props}
-    />
-  )
+    <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription, AlertAction }
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/{primitives → components}/badge.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from "../lib/cn.js"
+import { cn } from "cn";
 
 const badgeVariants = cva(
   "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
@@ -10,39 +10,33 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
           "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         success:
           "bg-emerald-500/10 text-emerald-700 focus-visible:ring-emerald-500/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:focus-visible:ring-emerald-400/40 [a]:hover:bg-emerald-500/20 dark:[a]:hover:bg-emerald-400/20",
         warning:
           "bg-amber-500/10 text-amber-700 focus-visible:ring-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a]:hover:bg-amber-500/20 dark:[a]:hover:bg-amber-400/20",
-        info:
-          "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
-        quiet:
-          "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        info: "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
+        quiet: "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
   variant = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
 
   return (
     <Comp
@@ -51,7 +45,7 @@ function Badge({
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

package/src/{primitives → components}/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from "../lib/cn.js"
+import { cn } from "cn";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -32,14 +32,17 @@ const buttonVariants = cva(
         "icon-sm":
           "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "size-9",
+        // A link button is inline prose, not a boxed control: no height of its
+        // own and no padding, so it sits inside a sentence or a table cell.
+        inline: "h-auto p-0",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -49,9 +52,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot.Root : "button"
+  const Comp = asChild ? Slot.Root : "button";
 
   return (
     <Comp
@@ -61,7 +64,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

package/{shadcn → src/components}/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/cn"
+import { cn } from "cn";
 
 function Card({
   className,
@@ -13,11 +13,11 @@ function Card({
       data-size={size}
       className={cn(
         "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -26,11 +26,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -39,11 +39,11 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-title"
       className={cn(
         "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -53,30 +53,23 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
-  )
+    <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,19 +78,11 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-footer"
       className={cn(
         "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };