orbital-ds 0.7.0 → 0.9.0

package/dist/ui/dropdown-menu.js

@@ -41,7 +41,7 @@ function DropdownMenuContent({
         {
           "data-slot": "dropdown-menu-content",
           className: cn(
-            "max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-(--ds-menu-p) text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-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-closed:overflow-hidden dark:ring-foreground/10 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",
+            "max-h-(--available-height) w-(--anchor-width) 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) data-[side=bottom]:slide-in-from-top-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-closed:overflow-hidden 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
@@ -66,7 +66,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-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 not-data-[variant=destructive]: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 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function DropdownMenuCheckboxItem({
       "data-slot": "dropdown-menu-checkbox-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-(--ds-menu-item-py) pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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.5 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 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,
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
       "data-slot": "dropdown-menu-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-(--ds-menu-item-py) pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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.5 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 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,
@@ -157,7 +157,7 @@ function DropdownMenuLabel({
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
       className: cn(
-        "px-(--ds-menu-item-px) py-(--ds-menu-item-py).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
@@ -172,7 +172,7 @@ function DropdownMenuSeparator({
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-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
     }
   );
@@ -216,7 +216,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center gap-2 rounded-xl px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "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 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -236,7 +236,7 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "z-(--ds-z-overlay) min-w-36 origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover p-(--ds-menu-p) text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-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",
+        "z-(--ds-z-overlay) min-w-36 origin-(--transform-origin) overflow-hidden 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) data-[side=bottom]:slide-in-from-top-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

package/dist/ui/empty.js

@@ -7,7 +7,7 @@ function Empty({ className, ...props }) {
     {
       "data-slot": "empty",
       className: cn(
-        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance",
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-(--ds-empty-p) text-center text-balance",
         className
       ),
       ...props
@@ -30,7 +30,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+        icon: "flex size-(--ds-icon-tile-md) shrink-0 items-center justify-center rounded-(--ds-icon-tile-radius) bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
       }
     },
     defaultVariants: {
@@ -59,7 +59,7 @@ function EmptyTitle({ className, ...props }) {
     {
       "data-slot": "empty-title",
       className: cn(
-        "text-lg font-medium tracking-tight",
+        "text-lg font-medium tracking-(--ds-heading-tracking)",
         className
       ),
       ...props

package/dist/ui/field.js

@@ -101,7 +101,7 @@ function FieldLabel({
     {
       "data-slot": "field-label",
       className: cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-input/40 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-(length:--ds-ring-width) has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-(--ds-disabled-opacity) has-data-checked:border-(--ds-choice-card-border) has-data-checked:bg-(--ds-choice-card-bg) has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-(--ds-field-bg-hover) has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-(length:--ds-ring-width) has-[>[data-slot=field]]:has-[:focus-visible]:ring-(--ds-ring-color) *:data-[slot=field]:p-4",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       ),
@@ -115,7 +115,7 @@ function FieldTitle({ className, ...props }) {
     {
       "data-slot": "field-label",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-(--ds-disabled-opacity)",
         className
       ),
       ...props

package/dist/ui/hover-card.js

@@ -29,7 +29,7 @@ function HoverCardContent({
         {
           "data-slot": "hover-card-content",
           className: cn(
-            "z-(--ds-z-overlay) w-72 origin-(--transform-origin) rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-popover ring-1 ring-foreground/5 outline-hidden duration-(--ds-motion-fast) 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",
+            "z-(--ds-z-overlay) w-(--ds-hover-card-w) origin-(--transform-origin) rounded-popover bg-popover p-(--ds-popover-p) text-sm text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) outline-hidden duration-(--ds-motion-fast) 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

package/dist/ui/i18n-provider.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DsMessages } from '../lib/i18n.js';
+
+declare function DsI18nProvider({ locale, messages, dir, children, }: {
+    locale?: string | null;
+    messages?: Partial<DsMessages>;
+    dir?: "ltr" | "rtl";
+    children: React.ReactNode;
+}): React.JSX.Element;
+
+export { DsI18nProvider };

package/dist/ui/i18n-provider.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { DsMessagesContext } from "../hooks/use-ds-messages";
+import { dsDirection, dsMessagesFor } from "../lib/i18n";
+function DsI18nProvider({
+  locale,
+  messages,
+  dir,
+  children
+}) {
+  const value = React.useMemo(() => dsMessagesFor(locale, messages), [locale, messages]);
+  return /* @__PURE__ */ jsx(DirectionProvider, { direction: dir ?? dsDirection(locale), children: /* @__PURE__ */ jsx(DsMessagesContext.Provider, { value, children }) });
+}
+export {
+  DsI18nProvider
+};

package/dist/ui/icon-tile.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 declare const iconTileVariants: (props?: ({
-    tone?: "neutral" | "primary" | "accent" | "success" | "warning" | "danger" | "info" | null | undefined;
+    tone?: "info" | "success" | "warning" | "danger" | "neutral" | "primary" | "accent" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function IconTile({ className, tone, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof iconTileVariants>): React.JSX.Element;

package/dist/ui/input-group.d.ts

@@ -10,7 +10,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
     type?: "button" | "submit" | "reset";

package/dist/ui/input-group.js

@@ -12,7 +12,7 @@ function InputGroup({ className, ...props }) {
       "data-slot": "input-group",
       role: "group",
       className: cn(
-        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-control border border-input bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-(length:--ds-ring-width) has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-(length:--ds-ring-width) has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-(--ds-control-h-md) w-full min-w-0 items-center rounded-control shadow-control border border-input bg-(--ds-field-bg) transition-colors duration-(--ds-motion-snap) outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-field-multiline has-data-[align=block-start]:rounded-field-multiline has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-(length:--ds-ring-width) has-[[data-slot=input-group-control]:focus-visible]:ring-(--ds-ring-color) has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-(length:--ds-ring-width) has-[[data-slot][aria-invalid=true]]:ring-(--ds-invalid-ring) has-[textarea]:rounded-field-multiline has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       ),
       ...props
@@ -20,14 +20,14 @@ function InputGroup({ className, ...props }) {
   );
 }
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-control **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-(--ds-disabled-opacity) **:data-[slot=kbd]:rounded-control **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
-        "inline-start": "order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
-        "inline-end": "order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
-        "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3",
-        "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3"
+        "inline-start": "order-first pl-(--ds-field-px) has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-(--ds-field-px) has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start": "order-first w-full justify-start px-(--ds-field-px) pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3",
+        "block-end": "order-last w-full justify-start px-(--ds-field-px) pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3"
       }
     },
     defaultVariants: {
@@ -62,10 +62,10 @@ const inputGroupButtonVariants = cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-(--ds-control-h-xs) gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
         sm: "",
-        "icon-xs": "size-6 p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+        "icon-xs": "size-(--ds-control-h-xs) p-0 has-[>svg]:p-0",
+        "icon-sm": "size-(--ds-control-h-sm) p-0 has-[>svg]:p-0"
       }
     },
     defaultVariants: {
@@ -84,6 +84,7 @@ function InputGroupButton({
     Button,
     {
       type,
+      "data-slot": "input-group-button",
       "data-size": size,
       variant,
       className: cn(inputGroupButtonVariants({ size }), className),
@@ -95,6 +96,7 @@ function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
+      "data-slot": "input-group-text",
       className: cn(
         "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className

package/dist/ui/input-otp.js

@@ -13,7 +13,7 @@ function InputOTP({
     {
       "data-slot": "input-otp",
       containerClassName: cn(
-        "cn-input-otp flex items-center has-disabled:opacity-50",
+        "cn-input-otp flex items-center has-disabled:opacity-(--ds-disabled-opacity)",
         containerClassName
       ),
       spellCheck: false,
@@ -28,7 +28,7 @@ function InputOTPGroup({ className, ...props }) {
     {
       "data-slot": "input-otp-group",
       className: cn(
-        "flex items-center rounded-control has-aria-invalid:border-destructive has-aria-invalid:ring-(length:--ds-ring-width) has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        "flex items-center rounded-control shadow-control has-aria-invalid:border-(--ds-invalid-border) has-aria-invalid:ring-(length:--ds-ring-width) has-aria-invalid:ring-(--ds-invalid-ring)",
         className
       ),
       ...props
@@ -48,7 +48,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "relative flex size-9 items-center justify-center border-y border-r border-input bg-input/30 text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl aria-invalid:border-destructive data-[active=true]:z-(--ds-z-raised) data-[active=true]:border-ring data-[active=true]:ring-(length:--ds-ring-width) data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex size-(--ds-control-h-md) items-center justify-center border-y border-r border-input bg-(--ds-field-bg) text-sm transition-all duration-(--ds-motion-snap) outline-none first:rounded-l-control first:border-l last:rounded-r-control aria-invalid:border-(--ds-invalid-border) data-[active=true]:z-(--ds-z-raised) data-[active=true]:border-ring data-[active=true]:ring-(length:--ds-ring-width) data-[active=true]:ring-(--ds-ring-color) data-[active=true]:aria-invalid:border-(--ds-invalid-border) data-[active=true]:aria-invalid:ring-(--ds-invalid-ring)",
         className
       ),
       ...props,

package/dist/ui/input.js

@@ -7,7 +7,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-(--ds-control-h-md) w-full min-w-0 rounded-control shadow-control border border-input bg-input/30 px-(--ds-field-px) py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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",
+        "h-(--ds-control-h-md) w-full min-w-0 rounded-control shadow-control border border-input bg-(--ds-field-bg) px-(--ds-field-px) py-1 text-base transition-colors duration-(--ds-motion-snap) outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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/item.d.ts

@@ -9,7 +9,7 @@ declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">)
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "sm" | "xs" | null | undefined;
+    size?: "default" | "xs" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({

package/dist/ui/item.js

@@ -33,16 +33,16 @@ function ItemSeparator({
   );
 }
 const itemVariants = cva(
-  "group/item flex w-full flex-wrap items-center rounded-2xl border text-sm transition-colors duration-(--ds-motion-fast) outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  "group/item flex w-full flex-wrap items-center rounded-panel border text-sm transition-colors duration-(--ds-motion-fast) outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "border-transparent bg-muted/50"
+        muted: "border-transparent bg-(--ds-row-hover)"
       },
       size: {
-        default: "gap-3.5 px-4 py-3.5",
+        default: "gap-3.5 px-(--ds-item-px) py-(--ds-item-py)",
         sm: "gap-3.5 px-3.5 py-3",
         xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0"
       }

package/dist/ui/kbd.js

@@ -6,7 +6,7 @@ function Kbd({ className, ...props }) {
     {
       "data-slot": "kbd",
       className: cn(
-        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-(--ds-kbd-h) w-fit min-w-(--ds-kbd-h) items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className
       ),
       ...props

package/dist/ui/label.js

@@ -7,7 +7,7 @@ function Label({ className, ...props }) {
     {
       "data-slot": "label",
       className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-(--ds-disabled-opacity) peer-disabled:cursor-not-allowed peer-disabled:opacity-(--ds-disabled-opacity)",
         className
       ),
       ...props

package/dist/ui/marker.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const markerVariants: (props?: ({
-    variant?: "default" | "separator" | "border" | null | undefined;
+    variant?: "separator" | "default" | "border" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Marker({ className, variant, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function MarkerIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/dist/ui/marker.js

@@ -9,8 +9,8 @@ const markerVariants = cva(
     variants: {
       variant: {
         default: "",
-        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
-        border: "border-b border-border pb-2"
+        separator: "before:mr-1 before:h-(--ds-rule-w) before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-(--ds-rule-w) after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b-(length:--ds-rule-w) border-border pb-2"
       }
     }
   }

package/dist/ui/menubar.js

@@ -24,7 +24,7 @@ function Menubar({ className, ...props }) {
     MenubarPrimitive,
     {
       "data-slot": "menubar",
-      className: cn("flex h-9 items-center rounded-control border p-1", className),
+      className: cn("flex h-(--ds-control-h-md) items-center rounded-control border p-1", className),
       ...props
     }
   );
@@ -51,7 +51,7 @@ function MenubarTrigger({
     {
       "data-slot": "menubar-trigger",
       className: cn(
-        "flex items-center rounded-xl px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        "flex items-center rounded-item px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className
       ),
       ...props
@@ -72,7 +72,7 @@ function MenubarContent({
       align,
       alignOffset,
       sideOffset,
-      className: cn("min-w-48 rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) 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", className),
+      className: cn("min-w-48 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) 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", className),
       ...props
     }
   );
@@ -90,7 +90,7 @@ function MenubarItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "group/menubar-item gap-2.5 rounded-xl px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        "group/menubar-item gap-2.5 rounded-item px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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:opacity-(--ds-disabled-opacity) [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       ),
       ...props
@@ -110,7 +110,7 @@ function MenubarCheckboxItem({
       "data-slot": "menubar-checkbox-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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",
+        "relative flex cursor-default items-center gap-2.5 rounded-item py-(--ds-menu-item-py) pr-(--ds-menu-item-px) pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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",
         className
       ),
       checked,
@@ -142,7 +142,7 @@ function MenubarRadioItem({
       "data-slot": "menubar-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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.5 rounded-item py-(--ds-menu-item-py) pr-(--ds-menu-item-px) pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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,
@@ -182,7 +182,7 @@ function MenubarSeparator({
     DropdownMenuSeparator,
     {
       "data-slot": "menubar-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
     }
   );
@@ -219,7 +219,7 @@ function MenubarSubTrigger({
       "data-slot": "menubar-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "gap-2 rounded-xl px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        "gap-2 rounded-item px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -234,7 +234,7 @@ function MenubarSubContent({
     DropdownMenuSubContent,
     {
       "data-slot": "menubar-sub-content",
-      className: cn("min-w-32 rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-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("min-w-32 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) data-[side=bottom]:slide-in-from-top-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
     }
   );

package/dist/ui/message-scroller.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   MessageScroller as MessageScrollerPrimitive,
@@ -8,6 +9,7 @@ import {
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { ArrowDownIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function MessageScrollerProvider(props) {
   return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Provider, { ...props });
 }
@@ -83,6 +85,7 @@ function MessageScrollerButton({
   size = "icon-sm",
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     MessageScrollerPrimitive.Button,
     {
@@ -92,7 +95,7 @@ function MessageScrollerButton({
       "data-size": size,
       direction,
       className: cn(
-        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-(--ds-motion-base) hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-(--ds-motion-slow) data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-(--ds-motion-base) hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-(--ds-motion-slow) data-[active=false]:ease-(--ds-ease-exit) data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-(--ds-ease-enter) data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
         className
       ),
       render: render ?? /* @__PURE__ */ jsx(Button, { variant, size }),
@@ -102,7 +105,7 @@ function MessageScrollerButton({
           ArrowDownIcon,
           {}
         ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: direction === "end" ? t.scrollToEnd : t.scrollToStart })
       ] })
     }
   );

package/dist/ui/message.js

@@ -60,7 +60,7 @@ function MessageHeader({ className, ...props }) {
     {
       "data-slot": "message-header",
       className: cn(
-        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        "flex max-w-full min-w-0 items-center px-(--ds-bubble-px) text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
         className
       ),
       ...props
@@ -73,7 +73,7 @@ function MessageFooter({ className, ...props }) {
     {
       "data-slot": "message-footer",
       className: cn(
-        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        "flex max-w-full min-w-0 items-center px-(--ds-bubble-px) text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
         className
       ),
       ...props

package/dist/ui/motion-provider.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DsDuration, DsEase } from '../lib/motion.js';
+
+declare function DsMotionProvider({ children, duration, ease, reducedMotion, }: {
+    children: React.ReactNode;
+    duration?: DsDuration;
+    ease?: DsEase;
+    reducedMotion?: "user" | "always" | "never";
+}): React.JSX.Element;
+
+export { DsMotionProvider };

package/dist/ui/motion-provider.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MotionConfig } from "motion/react";
+import { useDsTransition } from "../hooks/use-ds-motion";
+function DsMotionProvider({
+  children,
+  duration = "base",
+  ease = "standard",
+  reducedMotion = "user"
+}) {
+  const { duration: d, ease: e } = useDsTransition(duration, ease);
+  return /* @__PURE__ */ jsx(MotionConfig, { transition: { duration: d, ease: e }, reducedMotion, children });
+}
+export {
+  DsMotionProvider
+};

package/dist/ui/native-select.js

@@ -10,7 +10,7 @@ function NativeSelect({
     "div",
     {
       className: cn(
-        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        "group/native-select relative w-fit has-[select:disabled]:opacity-(--ds-disabled-opacity)",
         className
       ),
       "data-slot": "native-select-wrapper",
@@ -21,7 +21,7 @@ function NativeSelect({
           {
             "data-slot": "native-select",
             "data-size": size,
-            className: "h-9 w-full min-w-0 appearance-none rounded-control border border-input bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground 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 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+            className: "h-(--ds-control-h-md) w-full min-w-0 appearance-none rounded-control shadow-control border border-input bg-(--ds-field-bg) py-1 pr-8 pl-(--ds-field-px) text-sm transition-colors duration-(--ds-motion-snap) outline-none select-none selection:bg-primary selection:text-primary-foreground 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 aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) data-[size=sm]:h-(--ds-control-h-sm) dark:hover:bg-(--ds-field-bg-hover)",
             ...props
           }
         ),
@@ -38,7 +38,7 @@ function NativeSelectOption({
     "option",
     {
       "data-slot": "native-select-option",
-      className: cn("bg-[Canvas] text-[CanvasText]", className),
+      className: cn("bg-popover text-popover-foreground", className),
       ...props
     }
   );
@@ -51,7 +51,7 @@ function NativeSelectOptGroup({
     "optgroup",
     {
       "data-slot": "native-select-optgroup",
-      className: cn("bg-[Canvas] text-[CanvasText]", className),
+      className: cn("bg-popover text-popover-foreground", className),
       ...props
     }
   );