orbital-ds 0.7.0 → 0.9.0

package/dist/ui/card.js

@@ -11,7 +11,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "group/card flex flex-col gap-(--ds-card-spacing) overflow-hidden rounded-xl border bg-card py-(--ds-card-spacing) text-sm text-card-foreground shadow-card transition-shadow hover:shadow-card-hover has-[>img:first-child]:pt-0 data-[size=sm]:[--ds-card-spacing:var(--ds-card-spacing-sm)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--ds-card-spacing) overflow-hidden rounded-card border bg-card py-(--ds-card-spacing) text-sm text-card-foreground shadow-card transition-shadow duration-(--ds-motion-snap) hover:shadow-card-hover has-[>img:first-child]:pt-0 data-[size=sm]:[--ds-card-spacing:var(--ds-card-spacing-sm)] *:[img:first-child]:rounded-t-card *:[img:last-child]:rounded-b-card",
         className
       ),
       ...props
@@ -24,7 +24,7 @@ function CardHeader({ className, ...props }) {
     {
       "data-slot": "card-header",
       className: cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-(--ds-card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--ds-card-spacing)",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-card px-(--ds-card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--ds-card-spacing)",
         className
       ),
       ...props
@@ -36,7 +36,7 @@ function CardTitle({ className, ...props }) {
     "div",
     {
       "data-slot": "card-title",
-      className: cn("text-base font-semibold", className),
+      className: cn("text-base font-(--ds-title-weight)", className),
       ...props
     }
   );
@@ -80,7 +80,7 @@ function CardFooter({ className, ...props }) {
     {
       "data-slot": "card-footer",
       className: cn(
-        "flex items-center rounded-b-xl px-(--ds-card-spacing) [.border-t]:pt-(--ds-card-spacing)",
+        "flex items-center rounded-b-card px-(--ds-card-spacing) [.border-t]:pt-(--ds-card-spacing)",
         className
       ),
       ...props

package/dist/ui/carousel.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import useEmblaCarousel from "embla-carousel-react";
 import { Button } from "./button";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 const CarouselContext = React.createContext(null);
 function useCarousel() {
   const context = React.useContext(CarouselContext);
@@ -21,6 +23,7 @@ function Carousel({
   children,
   ...props
 }) {
+  const t = useDsMessages();
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -85,8 +88,9 @@ function Carousel({
           onKeyDownCapture: handleKeyDown,
           className: cn("relative", className),
           role: "region",
-          "aria-roledescription": "carousel",
+          "aria-roledescription": t.carousel,
           "data-slot": "carousel",
+          "data-orientation": orientation,
           ...props,
           children
         }
@@ -107,7 +111,7 @@ function CarouselContent({ className, ...props }) {
         {
           className: cn(
             "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            orientation === "horizontal" ? "-ml-(--ds-carousel-gap)" : "-mt-(--ds-carousel-gap) flex-col",
             className
           ),
           ...props
@@ -118,15 +122,16 @@ function CarouselContent({ className, ...props }) {
 }
 function CarouselItem({ className, ...props }) {
   const { orientation } = useCarousel();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "group",
-      "aria-roledescription": "slide",
+      "aria-roledescription": t.carouselSlide,
       "data-slot": "carousel-item",
       className: cn(
         "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        orientation === "horizontal" ? "pl-(--ds-carousel-gap)" : "pt-(--ds-carousel-gap)",
         className
       ),
       ...props
@@ -140,6 +145,7 @@ function CarouselPrevious({
   ...props
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -147,7 +153,7 @@ function CarouselPrevious({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation rounded-full",
+        "absolute touch-manipulation rounded-(--ds-radius-pill)",
         orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -156,7 +162,7 @@ function CarouselPrevious({
       ...props,
       children: [
         /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.carouselPrevious })
       ]
     }
   );
@@ -168,6 +174,7 @@ function CarouselNext({
   ...props
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -175,7 +182,7 @@ function CarouselNext({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation rounded-full",
+        "absolute touch-manipulation rounded-(--ds-radius-pill)",
         orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -184,7 +191,7 @@ function CarouselNext({
       ...props,
       children: [
         /* @__PURE__ */ jsx(ChevronRightIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.carouselNext })
       ]
     }
   );

package/dist/ui/chart.js

@@ -118,8 +118,9 @@ function ChartTooltipContent({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-slot": "chart-tooltip",
       className: cn(
-        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-overlay",
+        "grid min-w-32 items-start gap-1.5 rounded-popover bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-overlay ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring)",
         className
       ),
       children: [
@@ -131,6 +132,7 @@ function ChartTooltipContent({
           return /* @__PURE__ */ jsx(
             "div",
             {
+              "data-slot": "chart-tooltip-item",
               className: cn(
                 "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
@@ -140,7 +142,7 @@ function ChartTooltipContent({
                   "div",
                   {
                     className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      "shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
@@ -194,6 +196,7 @@ function ChartLegendContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "chart-legend",
       className: cn(
         "flex items-center justify-center gap-4",
         verticalAlign === "top" ? "pb-3" : "pt-3",
@@ -205,6 +208,7 @@ function ChartLegendContent({
         return /* @__PURE__ */ jsxs(
           "div",
           {
+            "data-slot": "chart-legend-item",
             className: cn(
               "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
             ),
@@ -212,7 +216,7 @@ function ChartLegendContent({
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  className: "h-2 w-2 shrink-0 rounded-xs",
                   style: {
                     backgroundColor: item.color
                   }

package/dist/ui/checkbox.js

@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 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 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "peer relative flex size-(--ds-check-size) shrink-0 items-center justify-center rounded-check border border-input bg-(--ds-check-bg) transition-shadow duration-(--ds-motion-snap) outline-none group-has-disabled/field:opacity-(--ds-disabled-opacity) 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) 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) aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       ),
       ...props,

package/dist/ui/combobox.js

@@ -100,7 +100,7 @@ function ComboboxContent({
         {
           "data-slot": "combobox-content",
           "data-chips": !!anchor,
-          className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-popover bg-popover text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) duration-(--ds-motion-fast) data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-(--ds-control-h-md) *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-(--ds-field-bg) *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
           ...props
         }
       )
@@ -113,7 +113,7 @@ function ComboboxList({ className, ...props }) {
     {
       "data-slot": "combobox-list",
       className: cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-(--ds-menu-p) data-empty:p-0",
         className
       ),
       ...props
@@ -130,7 +130,7 @@ function ComboboxItem({
     {
       "data-slot": "combobox-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-item py-(--ds-menu-item-py) pr-8 pl-(--ds-menu-item-px) text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-(--ds-disabled-opacity) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -165,7 +165,7 @@ function ComboboxLabel({
     ComboboxPrimitive.GroupLabel,
     {
       "data-slot": "combobox-label",
-      className: cn("px-3.5 py-2.5 text-xs text-muted-foreground", className),
+      className: cn("px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-xs text-muted-foreground", className),
       ...props
     }
   );
@@ -194,7 +194,7 @@ function ComboboxSeparator({
     ComboboxPrimitive.Separator,
     {
       "data-slot": "combobox-separator",
-      className: cn("-mx-1 my-1 h-px bg-border/50", className),
+      className: cn("-mx-1 my-1 h-px bg-(--ds-separator)", className),
       ...props
     }
   );
@@ -208,7 +208,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: cn(
-        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-control border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:border-ring focus-within:ring-(length:--ds-ring-width) focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-(length:--ds-ring-width) has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        "flex min-h-(--ds-control-h-md) flex-wrap items-center gap-1.5 rounded-control border border-input bg-(--ds-field-bg) bg-clip-padding px-(--ds-field-px) py-1.5 text-sm transition-colors duration-(--ds-motion-snap) focus-within:border-ring focus-within:ring-(length:--ds-ring-width) focus-within:ring-(--ds-ring-color) has-aria-invalid:border-(--ds-invalid-border) has-aria-invalid:ring-(length:--ds-ring-width) has-aria-invalid:ring-(--ds-invalid-ring) has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props
@@ -226,7 +226,7 @@ function ComboboxChip({
     {
       "data-slot": "combobox-chip",
       className: cn(
-        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-control bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-(--ds-chip-h) w-fit items-center justify-center gap-1 rounded-control bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-(--ds-disabled-opacity) has-data-[slot=combobox-chip-remove]:pr-0",
         className
       ),
       ...props,

package/dist/ui/command.js

@@ -14,6 +14,7 @@ import {
   InputGroupAddon
 } from "./input-group";
 import { SearchIcon, CheckIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Command({
   className,
   ...props
@@ -23,7 +24,7 @@ function Command({
     {
       "data-slot": "command",
       className: cn(
-        "flex size-full flex-col overflow-hidden rounded-control bg-popover p-1 text-popover-foreground",
+        "flex size-full flex-col overflow-hidden rounded-popover bg-popover p-(--ds-menu-p) text-popover-foreground",
         className
       ),
       ...props
@@ -31,23 +32,24 @@ function Command({
   );
 }
 function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
+  title,
+  description,
   children,
   className,
   showCloseButton = false,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
     /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+      /* @__PURE__ */ jsx(DialogTitle, { children: title ?? t.commandTitle }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description ?? t.commandDescription })
     ] }),
     /* @__PURE__ */ jsx(
       DialogContent,
       {
         className: cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-control! p-0",
+          "top-1/3 translate-y-0 overflow-hidden rounded-overlay p-0",
           className
         ),
         showCloseButton,
@@ -60,13 +62,13 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ jsxs(InputGroup, { className: "h-9 bg-input/30", children: [
+  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-(--ds-menu-p) pb-0", children: /* @__PURE__ */ jsxs(InputGroup, { className: "h-(--ds-control-h-md) bg-(--ds-field-bg)", children: [
     /* @__PURE__ */ jsx(
       CommandPrimitive.Input,
       {
         "data-slot": "command-input",
         className: cn(
-          "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-(--ds-disabled-opacity)",
           className
         ),
         ...props
@@ -113,7 +115,7 @@ function CommandGroup({
     {
       "data-slot": "command-group",
       className: cn(
-        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-(--ds-menu-p) text-foreground **:[[cmdk-group-heading]]:px-(--ds-menu-item-px) **:[[cmdk-group-heading]]:py-(--ds-menu-item-py) **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className
       ),
       ...props
@@ -128,7 +130,7 @@ function CommandSeparator({
     CommandPrimitive.Separator,
     {
       "data-slot": "command-separator",
-      className: cn("my-1 h-px bg-border/50", className),
+      className: cn("my-1 h-px bg-(--ds-separator)", className),
       ...props
     }
   );
@@ -143,7 +145,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-item px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--ds-disabled-opacity) data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className
       ),
       ...props,

package/dist/ui/context-menu.js

@@ -42,7 +42,7 @@ function ContextMenuContent({
         ContextMenuPrimitive.Popup,
         {
           "data-slot": "context-menu-content",
-          className: cn("z-(--ds-z-overlay) max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          className: cn("z-(--ds-z-overlay) max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-popover bg-popover p-(--ds-menu-p) text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) duration-(--ds-motion-fast) outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
           ...props
         }
       )
@@ -63,7 +63,7 @@ function ContextMenuLabel({
       "data-slot": "context-menu-label",
       "data-inset": inset,
       className: cn(
-        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        "px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-xs text-muted-foreground data-inset:pl-9.5",
         className
       ),
       ...props
@@ -83,7 +83,7 @@ function ContextMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-item px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-(--ds-disabled-opacity) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       ),
       ...props
@@ -105,7 +105,7 @@ function ContextMenuSubTrigger({
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-item px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -123,7 +123,7 @@ function ContextMenuSubContent({
     ContextMenuContent,
     {
       "data-slot": "context-menu-sub-content",
-      className: "shadow-overlay",
+      className: "shadow-popover",
       side: "right",
       ...props
     }
@@ -142,7 +142,7 @@ function ContextMenuCheckboxItem({
       "data-slot": "context-menu-checkbox-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-item py-(--ds-menu-item-py) pr-8 pl-(--ds-menu-item-px) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-(--ds-disabled-opacity) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -180,7 +180,7 @@ function ContextMenuRadioItem({
       "data-slot": "context-menu-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-item py-(--ds-menu-item-py) pr-8 pl-(--ds-menu-item-px) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-(--ds-disabled-opacity) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -202,7 +202,7 @@ function ContextMenuSeparator({
     ContextMenuPrimitive.Separator,
     {
       "data-slot": "context-menu-separator",
-      className: cn("-mx-1 my-1 h-px bg-border/50", className),
+      className: cn("-mx-1 my-1 h-px bg-(--ds-separator)", className),
       ...props
     }
   );

package/dist/ui/dialog.js

@@ -1,8 +1,10 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { XIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Dialog({ ...props }) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
@@ -24,7 +26,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-(--ds-scrim-blur) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -37,6 +39,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -44,7 +47,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-(--ds-overlay-gap) rounded-overlay bg-popover p-(--ds-overlay-p) text-sm text-popover-foreground ring-1 ring-foreground/5 duration-(--ds-motion-fast) outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-(--ds-overlay-gap) rounded-overlay bg-popover p-(--ds-overlay-p) text-sm text-popover-foreground shadow-dialog ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) duration-(--ds-motion-fast) outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         ),
         ...props,
@@ -58,13 +61,13 @@ function DialogContent({
                 Button,
                 {
                   variant: "ghost",
-                  className: "absolute top-4 right-4",
+                  className: "absolute top-(--ds-overlay-close-inset) right-(--ds-overlay-close-inset)",
                   size: "icon-sm"
                 }
               ),
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.close })
               ]
             }
           )
@@ -89,6 +92,7 @@ function DialogFooter({
   children,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -100,7 +104,7 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Close" })
+        showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: t.close })
       ]
     }
   );
@@ -110,7 +114,7 @@ function DialogTitle({ className, ...props }) {
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
-      className: cn("text-base leading-none font-medium", className),
+      className: cn("text-base leading-none font-(--ds-overlay-title-weight)", className),
       ...props
     }
   );

package/dist/ui/drawer.js

@@ -52,7 +52,7 @@ function DrawerOverlay({
     {
       "data-slot": "drawer-overlay",
       className: cn(
-        "fixed inset-0 z-(--ds-z-overlay) min-h-dvh bg-scrim opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-(--ds-motion-slow) ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        "fixed inset-0 z-(--ds-z-overlay) min-h-dvh bg-scrim opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-(--ds-motion-slow) ease-(--ds-ease-emphasized) select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--ds-motion-swipe))] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-(--ds-scrim-blur) supports-[-webkit-touch-callout:none]:absolute",
         className
       ),
       ...props
@@ -69,7 +69,7 @@ function DrawerSwipeHandle({
       "data-slot": "drawer-swipe-handle",
       "aria-hidden": "true",
       className: cn(
-        "relative z-(--ds-z-raised) flex shrink-0 cursor-grab transition-opacity duration-(--ds-motion-base) group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] active:cursor-grabbing",
+        "relative z-(--ds-z-raised) flex shrink-0 cursor-grab transition-opacity duration-(--ds-motion-base) group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-(--ds-radius-pill) after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-(--ds-drawer-handle) group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-(--ds-drawer-handle) active:cursor-grabbing",
         className
       ),
       ...props
@@ -99,17 +99,17 @@ function DrawerContent({
             "data-snap-points": hasSnapPoints ? "" : void 0,
             className: cn(
               // Base.
-              "group/drawer-popup pointer-events-auto fixed z-(--ds-z-overlay) m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-control border border-popover bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-(--ds-motion-slow) ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border",
+              "group/drawer-popup pointer-events-auto fixed z-(--ds-z-overlay) m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-overlay border border-(--ds-drawer-edge) bg-popover shadow-dialog text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-(--ds-motion-slow) ease-(--ds-ease-standard) will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:var(--ds-drawer-inset)] [interpolate-size:allow-keywords]",
               // Nested.
               "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
               // Bleed.
               "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
               // Sizing.
-              "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+              "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:var(--ds-drawer-w)]",
               // Stack.
               "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
               // Transitions.
-              "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+              "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--ds-motion-swipe))] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--ds-motion-swipe))] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--ds-motion-swipe))]",
               // Axis: y.
               "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
               // Axis: x.
@@ -132,7 +132,7 @@ function DrawerContent({
                 {
                   "data-slot": "drawer-content",
                   className: cn(
-                    "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-(--ds-motion-slow) ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+                    "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-(--ds-motion-slow) ease-(--ds-ease-overshoot) select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
                   ),
                   children
                 }
@@ -150,7 +150,7 @@ function DrawerHeader({ className, ...props }) {
     {
       "data-slot": "drawer-header",
       className: cn(
-        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-left",
+        "flex shrink-0 flex-col gap-0.5 p-(--ds-overlay-p) pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-left",
         className
       ),
       ...props
@@ -162,7 +162,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
+      className: cn("mt-auto flex shrink-0 flex-col gap-2 p-(--ds-overlay-p) pt-0", className),
       ...props
     }
   );
@@ -173,7 +173,7 @@ function DrawerTitle({ className, ...props }) {
     {
       "data-slot": "drawer-title",
       className: cn(
-        "text-base font-medium text-foreground",
+        "text-base font-(--ds-overlay-title-weight) text-foreground",
         className
       ),
       ...props