@waveso/ui 0.6.0 → 0.7.0

package/README.md

@@ -1,8 +1,135 @@
-# @waveso/ui
+<div align="center">
+  <img src="assets/logo.svg" alt="Wave UI" width="220" />
 
-A component library built on [Base UI](https://base-ui.com) primitives and [Tailwind CSS v4](https://tailwindcss.com).
+  <p><strong>A modern React component library built on Base UI and Tailwind CSS,<br />with a 3-tier semantic theme system.</strong></p>
 
-## Install
+  [![npm](https://img.shields.io/npm/v/@waveso/ui)](https://www.npmjs.com/package/@waveso/ui)
+  [![license](https://img.shields.io/npm/l/@waveso/ui)](./LICENSE)
+  ![React 19](https://img.shields.io/badge/React-19-149ECA?logo=react&logoColor=white)
+  ![Tailwind CSS v4](https://img.shields.io/badge/Tailwind-v4-38BDF8?logo=tailwindcss&logoColor=white)
+
+  <br />
+
+  <!-- TODO: replace assets/showcase-placeholder.svg with a real screenshot of the Showcase story across the three themes -->
+  <img src="assets/showcase-placeholder.svg" alt="Wave UI across its three themes — Graphite, Ink, and Paper" width="760" />
+
+  <br /><br />
+
+  Full documentation coming soon at **[ui.wave.so](https://ui.wave.so)**
+
+</div>
+
+---
+
+## Why Wave UI
+
+A production-ready design-token architecture that's modern, semantic, and highly maintainable.
+
+Most UI libraries carry two structural problems:
+
+1. **Redundant token names** (`border-border`, `ring-ring`) — which read backwards the moment background and text swap roles: a background becomes `bg-foreground`, text becomes `text-background`.
+2. **Material-style paired tokens** (`card` + `card-foreground`, `popover` + `popover-foreground`) — flexible per layer, but they add complexity, kill the emphasis ladder, and lose free composability. `foreground-muted` is meant as "text _on_ muted," yet most people read it as "muted text." The result is ~14 tokens, half of them redundant.
+
+Both models work, and end users never notice. But for the people _building_ on the system, the shape matters.
+
+Wave builds around an intuitive, intentional **3-tier hierarchy** — for almost everything:
+
+- 3 themes — Paper, Graphite, Ink palettes
+- 3 background colors for surfaces
+- 3 content colors for text
+- 3 identity colors for brand
+- 3 border colors for structural luminance
+- 3 duration tiers for transitions
+- 3 blur values
+- 3 scale sizes
+- 3 stagger times
+- 3 shadows with adaptable color
+- 3 offset amounts for transforms
+- …and more
+
+It also builds around 3 semantic intents:
+
+- **Background** colors focus on elevation — how deep a surface sits
+- **Content** colors focus on emphasis — how strongly something reads
+- **Border** colors focus on structure — how functional a boundary is
+
+This is the right shape for a system centered on an emphasis ladder: clean and minimal, but flexible.
+
+### Themes
+
+The three themes are a homage to the **pre-digital writing desk** — the _surface_, the _pen_, the _pencil_ — and each maps to its color: cream ***Paper***, blue-black ***Ink***, gray ***Graphite***.
+
+**Graphite** is the default **neutral pencil-gray** theme, built on a low-saturation dark-neutral family with a subtle blue bias. That bias keeps the light steps from going flat — a tiny cool cast instead of pure gray.
+
+**Paper** and **Ink** are an elegant classic pair, each with a purpose: Paper is tuned for daytime and bright spaces; Ink for night and dark spaces. In every theme the _structure_ (text and borders) stays a cool-biased neutral, while the _surface_ carries the identity.
+
+## Taxonomy
+
+Wave pays close attention to token taxonomy. Surfaces encode elevation; borders act as _light interference rather than geometry_.
+
+### Background
+
+- `--foundation` — the deepest layer, the base where elevation starts
+- `--surface` — the middle layer: cards, sidebars, content boxes
+- `--elevated` — the highest layer: floating windows, modals, dropdowns, dialogs
+
+### Foreground
+
+- `--contrast` — titles, primary text
+- `--muted` — body text, icons, any mark
+- `--soft` — placeholders, hints
+
+### Borders
+
+- `--line` — subtle separators
+- `--edge` — component boundary
+- `--solid` — structural definition
+
+### Ring
+
+- `--focus` — active / focus states
+
+### Brand
+
+- `--primary` — wired to the Wave ramp
+- `--secondary` — neutral fill
+- `--accent` — alternative emphasis
+
+### Border strategy
+
+This is the sophisticated move most libraries skip.
+
+Wave biases heavily toward **transparent (alpha) borders as the default**, with a **solid token reserved for functional states**.
+
+Wave's palette behaves like a layered _material system_, not a flat UI. Dark surfaces, a soft text hierarchy, and subtle elevation shifts (low-contrast steps) mean borders should not introduce a new "color layer" — that would break the illusion of depth — yet structure still needs a solid option.
+
+Alpha borders **inherit the surface beneath them**, take the **content color as their luminance source**, keep hue consistent across surfaces, and scale naturally.
+
+Solid borders compete with the surface ladder and create visual "grid noise" if overused, so use them sparingly. Overusing them flattens everything into "outlined boxes" with reduced perceived elevation — the "Bootstrap feel."
+
+The default **alpha** borders are ideal for:
+
+- Cards
+- Panels
+- Inputs
+- Subtle separators
+
+The **solid** borders are ideal for:
+
+- Layout definition (sidebar vs. content)
+- Component grouping
+- Focus containment
+- "Frame-like" boundaries
+
+**Rule of thumb:**
+
+- If it separates **surface from surface** → alpha border
+- If it separates **layout regions** → solid border
+- If it indicates **interaction / state** → colored alpha border
+
+---
+
+## Installation
 
 ```bash
 npm install @waveso/ui @base-ui/react class-variance-authority clsx tailwind-merge
@@ -10,82 +137,44 @@ npm install @waveso/ui @base-ui/react class-variance-authority clsx tailwind-mer
 
 ## Setup
 
-Add the theme preset and source directive to your CSS entry point:
+Add the theme preset and Tailwind to your CSS entry point:
 
 ```css
 @import "@waveso/ui/styles.css";
 @import "tailwindcss";
 ```
 
-The preset provides all CSS variables (colors, radii, sidebar tokens) with light and dark mode support. Override any variable in your own `:root` / `.dark` blocks to customize the theme.
+The preset provides every CSS variable (colors, radii, motion, shadows) with light and dark support. Override any variable in your own `:root` / `.dark` blocks to customize the theme.
 
 ## Usage
 
-Import components by name — each is a separate entry point for optimal tree-shaking:
+Every component is its own entry point, so you ship only what you import:
 
 ```tsx
 import { Button } from '@waveso/ui/button';
-import { Masonry, MasonryItem, MasonrySpannedItem } from '@waveso/ui/masonry';
 import { Card, CardHeader, CardTitle, CardContent } from '@waveso/ui/card';
-```
-
-### Button
-
-8 variants, 8 sizes, built on Base UI's `Button` primitive with full keyboard and ARIA support.
 
-```tsx
-import { Button } from '@waveso/ui/button';
-
-<Button>Default</Button>
-<Button variant="solid">Solid</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="destructive">Delete</Button>
-<Button variant="success">Confirm</Button>
-<Button size="xs">Tiny</Button>
-<Button size="icon"><SearchIcon /></Button>
-```
-
-### Masonry
-
-Responsive masonry grid with staggered animations, spanning items, and automatic reflow.
-
-```tsx
-import { Masonry, MasonryItem, MasonrySpannedItem } from '@waveso/ui/masonry';
-
-<Masonry columns={3} gap={16}>
-  <MasonryItem>
-    <Card>
-      <CardContent>Standard item</CardContent>
-    </Card>
-  </MasonryItem>
-  <MasonrySpannedItem>
-    <Card>
-      <CardContent>This spans two columns</CardContent>
-    </Card>
-  </MasonrySpannedItem>
-  <MasonryItem>
+export function Example() {
+  return (
     <Card>
-      <CardContent>Another item</CardContent>
+      <CardHeader>
+        <CardTitle>Get started</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
     </Card>
-  </MasonryItem>
-</Masonry>
+  );
+}
 ```
 
+Every component is built on a [Base UI](https://base-ui.com) primitive — full keyboard and ARIA support — and styled entirely through the theme tokens above, so overriding a token propagates everywhere.
+
 ## Components
 
-60+ components covering forms, layout, navigation, feedback, and data display:
+A comprehensive set spanning **actions, forms, layout, navigation, overlays, feedback, data display, and motion effects** — all built on Base UI primitives and driven by the theme tokens.
 
-| Category | Components |
-|---|---|
-| **Actions** | Button, Button Group, Toggle, Toggle Group |
-| **Forms** | Input, Textarea, Checkbox, Switch, Radio, Radio Group, Select, Combobox, Autocomplete, Slider, Calendar, Input OTP, Field, Form, Label, Input Group |
-| **Layout** | Card, Masonry, Separator, Aspect Ratio, Scroll Area, Collapsible, Accordion, Tabs, Sidebar |
-| **Navigation** | Breadcrumb, Navigation Menu, Pagination, Menubar |
-| **Overlays** | Dialog, Alert Dialog, Sheet, Popover, Tooltip, Preview Card, Context Menu, Menu |
-| **Feedback** | Alert, Badge, Progress, Skeleton, Spinner, Toaster, Empty |
-| **Data** | Table, Avatar, Kbd, Item, Infinite Scroll |
-| **Effects** | Burst, Explode, Encrypted Text, Shimmering Text, Expandable Tab, Dotted Glow Background |
+Browse every component, with live variants and source, in **Storybook** (`npm run storybook`). A full documentation site is on the way at **[ui.wave.so](https://ui.wave.so)**.
 
 ## Requirements
 
@@ -93,23 +182,19 @@ import { Masonry, MasonryItem, MasonrySpannedItem } from '@waveso/ui/masonry';
 |---|---|
 | React | ^19.0.0 |
 | React DOM | ^19.0.0 |
-| Base UI | ^1.0.0 |
+| Base UI | ^1.5.0 |
 | Tailwind CSS | v4 |
 | CVA | ^0.7.0 |
 | clsx | ^2.0.0 |
 | tailwind-merge | ^3.0.0 |
 
-Some components have optional peer dependencies:
+Some components have optional peer dependencies — install only what you use:
 
-- **Calendar** — `react-day-picker`
-- **Carousel** — `embla-carousel-react`
 - **Form** — `react-hook-form`
 - **Input OTP** — `input-otp`
 - **Animations** — `motion`
 - **Sidebar** — `usehooks-ts`
 
-Install only what you use.
-
 ## Development
 
 ```bash
@@ -125,6 +210,7 @@ npm run dev          # Watch mode
 ```
 .changeset/          # Changesets config
 .storybook/          # Storybook config + theme CSS
+assets/              # README / brand assets
 src/
   *.tsx              # Component source files
   *.stories.tsx      # Storybook stories
@@ -144,9 +230,7 @@ This project uses [Changesets](https://github.com/changesets/changesets) with Gi
 <details>
 <summary>Manual release (without CI)</summary>
 
-If you're not using the GitHub Actions workflow, you can publish manually.
-Changesets will skip versions already published to npm, so this won't
-conflict if CI has already run.
+If you're not using the GitHub Actions workflow, you can publish manually. Changesets skips versions already published to npm, so this won't conflict if CI has already run.
 
 ```bash
 npx changeset              # Create a changeset
@@ -158,4 +242,4 @@ npm run release            # Build and publish to npm
 
 ## License
 
-MIT
+[MIT](./LICENSE)

package/dist/accordion.js

@@ -15,7 +15,7 @@ function Accordion({ className, ...props }) {
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
-		className: cn("not-last:border-b", className),
+		className: cn("not-last:border-b border-edge", className),
 		...props
 	});
 }

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../src/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"./lib/utils\"\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"./lib/internal-icons\"\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\ntype AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>\ntype AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Panel>\n\nfunction Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\n        \"overflow-hidden flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        \"not-last:border-b\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header data-slot=\"accordion-header\" className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-panel\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        data-slot=\"accordion-content\"\n        className={cn(\n          \"[&_a]:hover:text-contrast h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n}\n"],"mappings":";;;;;;;AAeA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GACT,wCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GACT,qBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;EAAmB,WAAU;YAChE,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,qgBACA,UACD;GACD,GAAI;aANN;IAQG;IACD,oBAAC,iBAAD;KAAiB,aAAU;KAAyB,WAAU;KAA8E,CAAA;IAC5I,oBAAC,eAAD;KAAe,aAAU;KAAyB,WAAU;KAAqF,CAAA;IACtH;;EACH,CAAA;;AAIhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,yLACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}
+{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../src/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"./lib/utils\"\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"./lib/internal-icons\"\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\ntype AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>\ntype AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Panel>\n\nfunction Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\n        \"overflow-hidden flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        \"not-last:border-b border-edge\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header data-slot=\"accordion-header\" className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-panel\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        data-slot=\"accordion-content\"\n        className={cn(\n          \"[&_a]:hover:text-contrast h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n}\n"],"mappings":";;;;;;;AAeA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GACT,wCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GACT,iCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;EAAmB,WAAU;YAChE,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,qgBACA,UACD;GACD,GAAI;aANN;IAQG;IACD,oBAAC,iBAAD;KAAiB,aAAU;KAAyB,WAAU;KAA8E,CAAA;IAC5I,oBAAC,eAAD;KAAe,aAAU;KAAyB,WAAU;KAAqF,CAAA;IACtH;;EACH,CAAA;;AAIhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,yLACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}

package/dist/alert-dialog.js

@@ -48,7 +48,7 @@ function AlertDialogHeader({ className, ...props }) {
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
-		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
 }

package/dist/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive"],"sources":["../src/alert-dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { Button } from \"./button\"\nimport { cn } from \"./lib/utils\"\n\ntype AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>\n\ntype AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>\n\ntype AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>\n\ntype AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Popup> & {\n  size?: \"default\" | \"sm\" | \"lg\" | \"xl\"\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<\"div\">\n\ntype AlertDialogFooterProps = React.ComponentProps<\"div\">\n\ntype AlertDialogMediaProps = React.ComponentProps<\"div\">\n\ntype AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>\n\ntype AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>\n\ntype AlertDialogActionProps = React.ComponentProps<typeof Button>\n\ntype AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">\n\nfunction AlertDialog({ ...props }: AlertDialogProps) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPortalProps) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n}\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"motion-scale-lg bg-foundation ring-contrast/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 ring-1 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] group-data-[size=lg]/alert-dialog-content:place-items-start group-data-[size=lg]/alert-dialog-content:text-left group-data-[size=xl]/alert-dialog-content:place-items-start group-data-[size=xl]/alert-dialog-content:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-secondary mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted *:[a]:hover:text-contrast text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogCancelProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={className}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":";;;;;;;AAmCA,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,mBAAmB,EAAE,GAAG,SAAkC;AACjE,QAAO,oBAACA,cAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;EAAS,CAAA;;AAGrF,SAAS,kBAAkB,EAAE,GAAG,SAAiC;AAC/D,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,WACP,GAAG,SACuB;AAC1B,QACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD,EAAsB,CAAA,EACtB,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2XACA,UACD;EACD,GAAI;EACJ,CAAA,CACgB,EAAA,CAAA;;AAIxB,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,snBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qNACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,qJACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC2B;AAC9B,QACE,oBAACA,cAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GACT,qHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,UAAU;EACxB,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,UAAU,WACV,OAAO,WACP,GAAG,SACsB;AACzB,QACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACC;EACX,QAAQ,oBAAC,QAAD;GAAiB;GAAe;GAAQ,CAAA;EAChD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive"],"sources":["../src/alert-dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { Button } from \"./button\"\nimport { cn } from \"./lib/utils\"\n\ntype AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>\n\ntype AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>\n\ntype AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>\n\ntype AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Popup> & {\n  size?: \"default\" | \"sm\" | \"lg\" | \"xl\"\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<\"div\">\n\ntype AlertDialogFooterProps = React.ComponentProps<\"div\">\n\ntype AlertDialogMediaProps = React.ComponentProps<\"div\">\n\ntype AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>\n\ntype AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>\n\ntype AlertDialogActionProps = React.ComponentProps<typeof Button>\n\ntype AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">\n\nfunction AlertDialog({ ...props }: AlertDialogProps) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPortalProps) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n}\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"motion-scale-lg bg-foundation ring-contrast/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 ring-1 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] group-data-[size=lg]/alert-dialog-content:place-items-start group-data-[size=lg]/alert-dialog-content:text-left group-data-[size=xl]/alert-dialog-content:place-items-start group-data-[size=xl]/alert-dialog-content:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-secondary mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted *:[a]:hover:text-contrast text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogCancelProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={className}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":";;;;;;;AAmCA,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,mBAAmB,EAAE,GAAG,SAAkC;AACjE,QAAO,oBAACA,cAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;EAAS,CAAA;;AAGrF,SAAS,kBAAkB,EAAE,GAAG,SAAiC;AAC/D,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,WACP,GAAG,SACuB;AAC1B,QACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD,EAAsB,CAAA,EACtB,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2XACA,UACD;EACD,GAAI;EACJ,CAAA,CACgB,EAAA,CAAA;;AAIxB,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,snBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iOACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,qJACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC2B;AAC9B,QACE,oBAACA,cAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GACT,qHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,UAAU;EACxB,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,UAAU,WACV,OAAO,WACP,GAAG,SACsB;AACzB,QACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACC;EACX,QAAQ,oBAAC,QAAD;GAAiB;GAAe;GAAQ,CAAA;EAChD,GAAI;EACJ,CAAA"}

package/dist/badge.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "success" | "destructive" | "warning" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "success" | "warning" | "secondary" | "ghost" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({

package/dist/button.d.ts

@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "success" | "destructive" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "success" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "lg" | "icon" | "xs" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
 declare function Button({

package/dist/card.js

@@ -48,7 +48,7 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("bg-secondary/50 flex items-center rounded-b-lg border-t p-4 group-data-[size=sm]/card:p-3", className),
+		className: cn("bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3", className),
 		...props
 	});
 }

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype CardProps = React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }\ntype CardHeaderProps = React.ComponentProps<\"div\">\ntype CardTitleProps = React.ComponentProps<\"div\">\ntype CardDescriptionProps = React.ComponentProps<\"div\">\ntype CardActionProps = React.ComponentProps<\"div\">\ntype CardContentProps = React.ComponentProps<\"div\">\ntype CardFooterProps = React.ComponentProps<\"div\">\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-secondary/50 flex items-center rounded-b-lg border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"],"mappings":";;;;AAYA,SAAS,KAAK,EACZ,WACA,OAAO,WACP,GAAG,SACS;AACZ,QACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,kVACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype CardProps = React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }\ntype CardHeaderProps = React.ComponentProps<\"div\">\ntype CardTitleProps = React.ComponentProps<\"div\">\ntype CardDescriptionProps = React.ComponentProps<\"div\">\ntype CardActionProps = React.ComponentProps<\"div\">\ntype CardContentProps = React.ComponentProps<\"div\">\ntype CardFooterProps = React.ComponentProps<\"div\">\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"],"mappings":";;;;AAYA,SAAS,KAAK,EACZ,WACA,OAAO,WACP,GAAG,SACS;AACZ,QACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,kVACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yGACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/dialog.js

@@ -67,7 +67,7 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dialog-footer",
-		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 sm:flex-row sm:justify-end", className),
+		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 sm:flex-row sm:justify-end", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  /**\n   * When `true`, clicking outside the dialog (backdrop / pointer\n   * dismissal) does not close it. It can then only be closed via an\n   * explicit action — the close button, `Esc`, or programmatically.\n   *\n   * Use this for dialogs containing forms, wizards, or other content\n   * where an accidental outside click shouldn't discard the user's work.\n   *\n   * @default false\n   */\n  disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n  showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <CloseIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: DialogFooterProps) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      // pr-8 reserves room for the close button (absolute, top-2 right-2) so a\n      // long title wraps before it instead of running underneath.\n      className={cn(\"text-base leading-none font-medium pr-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted *:[a]:hover:text-contrast text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,iNACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gHACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EAGV,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n  /**\n   * When `true`, clicking outside the dialog (backdrop / pointer\n   * dismissal) does not close it. It can then only be closed via an\n   * explicit action — the close button, `Esc`, or programmatically.\n   *\n   * Use this for dialogs containing forms, wizards, or other content\n   * where an accidental outside click shouldn't discard the user's work.\n   *\n   * @default false\n   */\n  disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n  showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <CloseIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: DialogFooterProps) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      // pr-8 reserves room for the close button (absolute, top-2 right-2) so a\n      // long title wraps before it instead of running underneath.\n      className={cn(\"text-base leading-none font-medium pr-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted *:[a]:hover:text-contrast text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,iNACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4HACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EAGV,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/drawer.js

@@ -43,7 +43,7 @@ function DrawerContent({ className, children, showCloseButton = false, ...props
 		className: "fixed inset-0 z-50 outline-none",
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-slot": "drawer-content",
-			className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
+			className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-none", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx("div", {

package/dist/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n  showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  showCloseButton = false,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"fixed inset-0 z-50 outline-none\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            // Base layout & appearance\n            \"group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none\",\n            // Transition — animate translate at the lg tier + the one curve; disable during swipe\n            \"transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0\",\n            // Bottom drawer (swipeDirection=\"down\")\n            \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t\",\n            // Top drawer (swipeDirection=\"up\")\n            \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b\",\n            // Left drawer (swipeDirection=\"left\")\n            \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n            // Right drawer (swipeDirection=\"right\")\n            \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n            // Enter/exit slide — bottom\n            \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n            // Enter/exit slide — top\n            \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n            // Enter/exit slide — left\n            \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n            // Enter/exit slide — right\n            \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Drag handle — visible only for bottom drawers */}\n          <div\n            data-slot=\"drawer-drag-handle\"\n            className=\"bg-secondary mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n          />\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute top-2 right-2\"\n                  size=\"icon-sm\"\n                />\n              }\n            >\n              <CloseIcon />\n              <span className=\"sr-only\">Close</span>\n            </DrawerPrimitive.Close>\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-contrast text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,8GAEA,2FAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n  showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  showCloseButton = false,\n  ...props\n}: DrawerContentProps) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"fixed inset-0 z-50 outline-none\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            // Base layout & appearance\n            \"group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-none\",\n            // Transition — animate translate at the lg tier + the one curve; disable during swipe\n            \"transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0\",\n            // Bottom drawer (swipeDirection=\"down\")\n            \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t\",\n            // Top drawer (swipeDirection=\"up\")\n            \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b\",\n            // Left drawer (swipeDirection=\"left\")\n            \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n            // Right drawer (swipeDirection=\"right\")\n            \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n            // Enter/exit slide — bottom\n            \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n            // Enter/exit slide — top\n            \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n            // Enter/exit slide — left\n            \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n            // Enter/exit slide — right\n            \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Drag handle — visible only for bottom drawers */}\n          <div\n            data-slot=\"drawer-drag-handle\"\n            className=\"bg-secondary mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n          />\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute top-2 right-2\"\n                  size=\"icon-sm\"\n                />\n              }\n            >\n              <CloseIcon />\n              <span className=\"sr-only\">Close</span>\n            </DrawerPrimitive.Close>\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-contrast text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,0HAEA,2FAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA"}

package/dist/input-group.d.ts

@@ -18,7 +18,7 @@ declare function InputGroup({
   ...props
 }: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,
@@ -26,7 +26,7 @@ declare function InputGroupAddon({
   ...props
 }: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupButton({
   className,

package/dist/item.d.ts

@@ -8,7 +8,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/item.d.ts
 declare const itemVariants: (props?: ({
   variant?: "default" | "outline" | "muted" | null | undefined;
-  size?: "default" | "xs" | "sm" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
   variant?: "default" | "image" | "icon" | null | undefined;

package/dist/styles.css

@@ -31,31 +31,82 @@
    * They're referenced by the semantic tokens below, never used directly.
    * ====================================================================== */
 
-  /* Ion — neutral ramp */
-  --ion-50:  #FAFAFB;
-  --ion-100: #F3F3F4;
-  --ion-200: #E5E5E8;
-  --ion-300: #D1D2D7;
-  --ion-400: #ABACB2;
-  --ion-500: #8B8C94;
-  --ion-600: #6C6D76;
-  --ion-700: #4C4D55;
-  --ion-800: #3B3C44;
-  --ion-900: #323339;
-  --ion-950: #2C2D32;
-
-  /* Wave — brand ramp */
-  --wave-50:  #EEF3FF;
-  --wave-100: #DCE6FF;
-  --wave-200: #B8C9FF;
-  --wave-300: #8FA8FF;
-  --wave-400: #6A8DFF;
-  --wave-500: #315FE8;
-  --wave-600: #274FC7;
-  --wave-700: #1C3F96;
-  --wave-800: #142B69;
-  --wave-900: #0D1C46;
-  --wave-950: #061237;
+  /* Wave — brand ramp. 500 = Wave Blue #0074DE.
+   * A true cobalt signal: calm, trustable, solid, constant. */
+  --wave-50:  #EEF8FF;
+  --wave-100: #D6EEFF;
+  --wave-200: #AEDDFF;
+  --wave-300: #7BC3FF;
+  --wave-400: #3EA3FF;
+  --wave-500: #0074DE;
+  --wave-600: #0061C6;
+  --wave-700: #004C9F;
+  --wave-800: #003976;
+  --wave-900: #042954;
+  --wave-950: #061C37;
+
+  /* ── Neutral theme palettes (primitives) ─────────────────────────────────
+   * Three complete neutral ramps, one per theme. The theme class on <html>
+   * wires the ACTIVE one into the `--ui-*` alias (step 2); the semantic layer
+   * reads `--ui-*`, never these directly. `--wave-*` (brand) is shared by all
+   * three. Default theme = Graphite.
+   * ──────────────────────────────────────────────────────────────────────── */
+
+  /* Graphite — neutral grey (default) */
+  --graphite-50:  #FAFAFB;
+  --graphite-100: #F3F3F4;
+  --graphite-200: #E5E5E8;
+  --graphite-300: #D1D2D7;
+  --graphite-400: #ABACB2;
+  --graphite-500: #8B8C94;
+  --graphite-600: #6C6D76;
+  --graphite-700: #4C4D55;
+  --graphite-800: #3B3C44;
+  --graphite-900: #323339;
+  --graphite-950: #2C2D32;
+
+  /* Ink — deep navy surfaces, neutral-cool structure (page #020812, surface #050F1E).
+   * Chroma fades from full navy at the dark surfaces to near-neutral at the light
+   * end, so text/borders read as a distinct layer rather than melting into navy. */
+  --ink-50:  #F2F4F6;
+  --ink-100: #DFE1E5;
+  --ink-200: #C5C9CE;
+  --ink-300: #AAAFB6;
+  --ink-400: #8C929A;
+  --ink-500: #6E747D;
+  --ink-600: #4F5763;
+  --ink-700: #323D4C;
+  --ink-800: #162336;
+  --ink-900: #050F1E;
+  --ink-950: #020812;
+
+  /* Paper — cool near-neutral (anchor #EFF0EB @ 200 = foundation) */
+  --paper-50:  #FCFDFA;
+  --paper-100: #F6F7F3;
+  --paper-200: #EFF0EB;
+  --paper-300: #D7D8D2;
+  --paper-400: #AAACA5;
+  --paper-500: #83847D;
+  --paper-600: #63645E;
+  --paper-700: #494A44;
+  --paper-800: #30312C;
+  --paper-900: #1B1C18;
+  --paper-950: #0C0D09;
+
+  /* Active neutral alias — the theme class on <html> repoints these to one of
+   * the ramps above (step 3). Default (no theme class) = Graphite. The semantic
+   * layer below reads ONLY `--ui-*`; components never touch a ramp directly. */
+  --ui-50:  var(--graphite-50);
+  --ui-100: var(--graphite-100);
+  --ui-200: var(--graphite-200);
+  --ui-300: var(--graphite-300);
+  --ui-400: var(--graphite-400);
+  --ui-500: var(--graphite-500);
+  --ui-600: var(--graphite-600);
+  --ui-700: var(--graphite-700);
+  --ui-800: var(--graphite-800);
+  --ui-900: var(--graphite-900);
+  --ui-950: var(--graphite-950);
 
   /* ========================================================================
    * Semantic tokens — light (default). The spec's `.light` block lives in
@@ -63,14 +114,14 @@
    * ====================================================================== */
 
   /* Backgrounds = elevation */
-  --foundation: var(--ion-200);
-  --surface: var(--ion-100);
-  --elevated: var(--ion-50);
+  --foundation: var(--ui-200);
+  --surface: var(--ui-100);
+  --elevated: var(--ui-50);
 
   /* Contrast = emphasis — highest-contrast text → muted → soft. */
-  --contrast: var(--ion-950);
-  --muted: var(--ion-600);
-  --soft: var(--ion-500);
+  --contrast: var(--ui-950);
+  --muted: var(--ui-600);
+  --soft: var(--ui-500);
 
   /* Inverse — an inverted neutral pair (e.g. the dark tooltip). Aliases, so
    * they auto-flip with `.dark` (var() re-resolves at the use site). */
@@ -79,16 +130,18 @@
 
   /* Brand — `primary` wired to the Wave ramp; `secondary` is the neutral fill
    * (secondary/ghost buttons, hovers, selected) at ion-300; `accent` is the
-   * magenta. No per-fill on-color tokens: text on the saturated fills is
+   * bright signal (Wave Blue 300, the strand now-glow). No per-fill on-color
+   * tokens: text on the saturated fills is
    * `text-white`, text on the neutral `secondary` is `text-contrast`. */
   --primary: var(--wave-500);
-  --secondary: var(--ion-300);
-  --accent: #9A466A;
+  --secondary: var(--ui-300);
+  --accent: var(--wave-300); /* the bright signal — the strand's "now" cursor glow */
 
-  /* Borders = structure */
-  --line: rgba(44, 45, 50, 0.055);
-  --edge: rgba(44, 45, 50, 0.11);
-  --solid: var(--ion-300);
+  /* Borders = structure — mixed from the ACTIVE palette so they auto-match
+   * every theme: a hairline of the darkest neutral in light mode. */
+  --line: color-mix(in srgb, var(--ui-950) 7%, transparent);
+  --edge: color-mix(in srgb, var(--ui-950) 14%, transparent);
+  --solid: var(--ui-300);
 
   /* Rings = brand themed */
   --focus: var(--primary);
@@ -102,23 +155,16 @@
   --shadow-strength: 0.22;
 
   /* Status */
-  --destructive: oklch(0.63 0.22 27);
-  --success: oklch(0.72 0.19 145);
-  --warning: oklch(0.82 0.17 85);
-  --info: oklch(0.62 0.18 250);
-
-  /* Charts */
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
+  --destructive: oklch(0.620 0.200 25);
+  --success: oklch(0.710 0.185 155); /* cool emerald — distinct from the warning yellow, kept ownable (off the Apple/Tailwind default) */
+  --warning: oklch(0.830 0.156 93);
+  --info: var(--wave-500); /* the one blue — Wave Blue (= --primary / --focus) */
 
   /* Presence */
-  --presence-online: oklch(0.72 0.19 145);
-  --presence-away: oklch(0.82 0.17 85);
-  --presence-busy: oklch(0.63 0.22 27);
-  --presence-invisible: oklch(0.55 0 0);
+  --presence-online: oklch(0.710 0.185 155); /* = success colour */
+  --presence-away: oklch(0.830 0.156 93); /* = warning colour */
+  --presence-busy: oklch(0.620 0.200 25); /* = destructive colour */
+  --presence-invisible: var(--foundation); /* invisible = the page itself; pair with a border so the dot reads as a hollow ring */
 
   /* Radius */
   --radius: 0.625rem;
@@ -171,24 +217,24 @@
 
 .dark {
   /* Backgrounds = elevation */
-  --foundation: var(--ion-950);
-  --surface: var(--ion-900);
-  --elevated: var(--ion-800);
+  --foundation: var(--ui-950);
+  --surface: var(--ui-900);
+  --elevated: var(--ui-800);
 
   /* Contrast = emphasis */
-  --contrast: var(--ion-100);
-  --muted: var(--ion-400);
-  --soft: var(--ion-600);
+  --contrast: var(--ui-100);
+  --muted: var(--ui-400);
+  --soft: var(--ui-600);
 
   /* Brand — only `secondary` differs from light; mirrored to ion-700 so the
    * neutral fill stands out against the dark surfaces. primary / accent /
    * inverse / focus auto-flip or stay constant via the `:root` definitions. */
-  --secondary: var(--ion-700);
+  --secondary: var(--ui-700);
 
-  /* Borders = structure */
-  --line: rgba(246, 246, 241, 0.045);
-  --edge: rgba(246, 246, 241, 0.12);
-  --solid: var(--ion-700);
+  /* Borders = structure — a hairline of the lightest neutral (auto-matches theme). */
+  --line: color-mix(in srgb, var(--ui-50) 5%, transparent);
+  --edge: color-mix(in srgb, var(--ui-50) 13%, transparent);
+  --solid: var(--ui-700);
 
   /* Shadow — darker tint, lower strength: a near-black shadow on a dark
    * surface reads heavier than on white, so dim it. */
@@ -196,23 +242,43 @@
   --shadow-strength: 0.18;
 
   /* Status */
-  --destructive: oklch(0.65 0.2 27);
-  --success: oklch(0.65 0.17 145);
-  --warning: oklch(0.75 0.15 85);
-  --info: oklch(0.70 0.16 250);
-
-  /* Charts */
-  --chart-1: oklch(0.75 0.1 252);
-  --chart-2: oklch(0.58 0.2 260);
-  --chart-3: oklch(0.5 0.22 263);
-  --chart-4: oklch(0.45 0.2 265);
-  --chart-5: oklch(0.38 0.17 266);
+  /* Slightly BRIGHTER than the :root (light) values.
+   * Never darker, or the colour recedes on dark surfaces (the old reversal bug). */
+  --destructive: oklch(0.630 0.200 25);
+  --success: oklch(0.735 0.185 155); /* green A, hue-aware lift (+.025) brighter than light */
+  --warning: oklch(0.850 0.156 93);
+  --info: var(--wave-400); /* brighter Wave Blue for legible text-info on dark surfaces */
 
   /* Presence */
-  --presence-online: oklch(0.65 0.17 145);
-  --presence-away: oklch(0.75 0.15 85);
-  --presence-busy: oklch(0.65 0.2 27);
-  --presence-invisible: oklch(0.6 0 0);
+  --presence-online: oklch(0.735 0.185 155); /* brighter on dark, like status */
+  --presence-away: oklch(0.850 0.156 93);
+  --presence-busy: oklch(0.630 0.200 25);
+  --presence-invisible: var(--foundation); /* re-declared so it re-resolves to the dark foundation */
+}
+
+/* ---------------------------------------------------------------------------
+ * Theme presets — each repoints the `--ui-*` alias to one neutral ramp. Put a
+ * class on a root element: `<html class="theme-paper">`. Graphite is also the bare
+ * `:root` default, so `theme-graphite` is optional/explicit. Light vs dark is the
+ * separate `.dark` axis — they compose (e.g. `class="theme-paper dark"`).
+ * ------------------------------------------------------------------------- */
+.theme-graphite {
+  --ui-50: var(--graphite-50);   --ui-100: var(--graphite-100); --ui-200: var(--graphite-200);
+  --ui-300: var(--graphite-300); --ui-400: var(--graphite-400); --ui-500: var(--graphite-500);
+  --ui-600: var(--graphite-600); --ui-700: var(--graphite-700); --ui-800: var(--graphite-800);
+  --ui-900: var(--graphite-900); --ui-950: var(--graphite-950);
+}
+.theme-ink {
+  --ui-50: var(--ink-50);   --ui-100: var(--ink-100); --ui-200: var(--ink-200);
+  --ui-300: var(--ink-300); --ui-400: var(--ink-400); --ui-500: var(--ink-500);
+  --ui-600: var(--ink-600); --ui-700: var(--ink-700); --ui-800: var(--ink-800);
+  --ui-900: var(--ink-900); --ui-950: var(--ink-950);
+}
+.theme-paper {
+  --ui-50: var(--paper-50);   --ui-100: var(--paper-100); --ui-200: var(--paper-200);
+  --ui-300: var(--paper-300); --ui-400: var(--paper-400); --ui-500: var(--paper-500);
+  --ui-600: var(--paper-600); --ui-700: var(--paper-700); --ui-800: var(--paper-800);
+  --ui-900: var(--paper-900); --ui-950: var(--paper-950);
 }
 
 /* ---------------------------------------------------------------------------
@@ -255,13 +321,6 @@
   --color-warning: var(--warning);
   --color-info: var(--info);
 
-  /* Charts */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
   /* Presence */
   --color-presence-online: var(--presence-online);
   --color-presence-away: var(--presence-away);

package/dist/table.js

@@ -17,7 +17,7 @@ function Table({ className, ...props }) {
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b", className),
+		className: cn("[&_tr]:border-b [&_tr]:border-edge", className),
 		...props
 	});
 }
@@ -31,14 +31,14 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("bg-secondary/50 border-t font-medium [&>tr]:last:border-b-0", className),
+		className: cn("bg-secondary/50 border-t border-edge font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
 }
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		className: cn("hover:bg-secondary/50 aria-selected:bg-secondary border-b transition-colors", className),
+		className: cn("hover:bg-secondary/50 aria-selected:bg-secondary border-b border-edge transition-colors", className),
 		...props
 	});
 }

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../src/table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype TableProps = React.ComponentProps<\"table\">\ntype TableHeaderProps = React.ComponentProps<\"thead\">\ntype TableBodyProps = React.ComponentProps<\"tbody\">\ntype TableFooterProps = React.ComponentProps<\"tfoot\">\ntype TableRowProps = React.ComponentProps<\"tr\">\ntype TableHeadProps = React.ComponentProps<\"th\">\ntype TableCellProps = React.ComponentProps<\"td\">\ntype TableCaptionProps = React.ComponentProps<\"caption\">\n\nfunction Table({ className, ...props }: TableProps) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: TableBodyProps) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-secondary/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: TableRowProps) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-secondary/50 aria-selected:bg-secondary border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: TableHeadProps) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-contrast h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: TableCellProps) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":";;;;;AAeA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;AAClD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAEV,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iCAAiC,UAAU;GACzD,GAAI;GACJ,CAAA;EACE,CAAA;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,mBAAmB,UAAU;EAC3C,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,+DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"table.js","names":[],"sources":["../src/table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype TableProps = React.ComponentProps<\"table\">\ntype TableHeaderProps = React.ComponentProps<\"thead\">\ntype TableBodyProps = React.ComponentProps<\"tbody\">\ntype TableFooterProps = React.ComponentProps<\"tfoot\">\ntype TableRowProps = React.ComponentProps<\"tr\">\ntype TableHeadProps = React.ComponentProps<\"th\">\ntype TableCellProps = React.ComponentProps<\"td\">\ntype TableCaptionProps = React.ComponentProps<\"caption\">\n\nfunction Table({ className, ...props }: TableProps) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b [&_tr]:border-edge\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: TableBodyProps) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-secondary/50 border-t border-edge font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: TableRowProps) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-secondary/50 aria-selected:bg-secondary border-b border-edge transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: TableHeadProps) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-contrast h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: TableCellProps) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":";;;;;AAeA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;AAClD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAEV,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iCAAiC,UAAU;GACzD,GAAI;GACJ,CAAA;EACE,CAAA;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,2EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,2FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}

package/dist/toast.d.ts

@@ -7,7 +7,7 @@ import * as _$_base_ui_react0 from "@base-ui/react";
 //#region src/toast.d.ts
 declare const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none";
 declare const toastIconVariants: (props?: ({
-  type?: "success" | "loading" | "info" | "warning" | "error" | null | undefined;
+  type?: "loading" | "success" | "info" | "warning" | "error" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: ({
   position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [
@@ -40,30 +40,25 @@
     "release": "npm run build && changeset publish"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.5.0",
+    "@base-ui/react": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "input-otp": "^1.4.0",
+    "motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwind-merge": "^3.0.0"
+    "react-hook-form": "^7.0.0",
+    "tailwind-merge": "^3.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
-    "react-day-picker": {
-      "optional": true
-    },
-    "embla-carousel-react": {
-      "optional": true
-    },
-    "react-hook-form": {
-      "optional": true
-    },
     "input-otp": {
       "optional": true
     },
     "motion": {
       "optional": true
     },
-    "usehooks-ts": {
+    "react-hook-form": {
       "optional": true
     }
   },
@@ -82,12 +77,10 @@
     "@types/react-dom": "^19",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "jsdom": "^29.1.1",
     "motion": "^12.31.0",
     "react": "^19.2.0",
-    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.66.0",
     "storybook": "~10.4.0",
@@ -95,7 +88,6 @@
     "tailwindcss": "^4.2.1",
     "tsdown": "0.21.10",
     "typescript": "^5.7.0",
-    "usehooks-ts": "^3.1.1",
     "vite": "^7.3.1",
     "vitest": "^4.1.7"
   }