orbital-ds 0.8.0 → 0.10.0

package/dist/ui/sidebar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
@@ -22,10 +23,11 @@ import {
   TooltipTrigger
 } from "./tooltip";
 import { PanelLeftIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "17.5rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH = "var(--ds-sidebar-w)";
+const SIDEBAR_WIDTH_MOBILE = "var(--ds-sidebar-w-mobile)";
 const SIDEBAR_WIDTH_ICON = "var(--ds-sidebar-rail-w, 4rem)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
@@ -115,6 +117,7 @@ function Sidebar({
   ...props
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const t = useDsMessages();
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -130,9 +133,10 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
+        ...props,
         dir,
         "data-sidebar": "sidebar",
         "data-slot": "sidebar",
@@ -144,8 +148,8 @@ function Sidebar({
         side,
         children: [
           /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsx(SheetTitle, { children: t.sidebarTitle }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: t.sidebarDescription })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
         ]
@@ -167,7 +171,7 @@ function Sidebar({
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--ds-motion-base) ease-linear",
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--ds-motion-base) ease-(--ds-ease-collapse)",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
@@ -180,9 +184,9 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-(--ds-z-sidebar) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              "fixed inset-y-0 z-(--ds-z-sidebar) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-(--ds-ease-collapse) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-(--ds-sidebar-pad) group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2)+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-(--ds-sidebar-pad) group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2)+(var(--ds-sidebar-ring)*2))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r-(length:--ds-rule-w) group-data-[side=right]:border-l-(length:--ds-rule-w)",
               className
             ),
             ...props,
@@ -207,6 +211,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -222,24 +227,25 @@ function SidebarTrigger({
       ...props,
       children: [
         /* @__PURE__ */ jsx(PanelLeftIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.sidebarToggle })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     "button",
     {
       "data-sidebar": "rail",
       "data-slot": "sidebar-rail",
-      "aria-label": "Toggle Sidebar",
+      "aria-label": t.sidebarToggle,
       tabIndex: -1,
       onClick: toggleSidebar,
-      title: "Toggle Sidebar",
+      title: t.sidebarToggle,
       className: cn(
-        "absolute inset-y-0 z-(--ds-z-sticky) hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-(--ds-z-sticky) hidden w-4 transition-all duration-(--ds-motion-snap) ease-(--ds-ease-collapse) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-(--ds-sidebar-rail-handle-w) hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
@@ -257,7 +263,7 @@ function SidebarInset({ className, ...props }) {
     {
       "data-slot": "sidebar-inset",
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-raised md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-(--ds-sidebar-pad) md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-inset md:peer-data-[variant=inset]:shadow-raised md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-(--ds-sidebar-pad)",
         className
       ),
       ...props
@@ -273,7 +279,7 @@ function SidebarInput({
     {
       "data-slot": "sidebar-input",
       "data-sidebar": "input",
-      className: cn("h-8 w-full bg-background shadow-none", className),
+      className: cn("h-(--ds-control-h-sm) w-full bg-background shadow-none", className),
       ...props
     }
   );
@@ -285,7 +291,7 @@ function SidebarHeader({ className, ...props }) {
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
       className: cn(
-        "flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]",
+        "flex flex-col gap-2 p-2",
         className
       ),
       ...props
@@ -324,7 +330,7 @@ function SidebarContent({ className, ...props }) {
       "data-slot": "sidebar-content",
       "data-sidebar": "content",
       className: cn(
-        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className
       ),
       ...props
@@ -352,8 +358,9 @@ function SidebarGroupLabel({
     props: mergeProps(
       {
         "data-sidebar": "group-label",
+        "data-slot": "sidebar-group-label",
         className: cn(
-          "flex h-8 shrink-0 items-center rounded-md px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-(--ds-motion-base) ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-md px-3 text-xs font-(--ds-nav-weight) text-(--ds-sidebar-label) ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-(--ds-motion-base) ease-(--ds-ease-collapse) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-(length:--ds-ring-width) [&>svg]:size-4 [&>svg]:shrink-0",
           className
         )
       },
@@ -373,8 +380,9 @@ function SidebarGroupAction({
     props: mergeProps(
       {
         "data-sidebar": "group-action",
+        "data-slot": "sidebar-group-action",
         className: cn(
-          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-(--ds-sidebar-item-radius) p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform duration-(--ds-motion-snap) group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-(length:--ds-ring-width) md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           className
         )
       },
@@ -421,17 +429,17 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] duration-(--ds-motion-snap) group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:mx-auto hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-(length:--ds-ring-width) active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity) aria-disabled:pointer-events-none aria-disabled:opacity-(--ds-disabled-opacity) data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-(--ds-nav-active-weight) data-[active=true]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+        outline: "bg-background ring-(length:--ds-sidebar-ring) ring-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:ring-sidebar-accent focus-visible:ring-sidebar-ring"
       },
       size: {
-        default: "h-9 text-sm",
-        sm: "h-8 text-xs",
-        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!"
+        default: "h-(--ds-sidebar-item-h) text-sm",
+        sm: "h-(--ds-control-h-sm) text-xs",
+        lg: "h-(--ds-sidebar-item-h-lg) px-3 text-sm"
       }
     },
     defaultVariants: {
@@ -455,8 +463,10 @@ function SidebarMenuButton({
     props: mergeProps(
       {
         "data-sidebar": "menu-button",
+        "data-slot": "sidebar-menu-button",
+        "data-variant": variant,
         "data-size": size,
-        "data-active": isActive,
+        "data-active": isActive || void 0,
         className: cn(sidebarMenuButtonVariants({ variant, size }), className)
       },
       props
@@ -496,8 +506,9 @@ function SidebarMenuAction({
     props: mergeProps(
       {
         "data-sidebar": "menu-action",
+        "data-slot": "sidebar-menu-action",
         className: cn(
-          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-1/2 right-1 flex aspect-square w-5 -translate-y-1/2 items-center justify-center rounded-(--ds-sidebar-item-radius) p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform duration-(--ds-motion-snap) group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-(length:--ds-ring-width) md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
           className
         )
@@ -518,7 +529,7 @@ function SidebarMenuBadge({
       "data-slot": "sidebar-menu-badge",
       "data-sidebar": "menu-badge",
       className: cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "pointer-events-none absolute top-1/2 right-1 flex h-5 min-w-5 -translate-y-1/2 items-center justify-center rounded-(--ds-sidebar-item-radius) px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
         className
       ),
       ...props
@@ -541,7 +552,7 @@ function SidebarMenuSkeleton({
     {
       "data-slot": "sidebar-menu-skeleton",
       "data-sidebar": "menu-skeleton",
-      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      className: cn("flex h-(--ds-control-h-sm) items-center gap-2 rounded-(--ds-sidebar-item-radius) px-2", className),
       ...props,
       children: [
         showIcon && /* @__PURE__ */ jsx(
@@ -572,7 +583,7 @@ function SidebarMenuSub({ className, ...props }) {
       "data-slot": "sidebar-menu-sub",
       "data-sidebar": "menu-sub",
       className: cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l-(length:--ds-rule-w) border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className
       ),
       ...props
@@ -605,10 +616,11 @@ function SidebarMenuSubButton({
     props: mergeProps(
       {
         "data-sidebar": "menu-sub-button",
+        "data-slot": "sidebar-menu-sub-button",
         "data-size": size,
-        "data-active": isActive,
+        "data-active": isActive || void 0,
         className: cn(
-          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          "flex h-(--ds-sidebar-sub-item-h) min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-(length:--ds-ring-width) active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity) aria-disabled:pointer-events-none aria-disabled:opacity-(--ds-disabled-opacity) data-[size=md]:text-sm data-[size=sm]:text-xs data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
           className
         )
       },

package/dist/ui/skeleton.js

@@ -5,7 +5,7 @@ function Skeleton({ className, ...props }) {
     "div",
     {
       "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-xl bg-muted", className),
+      className: cn("animate-pulse rounded-skeleton bg-muted", className),
       ...props
     }
   );

package/dist/ui/slider.js

@@ -9,11 +9,11 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+  const _values = Array.isArray(value) ? value : typeof value === "number" ? [value] : Array.isArray(defaultValue) ? defaultValue : typeof defaultValue === "number" ? [defaultValue] : [min, max];
   return /* @__PURE__ */ jsx(
     SliderPrimitive.Root,
     {
-      className: cn("data-horizontal:w-full data-vertical:h-full", className),
+      className: cn("data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", className),
       "data-slot": "slider",
       defaultValue,
       value,
@@ -21,17 +21,17 @@ function Slider({
       max,
       thumbAlignment: "edge",
       ...props,
-      children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [
+      children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, { "data-slot": "slider-control", className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-(--ds-disabled-opacity) data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [
         /* @__PURE__ */ jsx(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
-            className: "relative grow overflow-hidden rounded-control bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3",
+            className: "relative grow overflow-hidden rounded-track bg-muted select-none data-[orientation=horizontal]:h-(--ds-track-h) data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-(--ds-track-h)",
             children: /* @__PURE__ */ jsx(
               SliderPrimitive.Indicator,
               {
                 "data-slot": "slider-range",
-                className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+                className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
               }
             )
           }
@@ -40,7 +40,7 @@ function Slider({
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
-            className: "block size-4 shrink-0 rounded-control border border-primary bg-primary-foreground shadow-raised ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "block size-(--ds-slider-thumb) shrink-0 rounded-control border border-primary bg-primary-foreground shadow-raised ring-(--ds-ring-color) transition-colors duration-(--ds-motion-snap) select-none hover:ring-(length:--ds-ring-width) focus-visible:ring-(length:--ds-ring-width) focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity)"
           },
           index
         ))

package/dist/ui/sonner.js

@@ -10,28 +10,45 @@ import {
   Loader2Icon
 } from "lucide-react";
 const Toaster = ({ ...props }) => {
-  const { theme = "system" } = useTheme();
+  const { resolvedTheme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
     Sonner,
     {
-      theme,
+      theme: resolvedTheme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4 text-success" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4 text-info" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4 text-warning" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4 text-danger" }),
         loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
       },
       style: {
         "--normal-bg": "var(--popover)",
         "--normal-text": "var(--popover-foreground)",
         "--normal-border": "var(--border)",
-        "--border-radius": "var(--radius)"
+        "--border-radius": "var(--ds-radius-overlay)",
+        // Colores por tipo (con richColors): los tokens de estado del tema.
+        "--success-bg": "var(--success-soft)",
+        "--success-text": "var(--success)",
+        "--success-border": "var(--border)",
+        "--info-bg": "var(--info-soft)",
+        "--info-text": "var(--info)",
+        "--info-border": "var(--border)",
+        "--warning-bg": "var(--warning-soft)",
+        "--warning-text": "var(--warning)",
+        "--warning-border": "var(--border)",
+        "--error-bg": "var(--danger-soft)",
+        "--error-text": "var(--danger)",
+        "--error-border": "var(--border)"
       },
       toastOptions: {
         classNames: {
-          toast: "cn-toast"
+          // Gancho para los temas: sonner no admite data-slot; cada toast lleva
+          // [data-sonner-toast] y [data-type], que es lo que apunta la personalidad.
+          toast: "cn-toast shadow-popover font-sans",
+          title: "font-(--ds-overlay-title-weight)",
+          description: "text-muted-foreground"
         }
       },
       ...props

package/dist/ui/sparkline.d.ts

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type SparklineSeries = 1 | 2 | 3 | 4 | 5;
+type SparklineTone = "info" | "success" | "warning" | "danger" | "neutral";
+declare const sparklineVariants: (props?: ({
+    color?: "current" | "info" | "success" | "warning" | "danger" | "neutral" | "series-1" | "series-2" | "series-3" | "series-4" | "series-5" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SparklineProps = Omit<React.ComponentProps<"svg">, "children" | "color"> & {
+    /** Serie de valores; `null` = sin dato (hueco), nunca cero. */
+    data: ReadonlyArray<number | null | undefined>;
+    /** Color de serie del tema (--chart-1..5). */
+    series?: SparklineSeries;
+    /** Color de un estado. Si no hay `series` ni `tone`, usa el color del texto. */
+    tone?: SparklineTone;
+    /** Rellena el área bajo la línea con el mismo color, atenuado. */
+    area?: boolean;
+    /** Límites del eje vertical (por defecto, mínimo y máximo de los datos). */
+    min?: number;
+    max?: number;
+    /** Descripción accesible. Sin ella la línea es decorativa (aria-hidden). */
+    label?: string;
+};
+declare function Sparkline({ data, series, tone, area, min, max, label, className, ...props }: SparklineProps): React.JSX.Element;
+
+export { Sparkline, type SparklineProps, type SparklineSeries, type SparklineTone, sparklineVariants };

package/dist/ui/sparkline.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const sparklineVariants = cva(
+  "block h-(--ds-sparkline-h) w-full overflow-visible fill-none stroke-current stroke-(length:--ds-sparkline-w)",
+  {
+    variants: {
+      color: {
+        current: "",
+        "series-1": "text-chart-1",
+        "series-2": "text-chart-2",
+        "series-3": "text-chart-3",
+        "series-4": "text-chart-4",
+        "series-5": "text-chart-5",
+        info: "text-info",
+        success: "text-success",
+        warning: "text-warning",
+        danger: "text-danger",
+        neutral: "text-neutral"
+      }
+    },
+    defaultVariants: { color: "current" }
+  }
+);
+const VIEW_W = 100;
+const VIEW_H = 100;
+function segments(data, min, max) {
+  const out = [];
+  let current = [];
+  const span = max - min;
+  const step = data.length > 1 ? VIEW_W / (data.length - 1) : 0;
+  data.forEach((v, i) => {
+    if (v == null || !Number.isFinite(v)) {
+      if (current.length) out.push(current);
+      current = [];
+      return;
+    }
+    const x = data.length > 1 ? i * step : VIEW_W / 2;
+    const y = span === 0 ? VIEW_H / 2 : VIEW_H - (v - min) / span * VIEW_H;
+    current.push({ x, y });
+  });
+  if (current.length) out.push(current);
+  return out;
+}
+function linePath(seg) {
+  const [first, ...rest] = seg;
+  if (!rest.length) return `M${first.x} ${first.y}l0 0`;
+  return `M${first.x} ${first.y}` + rest.map((p) => `L${p.x} ${p.y}`).join("");
+}
+function areaPath(seg) {
+  if (seg.length < 2) return null;
+  const first = seg[0];
+  const last = seg[seg.length - 1];
+  return `${linePath(seg)}L${last.x} ${VIEW_H}L${first.x} ${VIEW_H}Z`;
+}
+function Sparkline({ data, series, tone, area = false, min, max, label, className, ...props }) {
+  const finite = data.filter((v) => v != null && Number.isFinite(v));
+  const lo = min ?? (finite.length ? Math.min(...finite) : 0);
+  const hi = max ?? (finite.length ? Math.max(...finite) : 0);
+  const segs = segments(data, lo, hi);
+  const color = series ? `series-${series}` : tone ?? "current";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-slot": "sparkline",
+      "data-state": finite.length ? "filled" : "empty",
+      "data-tone": tone,
+      "data-series": series,
+      viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+      preserveAspectRatio: "none",
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true, focusable: false },
+      className: cn(sparklineVariants({ color }), className),
+      ...props,
+      children: [
+        area && segs.map((seg, i) => {
+          const d = areaPath(seg);
+          return d ? /* @__PURE__ */ jsx("path", { "data-slot": "sparkline-area", d, className: "fill-current/15 stroke-none" }, `a${i}`) : null;
+        }),
+        segs.map((seg, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-slot": "sparkline-line",
+            d: linePath(seg),
+            vectorEffect: "non-scaling-stroke",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          `l${i}`
+        ))
+      ]
+    }
+  );
+}
+export {
+  Sparkline,
+  sparklineVariants
+};

package/dist/ui/spinner.js

@@ -1,8 +1,11 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
 import { Loader2Icon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
+  const t = useDsMessages();
+  return /* @__PURE__ */ jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": t.loading, className: cn("size-4 animate-spin [animation-duration:var(--ds-motion-spin)]", className), ...props });
 }
 export {
   Spinner

package/dist/ui/stat.d.ts

@@ -0,0 +1,61 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type StatVariant = "card" | "inline";
+type StatSize = "sm" | "md" | "lg";
+type StatTone = "neutral" | "good" | "warn" | "bad";
+declare const statVariants: (props?: ({
+    variant?: "inline" | "card" | null | undefined;
+    tone?: "neutral" | "good" | "warn" | "bad" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StatProps = Omit<React.ComponentProps<"div">, "ref"> & {
+    variant?: StatVariant;
+    /** Tamaño fijo de la cifra; sin él, se adapta al ancho del contenedor. */
+    size?: StatSize;
+    tone?: StatTone;
+};
+declare function Stat({ className, variant, size, tone, children, ...props }: StatProps): React.JSX.Element;
+declare function StatLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type StatValueProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** Número (se formatea con Intl en el idioma activo), texto ya formateado o null = sin dato. */
+    value: number | string | null | undefined;
+    /** Unidad o sufijo pegado a la cifra («min», «%», «llamadas»). */
+    unit?: React.ReactNode;
+    /** Texto antes de la cifra (p. ej. «≈»). */
+    prefix?: React.ReactNode;
+    /** Opciones de Intl.NumberFormat (moneda, compacto, porcentaje sobre 1…). */
+    format?: Intl.NumberFormatOptions;
+    /** Decimales fijos (atajo de minimum/maximumFractionDigits). */
+    fractionDigits?: number;
+    /** Motivo de que no haya dato; se muestra en un tooltip y se lee con «Sin dato». */
+    reason?: React.ReactNode;
+    /** Cargando: esqueleto en lugar de la cifra. */
+    loading?: boolean;
+    /** Signo que sustituye a la cifra cuando no hay dato. */
+    placeholder?: React.ReactNode;
+};
+declare function StatValue({ value, unit, prefix, format, fractionDigits, reason, loading, placeholder, className, ...props }: StatValueProps): React.JSX.Element;
+type StatDeltaPolarity = "higher-is-better" | "lower-is-better" | "neutral";
+type StatDeltaProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** Variación en PUNTOS PORCENTUALES (4.2 = +4,2 %). null = sin dato (nunca 0). */
+    value: number | null | undefined;
+    /** Qué dirección es buena: decide el tono (éxito, peligro o neutro). */
+    polarity?: StatDeltaPolarity;
+    fractionDigits?: number;
+    /** Texto propio en lugar de la cifra formateada (p. ej. «+12 llamadas»). */
+    children?: React.ReactNode;
+};
+declare function StatDelta({ value, polarity, fractionDigits, className, children, ...props }: StatDeltaProps): React.JSX.Element;
+declare function StatDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Hueco para una Sparkline u otro gráfico mínimo bajo la cifra. */
+declare function StatChart({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type StatSwatchProps = React.ComponentProps<"span"> & {
+    /** Color de serie del tema (--chart-1..5). */
+    series?: 1 | 2 | 3 | 4 | 5;
+    /** O el color de un estado. */
+    tone?: "info" | "success" | "warning" | "danger" | "neutral";
+};
+/** Muestra de color que liga el KPI con su serie en un gráfico. Decorativa. */
+declare function StatSwatch({ series, tone, className, ...props }: StatSwatchProps): React.JSX.Element;
+
+export { Stat, StatChart, StatDelta, type StatDeltaPolarity, type StatDeltaProps, StatDescription, StatLabel, type StatProps, type StatSize, StatSwatch, type StatSwatchProps, type StatTone, StatValue, type StatValueProps, type StatVariant, statVariants };