@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/ui/devalok-grain.d.ts

@@ -69,7 +69,7 @@ export interface DevalokGrainProps {
  *
  * @example
  * // Heavier grain for a hero section:
- * <div className="relative overflow-hidden isolate rounded-ds-lg bg-accent-9 p-8">
+ * <div className="relative overflow-hidden isolate rounded-surface bg-accent-9 p-8">
  *   <DevalokGrain intensity="heavy" />
  *   <h1 className="relative z-[2]">Hero</h1>
  * </div>

package/dist/ui/devalok-grain.js.map

@@ -1 +1 @@
-{"version":3,"file":"devalok-grain.js","names":[],"sources":["../../src/ui/devalok-grain.tsx"],"sourcesContent":["'use client'\n\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nconst NOISE_SVG = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nexport type GrainIntensity = 'subtle' | 'medium' | 'heavy'\n\nconst NOISE_OPACITY = {\n  subtle: { solid: 0.20, soft: 0.15 },\n  medium: { solid: 0.28, soft: 0.22 },\n  heavy:  { solid: 0.45, soft: 0.35 },\n} as const\n\nconst GRADIENT = {\n  subtle: { ld: 0.06, ll: 0.08, dk: 0.08 },\n  medium: { ld: 0.10, ll: 0.12, dk: 0.12 },\n  heavy:  { ld: 0.16, ll: 0.18, dk: 0.18 },\n} as const\n\nexport interface DevalokGrainProps {\n  /** Grain intensity level. Default: 'subtle' */\n  intensity?: GrainIntensity\n  /**\n   * Surface type hint — affects noise opacity.\n   * 'solid' for filled backgrounds (higher opacity).\n   * 'soft' for tinted/muted backgrounds (lower opacity).\n   * Default: 'solid'\n   */\n  surface?: 'solid' | 'soft'\n  /**\n   * Add an inner highlight (top-lit emboss) for a premium 3D feel.\n   * Adds an inset shadow: light highlight on top edge, dark shadow on bottom edge.\n   * Works best on solid variant buttons. Default: false\n   */\n  sheen?: boolean\n  /**\n   * Animate the grain entrance (fade in on mount). Default: false\n   * When true, the grain fades in over 600ms with a slight scale for a natural reveal.\n   */\n  animated?: boolean\n  /**\n   * Increase grain visibility on parent hover. Default: false\n   * When the parent element is hovered, the noise opacity increases by ~40%\n   * and the gradient deepens slightly, creating a tactile \"pressing into paper\" feel.\n   * Requires the parent to have a `group` class for `group-hover:` to work.\n   */\n  hoverIntensify?: boolean\n  /**\n   * Tint color for the directional gradient. Accepts any CSS color value.\n   * The gradient goes from a darker shade of this color to a lighter shade.\n   * Default: neutral black-to-white wash.\n   *\n   * @example\n   * // Warm pink tint (Devalok brand)\n   * <DevalokGrain tint=\"oklch(0.55 0.19 360)\" />\n   *\n   * // Cool blue tint\n   * <DevalokGrain tint=\"oklch(0.55 0.12 240)\" />\n   *\n   * // Use a CSS variable\n   * <DevalokGrain tint=\"var(--color-accent-9)\" />\n   */\n  tint?: string\n}\n\n/**\n * DevalokGrain — Brand texture that adds a subtle noise grain + directional gradient\n * to any surface. The Devalok signature: warm, tactile, paper-like.\n *\n * Drop as a child of any element that has `relative overflow-hidden isolate`.\n * The grain layers are absolute-positioned at z-[1] and use `rounded-[inherit]`\n * to match the parent's border-radius.\n *\n * @example\n * // Inside a Button (Button already has relative/overflow-hidden/isolate):\n * <Button>\n *   <DevalokGrain />\n *   Save changes\n * </Button>\n *\n * @example\n * // Inside a Card:\n * <Card className=\"relative overflow-hidden isolate\">\n *   <DevalokGrain surface=\"soft\" />\n *   Card content\n * </Card>\n *\n * @example\n * // Heavier grain for a hero section:\n * <div className=\"relative overflow-hidden isolate rounded-ds-lg bg-accent-9 p-8\">\n *   <DevalokGrain intensity=\"heavy\" />\n *   <h1 className=\"relative z-[2]\">Hero</h1>\n * </div>\n */\nexport function DevalokGrain({\n  intensity = 'subtle',\n  surface = 'solid',\n  sheen = false,\n  tint,\n  animated = false,\n  hoverIntensify = false,\n}: DevalokGrainProps) {\n  const prefersReduced = useReducedMotion()\n  const noise = NOISE_OPACITY[intensity][surface]\n  const hoverNoise = Math.min(noise * 1.4, 0.6) // 40% more on hover, capped\n  const g = GRADIENT[intensity]\n\n  // Gradient adds directional dimensionality — a subtle diagonal wash that makes the\n  // surface feel lit from the top-left. When tinted, the gradient carries the tint color.\n  // When untinted, a neutral black→white wash still adds depth without coloring the surface.\n  const lightGradient = tint\n    ? `linear-gradient(135deg, color-mix(in oklch, ${tint} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))`\n    : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`\n  const darkGradient = tint\n    ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${tint} ${Math.round(g.dk * 100)}%, transparent))`\n    : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`\n\n  const shouldAnimate = animated && !prefersReduced\n\n  const Wrapper = shouldAnimate ? motion.span : 'span'\n  const wrapperProps = shouldAnimate\n    ? {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { duration: 0.6, ease: [0.2, 0, 0.38, 0.9] },\n      }\n    : {}\n\n  return (\n    <Wrapper\n      data-grain=\"\"\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden\"\n      {...(wrapperProps as any)}\n    >\n      {/* Gradient — only when tinted (neutral gradient looks like a dark smudge on light surfaces) */}\n      {lightGradient && (\n        <span\n          className={`absolute inset-0 dark:hidden transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: lightGradient }}\n        />\n      )}\n      {darkGradient && (\n        <span\n          className={`absolute inset-0 hidden dark:block transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: darkGradient }}\n        />\n      )}\n      {/* Noise texture */}\n      <span\n        className={`absolute inset-0 transition-opacity duration-300 ${\n          hoverIntensify ? 'group-hover:opacity-[var(--grain-hover-opacity)]' : ''\n        }`}\n        style={{\n          backgroundImage: NOISE_SVG,\n          backgroundSize: '100px 100px',\n          filter: 'contrast(250%) brightness(105%)',\n          opacity: noise,\n          '--grain-hover-opacity': hoverIntensify ? hoverNoise : undefined,\n        } as React.CSSProperties}\n      />\n      {/* Sheen — inner highlight */}\n      {sheen && (\n        <span className=\"absolute inset-0 shadow-raised-inner\" />\n      )}\n    </Wrapper>\n  )\n}\n\nDevalokGrain.displayName = 'DevalokGrain'\n"],"mappings":";;;;;AAKA,IAAM,IAAY,+SAIZ,IAAgB;CACpB,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,OAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACpC,EAEK,IAAW;CACf,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,OAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACzC;AA6ED,SAAgB,EAAa,EAC3B,eAAY,UACZ,aAAU,SACV,WAAQ,IACR,SACA,cAAW,IACX,oBAAiB,MACG;CACpB,IAAM,IAAiB,GAAkB,EACnC,IAAQ,EAAc,GAAW,IACjC,IAAa,KAAK,IAAI,IAAQ,KAAK,GAAI,EACvC,IAAI,EAAS,IAKb,IAAgB,IAClB,+CAA+C,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,6CAA6C,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAClJ,yCAAyC,EAAE,GAAG,mBAAmB,EAAE,GAAG,KACpE,IAAe,IACjB,4DAA4D,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAC3F,sDAAsD,EAAE,GAAG,KAEzD,IAAgB,KAAY,CAAC;AAWnC,QACE,kBAVc,IAAgB,EAAO,OAAO,QAU5C;EACE,cAAW;EACX,eAAY;EACZ,WAAU;EACV,GAbiB,IACjB;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,UAAU;IAAK,MAAM;KAAC;KAAK;KAAG;KAAM;KAAI;IAAE;GACzD,GACD,EAAE;YAGJ;GAOG,KACC,kBAAC,QAAD;IACE,WAAW,gEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAe;IACpC,CAAA;GAEH,KACC,kBAAC,QAAD;IACE,WAAW,sEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAc;IACnC,CAAA;GAGJ,kBAAC,QAAD;IACE,WAAW,oDACT,IAAiB,qDAAqD;IAExE,OAAO;KACL,iBAAiB;KACjB,gBAAgB;KAChB,QAAQ;KACR,SAAS;KACT,yBAAyB,IAAiB,IAAa,KAAA;KACxD;IACD,CAAA;GAED,KACC,kBAAC,QAAD,EAAM,WAAU,wCAAyC,CAAA;GAEnD;;;AAId,EAAa,cAAc"}
+{"version":3,"file":"devalok-grain.js","names":[],"sources":["../../src/ui/devalok-grain.tsx"],"sourcesContent":["'use client'\n\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nconst NOISE_SVG = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nexport type GrainIntensity = 'subtle' | 'medium' | 'heavy'\n\nconst NOISE_OPACITY = {\n  subtle: { solid: 0.20, soft: 0.15 },\n  medium: { solid: 0.28, soft: 0.22 },\n  heavy:  { solid: 0.45, soft: 0.35 },\n} as const\n\nconst GRADIENT = {\n  subtle: { ld: 0.06, ll: 0.08, dk: 0.08 },\n  medium: { ld: 0.10, ll: 0.12, dk: 0.12 },\n  heavy:  { ld: 0.16, ll: 0.18, dk: 0.18 },\n} as const\n\nexport interface DevalokGrainProps {\n  /** Grain intensity level. Default: 'subtle' */\n  intensity?: GrainIntensity\n  /**\n   * Surface type hint — affects noise opacity.\n   * 'solid' for filled backgrounds (higher opacity).\n   * 'soft' for tinted/muted backgrounds (lower opacity).\n   * Default: 'solid'\n   */\n  surface?: 'solid' | 'soft'\n  /**\n   * Add an inner highlight (top-lit emboss) for a premium 3D feel.\n   * Adds an inset shadow: light highlight on top edge, dark shadow on bottom edge.\n   * Works best on solid variant buttons. Default: false\n   */\n  sheen?: boolean\n  /**\n   * Animate the grain entrance (fade in on mount). Default: false\n   * When true, the grain fades in over 600ms with a slight scale for a natural reveal.\n   */\n  animated?: boolean\n  /**\n   * Increase grain visibility on parent hover. Default: false\n   * When the parent element is hovered, the noise opacity increases by ~40%\n   * and the gradient deepens slightly, creating a tactile \"pressing into paper\" feel.\n   * Requires the parent to have a `group` class for `group-hover:` to work.\n   */\n  hoverIntensify?: boolean\n  /**\n   * Tint color for the directional gradient. Accepts any CSS color value.\n   * The gradient goes from a darker shade of this color to a lighter shade.\n   * Default: neutral black-to-white wash.\n   *\n   * @example\n   * // Warm pink tint (Devalok brand)\n   * <DevalokGrain tint=\"oklch(0.55 0.19 360)\" />\n   *\n   * // Cool blue tint\n   * <DevalokGrain tint=\"oklch(0.55 0.12 240)\" />\n   *\n   * // Use a CSS variable\n   * <DevalokGrain tint=\"var(--color-accent-9)\" />\n   */\n  tint?: string\n}\n\n/**\n * DevalokGrain — Brand texture that adds a subtle noise grain + directional gradient\n * to any surface. The Devalok signature: warm, tactile, paper-like.\n *\n * Drop as a child of any element that has `relative overflow-hidden isolate`.\n * The grain layers are absolute-positioned at z-[1] and use `rounded-[inherit]`\n * to match the parent's border-radius.\n *\n * @example\n * // Inside a Button (Button already has relative/overflow-hidden/isolate):\n * <Button>\n *   <DevalokGrain />\n *   Save changes\n * </Button>\n *\n * @example\n * // Inside a Card:\n * <Card className=\"relative overflow-hidden isolate\">\n *   <DevalokGrain surface=\"soft\" />\n *   Card content\n * </Card>\n *\n * @example\n * // Heavier grain for a hero section:\n * <div className=\"relative overflow-hidden isolate rounded-surface bg-accent-9 p-8\">\n *   <DevalokGrain intensity=\"heavy\" />\n *   <h1 className=\"relative z-[2]\">Hero</h1>\n * </div>\n */\nexport function DevalokGrain({\n  intensity = 'subtle',\n  surface = 'solid',\n  sheen = false,\n  tint,\n  animated = false,\n  hoverIntensify = false,\n}: DevalokGrainProps) {\n  const prefersReduced = useReducedMotion()\n  const noise = NOISE_OPACITY[intensity][surface]\n  const hoverNoise = Math.min(noise * 1.4, 0.6) // 40% more on hover, capped\n  const g = GRADIENT[intensity]\n\n  // Gradient adds directional dimensionality — a subtle diagonal wash that makes the\n  // surface feel lit from the top-left. When tinted, the gradient carries the tint color.\n  // When untinted, a neutral black→white wash still adds depth without coloring the surface.\n  const lightGradient = tint\n    ? `linear-gradient(135deg, color-mix(in oklch, ${tint} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))`\n    : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`\n  const darkGradient = tint\n    ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${tint} ${Math.round(g.dk * 100)}%, transparent))`\n    : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`\n\n  const shouldAnimate = animated && !prefersReduced\n\n  const Wrapper = shouldAnimate ? motion.span : 'span'\n  const wrapperProps = shouldAnimate\n    ? {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { duration: 0.6, ease: [0.2, 0, 0.38, 0.9] },\n      }\n    : {}\n\n  return (\n    <Wrapper\n      data-grain=\"\"\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden\"\n      {...(wrapperProps as any)}\n    >\n      {/* Gradient — only when tinted (neutral gradient looks like a dark smudge on light surfaces) */}\n      {lightGradient && (\n        <span\n          className={`absolute inset-0 dark:hidden transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: lightGradient }}\n        />\n      )}\n      {darkGradient && (\n        <span\n          className={`absolute inset-0 hidden dark:block transition-opacity duration-300 ${\n            hoverIntensify ? 'group-hover:opacity-100 opacity-80' : ''\n          }`}\n          style={{ background: darkGradient }}\n        />\n      )}\n      {/* Noise texture */}\n      <span\n        className={`absolute inset-0 transition-opacity duration-300 ${\n          hoverIntensify ? 'group-hover:opacity-[var(--grain-hover-opacity)]' : ''\n        }`}\n        style={{\n          backgroundImage: NOISE_SVG,\n          backgroundSize: '100px 100px',\n          filter: 'contrast(250%) brightness(105%)',\n          opacity: noise,\n          '--grain-hover-opacity': hoverIntensify ? hoverNoise : undefined,\n        } as React.CSSProperties}\n      />\n      {/* Sheen — inner highlight */}\n      {sheen && (\n        <span className=\"absolute inset-0 shadow-raised-inner\" />\n      )}\n    </Wrapper>\n  )\n}\n\nDevalokGrain.displayName = 'DevalokGrain'\n"],"mappings":";;;;;AAKA,IAAM,IAAY,+SAIZ,IAAgB;CACpB,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,QAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACnC,OAAQ;EAAE,OAAO;EAAM,MAAM;EAAM;CACpC,EAEK,IAAW;CACf,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,QAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACxC,OAAQ;EAAE,IAAI;EAAM,IAAI;EAAM,IAAI;EAAM;CACzC;AA6ED,SAAgB,EAAa,EAC3B,eAAY,UACZ,aAAU,SACV,WAAQ,IACR,SACA,cAAW,IACX,oBAAiB,MACG;CACpB,IAAM,IAAiB,GAAkB,EACnC,IAAQ,EAAc,GAAW,IACjC,IAAa,KAAK,IAAI,IAAQ,KAAK,GAAI,EACvC,IAAI,EAAS,IAKb,IAAgB,IAClB,+CAA+C,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,6CAA6C,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAClJ,yCAAyC,EAAE,GAAG,mBAAmB,EAAE,GAAG,KACpE,IAAe,IACjB,4DAA4D,EAAK,GAAG,KAAK,MAAM,EAAE,KAAK,IAAI,CAAC,oBAC3F,sDAAsD,EAAE,GAAG,KAEzD,IAAgB,KAAY,CAAC;AAWnC,QACE,kBAVc,IAAgB,EAAO,OAAO,QAU5C;EACE,cAAW;EACX,eAAY;EACZ,WAAU;EACV,GAbiB,IACjB;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,UAAU;IAAK,MAAM;KAAC;KAAK;KAAG;KAAM;KAAI;IAAE;GACzD,GACD,EAAE;YAGJ;GAOG,KACC,kBAAC,QAAD;IACE,WAAW,gEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAe;IACpC,CAAA;GAEH,KACC,kBAAC,QAAD;IACE,WAAW,sEACT,IAAiB,uCAAuC;IAE1D,OAAO,EAAE,YAAY,GAAc;IACnC,CAAA;GAGJ,kBAAC,QAAD;IACE,WAAW,oDACT,IAAiB,qDAAqD;IAExE,OAAO;KACL,iBAAiB;KACjB,gBAAgB;KAChB,QAAQ;KACR,SAAS;KACT,yBAAyB,IAAiB,IAAa,KAAA;KACxD;IACD,CAAA;GAED,KACC,kBAAC,QAAD,EAAM,WAAU,wCAAyC,CAAA;GAEnD;;;AAId,EAAa,cAAc"}

package/dist/ui/dialog.js

@@ -70,10 +70,10 @@ var E = p.forwardRef(({ className: e, children: r, responsive: i, ...a }, o) =>
 					...c.smooth,
 					opacity: l.fade
 				},
-				className: u("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", i === !1 ? "left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay", e),
+				className: u("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", i === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg border border-surface-border-strong shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:border md:border-surface-border-strong md:shadow-overlay", e),
 				children: [r, /* @__PURE__ */ h(n, {
 					title: "Close",
-					className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
+					className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
 					children: [/* @__PURE__ */ m(d, {
 						icon: g,
 						size: "lg"

package/dist/ui/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/ui/dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { IconX as CloseIcon } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype DialogContextValue = { open: boolean }\nconst DialogContext = React.createContext<DialogContextValue>({ open: false })\nconst useDialogOpen = () => React.useContext(DialogContext)\n\n/**\n * Dialog compound component — accessible modal overlay with focus trap and Escape dismissal.\n *\n * **Parts (in composition order):**\n * - `Dialog` — manages open/closed state (this root)\n * - `DialogTrigger` — element that opens the dialog (use `asChild` to render your own button)\n * - `DialogContent` — the modal panel (auto-includes portal, overlay, and close button)\n * - `DialogHeader` — optional layout wrapper for title + description\n * - `DialogTitle` — required for accessibility (sets the dialog's ARIA label)\n * - `DialogDescription` — optional subtitle text\n * - `DialogFooter` — optional layout wrapper for action buttons\n * - `DialogClose` — manual close trigger (a close button is already built into DialogContent)\n * - `DialogContentRaw` — use instead of DialogContent when you need full portal/overlay control\n * - `DialogPortal` — low-level portal wrapper (exported for custom layout; used internally by DialogContent)\n * - `DialogOverlay` — the backdrop element (exported for custom overlay styling or positioning)\n *\n * @compound\n * @example\n * // Confirmation dialog:\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button variant=\"solid\" color=\"error\">Delete project</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you absolutely sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone. This will permanently delete your project.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <DialogClose asChild><Button variant=\"outline\">Cancel</Button></DialogClose>\n *       <Button variant=\"solid\" color=\"error\" onClick={handleDelete}>Delete</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled open state (no trigger in markup):\n * const [open, setOpen] = useState(false)\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogTitle>Edit profile</DialogTitle>\n *     // form fields\n *   </DialogContent>\n * </Dialog>\n */\nconst Dialog: React.FC<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  // Track internal open state for uncontrolled usage\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </DialogContext.Provider>\n  )\n}\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-overlay bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** When true (default), Dialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DialogPortal forceMount>\n          <DialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </DialogOverlay>\n          <DialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n              <DialogPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n                <Icon icon={CloseIcon} size=\"lg\" />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            </motion.div>\n          </DialogPrimitive.Content>\n        </DialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n/**\n * DialogContentRaw -- a minimal forwardRef wrapper around the primitive Content.\n * Unlike DialogContent, it does NOT include Portal, Overlay, or CloseButton.\n * Use this when you need full control over portal/overlay/close behaviour\n * (e.g. CommandPalette in shared/).\n */\nconst DialogContentRaw = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Content\n    ref={ref}\n    className={cn(className)}\n    {...props}\n  />\n))\nDialogContentRaw.displayName = 'DialogContentRaw'\n\nconst DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-ds-lg font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport type { DialogContentProps }\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogContentRaw,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/ui/dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { IconX as CloseIcon } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype DialogContextValue = { open: boolean }\nconst DialogContext = React.createContext<DialogContextValue>({ open: false })\nconst useDialogOpen = () => React.useContext(DialogContext)\n\n/**\n * Dialog compound component — accessible modal overlay with focus trap and Escape dismissal.\n *\n * **Parts (in composition order):**\n * - `Dialog` — manages open/closed state (this root)\n * - `DialogTrigger` — element that opens the dialog (use `asChild` to render your own button)\n * - `DialogContent` — the modal panel (auto-includes portal, overlay, and close button)\n * - `DialogHeader` — optional layout wrapper for title + description\n * - `DialogTitle` — required for accessibility (sets the dialog's ARIA label)\n * - `DialogDescription` — optional subtitle text\n * - `DialogFooter` — optional layout wrapper for action buttons\n * - `DialogClose` — manual close trigger (a close button is already built into DialogContent)\n * - `DialogContentRaw` — use instead of DialogContent when you need full portal/overlay control\n * - `DialogPortal` — low-level portal wrapper (exported for custom layout; used internally by DialogContent)\n * - `DialogOverlay` — the backdrop element (exported for custom overlay styling or positioning)\n *\n * @compound\n * @example\n * // Confirmation dialog:\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button variant=\"solid\" color=\"error\">Delete project</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you absolutely sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone. This will permanently delete your project.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <DialogClose asChild><Button variant=\"outline\">Cancel</Button></DialogClose>\n *       <Button variant=\"solid\" color=\"error\" onClick={handleDelete}>Delete</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled open state (no trigger in markup):\n * const [open, setOpen] = useState(false)\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogTitle>Edit profile</DialogTitle>\n *     // form fields\n *   </DialogContent>\n * </Dialog>\n */\nconst Dialog: React.FC<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  // Track internal open state for uncontrolled usage\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </DialogContext.Provider>\n  )\n}\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-overlay bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** When true (default), Dialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DialogPortal forceMount>\n          <DialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </DialogOverlay>\n          <DialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:border md:border-surface-border-strong md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg border border-surface-border-strong shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n              <DialogPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n                <Icon icon={CloseIcon} size=\"lg\" />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            </motion.div>\n          </DialogPrimitive.Content>\n        </DialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n/**\n * DialogContentRaw -- a minimal forwardRef wrapper around the primitive Content.\n * Unlike DialogContent, it does NOT include Portal, Overlay, or CloseButton.\n * Use this when you need full control over portal/overlay/close behaviour\n * (e.g. CommandPalette in shared/).\n */\nconst DialogContentRaw = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Content\n    ref={ref}\n    className={cn(className)}\n    {...props}\n  />\n))\nDialogContentRaw.displayName = 'DialogContentRaw'\n\nconst DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-ds-lg font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport type { DialogContentProps }\nexport type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogContentRaw,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/dropdown-menu.js

@@ -38,7 +38,7 @@ var A = u, j = o, M = p, N = ({ open: e, defaultOpen: t = !1, onOpenChange: r, .
 N.displayName = "DropdownMenuSub";
 var P = i, F = y.forwardRef(({ className: e, inset: t, children: n, ...i }, a) => /* @__PURE__ */ x(r, {
 	ref: a,
-	className: _("flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
+	className: _("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
 	...i,
 	children: [n, /* @__PURE__ */ b(v, {
 		icon: C,
@@ -69,7 +69,7 @@ var I = y.forwardRef(({ className: e, children: n, ...r }, i) => /* @__PURE__ */
 			...h.snappy,
 			opacity: g.fade
 		},
-		className: _("z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+		className: _("z-popover min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
 		children: n
 	})
 }) }));
@@ -99,7 +99,7 @@ var L = y.forwardRef(({ className: e, sideOffset: t = 4, children: n, ...r }, i)
 				...h.snappy,
 				opacity: g.fade
 			},
-			className: _("z-popover min-w-[8rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+			className: _("z-popover min-w-[8rem] rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
 			children: n
 		})
 	})
@@ -107,13 +107,13 @@ var L = y.forwardRef(({ className: e, sideOffset: t = 4, children: n, ...r }, i)
 L.displayName = c.displayName;
 var R = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(d, {
 	ref: r,
-	className: _("relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
+	className: _("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
 	...n
 }));
 R.displayName = d.displayName;
 var z = y.forwardRef(({ className: e, children: t, checked: n, ...r }, i) => /* @__PURE__ */ x(l, {
 	ref: i,
-	className: _("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	checked: n,
 	...r,
 	children: [/* @__PURE__ */ b("span", {
@@ -127,7 +127,7 @@ var z = y.forwardRef(({ className: e, children: t, checked: n, ...r }, i) => /*
 z.displayName = l.displayName;
 var B = y.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ x(e, {
 	ref: i,
-	className: _("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
+	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
 	...r,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",

package/dist/ui/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/ui/dropdown-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@primitives/react-dropdown-menu'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst DropdownMenuOpenContext = React.createContext(false)\nconst DropdownMenuSubOpenContext = React.createContext(false)\n\n/**\n * DropdownMenu compound component — accessible floating menu triggered by a button, with full\n * keyboard navigation and focus management.\n *\n * **Parts (in composition order):**\n * - `DropdownMenu` — manages open/closed state (this root)\n * - `DropdownMenuTrigger` — element that opens the menu (use `asChild` to render your own button)\n * - `DropdownMenuContent` — the floating menu panel (renders in a portal automatically)\n * - `DropdownMenuItem` — clickable menu item (use `onSelect` for actions)\n * - `DropdownMenuCheckboxItem` — item with a checkbox indicator\n * - `DropdownMenuRadioGroup` — wraps radio items for exclusive selection\n * - `DropdownMenuRadioItem` — item with a radio indicator (must be inside `DropdownMenuRadioGroup`)\n * - `DropdownMenuSub` — root for a nested submenu\n * - `DropdownMenuSubTrigger` — item that reveals a submenu on hover/focus\n * - `DropdownMenuSubContent` — the nested submenu panel\n * - `DropdownMenuLabel` — non-interactive group label (not selectable)\n * - `DropdownMenuSeparator` — horizontal divider between sections\n * - `DropdownMenuShortcut` — right-aligned keyboard shortcut hint text (display only)\n * - `DropdownMenuGroup` — semantic grouping wrapper (no visual output)\n * - `DropdownMenuPortal` — low-level portal wrapper (exported for custom positioning; used internally by DropdownMenuContent)\n *\n * @compound\n * @example\n * // Standard action menu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button variant=\"ghost\" size=\"icon\"><IconDotsVertical /></Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent align=\"end\">\n *     <DropdownMenuLabel>My account</DropdownMenuLabel>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem>\n *       <IconUser className=\"mr-ds-03\" />Profile\n *       <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>\n *     </DropdownMenuItem>\n *     <DropdownMenuItem>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem className=\"text-error-11\">Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n *\n * @example\n * // Menu with checkbox items and a nested submenu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button>View options</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n *       Show side panel\n *     </DropdownMenuCheckboxItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuSub>\n *       <DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>\n *       <DropdownMenuSubContent>\n *         <DropdownMenuItem>Export CSV</DropdownMenuItem>\n *         <DropdownMenuItem>Export PDF</DropdownMenuItem>\n *       </DropdownMenuSubContent>\n *     </DropdownMenuSub>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nconst DropdownMenu: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <DropdownMenuOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </DropdownMenuOpenContext.Provider>\n  )\n}\nDropdownMenu.displayName = 'DropdownMenu'\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <DropdownMenuSubOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </DropdownMenuSubOpenContext.Provider>\n  )\n}\nDropdownMenuSub.displayName = 'DropdownMenuSub'\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </DropdownMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.Portal forceMount>\n          <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover min-w-[8rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-ds-sm text-surface-fg-subtle', className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\nexport type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/ui/dropdown-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@primitives/react-dropdown-menu'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst DropdownMenuOpenContext = React.createContext(false)\nconst DropdownMenuSubOpenContext = React.createContext(false)\n\n/**\n * DropdownMenu compound component — accessible floating menu triggered by a button, with full\n * keyboard navigation and focus management.\n *\n * **Parts (in composition order):**\n * - `DropdownMenu` — manages open/closed state (this root)\n * - `DropdownMenuTrigger` — element that opens the menu (use `asChild` to render your own button)\n * - `DropdownMenuContent` — the floating menu panel (renders in a portal automatically)\n * - `DropdownMenuItem` — clickable menu item (use `onSelect` for actions)\n * - `DropdownMenuCheckboxItem` — item with a checkbox indicator\n * - `DropdownMenuRadioGroup` — wraps radio items for exclusive selection\n * - `DropdownMenuRadioItem` — item with a radio indicator (must be inside `DropdownMenuRadioGroup`)\n * - `DropdownMenuSub` — root for a nested submenu\n * - `DropdownMenuSubTrigger` — item that reveals a submenu on hover/focus\n * - `DropdownMenuSubContent` — the nested submenu panel\n * - `DropdownMenuLabel` — non-interactive group label (not selectable)\n * - `DropdownMenuSeparator` — horizontal divider between sections\n * - `DropdownMenuShortcut` — right-aligned keyboard shortcut hint text (display only)\n * - `DropdownMenuGroup` — semantic grouping wrapper (no visual output)\n * - `DropdownMenuPortal` — low-level portal wrapper (exported for custom positioning; used internally by DropdownMenuContent)\n *\n * @compound\n * @example\n * // Standard action menu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button variant=\"ghost\" size=\"icon\"><IconDotsVertical /></Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent align=\"end\">\n *     <DropdownMenuLabel>My account</DropdownMenuLabel>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem>\n *       <IconUser className=\"mr-ds-03\" />Profile\n *       <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>\n *     </DropdownMenuItem>\n *     <DropdownMenuItem>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem className=\"text-error-11\">Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n *\n * @example\n * // Menu with checkbox items and a nested submenu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button>View options</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n *       Show side panel\n *     </DropdownMenuCheckboxItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuSub>\n *       <DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>\n *       <DropdownMenuSubContent>\n *         <DropdownMenuItem>Export CSV</DropdownMenuItem>\n *         <DropdownMenuItem>Export PDF</DropdownMenuItem>\n *       </DropdownMenuSubContent>\n *     </DropdownMenuSub>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nconst DropdownMenu: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <DropdownMenuOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </DropdownMenuOpenContext.Provider>\n  )\n}\nDropdownMenu.displayName = 'DropdownMenu'\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <DropdownMenuSubOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </DropdownMenuSubOpenContext.Provider>\n  )\n}\nDropdownMenuSub.displayName = 'DropdownMenuSub'\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </DropdownMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.Portal forceMount>\n          <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover min-w-[8rem] rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-ds-sm text-surface-fg-subtle', className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\nexport type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/file-upload.js

@@ -67,7 +67,7 @@ var _ = o.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				type: "button",
 				onClick: z,
 				disabled: T,
-				className: r("inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+				className: r("inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
 				children: [b ? /* @__PURE__ */ s(i, { size: "sm" }) : /* @__PURE__ */ s(a, {
 					icon: u,
 					size: "sm"
@@ -115,7 +115,7 @@ var _ = o.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				onKeyDown: (e) => {
 					!T && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
 				},
-				className: r("flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", M && "border-accent-7 bg-accent-2", T && "opacity-action-disabled cursor-not-allowed"),
+				className: r("flex flex-col items-center justify-center gap-ds-03 rounded-surface", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", M && "border-accent-7 bg-accent-2", T && "opacity-action-disabled cursor-not-allowed"),
 				animate: { scale: M ? 1.02 : 1 },
 				transition: t.snappy,
 				children: [
@@ -179,9 +179,9 @@ var _ = o.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 							"aria-valuenow": x,
 							"aria-valuemin": 0,
 							"aria-valuemax": 100,
-							className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
+							className: "h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover",
 							children: /* @__PURE__ */ s(p.div, {
-								className: "h-full rounded-ds-full bg-accent-9",
+								className: "h-full rounded-pill bg-accent-9",
 								animate: { width: `${x}%` },
 								transition: t.smooth
 							})

package/dist/ui/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-ds-full bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":";;;;;;;;;;AA4EA,IAAM,IAAmB,KAAK,OAAO;AAErC,SAAS,EAAkB,GAAY,GAAyB;AAC9D,QAAO,EACJ,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,MAAM,CAAC,CACpB,MAAM,MACD,EAAK,WAAW,IAAI,GACf,EAAK,KAAK,aAAa,CAAC,SAAS,EAAK,aAAa,CAAC,GACzD,EAAK,SAAS,KAAK,GACd,EAAK,KAAK,WAAW,EAAK,MAAM,GAAG,EAAK,QAAQ,IAAI,GAAG,EAAE,CAAC,GAC5D,EAAK,SAAS,EACrB;;AAGN,SAAS,EAAY,GAAuB;AAG1C,QAFI,IAAQ,OAAa,GAAG,EAAM,MAC9B,IAAQ,OAAO,OAAa,IAAI,IAAQ,MAAM,QAAQ,EAAE,CAAC,OACtD,IAAI,KAAS,OAAO,OAAO,QAAQ,EAAE,CAAC;;AAG/C,IAAM,IAAa,EAAM,YAErB,EACE,WACA,aAAU,GACV,cAAW,IACX,eAAY,IACZ,cAAW,GACX,YACA,UACA,aAAU,IACV,cAAW,IACX,cACA,UACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAW,EAAM,OAAyB,KAAK,EAC/C,CAAC,GAAc,KAAmB,EAAM,SAAS,GAAM,EACvD,CAAC,GAAiB,KAAsB,EAAM,SAClD,KACD,EAGK,IAAgB,EAAM,OAAO,GAAM,EACnC,IAAmB,EAAM,OAAO,GAAM,EAEtC,IAAe,KAAS,GAExB,IAAa,EAAM,kBAAkB;AACrC,OAAY,KAChB,EAAS,SAAS,OAAO;IACxB,CAAC,GAAU,EAAU,CAAC,EAEnB,IAAkB,EAAM,aAC3B,MAAkB;AACjB,IAAmB,KAAK;AAExB,OAAK,IAAM,KAAQ,GAAO;AACxB,OAAI,EAAK,OAAO,GAAS;AACvB,MACE,SAAS,EAAK,KAAK,gCAAgC,EAAY,EAAQ,GACxE;AACD;;AAEF,OAAI,KAAU,CAAC,EAAkB,GAAM,EAAO,EAAE;AAC9C,MACE,SAAS,EAAK,KAAK,gCACpB;AACD;;;AAIJ,IAAQ,EAAM;IAEhB;EAAC;EAAS;EAAQ;EAAQ,CAC3B,EAEK,IAAoB,EAAM,aAC7B,MAA2C;AAC1C,IAAiB,UAAU;EAC3B,IAAM,IAAW,EAAE,OAAO;AACtB,GAAC,KAAY,EAAS,WAAW,MACrC,EAAgB,MAAM,KAAK,EAAS,CAAC,EAErC,EAAE,OAAO,QAAQ;IAEnB,CAAC,EAAgB,CAClB,EAIK,IAAmB,EAAM,kBAAkB;AAE/C,EADA,EAAc,UAAU,IACxB,EAAiB,UAAU;IAC1B,EAAE,CAAC,EAKA,IAAmB,EAAM,kBAAkB;AAI/C,EAHI,EAAc,WAAW,CAAC,EAAiB,WAAW,KACxD,EAAmB,4BAA4B,EAEjD,EAAc,UAAU;IACvB,CAAC,EAAO,CAAC,EAEN,IAAkB,EAAM,aAC3B,MAAuC;AAGtC,EAFA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACf,CAAC,KAAY,CAAC,KAChB,EAAgB,GAAK;IAGzB,CAAC,GAAU,EAAU,CACtB,EAEK,IAAiB,EAAM,aAC1B,MAAuC;AAGtC,EAFA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACf,CAAC,KAAY,CAAC,KAChB,EAAgB,GAAK;IAGzB,CAAC,GAAU,EAAU,CACtB,EAEK,IAAkB,EAAM,aAC3B,MAAuC;AAGtC,EAFA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACnB,EAAgB,GAAM;IAExB,EAAE,CACH,EAEK,IAAa,EAAM,aACtB,MAAuC;AAKtC,MAJA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACnB,EAAgB,GAAM,EAElB,KAAY,EAAW;EAE3B,IAAM,IAAW,EAAE,aAAa;AAC5B,GAAC,KAAY,EAAS,WAAW,KACrC,EAAgB,MAAM,KAAK,EAAS,CAAC;IAEvC;EAAC;EAAU;EAAW;EAAgB,CACvC,EAEK,IAAe,KAAS,sCACxB,IAAkB,KAAY,kBAAkB,EAAY,EAAQ,IACpE,IAAU,EAAM,OAAO;AAuD7B,QArDI,IAEA,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,wBAAwB,EAAU;EAAE,GAAI;YAArE;GACE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACC;IACV,WAAW,EACT,sEACA,0BACA,uCACA,iDACA,qBACA,gEACA,oBACD;cAZH,CAcG,IACC,kBAAC,GAAD,EAAS,MAAK,MAAO,CAAA,GAErB,kBAAC,GAAD;KAAM,MAAM;KAAe,MAAK;KAAO,CAAA,EAExC,KAAS,eACH;;GACT,kBAAC,SAAD;IACE,KAAK;IACL,IAAI;IACJ,MAAK;IACL,WAAU;IACV,OAAO,EAAE,YAAY,UAAU;IAC/B,eAAY;IACZ,cAAY,KAAS;IACb;IACE;IACA;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,UAAU;IACV,CAAA;GACD,KACC,kBAAC,KAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;cAET;IACC,CAAA;GAEF;MAKR,kBAAC,OAAD;EACO;EACL,GAAI;EACJ,MAAK;EACL,WAAW,EAAG,iBAAiB,EAAU;EACzC,oBAAkB,IAAe,SAAS,KAAA;EAC1C,aAAa;EACb,YAAY;EACZ,aAAa;EACb,QAAQ;YATV;GAWE,kBAAC,EAAO,KAAR;IACE,MAAK;IACL,UAAU;IACV,iBAAe,KAAY,KAAA;IAC3B,SAAS,IAAW,KAAA,IAAY;IAChC,YAAY,MAA2C;AACrD,KAAI,CAAC,MAAa,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/C,EAAE,gBAAgB,EAClB,GAAY;;IAGhB,WAAW,EACT,qEACA,kCACA,kBACA,wDACA,KACE,+BACF,KAAY,6CACb;IACD,SAAS,EACP,OAAO,IAAe,OAAO,GAC9B;IACD,YAAY,EAAQ;cAvBtB;KA0BE,kBAAC,GAAD;MAAiB,MAAK;gBACnB,IACC,kBAAC,EAAO,KAAR;OAEE,SAAS;QAAE,SAAS;QAAG,OAAO;QAAK;OACnC,SAAS;QAAE,SAAS;QAAG,OAAO;QAAG;OACjC,MAAM;QAAE,SAAS;QAAG,OAAO;QAAK;OAChC,YAAY,EAAO;iBAEnB,kBAAC,GAAD,EAAS,MAAK,MAAO,CAAA;OACV,EAPP,UAOO,GACX,MAAa,OAAO,CAAC,IACvB,kBAAC,EAAO,KAAR;OAEE,SAAS;QAAE,SAAS;QAAG,OAAO;QAAK;OACnC,SAAS;QAAE,SAAS;QAAG,OAAO;QAAG;OACjC,MAAM;QAAE,SAAS;QAAG,OAAO;QAAK;OAChC,YAAY,EAAQ;iBAEpB,kBAAC,GAAD;QAAM,MAAM;QAAW,MAAK;QAAM,WAAU;QAAoB,CAAA;OACrD,EAPP,WAOO,GAEb,kBAAC,EAAO,KAAR;OAEE,SAAS,EAAE,SAAS,GAAG;OACvB,SAAS,EAAE,SAAS,GAAG;OACvB,MAAM,EAAE,SAAS,GAAG;OACpB,YAAY,EAAO;iBAEnB,kBAAC,GAAD;QAAM,MAAM;QAAY,MAAK;QAAM,WAAU;QAA2B,CAAA;OAC7D,EAPP,SAOO;MAEC,CAAA;KAClB,kBAAC,QAAD;MAAM,IAAI,IAAU;MAAU,WAAU;gBACrC;MACI,CAAA;KACN,IACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,MAAK;OACL,iBAAe;OACf,iBAAe;OACf,iBAAe;OACf,WAAU;iBAEV,kBAAC,EAAO,KAAR;QACE,WAAU;QACV,SAAS,EAAE,OAAO,GAAG,EAAS,IAAI;QAClC,YAAY,EAAQ;QACpB,CAAA;OACE,CAAA;MACF,CAAA,GAEN,kBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA;KAEE;;GACb,kBAAC,SAAD;IACE,KAAK;IACL,IAAI;IACJ,MAAK;IACL,WAAU;IACV,OAAO,EAAE,YAAY,UAAU;IAC/B,eAAY;IACZ,cAAY;IACJ;IACE;IACA;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,UAAU;IACV,CAAA;GAEF,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,GAAR;IACE,MAAK;IACL,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;MAAC;MAAG;MAAI;MAAG;MAAI;MAAG;MAAE;KAAE;IAChD,MAAM,EAAE,SAAS,GAAG;IACpB,YAAY;KAAE,SAAS,EAAO;KAAM,GAAG;MAAE,MAAM;MAAS,UAAU,EAAU;MAAQ,MAAM;MAAW;KAAE;cAEtG;IACQ,CAAA,EAEG,CAAA;GACd;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-surface',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-pill bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}

package/dist/ui/hover-card.js

@@ -46,7 +46,7 @@ var p = n, m = s.forwardRef(({ className: n, align: r = "center", sideOffset: f
 				...i.snappy,
 				opacity: a.fade
 			},
-			className: o("z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden", n),
+			className: o("z-popover w-64 rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden", n),
 			children: p
 		})
 	})

package/dist/ui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardContent,HoverCardTrigger }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,GAAM,EASjD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAY,EACrE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;AAElB,EADK,KAAc,EAAoB,EAAM,EAC7C,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAa,CAC7B;AAED,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACpD,CAAA;;AAGpC,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,EAAqB,IAK7C,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;IAAM;GACvD,WAAW,EACT,8HACA,EACD;GAEA;GACU,CAAA;EACc,CAAA;CACH,CAAA,EAEd,CAAA,CAEpB;AACF,EAAiB,cAAA,EAAyC"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardContent,HoverCardTrigger }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,GAAM,EASjD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAY,EACrE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;AAElB,EADK,KAAc,EAAoB,EAAM,EAC7C,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAa,CAC7B;AAED,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACpD,CAAA;;AAGpC,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,EAAqB,IAK7C,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;IAAM;GACvD,WAAW,EACT,gIACA,EACD;GAEA;GACU,CAAA;EACc,CAAA;CACH,CAAA,EAEd,CAAA,CAEpB;AACF,EAAiB,cAAA,EAAyC"}

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

@@ -1,5 +1,6 @@
 "use client";
 import { ButtonProps } from './button';
+import { IconInput } from './lib/icon-input';
 import * as React from 'react';
 type IconButtonSize = 'sm' | 'md' | 'lg';
 /**
@@ -33,8 +34,14 @@ type IconButtonSize = 'sm' | 'md' | 'lg';
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface IconButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {
-    /** The icon element to render — must be `<Icon icon={...} />` */
-    icon: React.ReactElement;
+    /**
+     * The icon to render. Accepts any `IconInput`:
+     * - `<Icon icon={IconPlus} />` (canonical — size flows from context)
+     * - `<IconPlus />` (raw Tabler element — passes through)
+     * - `IconPlus` (Tabler component ref — auto-wrapped in `<Icon>`)
+     * - Custom `<span>$</span>` or any ReactElement.
+     */
+    icon: IconInput;
     /** Accessible label — required for icon-only buttons (WCAG AA) */
     'aria-label': string;
     /** Button shape. Default: 'square' */

package/dist/ui/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAUnD,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACpH,iEAAiE;IACjE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAA;IACxB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,QAAA,MAAM,UAAU,2FAef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAWjD,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACpH;;;;;;OAMG;IACH,IAAI,EAAE,SAAS,CAAA;IACf,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,QAAA,MAAM,UAAU,2FAef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/icon-button.js

@@ -1,22 +1,23 @@
 "use client";
 import { cn as e } from "./lib/utils.js";
-import { Button as t } from "./button.js";
-import * as n from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { t } from "../_chunks/normalize-icon.js";
+import { Button as n } from "./button.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/ui/icon-button.tsx
-var i = {
+var a = {
 	sm: "icon-sm",
 	md: "icon-md",
 	lg: "icon-lg"
-}, a = n.forwardRef(({ icon: n, shape: a = "square", size: o = "md", className: s, loading: c, ...l }, u) => /* @__PURE__ */ r(t, {
-	ref: u,
-	size: i[o],
-	className: e(a === "circle" && "rounded-ds-full", s),
-	loading: c,
+}, o = r.forwardRef(({ icon: r, shape: o = "square", size: s = "md", className: c, loading: l, ...u }, d) => /* @__PURE__ */ i(n, {
+	ref: d,
+	size: a[s],
+	className: e(o === "circle" && "rounded-pill", c),
+	loading: l,
 	loadingPosition: "center",
-	...l,
-	children: n
+	...u,
+	children: t(r)
 }));
-a.displayName = "IconButton";
+o.displayName = "IconButton";
 //#endregion
-export { a as IconButton };
+export { o as IconButton };

package/dist/ui/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /** The icon element to render — must be `<Icon icon={...} />` */\n  icon: React.ReactElement\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-ds-full', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {icon}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;AAQA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA8CK,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,mBAAmB,EAAU;CACxD;CACT,iBAAgB;CAChB,GAAI;WAEH;CACM,CAAA,CAGd;AACD,EAAW,cAAc"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from './button'\nimport type { IconInput } from './lib/icon-input'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /**\n   * The icon to render. Accepts any `IconInput`:\n   * - `<Icon icon={IconPlus} />` (canonical — size flows from context)\n   * - `<IconPlus />` (raw Tabler element — passes through)\n   * - `IconPlus` (Tabler component ref — auto-wrapped in `<Icon>`)\n   * - Custom `<span>$</span>` or any ReactElement.\n   */\n  icon: IconInput\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-pill', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {normalizeIcon(icon)}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;;AAUA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAoDK,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,gBAAgB,EAAU;CACrD;CACT,iBAAgB;CAChB,GAAI;WAEH,EAAc,EAAK;CACb,CAAA,CAGd;AACD,EAAW,cAAc"}

package/dist/ui/index.d.ts

@@ -33,7 +33,6 @@ export { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, c
 export { FileUpload, type FileUploadProps } from './file-upload';
 export { Checkbox, type CheckboxProps } from './checkbox';
 export { FormField, type FormFieldProps, type FormHelperState, FormHelperText, type FormHelperTextProps, useFormField } from './form';
-export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot } from './input-otp';
 export { NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputState, numberInputWrapperVariants } from './number-input';
 export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps } from './radio';
 export { SearchInput, type SearchInputProps } from './search-input';
@@ -49,8 +48,6 @@ export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogCont
 export { HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger } from './hover-card';
 export { Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger } from './popover';
 export { Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, } from './sheet';
-export { formatFileSize, toast, type ToastActionOptions, type ToastOptions, type ToastProps, type ToastType, type ToastUndoOptions, type ToastUploadOptions, type UploadFile, } from './toast';
-export { Toaster, type ToasterProps } from './toaster';
 export { Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger } from './tooltip';
 export { Alert, type AlertProps, alertVariants } from './alert';
 export { Banner, type BannerProps, bannerVariants } from './banner';
@@ -87,6 +84,7 @@ export { SegmentedControl, type SegmentedControlOption, type SegmentedControlPro
 export { DevalokGrain, type DevalokGrainProps, type GrainIntensity } from './devalok-grain';
 export { DateSeparator, type DateSeparatorProps, Message, type MessageActionProps, type MessageActionsProps, type MessageAuthorProps, type MessageAvatarProps, type MessageBodyProps, type MessageContentProps, type MessageContextValue, type MessageEditableBodyProps, MessageInput, type MessageInputProps, MessageList, type MessageListProps, type MessageProps, type MessageReactionsProps, SystemMessage, type SystemMessageProps, TypingIndicator, type TypingIndicatorProps, UnreadSeparator, type UnreadSeparatorProps, useMessageContext, } from './chat';
 export { Link, type LinkProps } from './link';
+export { getOAuthLabel, getOAuthName, OAuth, type OAuthAppearance, OAuthButton, type OAuthButtonProps, OAuthConnectionRow, type OAuthConnectionRowProps, OAuthDivider, type OAuthDividerProps, OAuthGlyph, type OAuthGlyphProps, OAuthGroup, type OAuthGroupProps, type OAuthIntent, type OAuthProvider, type OAuthVariant, } from './oauth-button';
 export { formatRelativeTime } from './lib/date-utils';
 export type { SpringPreset, TweenPreset } from './lib/motion';
 export { springs, stagger, tweens, withReducedMotion } from './lib/motion';