@carbonid1/design-system 5.0.3 → 5.2.0

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { Badge, badgeVariants } from './Badge/Badge';
+export type { BadgeProps } from './Badge/Badge.types';
+export { Button, buttonVariants } from './Button/Button';
+export type { ButtonProps } from './Button/Button.types';
+export { Kbd, kbdVariants } from './Kbd/Kbd';
+export type { KbdProps } from './Kbd/Kbd.types';
+export { ProgressRing } from './ProgressRing/ProgressRing';
+export { Slider } from './Slider/Slider';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { Select } from './Select/Select';
+export type { SelectOption, SelectGroup, SelectOptionState, SelectProps, } from './Select/Select.types';
+export { Tooltip } from './Tooltip/Tooltip';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { ThemeCycler } from './ThemeCycler/ThemeCycler';
+export { Toaster } from './Toaster/Toaster';
+export { toast } from 'sonner';
+export { useTheme } from 'next-themes';
+export { cn } from './helpers/cn/cn';
+export { getModKey } from './helpers/getModKey/getModKey';
+export { cva } from 'class-variance-authority';
+export type { VariantProps } from 'class-variance-authority';

package/dist/index.js

@@ -0,0 +1,16 @@
+export { Badge, badgeVariants } from './Badge/Badge';
+export { Button, buttonVariants } from './Button/Button';
+export { Kbd, kbdVariants } from './Kbd/Kbd';
+export { ProgressRing } from './ProgressRing/ProgressRing';
+export { Slider } from './Slider/Slider';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { Select } from './Select/Select';
+export { Tooltip } from './Tooltip/Tooltip';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { ThemeCycler } from './ThemeCycler/ThemeCycler';
+export { Toaster } from './Toaster/Toaster';
+export { toast } from 'sonner';
+export { useTheme } from 'next-themes';
+export { cn } from './helpers/cn/cn';
+export { getModKey } from './helpers/getModKey/getModKey';
+export { cva } from 'class-variance-authority';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.0.3",
+  "version": "5.2.0",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",
@@ -14,13 +14,16 @@
     "**/*.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./themes/reader": "./themes/reader.css",
     "./themes/dashboard": "./themes/dashboard.css",
     "./postcss": "./postcss.mjs"
   },
   "files": [
-    "src",
+    "dist",
     "themes",
     "postcss.mjs",
     "skills",
@@ -28,43 +31,26 @@
   ],
   "dependencies": {
     "@tailwindcss/postcss": "^4.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
+    "react-hotkeys-hook": "^5.2.4",
     "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.0"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.0.0-alpha",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "lucide-react": ">=0.400.0",
+    "@base-ui/react": "^1.4.0",
     "postcss": "^8.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hotkeys-hook": "^5.0.0",
-    "tailwind-merge": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@base-ui/react": {
-      "optional": true
-    },
-    "class-variance-authority": {
-      "optional": true
-    },
-    "clsx": {
-      "optional": true
-    },
-    "lucide-react": {
-      "optional": true
-    },
-    "tailwind-merge": {
-      "optional": true
-    }
+    "react-dom": "^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.4.0",
+    "@base-ui/react": "^1.4.1",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-themes": "^10.3.5",
     "@storybook/addon-vitest": "^10.3.5",
@@ -76,24 +62,20 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.4",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "jsdom": "^29.0.2",
-    "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "playwright": "^1.59.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-hotkeys-hook": "^5.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "sonner": "^2.0.7",
     "storybook": "^10.3.5",
-    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
     "@carbonid1/tsconfig": "0.3.0"
   },
   "scripts": {
+    "build": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest --run",

package/skills/design-system/SKILL.md

@@ -39,6 +39,23 @@ If you're editing `@carbonid1/design-system` itself (adding a primitive, changin
 - **Touch targets** — icon buttons `p-1.5` minimum, icons `w-4 h-4` minimum
 - **Avatars** — only with real images, no letter/initial placeholders
 
+## Elevation
+
+Four-tier contract — every themed surface picks one of these tokens. Layering is recessed: cards are sheets on the desk, controls are carved INTO sheets, popovers lift OFF the desk.
+
+| Token              | Role                                     | Pair with              |
+| ------------------ | ---------------------------------------- | ---------------------- |
+| `bg-background`    | Page (the desk)                          | —                      |
+| `bg-card`          | Raised paper on the desk — peak surface  | `shadow-card`          |
+| `bg-surface-inset` | Inset block carved into a card           | `inset-shadow-surface` |
+| `bg-popover`       | Floating layer above everything          | `shadow-popover`       |
+
+`bg-surface-inset` covers form inputs, preview boxes, quote blocks, and language tabs. `bg-popover` covers drawers, menus, and command palettes.
+
+**`bg-muted`, `bg-accent`, `bg-secondary` are RESERVED for interaction states** — hover backgrounds, skeleton placeholders, badge fills, soft tints. They are never the background of a card or an inset block. Mixing them in breaks the layering contract; see [references/theming.md](references/theming.md) for the deeper rationale.
+
+**Empty placeholders** — when a slot is meant to be filled (`AddBookCard`, file drop zone, audio preview slot before recording), render a transparent or background-matched surface with `border-dashed`. The empty state reads as a missing piece on its parent surface — never as a recessed input or a card. Once filled, swap to a solid border and the surface adopts its real elevation.
+
 ## Destructive Actions
 
 Two tiers. Pick by how hard the action is to redo, not how scary it feels.

package/skills/design-system/references/theming.md

@@ -31,20 +31,33 @@ Tokens are defined in `globals.css` (`:root` + `.dark`), bridged in `@theme inli
 
 ### Base tokens (from shadcn naming)
 
-| Token           | Role                                                            | Sub-variants |
-| --------------- | --------------------------------------------------------------- | ------------ |
-| `--background`  | Page background                                                 | —            |
-| `--foreground`  | Default text                                                    | —            |
-| `--card`        | Card surfaces                                                   | foreground   |
-| `--popover`     | Popover surfaces                                                | foreground   |
-| `--primary`     | Interactive color (buttons, links, selections, focus, progress) | foreground   |
-| `--secondary`   | Supporting surfaces                                             | foreground   |
-| `--muted`       | De-emphasized surfaces and text                                 | foreground   |
-| `--accent`      | Hover/expanded tints                                            | foreground   |
-| `--destructive` | Errors, danger                                                  | —            |
-| `--border`      | Default borders                                                 | —            |
-| `--input`       | Input borders                                                   | —            |
-| `--ring`        | Focus rings                                                     | —            |
+| Token              | Role                                                            | Sub-variants |
+| ------------------ | --------------------------------------------------------------- | ------------ |
+| `--background`     | Page background (the desk)                                      | —            |
+| `--foreground`     | Default text                                                    | —            |
+| `--card`           | Raised card surfaces                                            | foreground   |
+| `--popover`        | Floating popover/drawer/menu surfaces                           | foreground   |
+| `--surface-inset`  | Inset blocks carved into a card (inputs, preview boxes)         | —            |
+| `--primary`        | Interactive color (buttons, links, selections, focus, progress) | foreground   |
+| `--secondary`      | Supporting surfaces                                             | foreground   |
+| `--muted`          | De-emphasized surfaces and text                                 | foreground   |
+| `--accent`         | Hover/expanded tints                                            | foreground   |
+| `--destructive`    | Errors, danger                                                  | —            |
+| `--border`         | Default borders                                                 | —            |
+| `--input`          | Input borders                                                   | —            |
+| `--ring`           | Focus rings                                                     | —            |
+
+### Elevation shadows
+
+Each elevated surface pairs with a tuned shadow. Tailwind utilities: `shadow-card`, `inset-shadow-surface`, `shadow-popover`.
+
+| Token                    | Pairs with         | Notes                                                |
+| ------------------------ | ------------------ | ---------------------------------------------------- |
+| `--card-shadow`          | `bg-card`          | Subtle drop, neutral or hue-tinted per theme         |
+| `--surface-inset-shadow` | `bg-surface-inset` | Hairline inset top in light, `none` in dark          |
+| `--popover-shadow`       | `bg-popover`       | Stronger drop with larger geometry in dark           |
+
+Why dark mode skips the inset shadow: top-edge highlights fake a "light source from above" convention that reads as a sharp border artifact on dark surfaces, not as a soft recess. Tonal contrast (a wider inset-vs-card lightness delta) carries the elevation instead.
 
 ### Custom tokens
 
@@ -84,6 +97,32 @@ Tokens are defined in `globals.css` (`:root` + `.dark`), bridged in `@theme inli
    <span className="bg-my-token/10">  // opacity modifier for tints
    ```
 
+## Surfaces & Elevation
+
+Four-tier contract that every themed surface picks from. Layering is *recessed* (cards are sheets on the desk; inputs are carved INTO sheets; popovers lift OFF the desk) — the inverse of Material's monotonic stack.
+
+```
+bg-background      page (the desk)
+bg-card            raised paper on the desk      → shadow-card
+bg-surface-inset   inset INTO a card             → inset-shadow-surface (light only)
+bg-popover         floats above everything       → shadow-popover
+```
+
+**`bg-muted`, `bg-accent`, `bg-secondary` are RESERVED for interaction states** — hover backgrounds, skeleton placeholders, badge fills, soft tints. They are NEVER the background of a card or an inset block. The four tokens above are the only source of truth for surface elevation; mixing the interaction-state tokens in breaks the layering contract.
+
+### Empty-slot convention
+
+When a region is meant to be filled (`AddBookCard`, audio drop zone, preview slot before recording), render it as a *background-matched or transparent* surface with `border-dashed` and a foreground border token (`border-border` or similar). The slot reads as a missing piece on its parent surface — never as a recessed input or a card. Once filled, the dashed border switches to solid and the surface adopts its real elevation.
+
+```tsx
+// Empty slot on a card surface
+<div className="border-border bg-card rounded-lg border-2 border-dashed p-4">
+  <PlusIcon /> Add a book
+</div>
+```
+
+Don't use `bg-surface-inset` for empty placeholders — that signals "a control lives here", not "a slot is missing".
+
 ## Notes
 
 - **`::selection`** uses solid oklch values, not opacity modifiers — semi-transparent backgrounds create visible seams at line boundaries.

package/themes/dashboard.css

@@ -1,9 +1,14 @@
 /* @carbonid1/tailwind-config/dashboard
  *
- * Dashboard theme: semantic color tokens for data-dense UIs (calculators,
- * admin panels, production-chain visualizers). Currently identical tokens
- * to `reader` — distinct palette pending visual design work.
- * Pulls in tailwindcss itself so consumers only need this single import.
+ * Dashboard theme — for data-dense UIs (CoI Calculator, admin panels,
+ * production-chain visualizers). Visual register: neutral-cool surfaces
+ * with subtle elevation (high-information UIs benefit from low-noise
+ * chrome that lets data take focus).
+ *
+ * Same elevation contract as reader.css — see that file for the full table.
+ * Surfaces here are neutral (chroma 0 in light, ~hue 260 in dark) instead
+ * of warm paper, but the layering rules (background < card; surface-inset
+ * recessed into card; popover floats with shadow) are identical.
  *
  * Consumer responsibilities:
  *   - Optionally import tw-animate-css for animate utilities.
@@ -25,6 +30,10 @@
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+  --color-surface-inset: var(--surface-inset);
+  --shadow-card: var(--card-shadow);
+  --shadow-popover: var(--popover-shadow);
+  --inset-shadow-surface: var(--surface-inset-shadow);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-muted: var(--primary-muted);
@@ -63,6 +72,11 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
+  --surface-inset: oklch(0.965 0 0);
+  --card-shadow: 0 1px 2px 0 oklch(0.2 0 0 / 0.06);
+  --popover-shadow:
+    0 8px 24px -4px oklch(0.2 0 0 / 0.1), 0 4px 8px -2px oklch(0.2 0 0 / 0.06);
+  --surface-inset-shadow: inset 0 1px 1px 0 oklch(0.2 0 0 / 0.04);
   --primary: oklch(0.546 0.245 262.881);
   --primary-foreground: oklch(1 0 0);
   --primary-muted: oklch(0.97 0.014 254);
@@ -96,6 +110,10 @@
   --card-foreground: oklch(0.967 0.003 265);
   --popover: oklch(0.278 0.03 257);
   --popover-foreground: oklch(0.967 0.003 265);
+  --surface-inset: oklch(0.225 0.028 261);
+  --card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.2);
+  --popover-shadow: 0 12px 32px -4px oklch(0 0 0 / 0.4), 0 4px 8px -2px oklch(0 0 0 / 0.2);
+  --surface-inset-shadow: none;
   --primary: oklch(0.78 0.13 256);
   --primary-foreground: oklch(1 0 0);
   --primary-muted: oklch(0.282 0.091 267 / 0.2);

package/themes/reader.css

@@ -1,8 +1,33 @@
 /* @carbonid1/tailwind-config/reader
  *
- * Reader theme: semantic color tokens, dark variant, @theme bridge.
- * Includes the keyframes required by the theme's --animate-* tokens.
- * Pulls in tailwindcss itself so consumers only need this single import.
+ * Reader theme — for reading-app consumers (InkVoice, future longform/journal
+ * apps). Visual register: warm paper layered on a desk. Light mode is a
+ * hue-75 warm-paper palette with tonal layering and recessed inputs; dark
+ * mode is a cool ink palette (~hue 260) with the same elevation hierarchy.
+ *
+ * --- Elevation contract (use this to pick the right surface token) --------
+ *
+ *   Token              Role                                    Light      Dark
+ *   ─────────────────  ──────────────────────────────────────  ─────────  ─────────
+ *   bg-background      page (the desk)                         warm off   cool dark
+ *   bg-card            raised paper on the desk                brightest  peak
+ *   bg-surface-inset   inset block carved INTO a card          darker     darker than card
+ *                      (form inputs, preview boxes,
+ *                       quote blocks, language tabs)
+ *   bg-popover         floating layer above everything         = card     = card
+ *                      (drawers, menus, command palette)       + shadow   + shadow
+ *
+ * --- Shadow contract (paired with the surface above) ----------------------
+ *
+ *   shadow-card               on bg-card           subtle drop
+ *   inset-shadow-surface      on bg-surface-inset  hairline inset top (light only)
+ *   shadow-popover            on bg-popover        strong drop
+ *
+ * Usage rules (which tokens are surfaces, empty-slot convention, etc.) live
+ * in the design-system skill — see SKILL.md / references/theming.md.
+ *
+ * TODO: dark mode currently mirrors the existing cool palette. A dedicated
+ *       warm-dark "ink on cream" pass is deferred — separate visual decision.
  *
  * Consumer responsibilities:
  *   - Import tw-animate-css and shadcn base layer separately if needed.
@@ -27,6 +52,10 @@
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+  --color-surface-inset: var(--surface-inset);
+  --shadow-card: var(--card-shadow);
+  --shadow-popover: var(--popover-shadow);
+  --inset-shadow-surface: var(--surface-inset-shadow);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-muted: var(--primary-muted);
@@ -59,12 +88,19 @@
 
 /* Light mode tokens */
 :root {
-  --background: oklch(1 0 0);
+  --background: oklch(0.985 0.005 75);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
+  --card: oklch(0.995 0.003 75);
   --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
+  --popover: oklch(0.995 0.003 75);
   --popover-foreground: oklch(0.145 0 0);
+  --surface-inset: oklch(0.962 0.007 75);
+  /* Shadows tinted with the warm hue so they read as ambient occlusion on
+   * paper, not pure black smudges. */
+  --card-shadow: 0 1px 2px 0 oklch(0.2 0.02 75 / 0.06);
+  --popover-shadow:
+    0 8px 24px -4px oklch(0.2 0.02 75 / 0.1), 0 4px 8px -2px oklch(0.2 0.02 75 / 0.06);
+  --surface-inset-shadow: inset 0 1px 1px 0 oklch(0.2 0.02 75 / 0.04);
   --primary: oklch(0.546 0.245 262.881);
   --primary-foreground: oklch(1 0 0);
   --primary-muted: oklch(0.97 0.014 254);
@@ -98,6 +134,15 @@
   --card-foreground: oklch(0.967 0.003 265);
   --popover: oklch(0.278 0.03 257);
   --popover-foreground: oklch(0.967 0.003 265);
+  /* Inset/card delta is wider than light mode — lightness differences read
+   * as weaker in the dark range, so the recess needs more room to land. */
+  --surface-inset: oklch(0.225 0.028 261);
+  /* Inset shadow disabled: top-edge highlights fake a light-source-from-above
+   * convention that reads as a sharp border artifact on dark surfaces rather
+   * than a soft recess. The tonal delta above carries the elevation instead. */
+  --card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.2);
+  --popover-shadow: 0 12px 32px -4px oklch(0 0 0 / 0.4), 0 4px 8px -2px oklch(0 0 0 / 0.2);
+  --surface-inset-shadow: none;
   --primary: oklch(0.78 0.13 256);
   --primary-foreground: oklch(1 0 0);
   --primary-muted: oklch(0.282 0.091 267 / 0.2);

package/src/Badge/Badge.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-import { cn } from '../helpers/cn/cn'
-import { cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
-import type { BadgeProps } from './Badge.types'
-
-const badgeVariants = cva(
-  'inline-flex max-w-full min-w-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted text-muted-foreground',
-        primary: 'bg-primary-border/30 text-primary',
-        success: 'bg-success/15 text-success-foreground',
-        attention: 'bg-attention-muted text-attention-foreground',
-        destructive: 'bg-destructive/15 text-destructive',
-        highlight: 'bg-highlight-muted text-highlight-foreground',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-)
-
-const Badge = ({
-  className,
-  variant,
-  onRemove,
-  removeLabel,
-  children,
-  ...props
-}: BadgeProps) => {
-  const resolvedRemoveLabel =
-    removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove')
-
-  return (
-    <span className={cn(badgeVariants({ variant }), className)} {...props}>
-      {onRemove ? <span className="truncate">{children}</span> : children}
-      {onRemove && (
-        <button
-          type="button"
-          aria-label={resolvedRemoveLabel}
-          onClick={onRemove}
-          className="-me-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full opacity-70 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1 focus-visible:ring-offset-transparent focus-visible:outline-none"
-        >
-          <X className="size-3" aria-hidden="true" />
-        </button>
-      )}
-    </span>
-  )
-}
-
-export { Badge, badgeVariants }

package/src/Button/Button.tsx

@@ -1,67 +0,0 @@
-'use client'
-
-import { cn } from '../helpers/cn/cn'
-import { Button as ButtonPrimitive } from '@base-ui/react/button'
-import { cva } from 'class-variance-authority'
-import { Loader2 } from 'lucide-react'
-import type { ButtonProps } from './Button.types'
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-hidden 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",
-  {
-    variants: {
-      variant: {
-        ghost: 'hover:bg-accent aria-expanded:bg-accent dark:hover:bg-accent/50',
-        primary: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
-        outline:
-          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-        destructive:
-          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-        attention: 'text-attention-foreground hover:bg-attention-muted',
-        subtle: 'text-muted-foreground hover:text-primary',
-        danger: 'text-muted-foreground hover:text-destructive',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        small: 'h-7 gap-1 px-2.5 text-[0.8rem]',
-        default: 'h-8 gap-1.5 px-2.5',
-        large: 'h-9 gap-1.5 px-3',
-        icon: 'size-8 rounded-full',
-        smallIcon: 'size-6 rounded-full',
-        largeIcon: 'size-12 rounded-full',
-      },
-    },
-    defaultVariants: {
-      variant: 'ghost',
-      size: 'default',
-    },
-  },
-)
-
-const Button = ({
-  className,
-  variant,
-  size,
-  fullWidth,
-  loading,
-  disabled,
-  children,
-  ...props
-}: ButtonProps) => (
-  <ButtonPrimitive
-    data-slot="button"
-    className={cn(
-      buttonVariants({ variant, size }),
-      fullWidth && 'w-full justify-start',
-      className,
-    )}
-    disabled={disabled ?? loading}
-    aria-busy={loading ?? undefined}
-    {...props}
-  >
-    {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
-    {children}
-  </ButtonPrimitive>
-)
-
-export { Button, buttonVariants }

package/src/Button/Button.types.ts

@@ -1,11 +0,0 @@
-import type { Button as ButtonPrimitive } from '@base-ui/react/button'
-import type { VariantProps } from 'class-variance-authority'
-import type { buttonVariants } from './Button'
-
-type ButtonProps = ButtonPrimitive.Props &
-  VariantProps<typeof buttonVariants> & {
-    fullWidth?: boolean
-    loading?: boolean
-  }
-
-export type { ButtonProps }