orbital-ds 0.7.0 → 0.9.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/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/switch.js

@@ -13,7 +13,7 @@ function Switch({
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-(--ds-radius-pill) border border-transparent transition-all duration-(--ds-motion-snap) outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) data-[size=default]:h-(--ds-switch-h) data-[size=default]:w-(--ds-switch-w) data-[size=sm]:h-(--ds-switch-h-sm) data-[size=sm]:w-(--ds-switch-w-sm) data-checked:bg-primary data-unchecked:bg-(--ds-switch-track-off) data-disabled:cursor-not-allowed data-disabled:opacity-(--ds-disabled-opacity)",
         className
       ),
       ...props,
@@ -21,7 +21,7 @@ function Switch({
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
-          className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+          className: "pointer-events-none block rounded-(--ds-radius-pill) bg-(--ds-switch-thumb-bg) ring-0 transition-transform duration-(--ds-motion-snap) data-checked:bg-(--ds-switch-thumb-checked-bg) group-data-[size=default]/switch:size-(--ds-switch-thumb) group-data-[size=sm]/switch:size-(--ds-switch-thumb-sm) group-data-[size=default]/switch:data-checked:translate-x-[calc(var(--ds-switch-w)-var(--ds-switch-thumb)-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(var(--ds-switch-w-sm)-var(--ds-switch-thumb-sm)-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
         }
       )
     }

package/dist/ui/table.js

@@ -43,7 +43,7 @@ function TableFooter({ className, ...props }) {
     {
       "data-slot": "table-footer",
       className: cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        "border-t bg-(--ds-row-hover) font-medium [&>tr]:last:border-b-0",
         className
       ),
       ...props
@@ -56,7 +56,7 @@ function TableRow({ className, ...props }) {
     {
       "data-slot": "table-row",
       className: cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors duration-(--ds-motion-snap) hover:bg-(--ds-row-hover) has-aria-expanded:bg-(--ds-row-hover) data-[state=selected]:bg-muted",
         className
       ),
       ...props
@@ -69,7 +69,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "h-12 px-(--ds-cell-p) text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-(--ds-table-head-h) px-(--ds-cell-p) text-left align-middle font-(--ds-table-head-weight) whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       ),
       ...props

package/dist/ui/tabs.js

@@ -22,12 +22,12 @@ function Tabs({
   );
 }
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-control p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:rounded-2xl data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-control p-(--ds-tabs-list-p) text-muted-foreground group-data-[orientation=horizontal]/tabs:h-(--ds-control-h-md) group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:rounded-2xl data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
         default: "bg-muted",
-        line: "gap-1 bg-transparent"
+        line: "gap-(--ds-tabs-gap) bg-transparent"
       }
     },
     defaultVariants: {
@@ -56,10 +56,10 @@ function TabsTrigger({ className, ...props }) {
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:px-2.5 group-data-[orientation=vertical]/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-tab border border-transparent px-2 py-1 text-sm font-(--ds-tab-weight) whitespace-nowrap text-(--ds-tab-foreground) transition-all duration-(--ds-motion-snap) group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:px-2.5 group-data-[orientation=vertical]/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity) has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "data-active:bg-background data-active:font-(--ds-tab-active-weight) data-active:text-foreground dark:data-active:border-input dark:data-active:bg-(--ds-field-bg) dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity after:duration-(--ds-motion-snap) group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-(--ds-tab-line-offset) group-data-[orientation=horizontal]/tabs:after:h-(--ds-tab-line-w) group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-(--ds-tab-line-w) group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       ),
       ...props

package/dist/ui/textarea.js

@@ -6,7 +6,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "min-h-16 w-full min-w-0 rounded-md border border-input bg-input/30 px-(--ds-field-px) py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "min-h-16 w-full min-w-0 rounded-field-multiline border border-input bg-(--ds-field-bg) px-(--ds-field-px) py-2 text-base transition-colors duration-(--ds-motion-snap) outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-(--ds-disabled-opacity) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) md:text-sm",
         className
       ),
       ...props

package/dist/ui/toast.js

@@ -4,6 +4,7 @@ import { Toast as ToastPrimitive } from "@base-ui/react/toast";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 const toast = ToastPrimitive.createToastManager();
 function ToastProvider({ ...props }) {
   return /* @__PURE__ */ jsx(ToastPrimitive.Provider, { ...props });
@@ -17,7 +18,7 @@ function ToastViewport({ className, ...props }) {
     {
       "data-slot": "toast-viewport",
       className: cn(
-        "pointer-events-none fixed inset-x-4 bottom-4 z-(--ds-z-overlay) mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        "pointer-events-none fixed inset-x-(--ds-toast-offset) bottom-(--ds-toast-offset) z-(--ds-z-toast) mx-auto w-auto max-w-(--ds-toast-w) outline-none sm:right-(--ds-toast-offset) sm:left-auto sm:mx-0 sm:w-full",
         className
       ),
       ...props
@@ -29,10 +30,11 @@ function Toast({ className, ...props }) {
     ToastPrimitive.Root,
     {
       "data-slot": "toast",
+      "data-type": props.toast?.type,
       className: cn(
-        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-overlay will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50",
-        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
-        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(var(--ds-z-stack)-var(--toast-index))] w-full origin-bottom rounded-popover border bg-popover text-popover-foreground shadow-overlay will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color)",
+        "[--gap:var(--ds-toast-gap)] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:var(--ds-toast-peek)] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_var(--ds-motion-slower)_var(--ds-ease-standard),opacity_var(--ds-motion-slower),height_var(--ds-motion-snap)]",
         "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
         "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
         "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
@@ -57,7 +59,7 @@ function ToastContent({ className, ...props }) {
     {
       "data-slot": "toast-content",
       className: cn(
-        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-(--ds-motion-base) ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        "flex h-full items-center gap-3 overflow-hidden p-(--ds-popover-p) transition-opacity duration-(--ds-motion-base) ease-(--ds-ease-standard) data-behind:opacity-0 data-expanded:opacity-100",
         className
       ),
       ...props
@@ -69,7 +71,7 @@ function ToastTitle({ className, ...props }) {
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
-      className: cn("text-sm font-medium", className),
+      className: cn("text-sm font-(--ds-overlay-title-weight)", className),
       ...props
     }
   );
@@ -108,11 +110,12 @@ function ToastClose({
   render = /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm" }),
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
-      "aria-label": "Close toast",
+      "aria-label": t.closeNotification,
       render,
       className: cn(
         "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
@@ -126,16 +129,16 @@ function ToastClose({
 function ToastIcon({ type }) {
   let icon = null;
   if (type === "success") {
-    icon = /* @__PURE__ */ jsx(CircleCheckIcon, { "aria-hidden": "true" });
+    icon = /* @__PURE__ */ jsx(CircleCheckIcon, { className: "text-success", "aria-hidden": "true" });
   }
   if (type === "info") {
-    icon = /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" });
+    icon = /* @__PURE__ */ jsx(InfoIcon, { className: "text-info", "aria-hidden": "true" });
   }
   if (type === "warning") {
-    icon = /* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": "true" });
+    icon = /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "text-warning", "aria-hidden": "true" });
   }
   if (type === "error") {
-    icon = /* @__PURE__ */ jsx(OctagonXIcon, { className: "text-destructive", "aria-hidden": "true" });
+    icon = /* @__PURE__ */ jsx(OctagonXIcon, { className: "text-danger", "aria-hidden": "true" });
   }
   if (type === "loading") {
     icon = /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin", "aria-hidden": "true" });
@@ -156,7 +159,7 @@ function ToastList() {
   const { toasts } = ToastPrimitive.useToastManager();
   return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast, { toast: toastItem, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
     /* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "toast-text", className: "flex min-w-0 flex-1 flex-col gap-1", children: [
       /* @__PURE__ */ jsx(ToastTitle, {}),
       /* @__PURE__ */ jsx(ToastDescription, {})
     ] }),

package/dist/ui/toggle-group.js

@@ -29,7 +29,7 @@ function ToggleGroup({
       "data-orientation": orientation,
       style: { "--gap": spacing },
       className: cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-control data-vertical:flex-col data-vertical:items-stretch",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-control data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
         className
       ),
       ...props,
@@ -59,7 +59,7 @@ function ToggleGroupItem({
       "data-size": context.size || size,
       "data-spacing": context.spacing,
       className: cn(
-        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-(--ds-z-raised) focus-visible:z-(--ds-z-raised) group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-(--ds-z-raised) focus-visible:z-(--ds-z-raised) group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-control group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-control group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-control group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-control data-pressed:bg-muted group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size