@godxjp/ui 18.15.4 → 19.1.0

package/dist/components/feedback/alert.js

@@ -12,7 +12,6 @@ import {
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { humanError } from "../../lib/format.js";
-import { cn } from "../../lib/utils.js";
 import { Flex } from "../layout/flex.js";
 import { Button } from "../general/button.js";
 const AlertContext = React.createContext("default");
@@ -52,9 +51,9 @@ const AlertBase = React.forwardRef(
                 void onDismiss();
               },
               "data-slot": "alert-dismiss",
-              className: "ring-offset-background focus-visible:ring-ring transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+              className: "ui-focus-ring",
               "aria-label": t("feedback.alert.dismiss"),
-              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(X, { className: "ui-alert-dismiss-icon", "aria-hidden": "true" })
             }
           )
         ]
@@ -71,15 +70,9 @@ const AlertTitle = React.forwardRef(
 );
 AlertTitle.displayName = "AlertTitle";
 const AlertContent = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-content",
-      className: cn("min-w-0 flex-1", className),
-      ...props
-    }
-  )
+  // `min-w-0 flex-1` moved to alert-layout.css [data-slot="alert-content"] — same box, but a
+  // consumer className now overrides it from the utilities layer instead of tying with it.
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "alert-content", className, ...props })
 );
 AlertContent.displayName = "AlertContent";
 const AlertDescription = React.forwardRef(
@@ -110,7 +103,7 @@ function RetryButton({ onRetry }) {
         void onRetry();
       },
       children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
         t("common.retry")
       ] })
     }
@@ -144,7 +137,7 @@ function AlertQueryError({
           void onAuthAction();
         },
         children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
-          /* @__PURE__ */ jsx(LogIn, { className: "size-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(LogIn, { "aria-hidden": "true" }),
           t("query.error.action.signIn")
         ] })
       }

package/dist/components/feedback/dialog.d.ts

@@ -21,18 +21,18 @@ interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     extra?: React.ReactNode;
     tone?: ToneProp;
 }
-declare const DialogHeader: {
-    ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-declare const DialogBody: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
-declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function DialogHeader({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
+declare namespace DialogHeader {
+    var displayName: string;
+}
+declare function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace DialogBody {
+    var displayName: string;
+}
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
+}
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
@@ -55,14 +55,14 @@ declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDial
     showClose?: boolean;
     showCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const AlertDialogHeader: {
-    ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-declare const AlertDialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function AlertDialogHeader({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
+declare namespace AlertDialogHeader {
+    var displayName: string;
+}
+declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AlertDialogFooter {
+    var displayName: string;
+}
 declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 /** Confirm mode — primary action (maps to Radix AlertDialogAction). */
@@ -89,18 +89,9 @@ export declare const Dialog: typeof DialogRoot & {
         showCloseButton?: boolean;
         overlayClassName?: string;
     } & React.RefAttributes<HTMLDivElement>>;
-    Header: {
-        ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-        displayName: string;
-    };
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
     Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: typeof DialogClose;

package/dist/components/feedback/dialog.js

@@ -65,9 +65,9 @@ const DialogContent = React.forwardRef(
               DialogPrimitive.Close,
               {
                 "data-slot": "dialog-close",
-                className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+                className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
                 children: [
-                  /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
                 ]
               }
@@ -95,12 +95,14 @@ const DialogHeader = ({
       "data-tone": tone,
       className: cn(overlayHeaderToneClass[tone], className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--space-3)] pe-[var(--space-8)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+      children: children ?? // Chrome rhythm lives in dialog-layout.css (`.ui-dialog-*`, mirroring `.ui-sheet-*`), so
+      // the two overlay siblings retune from one --dialog-*/--sheet-* set instead of literals.
+      /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-block", children: [
           title != null && /* @__PURE__ */ jsx(DialogTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(DialogDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-[var(--space-2)] whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-dialog-extra", children: extra })
       ] })
     }
   );
@@ -169,9 +171,10 @@ const AlertDialogContent = React.forwardRef(({ className, children, showClose, s
           "button",
           {
             type: "button",
-            className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+            "data-slot": "dialog-close",
+            className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
             "aria-label": t("feedback.alert.dismiss"),
-            children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" })
           }
         ) }) : null
       ]
@@ -195,12 +198,12 @@ const AlertDialogHeader = ({
       "data-tone": tone,
       className: cn(overlayHeaderToneClass[tone], className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--space-3)] pe-[var(--space-8)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+      children: children ?? /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-block", children: [
           title != null && /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(AlertDialogDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-[var(--space-2)] whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-dialog-extra", children: extra })
       ] })
     }
   );
@@ -289,7 +292,7 @@ function AlertDialog({
       if (stepUp) {
         setStepUpFailed(false);
         setVerifying(true);
-        let ok = false;
+        let ok;
         try {
           ok = await stepUp();
         } catch {
@@ -324,7 +327,7 @@ function AlertDialog({
             description ? /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { "data-slot": "dialog-description", children: description }) : null
           ] }),
           needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "text-sm", children: t("common.typeToConfirm", { phrase }) }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("common.typeToConfirm", { phrase }) }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -341,7 +344,7 @@ function AlertDialog({
               }
             )
           ] }),
-          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "text-destructive text-sm", children: t("feedback.alert.stepUpFailed") }),
+          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
           /* @__PURE__ */ jsxs(DialogFooter, { children: [
             /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),
             /* @__PURE__ */ jsx(

package/dist/components/feedback/sheet.d.ts

@@ -21,7 +21,7 @@ export declare function SheetClose(props: React.ComponentProps<typeof DialogPrim
 export declare function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 export declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     showCloseButton?: boolean;

package/dist/components/feedback/sheet.js

@@ -56,7 +56,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
     className: cn(
       // Scrim colour comes from the shared --overlay-background token (see dialog-layout.css),
       // so a service tints every overlay's backdrop from one knob instead of a baked bg-black/50.
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50",
+      "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed",
       className
     ),
     ...props
@@ -64,7 +64,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const sheetVariants = cva(
-  "fixed z-50 flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
   {
     variants: {
       // `side` is a deliberately PHYSICAL API (left/right/top/bottom) — a sheet
@@ -75,8 +75,8 @@ const sheetVariants = cva(
         right: "inset-y-0 right-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
         /* rtl-ignore: named physical side */
         left: "inset-y-0 left-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+        top: "inset-x-0 h-auto data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 h-auto data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
       }
     },
     defaultVariants: { side: "right" }
@@ -127,9 +127,9 @@ const SheetContent = React.forwardRef(
               DialogPrimitive.Close,
               {
                 "data-slot": "sheet-close",
-                className: "ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+                className: "ui-sheet-close ring-offset-background focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
                 children: [
-                  /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
                 ]
               }
@@ -156,18 +156,18 @@ const SheetHeader = ({
       "data-slot": "sheet-header",
       "data-tone": tone,
       className: cn(
-        "-mx-[var(--sheet-pad-x)] -mt-[var(--sheet-pad-y)] flex flex-col gap-1.5 px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
+        "ui-sheet-header -mx-[var(--sheet-pad-x)] -mt-[var(--sheet-pad-y)] px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
         overlayHeaderToneClass[tone],
         className
       ),
       ...props,
       children: children ?? // `pe-8` reserves room for the absolute close button (end-4) so title/extra never sit under it.
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 pe-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-sheet-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-sheet-title-block", children: [
           title != null && /* @__PURE__ */ jsx(SheetTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(SheetDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-sheet-extra", children: extra })
       ] })
     }
   );
@@ -183,7 +183,7 @@ const SheetBody = ({ className, ...props }) => (
     {
       "data-slot": "sheet-body",
       className: cn(
-        "-mx-[var(--sheet-pad-x)] min-h-0 flex-1 scroll-py-1 overflow-y-auto px-[var(--sheet-pad-x)] py-1",
+        "ui-sheet-body-space -mx-[var(--sheet-pad-x)] flex-1 overflow-y-auto px-[var(--sheet-pad-x)]",
         className
       ),
       ...props
@@ -201,7 +201,7 @@ const SheetFooter = ({ className, ...props }) => (
     {
       "data-slot": "sheet-footer",
       className: cn(
-        "-mx-[var(--sheet-pad-x)] mt-auto -mb-[var(--sheet-pad-y)] flex flex-wrap items-center justify-end gap-2 px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
+        "ui-sheet-footer-row -mx-[var(--sheet-pad-x)] mt-auto -mb-[var(--sheet-pad-y)] px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
         className
       ),
       ...props
@@ -213,7 +213,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     "data-slot": "sheet-title",
-    className: cn("text-foreground text-lg font-medium", className),
+    className: cn("ui-sheet-title", className),
     ...props
   }
 ));
@@ -223,7 +223,7 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     "data-slot": "sheet-description",
-    className: cn("text-foreground/80 text-sm", className),
+    className: cn("ui-sheet-description", className),
     ...props
   }
 ));

package/dist/components/feedback/skeleton.js

@@ -16,19 +16,22 @@ function SkeletonRows({ rows = 6, columns = 4, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-rows", className), "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "ui-skeleton-row", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(
     Skeleton,
     {
-      className: cn("h-4", j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1")
+      className: cn(
+        "ui-skeleton-line",
+        j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1"
+      )
     },
     j
   )) }, i)) });
 }
 function SkeletonTable({ rows = 8, columns = 5 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-table", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
+    /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-caption", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
     /* @__PURE__ */ jsx("div", { className: "ui-skeleton-table-body", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cn("ui-skeleton-table-row", tableCellPaddingClass, tableRowHeightClass),
-        children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-4", j === 0 ? "w-1/5" : "flex-1") }, j))
+        children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-line", j === 0 ? "w-1/5" : "flex-1") }, j))
       },
       i
     )) })
@@ -36,19 +39,19 @@ function SkeletonTable({ rows = 8, columns = 5 }) {
 }
 function SkeletonDetail() {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail ui-skeleton-detail-stack", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-1/3" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-title w-1/3" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-line w-1/2" }),
     /* @__PURE__ */ jsx("div", { className: "ui-skeleton-detail-box ui-skeleton-detail-stack", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail-stack", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-md" })
+      /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-label" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-value" })
     ] }, i)) })
   ] });
 }
 function SkeletonStat() {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-stat", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-[length:var(--control-height)] w-32" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-label" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-stat-value" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-stat-caption" })
   ] });
 }
 export {

package/dist/components/feedback/sonner.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { type ToasterProps } from "sonner";
-declare function Toaster({ ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ style, ...props }: ToasterProps): React.JSX.Element;
 export { Toaster };

package/dist/components/feedback/sonner.js

@@ -20,7 +20,7 @@ function useDocumentTheme() {
     () => "light"
   );
 }
-function Toaster({ ...props }) {
+function Toaster({ style, ...props }) {
   const theme = useDocumentTheme();
   return /* @__PURE__ */ jsx(
     Sonner,
@@ -28,11 +28,11 @@ function Toaster({ ...props }) {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4", "aria-hidden": "true" }),
-        info: /* @__PURE__ */ jsx(Info, { className: "size-4", "aria-hidden": "true" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4", "aria-hidden": "true" }),
-        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4", "aria-hidden": "true" }),
-        loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })
+        success: /* @__PURE__ */ jsx(CheckCircle2, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        loading: /* @__PURE__ */ jsx(Loader2, { className: "ui-toast-icon animate-spin", "aria-hidden": "true" })
       },
       style: {
         // Color tokens are raw HSL triplets (consumed as hsl(var(--token)));
@@ -42,10 +42,19 @@ function Toaster({ ...props }) {
         "--normal-bg": "hsl(var(--popover))",
         "--normal-text": "hsl(var(--popover-foreground))",
         "--normal-border": "hsl(var(--border))",
-        "--border-radius": "var(--radius)"
+        "--border-radius": "var(--radius)",
+        // MERGED, never spread over. `style` used to arrive with the rest of `{...props}` AFTER
+        // this object, so a consumer passing ANY style (a z-index, a width) replaced the whole
+        // object and wiped all four vars — and an unset `--normal-bg` renders the toast
+        // transparent. Merging keeps the surface intact and still lets a consumer override one
+        // var by name.
+        ...style
       },
       position: "bottom-right",
-      mobileOffset: { bottom: "16px", right: "16px" },
+      mobileOffset: {
+        bottom: "var(--toast-mobile-offset)",
+        right: "var(--toast-mobile-offset)"
+      },
       ...props
     }
   );

package/dist/components/feedback/tooltip.js

@@ -23,7 +23,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 6, children,
     "data-slot": "tooltip-content",
     sideOffset,
     className: cn(
-      "bg-popover text-popover-foreground z-50 w-fit max-w-xs rounded-md border px-2 py-1 text-xs shadow-md outline-none",
+      "ui-tooltip-content",
       "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
       "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
       "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",

package/dist/components/general/activity.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { SizeProp } from "../../props/vocabulary/index.js";
+export type { ActivityProp, ActivityProp as ActivityProps, } from "../../props/components/general.prop.js";
+/**
+ * Activity — the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
+ * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance, so a consumer never
+ * hand-rolls a looping `@keyframes` + its own `prefers-reduced-motion` guard. Every interval,
+ * stagger, offset, size and colour reads a DS token (`--activity-interval`,
+ * `--activity-stagger-step`, `--activity-mark-offset`, `--activity-color`, …), so a service retunes
+ * the whole ambient feel from its theme.
+ *
+ * NOT `Skeleton` (content is LOADING — it hard-codes `aria-busy` + an unconditional live region, so
+ * reusing it for a typing indicator tells every screen reader the region is busy for as long as
+ * anyone is typing). NOT `Button loading` (THIS ACTION is in flight, on a control).
+ * `Activity` means: someone is typing, a sync is running, a response is streaming, a recording is
+ * live — indefinitely, and not here.
+ *
+ * ACCESSIBILITY — the half consumers get wrong, owned here:
+ * - The mark is decorative and always `aria-hidden`; the `label` (or `children`) carries the
+ *   meaning, so the indicator is never animation-only.
+ * - `announce` defaults to `false` and then emits NO live region at all. An ambient indicator
+ *   flickers on and off with every socket event; a live region there re-announces continuously.
+ *   `announce="polite"` wraps ONLY the label in one `aria-live="polite" aria-atomic="true"` region.
+ * - No `aria-busy`: activity elsewhere does not make THIS region busy, and `aria-busy` would
+ *   suppress the surrounding content's own updates.
+ * - Not focusable, not a tab stop, no pointer affordance — it is a status mark, not a control.
+ * - Under `prefers-reduced-motion: reduce` the loop is dropped and every mark falls back to a
+ *   DESIGNED resting state (three solid dots / a solid pulse mark / a bar segment parked at the
+ *   reading-start), never to nothing, with no layout shift (WCAG 2.2 SC 2.3.3 and SC 2.2.2).
+ *
+ * Copy is consumer-owned and localized — pass a `t()`-translated `label`, and derive
+ * "N people are typing" from `Intl.PluralRules`. The library never invents the string.
+ *
+ * Pure/server-safe: no hooks, no effects, no timers — the loop is CSS.
+ */
+export declare const Activity: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    variant?: import("../../props/index.js").ActivityVariantProp;
+    size?: SizeProp;
+    tone?: import("../../props/index.js").TextToneProp;
+    label?: import("../../props/index.js").LabelProp;
+    children?: import("../../props/index.js").ChildrenProp;
+    announce?: import("../../props/index.js").ActivityAnnounceProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/activity.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Text } from "./typography.js";
+const LABEL_SIZE = {
+  xs: "2xs",
+  sm: "xs",
+  md: "sm",
+  lg: "lg"
+};
+function ActivityMark({ variant }) {
+  if (variant === "pulse") return /* @__PURE__ */ jsx("span", { className: "ui-activity-pulse" });
+  if (variant === "bar") {
+    return /* @__PURE__ */ jsx("span", { className: "ui-activity-bar", children: /* @__PURE__ */ jsx("span", { className: "ui-activity-bar-segment" }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" })
+  ] });
+}
+const Activity = React.forwardRef(function Activity2({
+  variant = "dots",
+  size = "sm",
+  tone = "muted",
+  label,
+  announce = false,
+  children,
+  className,
+  ...props
+}, ref) {
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const visible = hasChildren ? children : label;
+  const describedOnly = hasChildren && label !== void 0 && label !== null ? label : void 0;
+  const text = visible === void 0 || visible === null ? null : /* @__PURE__ */ jsx(Text, { as: "span", size: LABEL_SIZE[size], tone, className: "ui-activity-label", children: visible });
+  const description = describedOnly === void 0 ? null : /* @__PURE__ */ jsx("span", { "data-slot": "activity-description", className: "sr-only", children: describedOnly });
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    text,
+    description
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "activity",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      className: cn("ui-activity", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-activity-mark", "data-slot": "activity-mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ActivityMark, { variant }) }),
+        announce === "polite" ? (
+          // The region wraps ONLY the label and is atomic, so a change is announced once as a whole.
+          // It is rendered even while empty so a label that arrives later is heard — an inserted
+          // region is not reliably announced. The mark stays outside it.
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", "data-slot": "activity-live", children: body })
+        ) : body
+      ]
+    }
+  );
+});
+export {
+  Activity
+};

package/dist/components/general/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "ghost" | "destructive" | "outline" | "dashed" | "secondary" | "link" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop.js";