@waveso/ui 0.15.0 → 0.16.0

package/README.md

@@ -85,11 +85,13 @@ Wave pays close attention to token taxonomy. Surfaces encode elevation; borders
 - `--muted` — body text, icons, any mark
 - `--soft` — placeholders, hints
 
-### Borders
+### Form
 
-- `--line` — subtle separators
-- `--edge` — component boundary
-- `--solid` — structural definition
+The theme's foreground made translucent, at three strengths — the way a draughtsman renders a form. Each is translucent, so it reads the same on any surface, and each keeps one job on a border or a background.
+
+- `--contour` — where a shape ends: hairline borders, separators, dividers
+- `--highlight` — where attention lands: hovered, keyboard-highlighted and open items
+- `--shade` — what gives a control its body: field and track fills, and the intense border (control outlines, layout regions)
 
 ### Ring
 
@@ -105,22 +107,21 @@ Wave pays close attention to token taxonomy. Surfaces encode elevation; borders
 
 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 uses **transparent (alpha) borders only**: `contour` by default, and `shade` where a boundary has to be intense.
 
-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.
+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 an intense 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."
+Intense 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:
+The default **`contour`** borders are ideal for:
 
 - Cards
 - Panels
-- Inputs
 - Subtle separators
 
-The **solid** borders are ideal for:
+The intense **`shade`** borders are ideal for:
 
 - Layout definition (sidebar vs. content)
 - Component grouping
@@ -129,8 +130,8 @@ The **solid** borders are ideal for:
 
 **Rule of thumb:**
 
-- If it separates **surface from surface** → alpha border
-- If it separates **layout regions** → solid border
+- If it separates **surface from surface** → `contour`
+- If it separates **layout regions** → `shade`
 - If it indicates **interaction / state** → colored alpha border
 
 ---
@@ -180,7 +181,7 @@ Every component is built on a [Base UI](https://base-ui.com) primitive — full
 
 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.
 
-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)**.
+Browse every component, with live variants and source, in **Storybook** (`pnpm storybook`). A full documentation site is on the way at **[ui.wave.so](https://ui.wave.so)**.
 
 ## Requirements
 
@@ -203,11 +204,13 @@ Some components have optional peer dependencies — install only what you use:
 ## Development
 
 ```bash
-npm install
-npm run storybook    # Start Storybook
-npm run build        # Build the library
-npm run typecheck    # Type-check
-npm run dev          # Watch mode
+pnpm install
+pnpm storybook       # Start Storybook
+pnpm build           # Build the library
+pnpm typecheck       # Type-check
+pnpm lint            # Lint with oxlint (pnpm lint:fix to autofix)
+pnpm format          # Format with oxfmt (pnpm format:check to verify)
+pnpm dev             # Watch mode
 ```
 
 ### Project structure
@@ -228,7 +231,7 @@ src/
 
 This project uses [Changesets](https://github.com/changesets/changesets) with GitHub Actions.
 
-1. Run `npx changeset` to describe your changes (patch, minor, or major)
+1. Run `pnpm changeset` to describe your changes (patch, minor, or major)
 2. Commit the generated changeset file with your PR
 3. When merged to `main`, CI automatically versions and publishes to npm
 
@@ -238,9 +241,9 @@ This project uses [Changesets](https://github.com/changesets/changesets) with Gi
 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
-npx changeset version      # Apply version bump
-npm run release            # Build and publish to npm
+pnpm changeset             # Create a changeset
+pnpm changeset version     # Apply version bump
+pnpm release               # Build and publish to npm
 ```
 
 </details>

package/dist/accordion.d.ts

@@ -1,29 +1,13 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/accordion.d.ts
 type AccordionProps = React.ComponentProps<typeof Accordion$1.Root>;
 type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
 type AccordionTriggerProps = React.ComponentProps<typeof Accordion$1.Trigger>;
 type AccordionContentProps = React.ComponentProps<typeof Accordion$1.Panel>;
-declare function Accordion({
-  className,
-  ...props
-}: AccordionProps): _$react_jsx_runtime0.JSX.Element;
-declare function AccordionItem({
-  className,
-  ...props
-}: AccordionItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: AccordionTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function AccordionContent({
-  className,
-  children,
-  ...props
-}: AccordionContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Accordion({ className, ...props }: AccordionProps): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): React.JSX.Element;
 //#endregion
 export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/accordion.js

@@ -14,7 +14,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 border-edge", className),
+		className: cn("not-last:border-b border-shade", className),
 		...props
 	});
 }
@@ -24,7 +24,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-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-hidden 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-hidden hover:underline focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4", className),
 			...props,
 			children: [
 				children,

package/dist/action-bar.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/action-bar.d.ts
 /** State a form registers with the ActionBar. */
 interface ActionBarEntry {
@@ -64,14 +62,7 @@ interface ActionBarProviderProps {
  * useActionBar('profile', { hasChanges, saving, onSave, onReset });
  * ```
  */
-declare function ActionBarProvider({
-  children,
-  message,
-  pluralMessage,
-  blockedMessage,
-  labels,
-  className
-}: ActionBarProviderProps): _$react_jsx_runtime0.JSX.Element;
+declare function ActionBarProvider({ children, message, pluralMessage, blockedMessage, labels, className }: ActionBarProviderProps): React.JSX.Element;
 /**
  * Register a form's unsaved state with the global ActionBar.
  *

package/dist/action-bar.js

@@ -24,6 +24,7 @@ function useIsMac() {
 	return isMac;
 }
 const ActionBarContext = React.createContext(null);
+const defaultPluralMessage = (count) => `${count} unsaved changes`;
 /**
 * Global action bar for unsaved changes.
 *
@@ -48,7 +49,7 @@ const ActionBarContext = React.createContext(null);
 * useActionBar('profile', { hasChanges, saving, onSave, onReset });
 * ```
 */
-function ActionBarProvider({ children, message = "You have unsaved changes", pluralMessage = (count) => `${count} unsaved changes`, blockedMessage = "Save or reset your changes before leaving this page", labels, className }) {
+function ActionBarProvider({ children, message = "You have unsaved changes", pluralMessage = defaultPluralMessage, blockedMessage = "Save or reset your changes before leaving this page", labels, className }) {
 	const text = {
 		save: "Save",
 		saving: "Saving",
@@ -208,10 +209,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-lg border border-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line", className),
+					className: cn("flex items-center gap-6 rounded-lg border border-contour/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-contour", className),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
-						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-destructive" : "text-contrast"),
+						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-danger" : "text-contrast"),
 						children: saveError ? text.saveError : displayMessage
 					}), /* @__PURE__ */ jsxs("div", {
 						"data-slot": "action-bar-actions",
@@ -221,7 +222,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 							variant: "ghost",
 							disabled: anySaving,
 							onClick: handleResetAll,
-							className: "h-9 px-3 text-sm hover:text-destructive",
+							className: "h-9 px-3 text-sm",
 							children: text.reset
 						}), /* @__PURE__ */ jsx(Button, {
 							type: "button",
@@ -230,7 +231,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 							onClick: handleSaveAll,
 							className: "h-9 px-4 text-sm",
 							children: anySaving ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" }), text.saving] }) : /* @__PURE__ */ jsxs(Fragment, { children: [text.save, /* @__PURE__ */ jsx(Kbd, {
-								className: "ml-1.5",
+								className: "ms-1.5 bg-transparent text-current",
 								children: isMac ? "⌘S" : "Ctrl+S"
 							})] })
 						})]

package/dist/alert-dialog.d.ts

@@ -1,8 +1,6 @@
 import { Button } from "./button.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
-
 //#region src/alert-dialog.d.ts
 type AlertDialogProps = React.ComponentProps<typeof AlertDialog$1.Root>;
 type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialog$1.Trigger>;
@@ -18,55 +16,17 @@ type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialog$1.Title>;
 type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialog$1.Description>;
 type AlertDialogActionProps = React.ComponentProps<typeof AlertDialog$1.Close> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
 type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialog$1.Close> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
-declare function AlertDialog({
-  ...props
-}: AlertDialogProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogTrigger({
-  ...props
-}: AlertDialogTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogPortal({
-  ...props
-}: AlertDialogPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogOverlayProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogContent({
-  className,
-  size,
-  ...props
-}: AlertDialogContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogHeader({
-  className,
-  ...props
-}: AlertDialogHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogFooter({
-  className,
-  ...props
-}: AlertDialogFooterProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogMedia({
-  className,
-  ...props
-}: AlertDialogMediaProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogTitle({
-  className,
-  ...props
-}: AlertDialogTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogDescription({
-  className,
-  ...props
-}: AlertDialogDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogAction({
-  className,
-  variant,
-  size,
-  ...props
-}: AlertDialogActionProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDialogCancel({
-  className,
-  variant,
-  size,
-  ...props
-}: AlertDialogCancelProps): _$react_jsx_runtime0.JSX.Element;
+declare function AlertDialog({ ...props }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialogPortalProps): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialogContentProps): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: AlertDialogActionProps): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): React.JSX.Element;
 //#endregion
 export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogMedia, type AlertDialogMediaProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, type AlertDialogPortalProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/alert-dialog.js

@@ -33,35 +33,35 @@ 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-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-hidden 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 start-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 ring-1 outline-hidden 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 shadow-lg", className),
 		...props
 	})] });
 }
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-header",
-		className: cn("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", className),
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-3 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start 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-start group-data-[size=xl]/alert-dialog-content:place-items-start group-data-[size=xl]/alert-dialog-content:text-start", 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 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),
+		className: cn("flex flex-col-reverse gap-2 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-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),
+		className: cn("bg-secondary mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
 		...props
 	});
 }
 function AlertDialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		"data-slot": "alert-dialog-title",
-		className: cn("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", className),
+		className: cn("text-lg font-medium leading-none sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 		...props
 	});
 }

package/dist/alert.d.ts

@@ -1,32 +1,23 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  variant?: "danger" | "default" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>;
 type AlertTitleProps = React.ComponentProps<"div">;
 type AlertDescriptionProps = React.ComponentProps<"div">;
 type AlertActionProps = React.ComponentProps<"div">;
-declare function Alert({
-  className,
-  variant,
-  ...props
-}: AlertProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertTitle({
-  className,
-  ...props
-}: AlertTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertDescription({
-  className,
-  ...props
-}: AlertDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function AlertAction({
-  className,
-  ...props
-}: AlertActionProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * A callout for information the reader should notice. It has no live role
+ * by default: pass `role="alert"` for an urgent message that appears while
+ * someone is using the page (an error after an action), which screen readers
+ * announce at once, or `role="status"` for a polite update. A static callout
+ * needs neither.
+ */
+declare function Alert({ className, variant, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: AlertTitleProps): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: AlertDescriptionProps): React.JSX.Element;
+declare function AlertAction({ className, ...props }: AlertActionProps): React.JSX.Element;
 //#endregion
 export { Alert, AlertAction, type AlertActionProps, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, alertVariants };

package/dist/alert.js

@@ -2,17 +2,26 @@ import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-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 *:data-[icon]:col-start-1 *:data-[icon]:row-span-2 *:data-[icon]:translate-y-0.5 *:data-[icon]:text-current *:[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-shade px-4 py-3 text-start text-sm has-data-[slot=alert-action]:pe-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2.5 *:data-[icon]:col-start-1 *:data-[icon]:row-span-2 *:data-[icon]:translate-y-0.5 *:data-[icon]:text-current *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
 	variants: { variant: {
 		default: "bg-surface text-contrast",
-		destructive: "text-destructive bg-surface *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+		info: "bg-surface text-contrast *:data-[icon]:text-info *:[svg]:text-info",
+		success: "bg-surface text-contrast *:data-[icon]:text-success *:[svg]:text-success",
+		warning: "bg-surface text-contrast *:data-[icon]:text-warning *:[svg]:text-warning",
+		danger: "bg-surface text-contrast *:data-[icon]:text-danger *:[svg]:text-danger"
 	} },
 	defaultVariants: { variant: "default" }
 });
+/**
+* A callout for information the reader should notice. It has no live role
+* by default: pass `role="alert"` for an urgent message that appears while
+* someone is using the page (an error after an action), which screen readers
+* announce at once, or `role="status"` for a polite update. A static callout
+* needs neither.
+*/
 function Alert({ className, variant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert",
-		role: "alert",
 		className: cn(alertVariants({ variant }), className),
 		...props
 	});
@@ -34,7 +43,7 @@ function AlertDescription({ className, ...props }) {
 function AlertAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-action",
-		className: cn("absolute top-2 right-2", className),
+		className: cn("absolute top-2.5 end-3", className),
 		...props
 	});
 }

package/dist/animate.d.ts

@@ -1,7 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as _$react from "react";
 import { ReactElement } from "react";
-
 //#region src/animate.d.ts
 type Direction = "up" | "down" | "left" | "right";
 /**
@@ -106,19 +103,7 @@ interface FloatProps {
  * </AnimateOnView>
  * ```
  */
-declare function AnimateOnView({
-  children,
-  delay,
-  from,
-  distance,
-  scale,
-  blur,
-  rotate,
-  flip,
-  spring,
-  once,
-  transition
-}: AnimateOnViewProps): ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+declare function AnimateOnView({ children, delay, from, distance, scale, blur, rotate, flip, spring, once, transition }: AnimateOnViewProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Animates a child element immediately on mount.
  *
@@ -132,18 +117,7 @@ declare function AnimateOnView({
  * </AnimateIn>
  * ```
  */
-declare function AnimateIn({
-  children,
-  delay,
-  from,
-  distance,
-  scale,
-  blur,
-  rotate,
-  flip,
-  spring,
-  transition
-}: AnimateInProps): ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+declare function AnimateIn({ children, delay, from, distance, scale, blur, rotate, flip, spring, transition }: AnimateInProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Auto-staggers delay on child AnimateIn/AnimateOnView elements.
  * Eliminates manual `delay={i * 0.08}` math.
@@ -156,11 +130,7 @@ declare function AnimateIn({
  * </Stagger>
  * ```
  */
-declare function Stagger({
-  children,
-  interval,
-  baseDelay
-}: StaggerProps): _$react_jsx_runtime0.JSX.Element;
+declare function Stagger({ children, interval, baseDelay }: StaggerProps): import("react").JSX.Element;
 /**
  * Continuous, subtle scale pulse. Great for live indicators and CTAs.
  * Zero DOM overhead — injects a scoped keyframe via `<style>`.
@@ -168,18 +138,11 @@ declare function Stagger({
  * @example
  * ```tsx
  * <Pulse>
- *   <span className="size-3 rounded-full bg-green-500" />
+ *   <span className="size-3 rounded-full bg-success" />
  * </Pulse>
  * ```
  */
-declare function Pulse({
-  children,
-  min,
-  max,
-  duration,
-  opacity,
-  paused
-}: PulseProps): _$react_jsx_runtime0.JSX.Element;
+declare function Pulse({ children, min, max, duration, opacity, paused }: PulseProps): import("react").JSX.Element;
 /**
  * Gentle continuous up/down float. Perfect for decorative elements.
  * Zero DOM overhead — injects a scoped keyframe via `<style>`.
@@ -191,12 +154,6 @@ declare function Pulse({
  * </Float>
  * ```
  */
-declare function Float({
-  children,
-  distance,
-  duration,
-  rotate,
-  paused
-}: FloatProps): _$react_jsx_runtime0.JSX.Element;
+declare function Float({ children, distance, duration, rotate, paused }: FloatProps): import("react").JSX.Element;
 //#endregion
 export { AnimateIn, type AnimateInProps, AnimateOnView, type AnimateOnViewProps, type AnimateTransition, type Direction, Float, type FloatProps, Pulse, type PulseProps, Stagger, type StaggerProps };

package/dist/animate.js

@@ -1,4 +1,5 @@
 "use client";
+import { mergeRefs } from "./lib/merge-refs.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { useInView, useReducedMotion } from "motion/react";
@@ -76,14 +77,6 @@ function buildStyles(opts) {
 		hasFilter: blurPx > 0
 	};
 }
-function mergeRefs(...refs) {
-	return (el) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") ref(el);
-			else if (ref && typeof ref === "object") ref.current = el;
-		});
-	};
-}
 function getTransitionParams(transition, useSpring, fallbackDuration = .15) {
 	return {
 		duration: transition?.duration ?? fallbackDuration,
@@ -256,7 +249,7 @@ function Stagger({ children, interval = .08, baseDelay = 0 }) {
 * @example
 * ```tsx
 * <Pulse>
-*   <span className="size-3 rounded-full bg-green-500" />
+*   <span className="size-3 rounded-full bg-success" />
 * </Pulse>
 * ```
 */
@@ -277,10 +270,11 @@ function Pulse({ children, min = .97, max = 1.03, duration = 2, opacity, paused
 		style: existingStyle
 	});
 	const name = `pulse-${id}`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `@keyframes ${name} {
+	const keyframes = `@keyframes ${name} {
   0%, 100% { transform: scale(${min}); opacity: ${opacity?.[0] ?? 1}; }
   50% { transform: scale(${max}); opacity: ${opacity?.[1] ?? 1}; }
-}` }), cloneElement(children, {
+}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: keyframes }), cloneElement(children, {
 		ref: existingRef ? mergeRefs(existingRef) : void 0,
 		style: {
 			...existingStyle,
@@ -319,10 +313,11 @@ function Float({ children, distance = 6, duration = 3, rotate = 0, paused = fals
 	const name = `float-${id}`;
 	const rotA = rotate ? ` rotate(${-rotate}deg)` : "";
 	const rotB = rotate ? ` rotate(${rotate}deg)` : "";
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `@keyframes ${name} {
+	const keyframes = `@keyframes ${name} {
   0%, 100% { transform: translateY(0px)${rotA}; }
   50% { transform: translateY(${-distance}px)${rotB}; }
-}` }), cloneElement(children, {
+}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: keyframes }), cloneElement(children, {
 		...existingRef ? { ref: existingRef } : {},
 		style: {
 			...existingStyle,

package/dist/aspect-ratio.d.ts

@@ -1,14 +1,9 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/aspect-ratio.d.ts
 type AspectRatioProps = React.ComponentProps<"div"> & {
-  /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */ratio: number;
+  /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */
+  ratio: number;
 };
-declare function AspectRatio({
-  ratio,
-  className,
-  ...props
-}: AspectRatioProps): _$react_jsx_runtime0.JSX.Element;
+declare function AspectRatio({ ratio, className, ...props }: AspectRatioProps): React.JSX.Element;
 //#endregion
 export { AspectRatio, type AspectRatioProps };