@evinvest/uikit 0.31.0 → 0.33.0

package/dist/components/{tabs.js → atomic/tabs.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { useRovingFocus } from "../primitives/use-roving-focus.js";
-import { TABS_ROOT, TABS_LIST, TABS_TRIGGER, TABS_CONTENT } from "../generated/tabs.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { useRovingFocus } from "../../primitives/use-roving-focus.js";
+import { TABS_ROOT, TABS_LIST, TABS_TRIGGER, TABS_CONTENT } from "../../generated/tabs.js";
 const TabsContext = React.createContext(null);
 function useTabs() {
   const ctx = React.useContext(TabsContext);

package/dist/components/atomic/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useRovingFocus } from \"../../primitives/use-roving-focus\";\nimport { TABS_ROOT, TABS_LIST, TABS_TRIGGER, TABS_CONTENT } from \"../../generated/tabs\";\nimport type { Orientation } from \"../../generated/orientation\";\n\n\ninterface TabsContextValue {\n  value: string;\n  setValue: (next: string) => void;\n  orientation: Orientation;\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nfunction useTabs(): TabsContextValue {\n  const ctx = React.useContext(TabsContext);\n  if (!ctx) throw new Error(\"Tabs parts must be used within <Tabs>\");\n  return ctx;\n}\n\nexport interface TabsProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  orientation?: Orientation;\n}\n\nexport function Tabs({\n  className,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: TabsProps) {\n  const [active, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  return (\n    <TabsContext.Provider value={{ value: active, setValue, orientation }}>\n      <div\n        data-slot=\"tabs\"\n        data-orientation={orientation}\n        className={cn(TABS_ROOT, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport function TabsList({\n  className,\n  children,\n  onKeyDown,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { orientation } = useTabs();\n  const items = React.Children.toArray(children);\n  const { activeIndex, setActiveIndex, onKeyDown: rovingKeyDown } =\n    useRovingFocus({\n      count: items.length,\n      orientation: orientation === \"vertical\" ? \"vertical\" : \"horizontal\",\n    });\n  return (\n    <div\n      role=\"tablist\"\n      data-slot=\"tabs-list\"\n      aria-orientation={orientation}\n      className={cn(TABS_LIST, className)}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        rovingKeyDown(e);\n      }}\n      {...props}\n    >\n      {items.map((child, index) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child as React.ReactElement<TabsTriggerInternal>, {\n              __index: index,\n              __isFocusItem: index === activeIndex,\n              __onFocusItem: () => setActiveIndex(index),\n            })\n          : child,\n      )}\n    </div>\n  );\n}\n\ninterface TabsTriggerInternal {\n  __index?: number;\n  __isFocusItem?: boolean;\n  __onFocusItem?: () => void;\n}\n\nexport interface TabsTriggerProps\n  extends React.ComponentProps<\"button\">,\n    TabsTriggerInternal {\n  value: string;\n}\n\nexport function TabsTrigger({\n  className,\n  value,\n  onClick,\n  onFocus,\n  __isFocusItem,\n  __onFocusItem,\n  ...props\n}: TabsTriggerProps) {\n  const { value: active, setValue } = useTabs();\n  const selected = active === value;\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      data-slot=\"tabs-trigger\"\n      data-state={selected ? \"active\" : \"inactive\"}\n      aria-selected={selected}\n      tabIndex={__isFocusItem ? 0 : -1}\n      className={cn(TABS_TRIGGER, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        __onFocusItem?.();\n        setValue(value);\n      }}\n      onFocus={(e) => {\n        onFocus?.(e);\n        __onFocusItem?.();\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsContentProps extends React.ComponentProps<\"div\"> {\n  value: string;\n}\n\nexport function TabsContent({\n  className,\n  value,\n  children,\n  ...props\n}: TabsContentProps) {\n  const { value: active } = useTabs();\n  if (active !== value) return null;\n  return (\n    <div\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      data-state=\"active\"\n      className={cn(TABS_CONTENT, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{textarea.js → atomic/textarea.js}

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { TEXTAREA_BASE, textareaSizeClasses } from "../generated/textarea.js";
-import { markLabelable } from "../primitives/labelable.js";
+import { cn } from "../../lib/cn.js";
+import { TEXTAREA_BASE, textareaSizeClasses } from "../../generated/textarea.js";
+import { markLabelable } from "../../primitives/labelable.js";
 import { useFieldControlId } from "./field-context.js";
 function Textarea({ className, id, size = "md", ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/components/atomic/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { TEXTAREA_BASE, textareaSizeClasses, type TextareaSize } from \"../../generated/textarea\";\nimport { markLabelable } from \"../../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { TextareaSize };\n\nexport interface TextareaProps extends React.ComponentProps<\"textarea\"> {\n  size?: TextareaSize;\n}\n\nexport function Textarea({ className, id, size = \"md\", ...props }: TextareaProps) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      data-size={size}\n      id={useFieldControlId(id)}\n      className={cn(TEXTAREA_BASE, textareaSizeClasses[size], className)}\n      {...props}\n    />\n  );\n}\n\nmarkLabelable(Textarea);\n"],"mappings":";AAgBI;AAdJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe,2BAA8C;AACtE,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAQ3B,SAAS,SAAS,EAAE,WAAW,IAAI,OAAO,MAAM,GAAG,MAAM,GAAkB;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,IAAI,kBAAkB,EAAE;AAAA,MACxB,WAAW,GAAG,eAAe,oBAAoB,IAAI,GAAG,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,QAAQ;","names":[]}

package/dist/components/{toggle-group.js → atomic/toggle-group.js}

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   toggleVariants
 } from "./toggle.js";
@@ -52,7 +52,7 @@ function ToggleGroup({
       "data-variant": variant,
       "data-size": size,
       className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        "group/toggle-group flex w-fit items-center rounded-control data-[variant=outline]:shadow-xs",
         className
       ),
       ...props,
@@ -86,7 +86,7 @@ function ToggleGroupItem({
         toggleVariants({ variant: resolvedVariant, size: resolvedSize }),
         // `flex-auto`, not shadcn's `flex-1`: the group is `w-fit`, and basis-0 items
         // make Chrome split it into equal columns, so a longer label overflows its cell.
-        "min-w-0 flex-auto shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:-ml-px data-[variant=outline]:first:ml-0 data-[state=on]:z-10",
+        "min-w-0 flex-auto shrink-0 rounded-none shadow-none first:rounded-l-control last:rounded-r-control focus:z-10 focus-visible:z-10 data-[variant=outline]:-ml-px data-[variant=outline]:first:ml-0 data-[state=on]:z-10",
         className
       ),
       onClick: (e) => {

package/dist/components/atomic/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  toggleVariants,\n  type ToggleVariant,\n  type ToggleSize,\n} from \"./toggle\";\nimport type { ToggleGroupType } from \"../../generated/toggle-group\";\n\ntype ToggleGroupContextValue = {\n  variant: ToggleVariant;\n  size: ToggleSize;\n  value: string[];\n  toggle: (itemValue: string) => void;\n};\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue>({\n  variant: \"bare\",\n  size: \"md\",\n  value: [],\n  toggle: () => {},\n});\n\nexport interface ToggleGroupProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  type?: ToggleGroupType;\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n}\n\nfunction toArray(v: string | string[] | undefined): string[] {\n  if (v === undefined) return [];\n  return Array.isArray(v) ? v : v === \"\" ? [] : [v];\n}\n\nexport function ToggleGroup({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  type = \"single\",\n  value,\n  defaultValue,\n  onValueChange,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  const [selected, setSelected] = useControllableState<string[]>({\n    ...(value !== undefined ? { value: toArray(value) } : {}),\n    defaultValue: toArray(defaultValue),\n    onChange: (next) =>\n      onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next),\n  });\n\n  const toggle = React.useCallback(\n    (itemValue: string) => {\n      if (type === \"single\") {\n        setSelected(selected.includes(itemValue) ? [] : [itemValue]);\n      } else {\n        setSelected(\n          selected.includes(itemValue)\n            ? selected.filter((v) => v !== itemValue)\n            : [...selected, itemValue],\n        );\n      }\n    },\n    [type, selected, setSelected],\n  );\n\n  return (\n    <div\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-control data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, value: selected, toggle }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </div>\n  );\n}\n\nexport interface ToggleGroupItemProps\n  extends Omit<React.ComponentProps<\"button\">, \"value\" | \"onChange\"> {\n  value: string;\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n}\n\nexport function ToggleGroupItem({\n  className,\n  children,\n  value,\n  variant,\n  size,\n  onClick,\n  ...props\n}: ToggleGroupItemProps) {\n  const context = React.useContext(ToggleGroupContext);\n  const resolvedVariant = context.variant || variant || \"bare\";\n  const resolvedSize = context.size || size || \"md\";\n  const on = context.value.includes(value);\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"toggle-group-item\"\n      data-variant={resolvedVariant}\n      data-size={resolvedSize}\n      data-state={on ? \"on\" : \"off\"}\n      aria-pressed={on}\n      className={cn(\n        toggleVariants({ variant: resolvedVariant, size: resolvedSize }),\n        // `flex-auto`, not shadcn's `flex-1`: the group is `w-fit`, and basis-0 items\n        // make Chrome split it into equal columns, so a longer label overflows its cell.\n        \"min-w-0 flex-auto shrink-0 rounded-none shadow-none first:rounded-l-control last:rounded-r-control focus:z-10 focus-visible:z-10 data-[variant=outline]:-ml-px data-[variant=outline]:first:ml-0 data-[state=on]:z-10\",\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        context.toggle(value);\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";AAqFM;AAnFN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,OAGK;AAUP,MAAM,qBAAqB,MAAM,cAAuC;AAAA,EACtE,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO,CAAC;AAAA,EACR,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC;AAYD,SAAS,QAAQ,GAA4C;AAC3D,MAAI,MAAM,OAAW,QAAO,CAAC;AAC7B,SAAO,MAAM,QAAQ,CAAC,IAAI,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC;AAClD;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,UAAU,WAAW,IAAI,qBAA+B;AAAA,IAC7D,GAAI,UAAU,SAAY,EAAE,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC;AAAA,IACvD,cAAc,QAAQ,YAAY;AAAA,IAClC,UAAU,CAAC,SACT,gBAAgB,SAAS,WAAY,KAAK,CAAC,KAAK,KAAM,IAAI;AAAA,EAC9D,CAAC;AAED,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,cAAsB;AACrB,UAAI,SAAS,UAAU;AACrB,oBAAY,SAAS,SAAS,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,MAC7D,OAAO;AACL;AAAA,UACE,SAAS,SAAS,SAAS,IACvB,SAAS,OAAO,CAAC,MAAM,MAAM,SAAS,IACtC,CAAC,GAAG,UAAU,SAAS;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,WAAW;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,MAAM,OAAO,UAAU,OAAO,GAC1E,UACH;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,kBAAkB,QAAQ,WAAW,WAAW;AACtD,QAAM,eAAe,QAAQ,QAAQ,QAAQ;AAC7C,QAAM,KAAK,QAAQ,MAAM,SAAS,KAAK;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,cAAY,KAAK,OAAO;AAAA,MACxB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,iBAAiB,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,QAG/D;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,gBAAQ,OAAO,KAAK;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/{toggle.js → atomic/toggle.js}

@@ -1,19 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import {
-  TOGGLE_BASE,
-  toggleSizeClasses,
-  toggleVariantClasses
-} from "../generated/toggle.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { sizeClasses } from "../../generated/size.js";
+import { TOGGLE_BASE, toggleVariantClasses } from "../../generated/toggle.js";
 function toggleVariants({
   variant = "bare",
   size = "md",
   className
 } = {}) {
-  return cn(TOGGLE_BASE, toggleVariantClasses[variant], toggleSizeClasses[size], className);
+  return cn(TOGGLE_BASE, toggleVariantClasses[variant], sizeClasses[size], className);
 }
 function Toggle({
   className,

package/dist/components/atomic/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { sizeClasses, type Size } from \"../../generated/size\";\nimport { TOGGLE_BASE, toggleVariantClasses, type ToggleVariant } from \"../../generated/toggle\";\n\nexport type ToggleSize = Size;\nexport type { ToggleVariant };\n\nexport interface ToggleVariantsOptions {\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  className?: string;\n}\n\n/**\n * Returns the fused canonical toggle class string. Reused by `toggle-group` so\n * its items adopt the same styling, mirroring Rust's `toggle_classes`.\n */\nexport function toggleVariants({\n  variant = \"bare\",\n  size = \"md\",\n  className,\n}: ToggleVariantsOptions = {}): string {\n  return cn(TOGGLE_BASE, toggleVariantClasses[variant], sizeClasses[size], className);\n}\n\nexport interface ToggleProps\n  extends Omit<React.ComponentProps<\"button\">, \"onChange\"> {\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n}\n\nexport function Toggle({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  onClick,\n  ...props\n}: ToggleProps) {\n  const [on, setOn] = useControllableState<boolean>({\n    ...(pressed !== undefined ? { value: pressed } : {}),\n    defaultValue: defaultPressed,\n    ...(onPressedChange ? { onChange: onPressedChange } : {}),\n  });\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"toggle\"\n      data-state={on ? \"on\" : \"off\"}\n      aria-pressed={on}\n      className={cn(toggleVariants({ variant, size }), className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOn(!on);\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAsDI;AApDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAA8B;AACvC,SAAS,aAAa,4BAAgD;AAe/D,SAAS,eAAe;AAAA,EAC7B,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,IAA2B,CAAC,GAAW;AACrC,SAAO,GAAG,aAAa,qBAAqB,OAAO,GAAG,YAAY,IAAI,GAAG,SAAS;AACpF;AAWO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,CAAC,IAAI,KAAK,IAAI,qBAA8B;AAAA,IAChD,GAAI,YAAY,SAAY,EAAE,OAAO,QAAQ,IAAI,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,GAAI,kBAAkB,EAAE,UAAU,gBAAgB,IAAI,CAAC;AAAA,EACzD,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,KAAK,OAAO;AAAA,MACxB,gBAAc;AAAA,MACd,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MAC1D,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,cAAM,CAAC,EAAE;AAAA,MACX;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{tooltip.js → atomic/tooltip.js}

@@ -1,14 +1,14 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
-import { useFloating } from "../primitives/use-floating.js";
-import { usePresence } from "../primitives/presence.js";
-import { mergeRefs } from "../primitives/merge-refs.js";
-import { Portal } from "../primitives/portal.js";
-import { Slot } from "../primitives/slot.js";
-import { TOOLTIP_CONTENT } from "../generated/tooltip.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { useFloating } from "../../primitives/use-floating.js";
+import { usePresence } from "../../primitives/presence.js";
+import { mergeRefs } from "../../primitives/merge-refs.js";
+import { Portal } from "../../primitives/portal.js";
+import { Slot } from "../../primitives/slot.js";
+import { TOOLTIP_CONTENT } from "../../generated/tooltip.js";
 const TooltipContext = React.createContext(null);
 function useTooltip() {
   const ctx = React.useContext(TooltipContext);

package/dist/components/atomic/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useFloating } from \"../../primitives/use-floating\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport { TOOLTIP_CONTENT } from \"../../generated/tooltip\";\nimport type { Side } from \"../../generated/primitives\";\n\ninterface TooltipContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst TooltipContext = React.createContext<TooltipContextValue | null>(null);\n\nfunction useTooltip(): TooltipContextValue {\n  const ctx = React.useContext(TooltipContext);\n  if (!ctx) throw new Error(\"Tooltip parts must be used within <Tooltip>\");\n  return ctx;\n}\n\nexport interface TooltipProviderProps {\n  children?: React.ReactNode;\n}\n\nexport function TooltipProvider({ children }: TooltipProviderProps) {\n  return <>{children}</>;\n}\n\nexport interface TooltipProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Tooltip({ open, defaultOpen = false, onOpenChange, children }: TooltipProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <TooltipProvider>\n      <TooltipContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n        {children}\n      </TooltipContext.Provider>\n    </TooltipProvider>\n  );\n}\n\nexport interface TooltipTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function TooltipTrigger({\n  asChild = false,\n  onPointerEnter,\n  onPointerLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: TooltipTriggerProps) {\n  const { setOpen, anchorRef } = useTooltip();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"tooltip-trigger\"\n      ref={anchorRef as React.Ref<never>}\n      onPointerEnter={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerEnter?.(e);\n        setOpen(true);\n      }}\n      onPointerLeave={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerLeave?.(e);\n        setOpen(false);\n      }}\n      onFocus={(e: React.FocusEvent<HTMLButtonElement>) => {\n        onFocus?.(e);\n        setOpen(true);\n      }}\n      onBlur={(e: React.FocusEvent<HTMLButtonElement>) => {\n        onBlur?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface TooltipContentProps extends React.ComponentProps<\"div\"> {\n  side?: Side;\n  sideOffset?: number;\n}\n\nexport function TooltipContent({\n  className,\n  side: sideProp = \"top\",\n  sideOffset = 0,\n  children,\n  ...props\n}: TooltipContentProps) {\n  const { open, anchorRef } = useTooltip();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    offset: sideOffset,\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        data-slot=\"tooltip-content\"\n        role=\"tooltip\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        ref={mergeRefs(floatingRef, presRef)}\n        style={style}\n        className={cn(TOOLTIP_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":";AAgCS;AA9BT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAShC,MAAM,iBAAiB,MAAM,cAA0C,IAAI;AAE3E,SAAS,aAAkC;AACzC,QAAM,MAAM,MAAM,WAAW,cAAc;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6CAA6C;AACvE,SAAO;AACT;AAMO,SAAS,gBAAgB,EAAE,SAAS,GAAyB;AAClE,SAAO,gCAAG,UAAS;AACrB;AASO,SAAS,QAAQ,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAiB;AAC3F,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,YAAY,MAAM,OAA2B,IAAI;AACvD,SACE,oBAAC,mBACC,8BAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,GAChE,UACH,GACF;AAEJ;AAMO,SAAS,eAAe;AAAA,EAC7B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,SAAS,UAAU,IAAI,WAAW;AAC1C,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,KAAK;AAAA,MACL,gBAAgB,CAAC,MAA6C;AAC5D,yBAAiB,CAAC;AAClB,gBAAQ,IAAI;AAAA,MACd;AAAA,MACA,gBAAgB,CAAC,MAA6C;AAC5D,yBAAiB,CAAC;AAClB,gBAAQ,KAAK;AAAA,MACf;AAAA,MACA,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,IAAI;AAAA,MACd;AAAA,MACA,QAAQ,CAAC,MAA2C;AAClD,iBAAS,CAAC;AACV,gBAAQ,KAAK;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,UAAU,IAAI,WAAW;AACvC,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,CAAC;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,OAAO,SAAS;AAAA,MAC5B,aAAW;AAAA,MACX,KAAK,UAAU,aAAa,OAAO;AAAA,MACnC;AAAA,MACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/components/{use-count-tween.js → atomic/use-count-tween.js}

@@ -1,6 +1,6 @@
 "use client";
 import * as React from "react";
-import { useReducedMotion } from "../primitives/use-reduced-motion.js";
+import { useReducedMotion } from "../../primitives/use-reduced-motion.js";
 const easeOutCubic = (p) => 1 - (1 - p) ** 3;
 function useCountTween(value, options = {}) {
   const { duration = 800, easing = easeOutCubic, from = 0, animateOnMount = false } = options;

package/dist/components/atomic/use-count-tween.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atomic/use-count-tween.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useReducedMotion } from \"../../primitives/use-reduced-motion\";\n\nexport interface CountTweenOptions {\n  /** Milliseconds from the old value to the new one. Default `800`. */\n  duration?: number;\n  /** Maps progress 0..1 to eased progress 0..1. Default ease-out cubic. */\n  easing?: (progress: number) => number;\n  /** Count up from here on the first render. Default `0`; only read with `animateOnMount`. */\n  from?: number;\n  /** Tween on the first render too. Off by default so the server markup is the final value. */\n  animateOnMount?: boolean;\n}\n\nconst easeOutCubic = (p: number): number => 1 - (1 - p) ** 3;\n\n/**\n * The number a count-up is showing right now, for custom renderers (charts,\n * labels). It returns `value` itself on the first render and whenever nothing\n * is in flight, so a server render prints the final figure. A new `value`\n * mid-flight restarts from what is on screen. Reduced motion returns `value`\n * with no frames at all.\n */\nexport function useCountTween(value: number, options: CountTweenOptions = {}): number {\n  const { duration = 800, easing = easeOutCubic, from = 0, animateOnMount = false } = options;\n  const reduced = useReducedMotion();\n  const [shown, setShown] = React.useState(value);\n  // The frame loop reads the on-screen value without being a dependency of itself.\n  const onScreen = React.useRef(value);\n  const mounted = React.useRef(false);\n  const easingRef = React.useRef(easing);\n  easingRef.current = easing;\n\n  React.useLayoutEffect(() => {\n    const first = !mounted.current;\n    mounted.current = true;\n    const start = first ? (animateOnMount ? from : value) : onScreen.current;\n    const paint = (v: number) => {\n      onScreen.current = v;\n      setShown(v);\n    };\n    if (reduced || duration <= 0 || start === value || !Number.isFinite(start) || !Number.isFinite(value)) {\n      paint(value);\n      return;\n    }\n    paint(start);\n    let frame = 0;\n    let t0: number | null = null;\n    const tick = (now: number) => {\n      t0 ??= now;\n      const p = Math.min(1, (now - t0) / duration);\n      paint(p >= 1 ? value : start + (value - start) * easingRef.current(p));\n      if (p < 1) frame = requestAnimationFrame(tick);\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }, [value, duration, reduced, animateOnMount, from]);\n\n  return reduced ? value : shown;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,wBAAwB;AAajC,MAAM,eAAe,CAAC,MAAsB,KAAK,IAAI,MAAM;AASpD,SAAS,cAAc,OAAe,UAA6B,CAAC,GAAW;AACpF,QAAM,EAAE,WAAW,KAAK,SAAS,cAAc,OAAO,GAAG,iBAAiB,MAAM,IAAI;AACpF,QAAM,UAAU,iBAAiB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAE9C,QAAM,WAAW,MAAM,OAAO,KAAK;AACnC,QAAM,UAAU,MAAM,OAAO,KAAK;AAClC,QAAM,YAAY,MAAM,OAAO,MAAM;AACrC,YAAU,UAAU;AAEpB,QAAM,gBAAgB,MAAM;AAC1B,UAAM,QAAQ,CAAC,QAAQ;AACvB,YAAQ,UAAU;AAClB,UAAM,QAAQ,QAAS,iBAAiB,OAAO,QAAS,SAAS;AACjE,UAAM,QAAQ,CAAC,MAAc;AAC3B,eAAS,UAAU;AACnB,eAAS,CAAC;AAAA,IACZ;AACA,QAAI,WAAW,YAAY,KAAK,UAAU,SAAS,CAAC,OAAO,SAAS,KAAK,KAAK,CAAC,OAAO,SAAS,KAAK,GAAG;AACrG,YAAM,KAAK;AACX;AAAA,IACF;AACA,UAAM,KAAK;AACX,QAAI,QAAQ;AACZ,QAAI,KAAoB;AACxB,UAAM,OAAO,CAAC,QAAgB;AAC5B,aAAO;AACP,YAAM,IAAI,KAAK,IAAI,IAAI,MAAM,MAAM,QAAQ;AAC3C,YAAM,KAAK,IAAI,QAAQ,SAAS,QAAQ,SAAS,UAAU,QAAQ,CAAC,CAAC;AACrE,UAAI,IAAI,EAAG,SAAQ,sBAAsB,IAAI;AAAA,IAC/C;AACA,YAAQ,sBAAsB,IAAI;AAClC,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,OAAO,UAAU,SAAS,gBAAgB,IAAI,CAAC;AAEnD,SAAO,UAAU,QAAQ;AAC3B;","names":[]}

package/dist/components/{animated-number.js → derived/animated-number.js}

@@ -1,16 +1,16 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import {
   digitGlyphs,
   mergeItems,
   resolveDirection,
   splitNumber
-} from "../lib/number-parts.js";
-import { useReducedMotion } from "../primitives/use-reduced-motion.js";
-import { EDGE_MS, SPIN_MS, Slot } from "./animated-number-columns.js";
-import { useCountTween } from "./use-count-tween.js";
+} from "../../lib/number-parts.js";
+import { useReducedMotion } from "../../primitives/use-reduced-motion.js";
+import { EDGE_MS, SPIN_MS, Slot } from "../atomic/animated-number-columns.js";
+import { useCountTween } from "../atomic/use-count-tween.js";
 function AnimatedNumber({
   value,
   format,

package/dist/components/derived/animated-number.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/animated-number.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  digitGlyphs,\n  mergeItems,\n  resolveDirection,\n  splitNumber,\n  type NumberItem,\n  type RollDirection,\n} from \"../../lib/number-parts\";\nimport { useReducedMotion } from \"../../primitives/use-reduced-motion\";\nimport { EDGE_MS, SPIN_MS, Slot } from \"../atomic/animated-number-columns\";\nimport { useCountTween } from \"../atomic/use-count-tween\";\n\nexport interface AnimatedNumberProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\" | \"prefix\"> {\n  value: number;\n  /** Passed to `Intl.NumberFormat`: currency, percent, compact, `signDisplay`... */\n  format?: Intl.NumberFormatOptions;\n  locales?: Intl.LocalesArgument;\n  /** `roll`: digit columns spin. `count`: the number is tweened and re-formatted each frame. Default `roll`. */\n  mode?: \"roll\" | \"count\";\n  /**\n   * Roll only. `1` every column spins up, `-1` down, `0` each column takes its\n   * shorter way. Default: up when the value rose, down when it fell.\n   */\n  trend?: RollDirection;\n  /** Milliseconds one change takes: the spin in `roll` (default 750), the whole tween in `count` (default 800). */\n  duration?: number;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  /** Announce each new value politely. Off by default: a ticker would talk over the page. */\n  live?: boolean;\n  /** Animate the first render from `from`. The server markup still prints `value`. */\n  animateOnMount?: boolean;\n  /** The first-render start with `animateOnMount`. Default `0`. */\n  from?: number;\n}\n\n/**\n * A number that animates when `value` changes. `roll` (default) spins each\n * digit column like an odometer; `count` tweens the number itself. Both format\n * with `Intl.NumberFormat`, inherit font and colour, and swap instantly under\n * `prefers-reduced-motion`. The final formatted value is in the DOM once, as\n * text for assistive tech and for copying; the moving glyphs are `aria-hidden`.\n */\nexport function AnimatedNumber({\n  value,\n  format,\n  locales,\n  mode = \"roll\",\n  trend,\n  duration,\n  prefix,\n  suffix,\n  live = false,\n  animateOnMount = false,\n  from = 0,\n  className,\n  style,\n  ...props\n}: AnimatedNumberProps) {\n  // Callers pass `format` inline; keying on its content keeps one formatter per distinct options.\n  const formatKey = JSON.stringify(format ?? null);\n  const localeKey = Array.isArray(locales) ? locales.join(\",\") : String(locales ?? \"\");\n  const formatter = React.useMemo(\n    () => new Intl.NumberFormat(locales, format),\n    [localeKey, formatKey],\n  );\n  const text = formatter.format(value);\n  return (\n    <span\n      data-slot=\"animated-number\"\n      data-mode={mode}\n      className={cn(\"relative inline-flex items-baseline tabular-nums\", className)}\n      style={style}\n      {...props}\n    >\n      {prefix}\n      <span\n        data-slot=\"animated-number-text\"\n        className=\"sr-only\"\n        aria-live={live ? \"polite\" : undefined}\n        aria-atomic={live ? true : undefined}\n      >\n        {text}\n      </span>\n      <span aria-hidden className=\"inline-flex select-none items-baseline\">\n        {mode === \"count\" ? (\n          <CountView\n            value={value}\n            formatter={formatter}\n            from={from}\n            animateOnMount={animateOnMount}\n            {...(duration === undefined ? {} : { duration })}\n          />\n        ) : (\n          <RollView\n            value={value}\n            formatter={formatter}\n            from={from}\n            animateOnMount={animateOnMount}\n            spin={duration ?? SPIN_MS}\n            {...(trend === undefined ? {} : { trend })}\n          />\n        )}\n      </span>\n      {suffix}\n    </span>\n  );\n}\n\ninterface CountViewProps {\n  value: number;\n  formatter: Intl.NumberFormat;\n  from: number;\n  animateOnMount: boolean;\n  duration?: number;\n}\n\nfunction CountView({ value, formatter, from, animateOnMount, duration }: CountViewProps) {\n  const shown = useCountTween(value, {\n    from,\n    animateOnMount,\n    ...(duration === undefined ? {} : { duration }),\n  });\n  return <span>{formatter.format(shown)}</span>;\n}\n\ninterface RollState {\n  formatter: Intl.NumberFormat;\n  value: number;\n  direction: RollDirection;\n  items: NumberItem[];\n}\n\ninterface RollViewProps {\n  value: number;\n  formatter: Intl.NumberFormat;\n  trend?: RollDirection;\n  spin: number;\n  from: number;\n  animateOnMount: boolean;\n}\n\n// With `animateOnMount` the first client commit shows `from` and the value\n// arrives two frames later: one frame is not enough for the browser to have\n// painted `from` and so have a start for the transition.\nfunction useMountLead(enabled: boolean): boolean {\n  const [lead, setLead] = React.useState(false);\n  const started = React.useRef(false);\n  React.useLayoutEffect(() => {\n    if (!enabled || started.current) return;\n    started.current = true;\n    setLead(true);\n    let inner = 0;\n    const outer = requestAnimationFrame(() => {\n      inner = requestAnimationFrame(() => setLead(false));\n    });\n    return () => {\n      cancelAnimationFrame(outer);\n      cancelAnimationFrame(inner);\n      started.current = false;\n      setLead(false);\n    };\n  }, [enabled]);\n  return lead;\n}\n\nfunction RollView({ value, formatter, trend, spin, from, animateOnMount }: RollViewProps) {\n  const motion = !useReducedMotion();\n  const lead = useMountLead(animateOnMount && motion);\n  const target = lead ? from : value;\n  const glyphs = React.useMemo(() => digitGlyphs(formatter), [formatter]);\n  const [state, setState] = React.useState<RollState>(() => ({\n    formatter,\n    value: target,\n    direction: 0,\n    items: splitNumber(formatter, target, glyphs).map((part) => ({ part, exiting: false, fresh: false })),\n  }));\n\n  let current = state;\n  if (state.formatter !== formatter || state.value !== target) {\n    const sameFormat = state.formatter === formatter;\n    // `lead` is a jump to `from`, not a change the reader should watch.\n    const animate = motion && sameFormat && !lead;\n    current = {\n      formatter,\n      value: target,\n      direction: sameFormat ? resolveDirection(trend, state.value, target) : 0,\n      items: mergeItems(state.items, splitNumber(formatter, target, glyphs), animate),\n    };\n    setState(current);\n  }\n\n  const leaving = current.items.some((item) => item.exiting);\n  React.useEffect(() => {\n    if (!leaving) return;\n    const id = setTimeout(\n      () => setState((s) => ({ ...s, items: s.items.filter((item) => !item.exiting) })),\n      EDGE_MS + 50,\n    );\n    return () => clearTimeout(id);\n  }, [leaving, current.items]);\n\n  return (\n    <>\n      {current.items.map((item) => (\n        <Slot\n          key={item.part.key}\n          item={item}\n          glyphs={glyphs}\n          direction={current.direction}\n          motion={motion}\n          spin={spin}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{carousel.js → derived/carousel.js}

@@ -1,9 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Button } from "./button.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../atomic/button.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   CAROUSEL_CONTENT_TRACK,
   CAROUSEL_CONTENT_TRACK_HORIZONTAL,
@@ -19,7 +19,9 @@ import {
   CAROUSEL_NEXT_VERTICAL,
   CAROUSEL_PREVIOUS_HORIZONTAL,
   CAROUSEL_PREVIOUS_VERTICAL
-} from "../generated/carousel.js";
+} from "../../generated/carousel.js";
+import * as copy from "../../generated/copy.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 const CarouselContext = React.createContext(null);
 function useCarousel() {
   const context = React.useContext(CarouselContext);
@@ -176,7 +178,6 @@ function CarouselPrevious({
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      "data-slot": "carousel-previous",
       variant,
       size,
       icon,
@@ -200,10 +201,10 @@ function CarouselPrevious({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+            children: iconShapes("chevron-left")
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: copy.CAROUSEL_PREVIOUS })
       ]
     }
   );
@@ -219,7 +220,6 @@ function CarouselNext({
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      "data-slot": "carousel-next",
       variant,
       size,
       icon,
@@ -243,10 +243,10 @@ function CarouselNext({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+            children: iconShapes("chevron-right")
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: copy.CAROUSEL_NEXT })
       ]
     }
   );

package/dist/components/derived/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button, type ButtonProps } from \"../atomic/button\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  CAROUSEL_CONTENT_TRACK,\n  CAROUSEL_CONTENT_TRACK_HORIZONTAL,\n  CAROUSEL_CONTENT_TRACK_VERTICAL,\n  CAROUSEL_CONTENT_VIEWPORT,\n  CAROUSEL_EDGE_FADE_NEXT,\n  CAROUSEL_EDGE_FADE_PREV,\n  CAROUSEL_ITEM,\n  CAROUSEL_ITEM_HORIZONTAL,\n  CAROUSEL_ITEM_VERTICAL,\n  CAROUSEL_NAV,\n  CAROUSEL_NEXT_HORIZONTAL,\n  CAROUSEL_NEXT_VERTICAL,\n  CAROUSEL_PREVIOUS_HORIZONTAL,\n  CAROUSEL_PREVIOUS_VERTICAL,\n} from \"../../generated/carousel\";\nimport type { Orientation } from \"../../generated/orientation\";\nimport * as copy from \"../../generated/copy\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\n\ntype CarouselContextProps = {\n  orientation: Orientation;\n  index: number;\n  count: number;\n  setCount: (count: number) => void;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n};\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n  return context;\n}\n\nexport interface CarouselProps extends React.ComponentProps<\"div\"> {\n  orientation?: Orientation;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n}\n\nexport function Carousel({\n  orientation = \"horizontal\",\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  className,\n  children,\n  onKeyDown,\n  ...props\n}: CarouselProps) {\n  const [index, setIndex] = useControllableState<number>({\n    value: indexProp,\n    defaultValue: defaultIndex,\n    onChange: onIndexChange,\n  });\n  const [count, setCount] = React.useState(0);\n\n  const canScrollPrev = index > 0;\n  const canScrollNext = index < count - 1;\n\n  const scrollPrev = React.useCallback(() => {\n    if (index > 0) setIndex(index - 1);\n  }, [index, setIndex]);\n\n  const scrollNext = React.useCallback(() => {\n    if (index < count - 1) setIndex(index + 1);\n  }, [index, count, setIndex]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      scrollPrev();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      scrollNext();\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        orientation,\n        index,\n        count,\n        setCount,\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        tabIndex={0}\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\nexport function CarouselContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { orientation, index, setCount } = useCarousel();\n  const childCount = React.Children.count(children);\n\n  React.useEffect(() => {\n    setCount(childCount);\n  }, [childCount, setCount]);\n\n  // drag/momentum: omitted vs embla — see README Limitations\n  const transform =\n    orientation === \"horizontal\"\n      ? `translate3d(-${index * 100}%, 0, 0)`\n      : `translate3d(0, -${index * 100}%, 0)`;\n\n  return (\n    <div className={CAROUSEL_CONTENT_VIEWPORT} data-slot=\"carousel-content\">\n      <div\n        className={cn(\n          CAROUSEL_CONTENT_TRACK,\n          orientation === \"horizontal\"\n            ? CAROUSEL_CONTENT_TRACK_HORIZONTAL\n            : CAROUSEL_CONTENT_TRACK_VERTICAL,\n          className,\n        )}\n        style={{ transform }}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselItem({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        CAROUSEL_ITEM,\n        orientation === \"horizontal\" ? CAROUSEL_ITEM_HORIZONTAL : CAROUSEL_ITEM_VERTICAL,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Netflix-style edge scrims that dissolve the current slide into the surface\n * colour, signalling adjacent slides without revealing them. Each side shows\n * only when there is somewhere to scroll. Drop inside a <Carousel>.\n */\nexport function CarouselEdgeFade({\n  className,\n}: {\n  className?: string;\n}) {\n  const { canScrollPrev, canScrollNext } = useCarousel();\n\n  return (\n    <>\n      <div\n        aria-hidden\n        className={cn(\n          CAROUSEL_EDGE_FADE_PREV,\n          canScrollPrev ? \"opacity-100\" : \"opacity-0\",\n          className,\n        )}\n      />\n      <div\n        aria-hidden\n        className={cn(\n          CAROUSEL_EDGE_FADE_NEXT,\n          canScrollNext ? \"opacity-100\" : \"opacity-0\",\n          className,\n        )}\n      />\n    </>\n  );\n}\n\nexport function CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"md\",\n  icon = true,\n  ...props\n}: ButtonProps) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      icon={icon}\n      className={cn(\n        CAROUSEL_NAV,\n        orientation === \"horizontal\"\n          ? CAROUSEL_PREVIOUS_HORIZONTAL\n          : CAROUSEL_PREVIOUS_VERTICAL,\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        {iconShapes(\"chevron-left\")}\n      </svg>\n      <span className=\"sr-only\">{copy.CAROUSEL_PREVIOUS}</span>\n    </Button>\n  );\n}\n\nexport function CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"md\",\n  icon = true,\n  ...props\n}: ButtonProps) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      icon={icon}\n      className={cn(\n        CAROUSEL_NAV,\n        orientation === \"horizontal\"\n          ? CAROUSEL_NEXT_HORIZONTAL\n          : CAROUSEL_NEXT_VERTICAL,\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        {iconShapes(\"chevron-right\")}\n      </svg>\n      <span className=\"sr-only\">{copy.CAROUSEL_NEXT}</span>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{command-palette.js → derived/command-palette.js}

@@ -8,10 +8,11 @@ import {
   COMMAND_PALETTE_HINTS,
   COMMAND_PALETTE_LABEL,
   COMMAND_PALETTE_LIST,
-  COMMAND_PALETTE_TITLE
-} from "../generated/command-palette.js";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+  COMMAND_PALETTE_TITLE,
+  COMMAND_PALETTE_LABELS
+} from "../../generated/command-palette.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   Command,
   CommandEmpty,
@@ -21,9 +22,9 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut
-} from "./command.js";
-import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
-import { Kbd } from "./kbd.js";
+} from "../atomic/command.js";
+import { Dialog, DialogContent, DialogTitle } from "../atomic/dialog.js";
+import { Kbd } from "../atomic/kbd.js";
 function CommandPalette({
   open,
   defaultOpen = false,
@@ -43,11 +44,11 @@ function CommandPalette({
       showCloseButton: false,
       className: cn(COMMAND_PALETTE_CONTENT, className),
       children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: COMMAND_PALETTE_TITLE, children: labels.title ?? "Command palette" }),
+        /* @__PURE__ */ jsx(DialogTitle, { className: COMMAND_PALETTE_TITLE, children: labels.title ?? COMMAND_PALETTE_LABELS.title }),
         /* @__PURE__ */ jsxs(Command, { className: COMMAND_PALETTE_COMMAND, children: [
-          /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.placeholder ?? "Type a command or search\u2026" }),
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.placeholder ?? COMMAND_PALETTE_LABELS.placeholder }),
           /* @__PURE__ */ jsxs(CommandList, { className: COMMAND_PALETTE_LIST, children: [
-            /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty ?? "No results." }),
+            /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty ?? COMMAND_PALETTE_LABELS.empty }),
             groups.map((group, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
               /* @__PURE__ */ jsx(CommandGroup, { ...group.heading !== void 0 ? { heading: group.heading } : {}, children: group.items.map((item) => /* @__PURE__ */ jsxs(
@@ -78,15 +79,15 @@ function CommandPalette({
             children: [
               /* @__PURE__ */ jsxs("span", { className: COMMAND_PALETTE_HINT, children: [
                 /* @__PURE__ */ jsx(Kbd, { children: "\u2191\u2193" }),
-                labels.navigate ?? "navigate"
+                labels.navigate ?? COMMAND_PALETTE_LABELS.navigate
               ] }),
               /* @__PURE__ */ jsxs("span", { className: COMMAND_PALETTE_HINT, children: [
                 /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
-                labels.select ?? "select"
+                labels.select ?? COMMAND_PALETTE_LABELS.select
               ] }),
               /* @__PURE__ */ jsxs("span", { className: COMMAND_PALETTE_HINT, children: [
                 /* @__PURE__ */ jsx(Kbd, { children: "esc" }),
-                labels.close ?? "close"
+                labels.close ?? COMMAND_PALETTE_LABELS.close
               ] })
             ]
           }

package/dist/components/derived/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/command-palette.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  COMMAND_PALETTE_COMMAND,\n  COMMAND_PALETTE_CONTENT,\n  COMMAND_PALETTE_HINT,\n  COMMAND_PALETTE_HINTS,\n  COMMAND_PALETTE_LABEL,\n  COMMAND_PALETTE_LIST,\n  COMMAND_PALETTE_TITLE,\n  COMMAND_PALETTE_LABELS,\n} from \"../../generated/command-palette\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"../atomic/command\";\nimport { Dialog, DialogContent, DialogTitle } from \"../atomic/dialog\";\nimport { Kbd } from \"../atomic/kbd\";\n\nexport interface CommandPaletteItem {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  /** Shown at the row end, e.g. \"⌘N\". */\n  shortcut?: string;\n  /** Extra words the search matches besides the label. */\n  keywords?: readonly string[];\n  disabled?: boolean;\n  onSelect: () => void;\n}\n\nexport interface CommandPaletteGroup {\n  id: string;\n  heading?: string;\n  items: readonly CommandPaletteItem[];\n}\n\nexport interface CommandPaletteLabels {\n  /** Names the dialog for assistive tech. Default `\"Command palette\"`. */\n  title?: string;\n  placeholder?: string;\n  empty?: string;\n  navigate?: string;\n  select?: string;\n  close?: string;\n}\n\nexport interface CommandPaletteProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  groups: readonly CommandPaletteGroup[];\n  labels?: CommandPaletteLabels;\n  className?: string;\n}\n\n// Built on Dialog + Command rather than the kit's CommandDialog: that one has no accessible\n// name and no footer, and both need Dialog's title and focus wiring.\n/**\n * Search-and-run over a list of actions. Choosing a row runs it and closes the\n * palette. Pair it with `useCommandPaletteShortcut` for ⌘K / Ctrl+K.\n */\nexport function CommandPalette({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  groups,\n  labels = {},\n  className,\n}: CommandPaletteProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  return (\n    <Dialog open={isOpen} onOpenChange={setOpen}>\n      <DialogContent\n        showCloseButton={false}\n        className={cn(COMMAND_PALETTE_CONTENT, className)}\n      >\n        <DialogTitle className={COMMAND_PALETTE_TITLE}>{labels.title ?? COMMAND_PALETTE_LABELS.title}</DialogTitle>\n        <Command className={COMMAND_PALETTE_COMMAND}>\n          <CommandInput placeholder={labels.placeholder ?? COMMAND_PALETTE_LABELS.placeholder} />\n          <CommandList className={COMMAND_PALETTE_LIST}>\n            <CommandEmpty>{labels.empty ?? COMMAND_PALETTE_LABELS.empty}</CommandEmpty>\n            {groups.map((group, i) => (\n              <React.Fragment key={group.id}>\n                {i > 0 && <CommandSeparator />}\n                <CommandGroup {...(group.heading !== undefined ? { heading: group.heading } : {})}>\n                  {group.items.map((item) => (\n                    <CommandItem\n                      key={item.id}\n                      value={[item.label, ...(item.keywords ?? [])].join(\" \")}\n                      disabled={item.disabled ?? false}\n                      onSelect={() => {\n                        setOpen(false);\n                        item.onSelect();\n                      }}\n                    >\n                      {item.icon}\n                      <span className={COMMAND_PALETTE_LABEL}>{item.label}</span>\n                      {item.shortcut !== undefined && <CommandShortcut>{item.shortcut}</CommandShortcut>}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </React.Fragment>\n            ))}\n          </CommandList>\n        </Command>\n        <div\n          data-slot=\"command-palette-hints\"\n          className={COMMAND_PALETTE_HINTS}\n        >\n          <span className={COMMAND_PALETTE_HINT}>\n            <Kbd>↑↓</Kbd>\n            {labels.navigate ?? COMMAND_PALETTE_LABELS.navigate}\n          </span>\n          <span className={COMMAND_PALETTE_HINT}>\n            <Kbd>↵</Kbd>\n            {labels.select ?? COMMAND_PALETTE_LABELS.select}\n          </span>\n          <span className={COMMAND_PALETTE_HINT}>\n            <Kbd>esc</Kbd>\n            {labels.close ?? COMMAND_PALETTE_LABELS.close}\n          </span>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * Calls `onTrigger` on ⌘K (Mac) or Ctrl+K, and keeps the browser from taking\n * the key (Chrome focuses the address bar on Ctrl+K in some layouts). Matches the\n * physical key (`code`), so it also works on a Russian or other non-Latin layout.\n */\nexport function useCommandPaletteShortcut(onTrigger: () => void, enabled = true): void {\n  // Latest callback without re-binding the listener on every render.\n  const ref = React.useRef(onTrigger);\n  React.useEffect(() => {\n    ref.current = onTrigger;\n  });\n  React.useEffect(() => {\n    if (!enabled) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.code === \"KeyK\") {\n        e.preventDefault();\n        // A held key would toggle the palette open and shut.\n        if (!e.repeat) ref.current();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [enabled]);\n}\n"],"mappings":"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","names":[]}

package/dist/components/{confirm-dialog.js → derived/confirm-dialog.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import {
   CONFIRM_DIALOG_CONTENT,
   CONFIRM_DIALOG_DESCRIPTION,
@@ -13,9 +13,10 @@ import {
   CONFIRM_DIALOG_SPINNER,
   CONFIRM_DIALOG_TEXT,
   CONFIRM_DIALOG_TITLE,
-  confirmDialogIconToneClasses
-} from "../generated/confirm-dialog.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+  CONFIRM_DIALOG_LABELS
+} from "../../generated/confirm-dialog.js";
+import { toneClasses } from "../../generated/tone.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -24,10 +25,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger
-} from "./alert-dialog.js";
-import { buttonVariants } from "./button.js";
-import { Spinner } from "./spinner.js";
-import { UiIcon } from "./ui-icons.js";
+} from "../atomic/alert-dialog.js";
+import { buttonVariants } from "../atomic/button.js";
+import { Spinner } from "../atomic/spinner.js";
+import { UiIcon } from "../../icons/ui-icons.js";
 function ConfirmDialog({
   open,
   defaultOpen = false,
@@ -35,7 +36,7 @@ function ConfirmDialog({
   trigger,
   title,
   description,
-  tone = "default",
+  tone = "neutral",
   confirmLabel,
   onConfirm,
   icon,
@@ -49,7 +50,7 @@ function ConfirmDialog({
   });
   const [pending, setPending] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const danger = tone === "danger";
+  const danger = tone === "error";
   React.useEffect(() => {
     if (isOpen) setError(null);
   }, [isOpen]);
@@ -68,20 +69,14 @@ function ConfirmDialog({
       setOpen(false);
     } catch (e) {
       setPending(false);
-      setError(e instanceof Error && e.message ? e.message : labels.error ?? "Something went wrong");
+      setError(e instanceof Error && e.message ? e.message : labels.error ?? CONFIRM_DIALOG_LABELS.error);
     }
   };
   return /* @__PURE__ */ jsxs(AlertDialog, { open: isOpen, onOpenChange: change, children: [
     trigger != null && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs(AlertDialogContent, { className: cn(CONFIRM_DIALOG_CONTENT, className), children: [
+    /* @__PURE__ */ jsxs(AlertDialogContent, { className: cn(CONFIRM_DIALOG_CONTENT, toneClasses[tone], className), children: [
       /* @__PURE__ */ jsxs(AlertDialogHeader, { className: CONFIRM_DIALOG_HEADER, children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(CONFIRM_DIALOG_ICON, confirmDialogIconToneClasses[tone]),
-            children: icon ?? /* @__PURE__ */ jsx(UiIcon, { name: "alert" })
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { className: CONFIRM_DIALOG_ICON, children: icon ?? /* @__PURE__ */ jsx(UiIcon, { name: "alert" }) }),
         /* @__PURE__ */ jsxs("div", { className: CONFIRM_DIALOG_TEXT, children: [
           /* @__PURE__ */ jsx(AlertDialogTitle, { className: CONFIRM_DIALOG_TITLE, children: title }),
           description != null && /* @__PURE__ */ jsx(AlertDialogDescription, { className: CONFIRM_DIALOG_DESCRIPTION, children: description }),
@@ -96,7 +91,7 @@ function ConfirmDialog({
             "aria-disabled": pending,
             onClick: () => change(false),
             className: cn(buttonVariants({ variant: "ghost", size: "xs" }), CONFIRM_DIALOG_PENDING),
-            children: labels.cancel ?? "Cancel"
+            children: labels.cancel ?? CONFIRM_DIALOG_LABELS.cancel
           }
         ),
         /* @__PURE__ */ jsxs(

package/dist/components/derived/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  CONFIRM_DIALOG_CONTENT,\n  CONFIRM_DIALOG_DESCRIPTION,\n  CONFIRM_DIALOG_ERROR,\n  CONFIRM_DIALOG_FOOTER,\n  CONFIRM_DIALOG_HEADER,\n  CONFIRM_DIALOG_ICON,\n  CONFIRM_DIALOG_PENDING,\n  CONFIRM_DIALOG_SPINNER,\n  CONFIRM_DIALOG_TEXT,\n  CONFIRM_DIALOG_TITLE,\n  CONFIRM_DIALOG_LABELS,\n} from \"../../generated/confirm-dialog\";\nimport { toneClasses, type Tone } from \"../../generated/tone\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../atomic/alert-dialog\";\nimport { buttonVariants } from \"../atomic/button\";\nimport { Spinner } from \"../atomic/spinner\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface ConfirmDialogLabels {\n  cancel?: string;\n  /** Shown when `onConfirm` rejects with something that has no message. */\n  error?: string;\n}\n\nexport interface ConfirmDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Opens the dialog; wrapped with `asChild`, so pass one button. */\n  trigger?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  tone?: Tone;\n  confirmLabel: React.ReactNode;\n  /**\n   * Resolve to close the dialog. While a returned promise is pending both\n   * buttons are disabled and Escape and outside clicks do nothing; a rejection\n   * keeps the dialog open and shows its message under the text.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Replaces the tone's glyph. */\n  icon?: React.ReactNode;\n  labels?: ConfirmDialogLabels;\n  className?: string;\n}\n\nexport function ConfirmDialog({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  tone = \"neutral\",\n  confirmLabel,\n  onConfirm,\n  icon,\n  labels = {},\n  className,\n}: ConfirmDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const [pending, setPending] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const danger = tone === \"error\";\n  // A controlled parent can reopen the dialog without going through `change`.\n  React.useEffect(() => {\n    if (isOpen) setError(null);\n  }, [isOpen]);\n\n  const change = (next: boolean) => {\n    if (pending) return;\n    if (next) setError(null);\n    setOpen(next);\n  };\n\n  const confirm = async () => {\n    if (pending) return;\n    setError(null);\n    setPending(true);\n    try {\n      await onConfirm();\n      setPending(false);\n      setOpen(false);\n    } catch (e) {\n      setPending(false);\n      setError(e instanceof Error && e.message ? e.message : (labels.error ?? CONFIRM_DIALOG_LABELS.error));\n    }\n  };\n\n  return (\n    <AlertDialog open={isOpen} onOpenChange={change}>\n      {trigger != null && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n      <AlertDialogContent className={cn(CONFIRM_DIALOG_CONTENT, toneClasses[tone], className)}>\n        <AlertDialogHeader className={CONFIRM_DIALOG_HEADER}>\n          <span className={CONFIRM_DIALOG_ICON}>\n            {icon ?? <UiIcon name=\"alert\" />}\n          </span>\n          <div className={CONFIRM_DIALOG_TEXT}>\n            <AlertDialogTitle className={CONFIRM_DIALOG_TITLE}>{title}</AlertDialogTitle>\n            {description != null && (\n              <AlertDialogDescription className={CONFIRM_DIALOG_DESCRIPTION}>{description}</AlertDialogDescription>\n            )}\n            {error !== null && (\n              <p role=\"alert\" className={CONFIRM_DIALOG_ERROR}>\n                {error}\n              </p>\n            )}\n          </div>\n        </AlertDialogHeader>\n        <AlertDialogFooter className={CONFIRM_DIALOG_FOOTER}>\n          {/* aria-disabled, not disabled: a disabled button that holds focus drops it to <body> and Tab leaves the dialog. */}\n          <button\n            type=\"button\"\n            aria-disabled={pending}\n            onClick={() => change(false)}\n            className={cn(buttonVariants({ variant: \"ghost\", size: \"xs\" }), CONFIRM_DIALOG_PENDING)}\n          >\n            {labels.cancel ?? CONFIRM_DIALOG_LABELS.cancel}\n          </button>\n          <button\n            type=\"button\"\n            aria-disabled={pending}\n            aria-busy={pending}\n            onClick={confirm}\n            className={cn(buttonVariants({ variant: danger ? \"destructive\" : \"primary\", size: \"xs\" }), CONFIRM_DIALOG_PENDING)}\n          >\n            {pending && <Spinner className={CONFIRM_DIALOG_SPINNER} />}\n            {confirmLabel}\n          </button>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AA6G0B,cAMhB,YANgB;AA3G1B,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAA8B;AACvC,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,cAAc;AA8BhB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAuB;AACrB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAwB,IAAI;AAC5D,QAAM,SAAS,SAAS;AAExB,QAAM,UAAU,MAAM;AACpB,QAAI,OAAQ,UAAS,IAAI;AAAA,EAC3B,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,SAAS,CAAC,SAAkB;AAChC,QAAI,QAAS;AACb,QAAI,KAAM,UAAS,IAAI;AACvB,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,UAAU,YAAY;AAC1B,QAAI,QAAS;AACb,aAAS,IAAI;AACb,eAAW,IAAI;AACf,QAAI;AACF,YAAM,UAAU;AAChB,iBAAW,KAAK;AAChB,cAAQ,KAAK;AAAA,IACf,SAAS,GAAG;AACV,iBAAW,KAAK;AAChB,eAAS,aAAa,SAAS,EAAE,UAAU,EAAE,UAAW,OAAO,SAAS,sBAAsB,KAAM;AAAA,IACtG;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,MAAM,QAAQ,cAAc,QACtC;AAAA,eAAW,QAAQ,oBAAC,sBAAmB,SAAO,MAAE,mBAAQ;AAAA,IACzD,qBAAC,sBAAmB,WAAW,GAAG,wBAAwB,YAAY,IAAI,GAAG,SAAS,GACpF;AAAA,2BAAC,qBAAkB,WAAW,uBAC5B;AAAA,4BAAC,UAAK,WAAW,qBACd,kBAAQ,oBAAC,UAAO,MAAK,SAAQ,GAChC;AAAA,QACA,qBAAC,SAAI,WAAW,qBACd;AAAA,8BAAC,oBAAiB,WAAW,sBAAuB,iBAAM;AAAA,UACzD,eAAe,QACd,oBAAC,0BAAuB,WAAW,4BAA6B,uBAAY;AAAA,UAE7E,UAAU,QACT,oBAAC,OAAE,MAAK,SAAQ,WAAW,sBACxB,iBACH;AAAA,WAEJ;AAAA,SACF;AAAA,MACA,qBAAC,qBAAkB,WAAW,uBAE5B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,SAAS,MAAM,OAAO,KAAK;AAAA,YAC3B,WAAW,GAAG,eAAe,EAAE,SAAS,SAAS,MAAM,KAAK,CAAC,GAAG,sBAAsB;AAAA,YAErF,iBAAO,UAAU,sBAAsB;AAAA;AAAA,QAC1C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,aAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAW,GAAG,eAAe,EAAE,SAAS,SAAS,gBAAgB,WAAW,MAAM,KAAK,CAAC,GAAG,sBAAsB;AAAA,YAEhH;AAAA,yBAAW,oBAAC,WAAQ,WAAW,wBAAwB;AAAA,cACvD;AAAA;AAAA;AAAA,QACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}