@waveso/ui 0.5.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
 	});
 }
@@ -25,7 +25,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("cursor-clickable focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg 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", className),
+			className: cn("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", className),
 			...props,
 			children: [
 				children,
@@ -48,7 +48,7 @@ function AccordionContent({ className, children, ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "accordion-content",
-			className: cn("[&_a]:hover:text-foreground 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", className),
+			className: cn("[&_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", className),
 			children
 		})
 	});

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-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg 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-foreground 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,6gBACA,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,2LACA,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/action-bar.js

@@ -182,10 +182,10 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 				className: "fixed bottom-6 left-1/2 z-50",
 				children: /* @__PURE__ */ jsxs("div", {
 					"data-slot": "action-bar-content",
-					className: cn("flex items-center gap-6 rounded-xl border border-border/60 bg-card px-5 py-2.5 shadow-lg ring-1 ring-black/5 backdrop-blur-sm dark:ring-white/5", className),
+					className: cn("flex items-center gap-6 rounded-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line backdrop-blur-sm", className),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
-						className: "whitespace-nowrap text-sm font-medium text-foreground",
+						className: "whitespace-nowrap text-sm font-medium text-contrast",
 						children: displayMessage
 					}), /* @__PURE__ */ jsxs("div", {
 						"data-slot": "action-bar-actions",

package/dist/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","names":[],"sources":["../src/action-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Spinner } from \"./spinner\"\nimport { Kbd } from \"./kbd\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** State a form registers with the ActionBar. */\nexport interface ActionBarEntry {\n  /** Whether this form has unsaved changes. */\n  hasChanges: boolean\n  /** Whether this form is currently saving. */\n  saving: boolean\n  /** Save this form's changes. */\n  onSave: () => void | Promise<void>\n  /** Discard this form's changes. */\n  onReset: () => void\n}\n\ninterface ActionBarContextValue {\n  register: (id: string, entry: ActionBarEntry) => void\n  unregister: (id: string) => void\n  /** Returns true if any registered form has unsaved changes. */\n  hasDirty: () => boolean\n  /** Trigger the jiggle effect on blocked navigation. */\n  jiggle: () => void\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst JIGGLE_STEPS = 6\nconst JIGGLE_INTERVAL = 50\nconst JIGGLE_RANGE = 15\n\n/**\n * SSR-safe platform detection. Returns `false` on the server and on the\n * first client render so hydration matches, then resolves the real\n * platform after mount. Avoids the `⌘S`/`Ctrl+S` hydration mismatch\n * that a module-scope `navigator` read would cause.\n */\nfunction useIsMac(): boolean {\n  const [isMac, setIsMac] = React.useState(false)\n  React.useEffect(() => {\n    setIsMac(/Mac|iPhone|iPad/.test(navigator.userAgent))\n  }, [])\n  return isMac\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ActionBarContext = React.createContext<ActionBarContextValue | null>(null)\n\n// ---------------------------------------------------------------------------\n// Provider\n// ---------------------------------------------------------------------------\n\nexport interface ActionBarProviderProps {\n  children: React.ReactNode\n  /** Message when one form has changes. */\n  message?: string\n  /** Message template for multiple dirty forms. */\n  pluralMessage?: (count: number) => string\n  /**\n   * Announced to assistive tech (and the only feedback reduced-motion\n   * users get) when guarded navigation is blocked.\n   */\n  blockedMessage?: string\n  /** Additional className for the bar's outer wrapper. */\n  className?: string\n}\n\n/**\n * Global action bar for unsaved changes.\n *\n * Place once at the root layout. Forms register via `useActionBar()`.\n *\n * Features:\n * - Multi-form aggregation (Save All / Reset All)\n * - ⌘S / Ctrl+S keyboard shortcut\n * - Navigation guard with Discord-style page jiggle\n * - `beforeunload` guard for browser close/refresh\n *\n * @example\n * ```tsx\n * // Root layout — once\n * <ActionBarProvider>{children}</ActionBarProvider>\n *\n * // Any form component\n * useActionBar('profile', { hasChanges, saving, onSave, onReset });\n * ```\n */\nfunction ActionBarProvider({\n  children,\n  message = \"You have unsaved changes\",\n  pluralMessage = (count) => `${count} unsaved changes`,\n  blockedMessage = \"Save or reset your changes before leaving this page\",\n  className,\n}: ActionBarProviderProps) {\n  const entriesRef = React.useRef(new Map<string, ActionBarEntry>())\n  const [, forceUpdate] = React.useState(0)\n  const [jiggleTransform, setJiggleTransform] = React.useState<string | null>(\n    null\n  )\n  const jiggleTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n    null\n  )\n  const contentRef = React.useRef<HTMLDivElement>(null)\n  const isMac = useIsMac()\n  const prefersReducedMotion = useReducedMotion()\n  const reducedMotionRef = React.useRef(prefersReducedMotion)\n  reducedMotionRef.current = prefersReducedMotion\n  // Assertive announcement for blocked navigation. This is the *only*\n  // feedback channel that works for screen-reader and reduced-motion\n  // users (the visual jiggle is suppressed for them), so it is driven\n  // independently of the shake.\n  const [blockedNotice, setBlockedNotice] = React.useState(\"\")\n\n  // --- Registry ---\n\n  const register = React.useCallback((id: string, entry: ActionBarEntry) => {\n    const prev = entriesRef.current.get(id)\n    entriesRef.current.set(id, entry)\n    if (\n      !prev ||\n      prev.hasChanges !== entry.hasChanges ||\n      prev.saving !== entry.saving\n    ) {\n      forceUpdate((n) => n + 1)\n    }\n  }, [])\n\n  const unregister = React.useCallback((id: string) => {\n    if (entriesRef.current.delete(id)) {\n      forceUpdate((n) => n + 1)\n    }\n  }, [])\n\n  const hasDirty = React.useCallback(() => {\n    for (const entry of entriesRef.current.values()) {\n      if (entry.hasChanges) return true\n    }\n    return false\n  }, [])\n\n  // --- Jiggle ---\n\n  const jiggle = React.useCallback(() => {\n    // Announce to assistive tech on every blocked attempt. Clearing\n    // first guarantees a text change so an identical message\n    // re-announces on repeat presses.\n    setBlockedNotice(\"\")\n    requestAnimationFrame(() => setBlockedNotice(blockedMessage))\n\n    // Vestibular safety: the random-translate shake is purely a motion\n    // cue, so skip it under prefers-reduced-motion. The assertive\n    // announcement above is the accessible equivalent.\n    if (reducedMotionRef.current) return\n    if (jiggleTimerRef.current) return\n\n    let step = 0\n\n    function tick() {\n      step++\n      if (step >= JIGGLE_STEPS) {\n        setJiggleTransform(null)\n        jiggleTimerRef.current = null\n        return\n      }\n      const x = (Math.random() - 0.5) * 2 * JIGGLE_RANGE\n      const y = (Math.random() - 0.5) * 2 * JIGGLE_RANGE\n      setJiggleTransform(\n        `translate3d(${x.toFixed(5)}px, ${y.toFixed(5)}px, 0px)`\n      )\n      jiggleTimerRef.current = setTimeout(tick, JIGGLE_INTERVAL)\n    }\n\n    tick()\n  }, [blockedMessage])\n\n  // --- Aggregated state ---\n\n  const dirty: ActionBarEntry[] = []\n  let anySaving = false\n\n  for (const entry of entriesRef.current.values()) {\n    if (entry.hasChanges) dirty.push(entry)\n    if (entry.saving) anySaving = true\n  }\n\n  const showBar = dirty.length > 0 || anySaving\n  const dirtyCount = dirty.length\n  const displayMessage =\n    dirtyCount > 1 ? pluralMessage(dirtyCount) : message\n\n  // --- Save / Reset ---\n\n  const handleSaveAll = React.useCallback(async () => {\n    const saves = [...entriesRef.current.values()]\n      .filter((e) => e.hasChanges)\n      .map((e) => e.onSave())\n    await Promise.all(saves)\n  }, [])\n\n  const handleResetAll = React.useCallback(() => {\n    for (const entry of entriesRef.current.values()) {\n      if (entry.hasChanges) entry.onReset()\n    }\n  }, [])\n\n  // --- ⌘S / Ctrl+S ---\n\n  React.useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"s\") {\n        e.preventDefault()\n        if (hasDirty()) {\n          handleSaveAll()\n        }\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [hasDirty, handleSaveAll])\n\n  // --- beforeunload ---\n\n  React.useEffect(() => {\n    function handleBeforeUnload(e: BeforeUnloadEvent) {\n      if (hasDirty()) {\n        e.preventDefault()\n      }\n    }\n\n    window.addEventListener(\"beforeunload\", handleBeforeUnload)\n    return () => window.removeEventListener(\"beforeunload\", handleBeforeUnload)\n  }, [hasDirty])\n\n  // --- Context ---\n\n  const ctx = React.useMemo(\n    () => ({ register, unregister, hasDirty, jiggle }),\n    [register, unregister, hasDirty, jiggle]\n  )\n\n  return (\n    <ActionBarContext.Provider value={ctx}>\n      <div\n        data-slot=\"action-bar-shell\"\n        ref={contentRef}\n        style={jiggleTransform ? { transform: jiggleTransform } : undefined}\n      >\n        {children}\n      </div>\n\n      {/*\n        Persistent SR-only live regions. They are always mounted so the\n        announcement fires reliably when their text changes — a region\n        mounted already-populated is not announced consistently across\n        screen reader / browser combinations.\n      */}\n      <span data-slot=\"action-bar-status\" aria-live=\"polite\" className=\"sr-only\">\n        {showBar ? displayMessage : \"\"}\n      </span>\n      <span\n        data-slot=\"action-bar-blocked-status\"\n        aria-live=\"assertive\"\n        className=\"sr-only\"\n      >\n        {blockedNotice}\n      </span>\n\n      <AnimatePresence>\n        {showBar && (\n          <motion.div\n            data-slot=\"action-bar\"\n            initial={\n              prefersReducedMotion\n                ? { opacity: 0, x: \"-50%\" }\n                : { opacity: 0, y: 20, x: \"-50%\" }\n            }\n            animate={{ opacity: 1, y: 0, x: \"-50%\" }}\n            exit={\n              prefersReducedMotion\n                ? { opacity: 0, x: \"-50%\" }\n                : { opacity: 0, y: 20, x: \"-50%\" }\n            }\n            transition={{ duration: 0.2, ease: \"easeOut\" }}\n            className=\"fixed bottom-6 left-1/2 z-50\"\n          >\n            <div\n              data-slot=\"action-bar-content\"\n              className={cn(\n                \"flex items-center gap-6 rounded-xl border border-border/60 bg-card px-5 py-2.5 shadow-lg ring-1 ring-black/5 backdrop-blur-sm dark:ring-white/5\",\n                className\n              )}\n            >\n              <span\n                data-slot=\"action-bar-message\"\n                className=\"whitespace-nowrap text-sm font-medium text-foreground\"\n              >\n                {displayMessage}\n              </span>\n\n              <div\n                data-slot=\"action-bar-actions\"\n                className=\"flex items-center gap-1.5\"\n              >\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  disabled={anySaving}\n                  onClick={handleResetAll}\n                  className=\"h-9 px-3 text-sm hover:text-destructive\"\n                >\n                  Reset\n                </Button>\n\n                <Button\n                  type=\"button\"\n                  variant=\"default\"\n                  disabled={anySaving}\n                  onClick={handleSaveAll}\n                  className=\"h-9 px-4 text-sm\"\n                >\n                  {anySaving ? (\n                    <>\n                      <Spinner className=\"mr-1.5 h-3.5 w-3.5\" />\n                      Saving\n                    </>\n                  ) : (\n                    <>\n                      Save\n                      <Kbd className=\"ml-1.5\">\n                        {isMac ? \"⌘S\" : \"Ctrl+S\"}\n                      </Kbd>\n                    </>\n                  )}\n                </Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ActionBarContext.Provider>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Hook — register form state\n// ---------------------------------------------------------------------------\n\n/**\n * Register a form's unsaved state with the global ActionBar.\n *\n * Unregisters automatically on unmount.\n *\n * @param id — Unique key (e.g., 'profile', 'notifications')\n * @param entry — Current form state\n */\nfunction useActionBar(id: string, entry: ActionBarEntry) {\n  const ctx = React.useContext(ActionBarContext)\n  if (!ctx)\n    throw new Error(\"useActionBar must be used within <ActionBarProvider>\")\n\n  const { register, unregister } = ctx\n\n  // Intentionally no dependency array: `entry` (and its `onSave`/\n  // `onReset` closures) is rebuilt by the caller every render, so we\n  // must re-register each render to keep the latest closures. The\n  // `register` impl diffs the entry and only forces an update when\n  // `hasChanges`/`saving` actually changed, so this can't loop.\n  React.useEffect(() => {\n    register(id, entry)\n  })\n\n  React.useEffect(() => {\n    return () => unregister(id)\n  }, [id, unregister])\n}\n\n// ---------------------------------------------------------------------------\n// Navigation guard hook\n// ---------------------------------------------------------------------------\n\n/**\n * Returns a function that guards navigation.\n * If unsaved changes exist, triggers the jiggle and blocks navigation.\n * Otherwise navigates normally via the provided callback.\n *\n * @param navigate — Your navigation function (e.g., `router.push`)\n *\n * @example\n * ```tsx\n * const router = useRouter();\n * const guardedPush = useActionBarGuard(router.push);\n * <button onClick={() => guardedPush('/settings')}>Settings</button>\n * ```\n */\nfunction useActionBarGuard(navigate: (href: string) => void) {\n  const ctx = React.useContext(ActionBarContext)\n\n  return React.useCallback(\n    (href: string) => {\n      if (ctx?.hasDirty()) {\n        ctx.jiggle()\n        return false\n      }\n      navigate(href)\n      return true\n    },\n    [ctx, navigate]\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Exports\n// ---------------------------------------------------------------------------\n\nexport {\n  ActionBarProvider,\n  useActionBar,\n  useActionBarGuard,\n}\n"],"mappings":"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"}
+{"version":3,"file":"action-bar.js","names":[],"sources":["../src/action-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Spinner } from \"./spinner\"\nimport { Kbd } from \"./kbd\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** State a form registers with the ActionBar. */\nexport interface ActionBarEntry {\n  /** Whether this form has unsaved changes. */\n  hasChanges: boolean\n  /** Whether this form is currently saving. */\n  saving: boolean\n  /** Save this form's changes. */\n  onSave: () => void | Promise<void>\n  /** Discard this form's changes. */\n  onReset: () => void\n}\n\ninterface ActionBarContextValue {\n  register: (id: string, entry: ActionBarEntry) => void\n  unregister: (id: string) => void\n  /** Returns true if any registered form has unsaved changes. */\n  hasDirty: () => boolean\n  /** Trigger the jiggle effect on blocked navigation. */\n  jiggle: () => void\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst JIGGLE_STEPS = 6\nconst JIGGLE_INTERVAL = 50\nconst JIGGLE_RANGE = 15\n\n/**\n * SSR-safe platform detection. Returns `false` on the server and on the\n * first client render so hydration matches, then resolves the real\n * platform after mount. Avoids the `⌘S`/`Ctrl+S` hydration mismatch\n * that a module-scope `navigator` read would cause.\n */\nfunction useIsMac(): boolean {\n  const [isMac, setIsMac] = React.useState(false)\n  React.useEffect(() => {\n    setIsMac(/Mac|iPhone|iPad/.test(navigator.userAgent))\n  }, [])\n  return isMac\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ActionBarContext = React.createContext<ActionBarContextValue | null>(null)\n\n// ---------------------------------------------------------------------------\n// Provider\n// ---------------------------------------------------------------------------\n\nexport interface ActionBarProviderProps {\n  children: React.ReactNode\n  /** Message when one form has changes. */\n  message?: string\n  /** Message template for multiple dirty forms. */\n  pluralMessage?: (count: number) => string\n  /**\n   * Announced to assistive tech (and the only feedback reduced-motion\n   * users get) when guarded navigation is blocked.\n   */\n  blockedMessage?: string\n  /** Additional className for the bar's outer wrapper. */\n  className?: string\n}\n\n/**\n * Global action bar for unsaved changes.\n *\n * Place once at the root layout. Forms register via `useActionBar()`.\n *\n * Features:\n * - Multi-form aggregation (Save All / Reset All)\n * - ⌘S / Ctrl+S keyboard shortcut\n * - Navigation guard with Discord-style page jiggle\n * - `beforeunload` guard for browser close/refresh\n *\n * @example\n * ```tsx\n * // Root layout — once\n * <ActionBarProvider>{children}</ActionBarProvider>\n *\n * // Any form component\n * useActionBar('profile', { hasChanges, saving, onSave, onReset });\n * ```\n */\nfunction ActionBarProvider({\n  children,\n  message = \"You have unsaved changes\",\n  pluralMessage = (count) => `${count} unsaved changes`,\n  blockedMessage = \"Save or reset your changes before leaving this page\",\n  className,\n}: ActionBarProviderProps) {\n  const entriesRef = React.useRef(new Map<string, ActionBarEntry>())\n  const [, forceUpdate] = React.useState(0)\n  const [jiggleTransform, setJiggleTransform] = React.useState<string | null>(\n    null\n  )\n  const jiggleTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n    null\n  )\n  const contentRef = React.useRef<HTMLDivElement>(null)\n  const isMac = useIsMac()\n  const prefersReducedMotion = useReducedMotion()\n  const reducedMotionRef = React.useRef(prefersReducedMotion)\n  reducedMotionRef.current = prefersReducedMotion\n  // Assertive announcement for blocked navigation. This is the *only*\n  // feedback channel that works for screen-reader and reduced-motion\n  // users (the visual jiggle is suppressed for them), so it is driven\n  // independently of the shake.\n  const [blockedNotice, setBlockedNotice] = React.useState(\"\")\n\n  // --- Registry ---\n\n  const register = React.useCallback((id: string, entry: ActionBarEntry) => {\n    const prev = entriesRef.current.get(id)\n    entriesRef.current.set(id, entry)\n    if (\n      !prev ||\n      prev.hasChanges !== entry.hasChanges ||\n      prev.saving !== entry.saving\n    ) {\n      forceUpdate((n) => n + 1)\n    }\n  }, [])\n\n  const unregister = React.useCallback((id: string) => {\n    if (entriesRef.current.delete(id)) {\n      forceUpdate((n) => n + 1)\n    }\n  }, [])\n\n  const hasDirty = React.useCallback(() => {\n    for (const entry of entriesRef.current.values()) {\n      if (entry.hasChanges) return true\n    }\n    return false\n  }, [])\n\n  // --- Jiggle ---\n\n  const jiggle = React.useCallback(() => {\n    // Announce to assistive tech on every blocked attempt. Clearing\n    // first guarantees a text change so an identical message\n    // re-announces on repeat presses.\n    setBlockedNotice(\"\")\n    requestAnimationFrame(() => setBlockedNotice(blockedMessage))\n\n    // Vestibular safety: the random-translate shake is purely a motion\n    // cue, so skip it under prefers-reduced-motion. The assertive\n    // announcement above is the accessible equivalent.\n    if (reducedMotionRef.current) return\n    if (jiggleTimerRef.current) return\n\n    let step = 0\n\n    function tick() {\n      step++\n      if (step >= JIGGLE_STEPS) {\n        setJiggleTransform(null)\n        jiggleTimerRef.current = null\n        return\n      }\n      const x = (Math.random() - 0.5) * 2 * JIGGLE_RANGE\n      const y = (Math.random() - 0.5) * 2 * JIGGLE_RANGE\n      setJiggleTransform(\n        `translate3d(${x.toFixed(5)}px, ${y.toFixed(5)}px, 0px)`\n      )\n      jiggleTimerRef.current = setTimeout(tick, JIGGLE_INTERVAL)\n    }\n\n    tick()\n  }, [blockedMessage])\n\n  // --- Aggregated state ---\n\n  const dirty: ActionBarEntry[] = []\n  let anySaving = false\n\n  for (const entry of entriesRef.current.values()) {\n    if (entry.hasChanges) dirty.push(entry)\n    if (entry.saving) anySaving = true\n  }\n\n  const showBar = dirty.length > 0 || anySaving\n  const dirtyCount = dirty.length\n  const displayMessage =\n    dirtyCount > 1 ? pluralMessage(dirtyCount) : message\n\n  // --- Save / Reset ---\n\n  const handleSaveAll = React.useCallback(async () => {\n    const saves = [...entriesRef.current.values()]\n      .filter((e) => e.hasChanges)\n      .map((e) => e.onSave())\n    await Promise.all(saves)\n  }, [])\n\n  const handleResetAll = React.useCallback(() => {\n    for (const entry of entriesRef.current.values()) {\n      if (entry.hasChanges) entry.onReset()\n    }\n  }, [])\n\n  // --- ⌘S / Ctrl+S ---\n\n  React.useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"s\") {\n        e.preventDefault()\n        if (hasDirty()) {\n          handleSaveAll()\n        }\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [hasDirty, handleSaveAll])\n\n  // --- beforeunload ---\n\n  React.useEffect(() => {\n    function handleBeforeUnload(e: BeforeUnloadEvent) {\n      if (hasDirty()) {\n        e.preventDefault()\n      }\n    }\n\n    window.addEventListener(\"beforeunload\", handleBeforeUnload)\n    return () => window.removeEventListener(\"beforeunload\", handleBeforeUnload)\n  }, [hasDirty])\n\n  // --- Context ---\n\n  const ctx = React.useMemo(\n    () => ({ register, unregister, hasDirty, jiggle }),\n    [register, unregister, hasDirty, jiggle]\n  )\n\n  return (\n    <ActionBarContext.Provider value={ctx}>\n      <div\n        data-slot=\"action-bar-shell\"\n        ref={contentRef}\n        style={jiggleTransform ? { transform: jiggleTransform } : undefined}\n      >\n        {children}\n      </div>\n\n      {/*\n        Persistent SR-only live regions. They are always mounted so the\n        announcement fires reliably when their text changes — a region\n        mounted already-populated is not announced consistently across\n        screen reader / browser combinations.\n      */}\n      <span data-slot=\"action-bar-status\" aria-live=\"polite\" className=\"sr-only\">\n        {showBar ? displayMessage : \"\"}\n      </span>\n      <span\n        data-slot=\"action-bar-blocked-status\"\n        aria-live=\"assertive\"\n        className=\"sr-only\"\n      >\n        {blockedNotice}\n      </span>\n\n      <AnimatePresence>\n        {showBar && (\n          <motion.div\n            data-slot=\"action-bar\"\n            initial={\n              prefersReducedMotion\n                ? { opacity: 0, x: \"-50%\" }\n                : { opacity: 0, y: 20, x: \"-50%\" }\n            }\n            animate={{ opacity: 1, y: 0, x: \"-50%\" }}\n            exit={\n              prefersReducedMotion\n                ? { opacity: 0, x: \"-50%\" }\n                : { opacity: 0, y: 20, x: \"-50%\" }\n            }\n            transition={{ duration: 0.2, ease: \"easeOut\" }}\n            className=\"fixed bottom-6 left-1/2 z-50\"\n          >\n            <div\n              data-slot=\"action-bar-content\"\n              className={cn(\n                \"flex items-center gap-6 rounded-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line backdrop-blur-sm\",\n                className\n              )}\n            >\n              <span\n                data-slot=\"action-bar-message\"\n                className=\"whitespace-nowrap text-sm font-medium text-contrast\"\n              >\n                {displayMessage}\n              </span>\n\n              <div\n                data-slot=\"action-bar-actions\"\n                className=\"flex items-center gap-1.5\"\n              >\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  disabled={anySaving}\n                  onClick={handleResetAll}\n                  className=\"h-9 px-3 text-sm hover:text-destructive\"\n                >\n                  Reset\n                </Button>\n\n                <Button\n                  type=\"button\"\n                  variant=\"default\"\n                  disabled={anySaving}\n                  onClick={handleSaveAll}\n                  className=\"h-9 px-4 text-sm\"\n                >\n                  {anySaving ? (\n                    <>\n                      <Spinner className=\"mr-1.5 h-3.5 w-3.5\" />\n                      Saving\n                    </>\n                  ) : (\n                    <>\n                      Save\n                      <Kbd className=\"ml-1.5\">\n                        {isMac ? \"⌘S\" : \"Ctrl+S\"}\n                      </Kbd>\n                    </>\n                  )}\n                </Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ActionBarContext.Provider>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Hook — register form state\n// ---------------------------------------------------------------------------\n\n/**\n * Register a form's unsaved state with the global ActionBar.\n *\n * Unregisters automatically on unmount.\n *\n * @param id — Unique key (e.g., 'profile', 'notifications')\n * @param entry — Current form state\n */\nfunction useActionBar(id: string, entry: ActionBarEntry) {\n  const ctx = React.useContext(ActionBarContext)\n  if (!ctx)\n    throw new Error(\"useActionBar must be used within <ActionBarProvider>\")\n\n  const { register, unregister } = ctx\n\n  // Intentionally no dependency array: `entry` (and its `onSave`/\n  // `onReset` closures) is rebuilt by the caller every render, so we\n  // must re-register each render to keep the latest closures. The\n  // `register` impl diffs the entry and only forces an update when\n  // `hasChanges`/`saving` actually changed, so this can't loop.\n  React.useEffect(() => {\n    register(id, entry)\n  })\n\n  React.useEffect(() => {\n    return () => unregister(id)\n  }, [id, unregister])\n}\n\n// ---------------------------------------------------------------------------\n// Navigation guard hook\n// ---------------------------------------------------------------------------\n\n/**\n * Returns a function that guards navigation.\n * If unsaved changes exist, triggers the jiggle and blocks navigation.\n * Otherwise navigates normally via the provided callback.\n *\n * @param navigate — Your navigation function (e.g., `router.push`)\n *\n * @example\n * ```tsx\n * const router = useRouter();\n * const guardedPush = useActionBarGuard(router.push);\n * <button onClick={() => guardedPush('/settings')}>Settings</button>\n * ```\n */\nfunction useActionBarGuard(navigate: (href: string) => void) {\n  const ctx = React.useContext(ActionBarContext)\n\n  return React.useCallback(\n    (href: string) => {\n      if (ctx?.hasDirty()) {\n        ctx.jiggle()\n        return false\n      }\n      navigate(href)\n      return true\n    },\n    [ctx, navigate]\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Exports\n// ---------------------------------------------------------------------------\n\nexport {\n  ActionBarProvider,\n  useActionBar,\n  useActionBarGuard,\n}\n"],"mappings":";;;;;;;;;AAuCA,MAAM,eAAe;AACrB,MAAM,kBAAkB;AACxB,MAAM,eAAe;;;;;;;AAQrB,SAAS,WAAoB;CAC3B,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,MAAM;AAC/C,OAAM,gBAAgB;AACpB,WAAS,kBAAkB,KAAK,UAAU,UAAU,CAAC;IACpD,EAAE,CAAC;AACN,QAAO;;AAOT,MAAM,mBAAmB,MAAM,cAA4C,KAAK;;;;;;;;;;;;;;;;;;;;;AAyChF,SAAS,kBAAkB,EACzB,UACA,UAAU,4BACV,iBAAiB,UAAU,GAAG,MAAM,mBACpC,iBAAiB,uDACjB,aACyB;CACzB,MAAM,aAAa,MAAM,uBAAO,IAAI,KAA6B,CAAC;CAClE,MAAM,GAAG,eAAe,MAAM,SAAS,EAAE;CACzC,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAClD,KACD;CACD,MAAM,iBAAiB,MAAM,OAC3B,KACD;CACD,MAAM,aAAa,MAAM,OAAuB,KAAK;CACrD,MAAM,QAAQ,UAAU;CACxB,MAAM,uBAAuB,kBAAkB;CAC/C,MAAM,mBAAmB,MAAM,OAAO,qBAAqB;AAC3D,kBAAiB,UAAU;CAK3B,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,GAAG;CAI5D,MAAM,WAAW,MAAM,aAAa,IAAY,UAA0B;EACxE,MAAM,OAAO,WAAW,QAAQ,IAAI,GAAG;AACvC,aAAW,QAAQ,IAAI,IAAI,MAAM;AACjC,MACE,CAAC,QACD,KAAK,eAAe,MAAM,cAC1B,KAAK,WAAW,MAAM,OAEtB,cAAa,MAAM,IAAI,EAAE;IAE1B,EAAE,CAAC;CAEN,MAAM,aAAa,MAAM,aAAa,OAAe;AACnD,MAAI,WAAW,QAAQ,OAAO,GAAG,CAC/B,cAAa,MAAM,IAAI,EAAE;IAE1B,EAAE,CAAC;CAEN,MAAM,WAAW,MAAM,kBAAkB;AACvC,OAAK,MAAM,SAAS,WAAW,QAAQ,QAAQ,CAC7C,KAAI,MAAM,WAAY,QAAO;AAE/B,SAAO;IACN,EAAE,CAAC;CAIN,MAAM,SAAS,MAAM,kBAAkB;AAIrC,mBAAiB,GAAG;AACpB,8BAA4B,iBAAiB,eAAe,CAAC;AAK7D,MAAI,iBAAiB,QAAS;AAC9B,MAAI,eAAe,QAAS;EAE5B,IAAI,OAAO;EAEX,SAAS,OAAO;AACd;AACA,OAAI,QAAQ,cAAc;AACxB,uBAAmB,KAAK;AACxB,mBAAe,UAAU;AACzB;;GAEF,MAAM,KAAK,KAAK,QAAQ,GAAG,MAAO,IAAI;GACtC,MAAM,KAAK,KAAK,QAAQ,GAAG,MAAO,IAAI;AACtC,sBACE,eAAe,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,UAChD;AACD,kBAAe,UAAU,WAAW,MAAM,gBAAgB;;AAG5D,QAAM;IACL,CAAC,eAAe,CAAC;CAIpB,MAAM,QAA0B,EAAE;CAClC,IAAI,YAAY;AAEhB,MAAK,MAAM,SAAS,WAAW,QAAQ,QAAQ,EAAE;AAC/C,MAAI,MAAM,WAAY,OAAM,KAAK,MAAM;AACvC,MAAI,MAAM,OAAQ,aAAY;;CAGhC,MAAM,UAAU,MAAM,SAAS,KAAK;CACpC,MAAM,aAAa,MAAM;CACzB,MAAM,iBACJ,aAAa,IAAI,cAAc,WAAW,GAAG;CAI/C,MAAM,gBAAgB,MAAM,YAAY,YAAY;EAClD,MAAM,QAAQ,CAAC,GAAG,WAAW,QAAQ,QAAQ,CAAC,CAC3C,QAAQ,MAAM,EAAE,WAAW,CAC3B,KAAK,MAAM,EAAE,QAAQ,CAAC;AACzB,QAAM,QAAQ,IAAI,MAAM;IACvB,EAAE,CAAC;CAEN,MAAM,iBAAiB,MAAM,kBAAkB;AAC7C,OAAK,MAAM,SAAS,WAAW,QAAQ,QAAQ,CAC7C,KAAI,MAAM,WAAY,OAAM,SAAS;IAEtC,EAAE,CAAC;AAIN,OAAM,gBAAgB;EACpB,SAAS,cAAc,GAAkB;AACvC,QAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;AAC7C,MAAE,gBAAgB;AAClB,QAAI,UAAU,CACZ,gBAAe;;;AAKrB,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa,SAAS,oBAAoB,WAAW,cAAc;IAClE,CAAC,UAAU,cAAc,CAAC;AAI7B,OAAM,gBAAgB;EACpB,SAAS,mBAAmB,GAAsB;AAChD,OAAI,UAAU,CACZ,GAAE,gBAAgB;;AAItB,SAAO,iBAAiB,gBAAgB,mBAAmB;AAC3D,eAAa,OAAO,oBAAoB,gBAAgB,mBAAmB;IAC1E,CAAC,SAAS,CAAC;CAId,MAAM,MAAM,MAAM,eACT;EAAE;EAAU;EAAY;EAAU;EAAQ,GACjD;EAAC;EAAU;EAAY;EAAU;EAAO,CACzC;AAED,QACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC;GACE,oBAAC,OAAD;IACE,aAAU;IACV,KAAK;IACL,OAAO,kBAAkB,EAAE,WAAW,iBAAiB,GAAG,KAAA;IAEzD;IACG,CAAA;GAQN,oBAAC,QAAD;IAAM,aAAU;IAAoB,aAAU;IAAS,WAAU;cAC9D,UAAU,iBAAiB;IACvB,CAAA;GACP,oBAAC,QAAD;IACE,aAAU;IACV,aAAU;IACV,WAAU;cAET;IACI,CAAA;GAEP,oBAAC,iBAAD,EAAA,UACG,WACC,oBAAC,OAAO,KAAR;IACE,aAAU;IACV,SACE,uBACI;KAAE,SAAS;KAAG,GAAG;KAAQ,GACzB;KAAE,SAAS;KAAG,GAAG;KAAI,GAAG;KAAQ;IAEtC,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,GAAG;KAAQ;IACxC,MACE,uBACI;KAAE,SAAS;KAAG,GAAG;KAAQ,GACzB;KAAE,SAAS;KAAG,GAAG;KAAI,GAAG;KAAQ;IAEtC,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C,WAAU;cAEV,qBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,+HACA,UACD;eALH,CAOE,oBAAC,QAAD;MACE,aAAU;MACV,WAAU;gBAET;MACI,CAAA,EAEP,qBAAC,OAAD;MACE,aAAU;MACV,WAAU;gBAFZ,CAIE,oBAAC,QAAD;OACE,MAAK;OACL,SAAQ;OACR,UAAU;OACV,SAAS;OACT,WAAU;iBACX;OAEQ,CAAA,EAET,oBAAC,QAAD;OACE,MAAK;OACL,SAAQ;OACR,UAAU;OACV,SAAS;OACT,WAAU;iBAET,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAS,WAAU,sBAAuB,CAAA,EAAA,SAEzC,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CAAE,QAEA,oBAAC,KAAD;QAAK,WAAU;kBACZ,QAAQ,OAAO;QACZ,CAAA,CACL,EAAA,CAAA;OAEE,CAAA,CACL;QACF;;IACK,CAAA,EAEC,CAAA;GACQ;;;;;;;;;;;AAgBhC,SAAS,aAAa,IAAY,OAAuB;CACvD,MAAM,MAAM,MAAM,WAAW,iBAAiB;AAC9C,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,uDAAuD;CAEzE,MAAM,EAAE,UAAU,eAAe;AAOjC,OAAM,gBAAgB;AACpB,WAAS,IAAI,MAAM;GACnB;AAEF,OAAM,gBAAgB;AACpB,eAAa,WAAW,GAAG;IAC1B,CAAC,IAAI,WAAW,CAAC;;;;;;;;;;;;;;;;AAqBtB,SAAS,kBAAkB,UAAkC;CAC3D,MAAM,MAAM,MAAM,WAAW,iBAAiB;AAE9C,QAAO,MAAM,aACV,SAAiB;AAChB,MAAI,KAAK,UAAU,EAAE;AACnB,OAAI,QAAQ;AACZ,UAAO;;AAET,WAAS,KAAK;AACd,SAAO;IAET,CAAC,KAAK,SAAS,CAChB"}

package/dist/alert-dialog.js

@@ -34,7 +34,7 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		"data-slot": "alert-dialog-content",
 		"data-size": size,
-		className: cn("motion-scale bg-background ring-foreground/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-xl 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", className),
+		className: cn("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", className),
 		...props
 	})] });
 }
@@ -48,14 +48,14 @@ function AlertDialogHeader({ className, ...props }) {
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
-		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl 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
 	});
 }
 function AlertDialogMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-media",
-		className: cn("bg-muted 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", className),
+		className: cn("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", className),
 		...props
 	});
 }
@@ -69,7 +69,7 @@ function AlertDialogTitle({ className, ...props }) {
 function AlertDialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
 		"data-slot": "alert-dialog-description",
-		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+		className: cn("text-muted *:[a]:hover:text-contrast text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", 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 bg-background ring-foreground/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-xl 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-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl 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-muted 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-foreground *:[a]:hover:text-foreground 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,0XACA,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,iNACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8KACA,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,kIACA,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/alert.js

@@ -3,10 +3,10 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
+const alertVariants = cva("grid gap-0.5 rounded-md border border-edge px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
 	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+		default: "bg-surface text-contrast",
+		destructive: "text-destructive bg-surface *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -21,14 +21,14 @@ function Alert({ className, variant, ...props }) {
 function AlertTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-title",
-		className: cn("[&_a]:hover:text-foreground font-medium group-has-data-[icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3", className),
+		className: cn("[&_a]:hover:text-contrast font-medium group-has-data-[icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3", className),
 		...props
 	});
 }
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
+		className: cn("text-muted [&_a]:hover:text-contrast text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
 		...props
 	});
 }

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../src/alert.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype AlertProps = React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>\ntype AlertTitleProps = React.ComponentProps<\"div\">\ntype AlertDescriptionProps = React.ComponentProps<\"div\">\ntype AlertActionProps = React.ComponentProps<\"div\">\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-data-[icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: AlertActionProps) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  AlertAction\n}\n"],"mappings":";;;;;AAKA,MAAM,gBAAgB,IACpB,uUACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAOD,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACU;AACb,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,GAAG,SACqB;AACxB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8JACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/alert.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-md border border-edge px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-surface text-contrast\",\n        destructive:\n          \"text-destructive bg-surface *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype AlertProps = React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>\ntype AlertTitleProps = React.ComponentProps<\"div\">\ntype AlertDescriptionProps = React.ComponentProps<\"div\">\ntype AlertActionProps = React.ComponentProps<\"div\">\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-contrast font-medium group-has-data-[icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted [&_a]:hover:text-contrast text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: AlertActionProps) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  AlertAction\n}\n"],"mappings":";;;;;AAKA,MAAM,gBAAgB,IACpB,mVACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAOD,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACU;AACb,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,GAAG,SACqB;AACxB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iJACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA"}

package/dist/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","names":[],"sources":["../src/animate.tsx"],"mappings":";;;;;;KAkBK,SAAA;AAAA,UAEK,kBAAA;EACR,QAAA,EAAU,YAAA;;EAEV,KAAA;EALY;EAOZ,IAAA,GAAO,SAAA;EAPK;EASZ,QAAA;EAPQ;EASR,KAAA;;EAEA,IAAA;EANO;EAQP,MAAA;EAQuB;EANvB,IAAA;EAdA;EAgBA,MAAA;EAdA;EAgBA,IAAA;EAdO;EAgBP,UAAA,GAAa,UAAA;AAAA;AAAA,UAGL,cAAA;EACR,QAAA,EAAU,YAAA;EAVV;EAYA,KAAA;EARA;EAUA,IAAA,GAAO,SAAA;EARM;EAUb,QAAA;EAVuB;EAYvB,KAAA;EATsB;EAWtB,IAAA;EAVU;EAYV,MAAA;EAMa;EAJb,IAAA;EAIuB;EAFvB,MAAA;EAhBU;EAkBV,UAAA,GAAa,UAAA;AAAA;AAAA,UAGL,YAAA;EACR,QAAA,EAAU,YAAA;EAdV;EAgBA,QAAA;EAZA;EAcA,SAAA;AAAA;AAAA,UAGQ,UAAA;EACR,QAAA,EAAU,YAAA;EAZa;EAcvB,GAAA;EAXQ;EAaR,GAAA;;EAEA,QAAA;EAdA;EAgBA,OAAA;EAdA;EAgBA,MAAA;AAAA;AAAA,UAGQ,UAAA;EACR,QAAA,EAAU,YAAA;EAfQ;EAiBlB,QAAA;EAhBsB;EAkBtB,QAAA;EAlBU;EAoBV,MAAA;EAhBA;EAkBA,MAAA;AAAA;;;;AAZM;;;;;;;;;;;;AAYA;iBAgIC,aAAA,CAAA;EACP,QAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA;EACA,KAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA;AAAA,GACC,kBAAA,GAAkB,YAAA,mBAAA,OAAA,CAAA,qBAAA;;;;;;;;;;;;;;iBAoDZ,SAAA,CAAA;EACP,QAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA;EACA,KAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA,MAAA;EACA;AAAA,GACC,cAAA,GAAc,YAAA,mBAAA,OAAA,CAAA,qBAAA;;;;;;;;;;;;;iBA8CR,OAAA,CAAA;EACP,QAAA;EACA,QAAA;EACA;AAAA,GACC,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;;iBA0BN,KAAA,CAAA;EACP,QAAA;EACA,GAAA;EACA,GAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;AAlJQ;;;;;;iBAsMZ,KAAA,CAAA;EACP,QAAA;EACA,QAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"animate.d.ts","names":[],"sources":["../src/animate.tsx"],"mappings":";;;;;;KAkBK,SAAA;AAAA,UAEK,kBAAA;EACR,QAAA,EAAU,YAAA;;EAEV,KAAA;EALY;EAOZ,IAAA,GAAO,SAAA;EAPK;EASZ,QAAA;EAPQ;EASR,KAAA;;EAEA,IAAA;EANO;EAQP,MAAA;EAQuB;EANvB,IAAA;EAdA;EAgBA,MAAA;EAdA;EAgBA,IAAA;EAdO;EAgBP,UAAA,GAAa,UAAA;AAAA;AAAA,UAGL,cAAA;EACR,QAAA,EAAU,YAAA;EAVV;EAYA,KAAA;EARA;EAUA,IAAA,GAAO,SAAA;EARM;EAUb,QAAA;EAVuB;EAYvB,KAAA;EATsB;EAWtB,IAAA;EAVU;EAYV,MAAA;EAMa;EAJb,IAAA;EAIuB;EAFvB,MAAA;EAhBU;EAkBV,UAAA,GAAa,UAAA;AAAA;AAAA,UAGL,YAAA;EACR,QAAA,EAAU,YAAA;EAdV;EAgBA,QAAA;EAZA;EAcA,SAAA;AAAA;AAAA,UAGQ,UAAA;EACR,QAAA,EAAU,YAAA;EAZa;EAcvB,GAAA;EAXQ;EAaR,GAAA;;EAEA,QAAA;EAdA;EAgBA,OAAA;EAdA;EAgBA,MAAA;AAAA;AAAA,UAGQ,UAAA;EACR,QAAA,EAAU,YAAA;EAfQ;EAiBlB,QAAA;EAhBsB;EAkBtB,QAAA;EAlBU;EAoBV,MAAA;EAhBA;EAkBA,MAAA;AAAA;;;;AAZM;;;;;;;;;;;;AAYA;iBA+HC,aAAA,CAAA;EACP,QAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA;EACA,KAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA;AAAA,GACC,kBAAA,GAAkB,YAAA,mBAAA,OAAA,CAAA,qBAAA;;;;;;;;;;;;;;iBAoDZ,SAAA,CAAA;EACP,QAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA;EACA,KAAA;EACA,IAAA;EACA,MAAA;EACA,IAAA;EACA,MAAA;EACA;AAAA,GACC,cAAA,GAAc,YAAA,mBAAA,OAAA,CAAA,qBAAA;;;;;;;;;;;;;iBA8CR,OAAA,CAAA;EACP,QAAA;EACA,QAAA;EACA;AAAA,GACC,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;;iBA0BN,KAAA,CAAA;EACP,QAAA;EACA,GAAA;EACA,GAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;AAlJQ;;;;;;iBAsMZ,KAAA,CAAA;EACP,QAAA;EACA,QAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/animate.js

@@ -34,8 +34,7 @@ const FLIP_MAP = {
 };
 /** Overshoot ("spring") easing for the opt-in `spring` prop on
 *  `AnimateIn` / `AnimateOnView`. This is `animate.tsx`'s own page-entrance
-*  bounce — the CSS recipe system intentionally has no spring (one circ-out
-*  curve), so this is a standalone constant, not a shared token. */
+*  bounce — the CSS recipe system intentionally has no spring, so this is a standalone constant, not a shared token. */
 const SPRING_EASE = "cubic-bezier(0.34, 1.45, 0.64, 1)";
 function buildStyles(opts) {
 	const { from, distance, doScale, blur, rotate, flip } = opts;