@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/ui/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../../src/ui/progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@primitives/react-progress'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ---------------------------------------------------------------------------\n * CVA Variants\n * ------------------------------------------------------------------------ */\n\nconst progressTrackVariants = cva(\n  'relative w-full overflow-hidden rounded-ds-full bg-surface-raised',\n  {\n    variants: {\n      size: {\n        sm: 'h-1',\n        md: 'h-2',\n        lg: 'h-3',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst progressIndicatorVariants = cva(\n  'h-full w-full flex-1 transition-[width] duration-moderate-02 ease-expressive-standard',\n  {\n    variants: {\n      color: {\n        default: 'bg-accent-9',\n        success: 'bg-success-9',\n        warning: 'bg-warning-9',\n        error: 'bg-error-9',\n      },\n    },\n    defaultVariants: { color: 'default' },\n  },\n)\n\n/* ---------------------------------------------------------------------------\n * Types\n * ------------------------------------------------------------------------ */\n\n/**\n * Props for Progress — a horizontal progress bar with size and color variants, an optional\n * percentage label, and an indeterminate animation when `value` is undefined/null.\n *\n * **Track size:** `sm` (4px) | `md` (8px, default) | `lg` (12px)\n *\n * **Indicator color:** `default` (brand interactive) | `success` | `warning` | `error`\n *\n * **Indeterminate:** Omit `value` (or pass `undefined`) to show an animated indeterminate bar.\n * When `value` is provided, it should be a number between 0–100.\n *\n * **`showLabel`:** Renders the percentage value next to the bar (only when `value` is set).\n *\n * @example\n * // Determinate upload progress:\n * <Progress value={uploadPercent} color=\"default\" showLabel />\n *\n * @example\n * // Indeterminate loading bar (while waiting for an async operation):\n * <Progress size=\"sm\" />\n *\n * @example\n * // Success-colored completion bar (e.g. after all tasks done):\n * <Progress value={100} color=\"success\" size=\"md\" />\n *\n * @example\n * // Warning threshold indicator (disk usage at 80%):\n * <Progress value={80} color=\"warning\" showLabel size=\"lg\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ProgressProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n      'color'\n    >,\n    VariantProps<typeof progressTrackVariants>,\n    VariantProps<typeof progressIndicatorVariants> {\n  /** Additional class names for the indicator element */\n  indicatorClassName?: string\n  /** Display the percentage label next to the progress bar */\n  showLabel?: boolean\n  /** When true, color auto-shifts by value: 0-59 = default (accent), 60-84 = warning, 85-100 = success, >100 = error. @default false */\n  autoColor?: boolean\n}\n\n/* ---------------------------------------------------------------------------\n * Component\n * ------------------------------------------------------------------------ */\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  ProgressProps\n>(\n  (\n    {\n      className,\n      value,\n      size,\n      color,\n      indicatorClassName,\n      showLabel,\n      autoColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const isIndeterminate = value === undefined || value === null\n\n    const effectiveColor =\n      autoColor && value != null\n        ? value > 100\n          ? 'error'\n          : value >= 85\n            ? 'success'\n            : value >= 60\n              ? 'warning'\n              : 'default'\n        : color\n\n    return (\n      <div className={cn('flex items-center gap-ds-03', showLabel && 'w-full')}>\n        <ProgressPrimitive.Root\n          ref={ref}\n          value={isIndeterminate ? null : value}\n          className={cn(progressTrackVariants({ size }), className)}\n          {...props}\n        >\n          {isIndeterminate ? (\n            <ProgressPrimitive.Indicator\n              className={cn(\n                progressIndicatorVariants({ color: effectiveColor }),\n                'w-2/5 animate-progress-indeterminate motion-reduce:animate-none',\n                indicatorClassName,\n              )}\n            />\n          ) : (\n            <ProgressPrimitive.Indicator\n              className={cn('h-full', indicatorClassName)}\n              asChild\n            >\n              <motion.div\n                className={cn(\n                  progressIndicatorVariants({ color: effectiveColor }),\n                  'transition-colors duration-moderate-01 ease-productive-standard',\n                )}\n                initial={false}\n                animate={{ width: `${value || 0}%` }}\n                transition={springs.smooth}\n              />\n            </ProgressPrimitive.Indicator>\n          )}\n        </ProgressPrimitive.Root>\n\n        {showLabel && !isIndeterminate && (\n          <span className=\"shrink-0 text-ds-xs text-surface-fg-muted tabular-nums\">\n            {value}%\n          </span>\n        )}\n      </div>\n    )\n  },\n)\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress, progressIndicatorVariants,progressTrackVariants }\nexport type { ProgressProps }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAwB,EAC5B,qEACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA4B,EAChC,yFACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,OAAO;EACR,EACF;CACD,iBAAiB,EAAE,OAAO,WAAW;CACtC,CACF,EAuDK,IAAW,EAAM,YAKnB,EACE,cACA,UACA,SACA,UACA,uBACA,cACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAkB,KAAiC,MAEnD,IACJ,KAAa,KAAS,OAClB,IAAQ,MACN,UACA,KAAS,KACP,YACA,KAAS,KACP,YACA,YACN;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,+BAA+B,KAAa,SAAS;YAAxE,CACE,kBAAC,GAAD;GACO;GACL,OAAO,IAAkB,OAAO;GAChC,WAAW,EAAG,EAAsB,EAAE,SAAM,CAAC,EAAE,EAAU;GACzD,GAAI;aAEH,IACC,kBAAC,GAAD,EACE,WAAW,EACT,EAA0B,EAAE,OAAO,GAAgB,CAAC,EACpD,mEACA,EACD,EACD,CAAA,GAEF,kBAAC,GAAD;IACE,WAAW,EAAG,UAAU,EAAmB;IAC3C,SAAA;cAEA,kBAAC,EAAO,KAAR;KACE,WAAW,EACT,EAA0B,EAAE,OAAO,GAAgB,CAAC,EACpD,kEACD;KACD,SAAS;KACT,SAAS,EAAE,OAAO,GAAG,KAAS,EAAE,IAAI;KACpC,YAAY,EAAQ;KACpB,CAAA;IAC0B,CAAA;GAET,CAAA,EAExB,KAAa,CAAC,KACb,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAM,IACF;KAEL;;EAGX;AACD,EAAS,cAAA,EAAqC"}
+{"version":3,"file":"progress.js","names":[],"sources":["../../src/ui/progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@primitives/react-progress'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ---------------------------------------------------------------------------\n * CVA Variants\n * ------------------------------------------------------------------------ */\n\nconst progressTrackVariants = cva(\n  'relative w-full overflow-hidden rounded-pill bg-surface-raised',\n  {\n    variants: {\n      size: {\n        sm: 'h-1',\n        md: 'h-2',\n        lg: 'h-3',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst progressIndicatorVariants = cva(\n  'h-full w-full flex-1 transition-[width] duration-moderate-02 ease-expressive-standard',\n  {\n    variants: {\n      color: {\n        default: 'bg-accent-9',\n        success: 'bg-success-9',\n        warning: 'bg-warning-9',\n        error: 'bg-error-9',\n      },\n    },\n    defaultVariants: { color: 'default' },\n  },\n)\n\n/* ---------------------------------------------------------------------------\n * Types\n * ------------------------------------------------------------------------ */\n\n/**\n * Props for Progress — a horizontal progress bar with size and color variants, an optional\n * percentage label, and an indeterminate animation when `value` is undefined/null.\n *\n * **Track size:** `sm` (4px) | `md` (8px, default) | `lg` (12px)\n *\n * **Indicator color:** `default` (brand interactive) | `success` | `warning` | `error`\n *\n * **Indeterminate:** Omit `value` (or pass `undefined`) to show an animated indeterminate bar.\n * When `value` is provided, it should be a number between 0–100.\n *\n * **`showLabel`:** Renders the percentage value next to the bar (only when `value` is set).\n *\n * @example\n * // Determinate upload progress:\n * <Progress value={uploadPercent} color=\"default\" showLabel />\n *\n * @example\n * // Indeterminate loading bar (while waiting for an async operation):\n * <Progress size=\"sm\" />\n *\n * @example\n * // Success-colored completion bar (e.g. after all tasks done):\n * <Progress value={100} color=\"success\" size=\"md\" />\n *\n * @example\n * // Warning threshold indicator (disk usage at 80%):\n * <Progress value={80} color=\"warning\" showLabel size=\"lg\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ProgressProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n      'color'\n    >,\n    VariantProps<typeof progressTrackVariants>,\n    VariantProps<typeof progressIndicatorVariants> {\n  /** Additional class names for the indicator element */\n  indicatorClassName?: string\n  /** Display the percentage label next to the progress bar */\n  showLabel?: boolean\n  /** When true, color auto-shifts by value: 0-59 = default (accent), 60-84 = warning, 85-100 = success, >100 = error. @default false */\n  autoColor?: boolean\n}\n\n/* ---------------------------------------------------------------------------\n * Component\n * ------------------------------------------------------------------------ */\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  ProgressProps\n>(\n  (\n    {\n      className,\n      value,\n      size,\n      color,\n      indicatorClassName,\n      showLabel,\n      autoColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const isIndeterminate = value === undefined || value === null\n\n    const effectiveColor =\n      autoColor && value != null\n        ? value > 100\n          ? 'error'\n          : value >= 85\n            ? 'success'\n            : value >= 60\n              ? 'warning'\n              : 'default'\n        : color\n\n    return (\n      <div className={cn('flex items-center gap-ds-03', showLabel && 'w-full')}>\n        <ProgressPrimitive.Root\n          ref={ref}\n          value={isIndeterminate ? null : value}\n          className={cn(progressTrackVariants({ size }), className)}\n          {...props}\n        >\n          {isIndeterminate ? (\n            <ProgressPrimitive.Indicator\n              className={cn(\n                progressIndicatorVariants({ color: effectiveColor }),\n                'w-2/5 animate-progress-indeterminate motion-reduce:animate-none',\n                indicatorClassName,\n              )}\n            />\n          ) : (\n            <ProgressPrimitive.Indicator\n              className={cn('h-full', indicatorClassName)}\n              asChild\n            >\n              <motion.div\n                className={cn(\n                  progressIndicatorVariants({ color: effectiveColor }),\n                  'transition-colors duration-moderate-01 ease-productive-standard',\n                )}\n                initial={false}\n                animate={{ width: `${value || 0}%` }}\n                transition={springs.smooth}\n              />\n            </ProgressPrimitive.Indicator>\n          )}\n        </ProgressPrimitive.Root>\n\n        {showLabel && !isIndeterminate && (\n          <span className=\"shrink-0 text-ds-xs text-surface-fg-muted tabular-nums\">\n            {value}%\n          </span>\n        )}\n      </div>\n    )\n  },\n)\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress, progressIndicatorVariants,progressTrackVariants }\nexport type { ProgressProps }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAwB,EAC5B,kEACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA4B,EAChC,yFACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,OAAO;EACR,EACF;CACD,iBAAiB,EAAE,OAAO,WAAW;CACtC,CACF,EAuDK,IAAW,EAAM,YAKnB,EACE,cACA,UACA,SACA,UACA,uBACA,cACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAkB,KAAiC,MAEnD,IACJ,KAAa,KAAS,OAClB,IAAQ,MACN,UACA,KAAS,KACP,YACA,KAAS,KACP,YACA,YACN;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,+BAA+B,KAAa,SAAS;YAAxE,CACE,kBAAC,GAAD;GACO;GACL,OAAO,IAAkB,OAAO;GAChC,WAAW,EAAG,EAAsB,EAAE,SAAM,CAAC,EAAE,EAAU;GACzD,GAAI;aAEH,IACC,kBAAC,GAAD,EACE,WAAW,EACT,EAA0B,EAAE,OAAO,GAAgB,CAAC,EACpD,mEACA,EACD,EACD,CAAA,GAEF,kBAAC,GAAD;IACE,WAAW,EAAG,UAAU,EAAmB;IAC3C,SAAA;cAEA,kBAAC,EAAO,KAAR;KACE,WAAW,EACT,EAA0B,EAAE,OAAO,GAAgB,CAAC,EACpD,kEACD;KACD,SAAS;KACT,SAAS,EAAE,OAAO,GAAG,KAAS,EAAE,IAAI;KACpC,YAAY,EAAQ;KACpB,CAAA;IAC0B,CAAA;GAET,CAAA,EAExB,KAAa,CAAC,KACb,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAM,IACF;KAEL;;EAGX;AACD,EAAS,cAAA,EAAqC"}

package/dist/ui/radio.js

@@ -30,7 +30,7 @@ var d = {
 	lg: "h-2.5 w-2.5"
 }, p = o.forwardRef(({ className: e, size: a = "md", ...o }, u) => /* @__PURE__ */ s(n, {
 	ref: u,
-	className: i("touch-target aspect-square rounded-ds-full", d[a], "border border-surface-border-strong bg-surface-raised-hover", "transition-colors duration-fast-01", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "hover:border-accent-7 hover:bg-surface-raised-active", "data-[state=checked]:border-accent-7", e),
+	className: i("touch-target aspect-square rounded-pill", d[a], "border border-surface-border-strong bg-surface-raised-hover", "transition-colors duration-fast-01", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "hover:border-accent-7 hover:bg-surface-raised-active", "data-[state=checked]:border-accent-7", e),
 	...o,
 	children: /* @__PURE__ */ s(t, {
 		asChild: !0,

package/dist/ui/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../src/ui/radio.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@primitives/react-radio-group'\nimport { IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn('grid gap-ds-03', className)}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nexport interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst radioSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst radioIndicatorClasses = {\n  sm: 'h-1.5 w-1.5',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-2.5 w-2.5',\n} as const\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(({ className, size = 'md', ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'touch-target aspect-square rounded-ds-full',\n        radioSizeClasses[size],\n        'border border-surface-border-strong bg-surface-raised-hover',\n        'transition-colors duration-fast-01',\n        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'hover:border-accent-7 hover:bg-surface-raised-active',\n        'data-[state=checked]:border-accent-7',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator asChild className=\"flex items-center justify-center\">\n        <motion.span\n          className=\"flex items-center justify-center\"\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          transition={springs.bouncy}\n        >\n          <IconCircle className={cn(radioIndicatorClasses[size], 'fill-accent-9 text-accent-11')} />\n        </motion.span>\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n\nexport { RadioGroup, RadioGroupItem }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,GAAc,EACzB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS;AAExD,QACE,kBAAC,GAAD;EACE,WAAW,EAAG,kBAAkB,EAAU;EAC1C,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;EACL,CAAA;EAEJ;AACF,EAAW,cAAA,EAAuC;AAOlD,IAAM,IAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwB;CAC5B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAiB,EAAM,YAG1B,EAAE,cAAW,UAAO,MAAM,GAAG,KAAS,MAErC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,8CACA,EAAiB,IACjB,+DACA,sCACA,6GACA,gEACA,wDACA,wCACA,EACD;CACD,GAAI;WAEJ,kBAAC,GAAD;EAA+B,SAAA;EAAQ,WAAU;YAC/C,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,SAAS,EAAE,OAAO,GAAG;GACrB,SAAS,EAAE,OAAO,GAAG;GACrB,YAAY,EAAQ;aAEpB,kBAAC,GAAD,EAAY,WAAW,EAAG,EAAsB,IAAO,+BAA+B,EAAI,CAAA;GAC9E,CAAA;EACgB,CAAA;CACP,CAAA,CAE7B;AACF,EAAe,cAAA,EAAuC"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/ui/radio.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@primitives/react-radio-group'\nimport { IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn('grid gap-ds-03', className)}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nexport interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst radioSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst radioIndicatorClasses = {\n  sm: 'h-1.5 w-1.5',\n  md: 'h-ds-03 w-ds-03',\n  lg: 'h-2.5 w-2.5',\n} as const\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(({ className, size = 'md', ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'touch-target aspect-square rounded-pill',\n        radioSizeClasses[size],\n        'border border-surface-border-strong bg-surface-raised-hover',\n        'transition-colors duration-fast-01',\n        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'hover:border-accent-7 hover:bg-surface-raised-active',\n        'data-[state=checked]:border-accent-7',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator asChild className=\"flex items-center justify-center\">\n        <motion.span\n          className=\"flex items-center justify-center\"\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          transition={springs.bouncy}\n        >\n          <IconCircle className={cn(radioIndicatorClasses[size], 'fill-accent-9 text-accent-11')} />\n        </motion.span>\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n\nexport { RadioGroup, RadioGroupItem }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,GAAc,EACzB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS;AAExD,QACE,kBAAC,GAAD;EACE,WAAW,EAAG,kBAAkB,EAAU;EAC1C,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;EACL,CAAA;EAEJ;AACF,EAAW,cAAA,EAAuC;AAOlD,IAAM,IAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwB;CAC5B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAiB,EAAM,YAG1B,EAAE,cAAW,UAAO,MAAM,GAAG,KAAS,MAErC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,2CACA,EAAiB,IACjB,+DACA,sCACA,6GACA,gEACA,wDACA,wCACA,EACD;CACD,GAAI;WAEJ,kBAAC,GAAD;EAA+B,SAAA;EAAQ,WAAU;YAC/C,kBAAC,EAAO,MAAR;GACE,WAAU;GACV,SAAS,EAAE,OAAO,GAAG;GACrB,SAAS,EAAE,OAAO,GAAG;GACrB,YAAY,EAAQ;aAEpB,kBAAC,GAAD,EAAY,WAAW,EAAG,EAAsB,IAAO,+BAA+B,EAAI,CAAA;GAC9E,CAAA;EACgB,CAAA;CACP,CAAA,CAE7B;AACF,EAAe,cAAA,EAAuC"}

package/dist/ui/segmented-control.d.ts

@@ -1,14 +1,13 @@
 "use client";
+import { IconInput } from './lib/icon-input';
 import * as React from 'react';
 export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlVariant = 'default' | 'solid';
 export interface SegmentedControlOption {
     id: string;
     text: string;
-    /** Optional icon component rendered before the text label. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
+    /** Optional icon rendered before the text label. Accepts any `IconInput`. */
+    icon?: IconInput;
 }
 export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     size?: SegmentedControlSize;

package/dist/ui/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA6BD,QAAA,MAAM,gBAAgB,8FA+HrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA6BD,QAAA,MAAM,gBAAgB,8FAkIrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/segmented-control.js

@@ -1,10 +1,12 @@
 "use client";
-import { cn as e } from "./lib/utils.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { LayoutGroup as i, motion as a } from "framer-motion";
+import { IconProvider as e } from "./icon-context.js";
+import { cn as t } from "./lib/utils.js";
+import { t as n } from "../_chunks/normalize-icon.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { LayoutGroup as o, motion as s } from "framer-motion";
 //#region src/ui/segmented-control.tsx
-var o = {
+var c = {
 	sm: {
 		button: "h-7 px-ds-04 text-ds-sm",
 		icon: "h-3.5 w-3.5"
@@ -17,78 +19,84 @@ var o = {
 		button: "h-10 px-ds-06 text-ds-md",
 		icon: "h-4 w-4"
 	}
-}, s = {
+}, l = {
 	default: "bg-surface-overlay shadow-raised",
 	solid: "bg-accent-9"
-}, c = {
+}, u = {
 	default: "text-surface-fg",
 	solid: "text-accent-fg"
-}, l = {
+}, d = {
 	type: "spring",
 	stiffness: 400,
 	damping: 30
-}, u = t.forwardRef(function({ size: u = "md", variant: d = "default", options: f, selectedId: p, onSelect: m, disabled: h = !1, className: g, ..._ }, v) {
-	let y = t.useId(), b = t.useRef(null), x = t.useCallback((e) => {
-		b.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
-	}, [v]), S = (e) => {
-		if (h) return;
-		let t = f.findIndex((e) => e.id === p), n = t;
+}, f = r.forwardRef(function({ size: f = "md", variant: p = "default", options: m, selectedId: h, onSelect: g, disabled: _ = !1, className: v, ...y }, b) {
+	let x = r.useId(), S = r.useRef(null), C = r.useCallback((e) => {
+		S.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
+	}, [b]), w = (e) => {
+		if (_) return;
+		let t = m.findIndex((e) => e.id === h), n = t;
 		switch (e.key) {
 			case "ArrowLeft":
-				e.preventDefault(), n = t > 0 ? t - 1 : f.length - 1;
+				e.preventDefault(), n = t > 0 ? t - 1 : m.length - 1;
 				break;
 			case "ArrowRight":
-				e.preventDefault(), n = t < f.length - 1 ? t + 1 : 0;
+				e.preventDefault(), n = t < m.length - 1 ? t + 1 : 0;
 				break;
 			case "Home":
 				e.preventDefault(), n = 0;
 				break;
 			case "End":
-				e.preventDefault(), n = f.length - 1;
+				e.preventDefault(), n = m.length - 1;
 				break;
 			default: return;
 		}
-		m(f[n].id), requestAnimationFrame(() => {
-			(b.current?.querySelectorAll("[role=\"tab\"]"))?.[n]?.focus();
+		g(m[n].id), requestAnimationFrame(() => {
+			(S.current?.querySelectorAll("[role=\"tab\"]"))?.[n]?.focus();
 		});
-	}, { button: C, icon: w } = o[u];
-	return /* @__PURE__ */ n("div", {
-		ref: x,
+	}, { button: T, icon: E } = c[f];
+	return /* @__PURE__ */ i("div", {
+		ref: C,
 		role: "tablist",
 		tabIndex: -1,
-		"aria-label": _["aria-label"] ?? "Segmented control",
-		onKeyDown: S,
-		className: e("inline-flex p-[3px] rounded-ds-lg", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", h && "opacity-action-disabled pointer-events-none", g),
-		..._,
-		children: /* @__PURE__ */ n(i, {
-			id: y,
-			children: f.map((t) => {
-				let i = t.id === p, o = t.icon;
-				return /* @__PURE__ */ r("button", {
+		"aria-label": y["aria-label"] ?? "Segmented control",
+		onKeyDown: w,
+		className: t("inline-flex p-[3px] rounded-pill", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", _ && "opacity-action-disabled pointer-events-none", v),
+		...y,
+		children: /* @__PURE__ */ i(o, {
+			id: x,
+			children: m.map((r) => {
+				let o = r.id === h;
+				return /* @__PURE__ */ a("button", {
 					type: "button",
 					role: "tab",
-					"aria-selected": i,
-					tabIndex: i ? 0 : -1,
-					disabled: h,
-					onClick: () => m(t.id),
-					className: e("relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C, i ? c[d] : "text-surface-fg-muted hover:text-surface-fg"),
+					"aria-selected": o,
+					tabIndex: o ? 0 : -1,
+					disabled: _,
+					onClick: () => g(r.id),
+					className: t("relative inline-flex items-center justify-center gap-ds-02 rounded-pill", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", T, o ? u[p] : "text-surface-fg-muted hover:text-surface-fg"),
 					children: [
-						i && /* @__PURE__ */ n(a.span, {
+						o && /* @__PURE__ */ i(s.span, {
 							layoutId: "segment-pill",
-							className: e("absolute inset-0 rounded-ds-md pointer-events-none", s[d]),
-							transition: l
+							className: t("absolute inset-0 rounded-pill pointer-events-none", l[p]),
+							transition: d
+						}),
+						r.icon && /* @__PURE__ */ i("span", {
+							className: t("relative z-[1] shrink-0 inline-flex items-center justify-center", E),
+							children: /* @__PURE__ */ i(e, {
+								size: f === "lg" ? "sm" : "xs",
+								children: n(r.icon)
+							})
 						}),
-						o && /* @__PURE__ */ n(o, { className: e("relative z-[1] shrink-0", w) }),
-						/* @__PURE__ */ n("span", {
+						/* @__PURE__ */ i("span", {
 							className: "relative z-[1]",
-							children: t.text
+							children: r.text
 						})
 					]
-				}, t.id);
+				}, r.id);
 			})
 		})
 	});
 });
-u.displayName = "SegmentedControl";
+f.displayName = "SegmentedControl";
 //#endregion
-export { u as SegmentedControl };
+export { f as SegmentedControl };

package/dist/ui/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon component rendered before the text label. */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-ds-lg',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n            const OptionIcon = option.icon\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-ds-md pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {OptionIcon && (\n                  <OptionIcon className={cn('relative z-[1] shrink-0', iconSize)} />\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;AA8BA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,qCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO,GAC3B,IAAa,EAAO;AAE1B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,4EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,sDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,KACC,kBAAC,GAAD,EAAY,WAAW,EAAG,2BAA2B,EAAS,EAAI,CAAA;MAEpE,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAlCF,EAAO,GAkCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon rendered before the text label. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-pill',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-pill',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-pill pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {option.icon && (\n                  <span className={cn('relative z-[1] shrink-0 inline-flex items-center justify-center', iconSize)}>\n                    <IconProvider size={size === 'lg' ? 'sm' : 'xs'}>\n                      {normalizeIcon(option.icon)}\n                    </IconProvider>\n                  </span>\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,oCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO;AAEjC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,2EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,qDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,EAAO,QACN,kBAAC,QAAD;OAAM,WAAW,EAAG,mEAAmE,EAAS;iBAC9F,kBAAC,GAAD;QAAc,MAAM,MAAS,OAAO,OAAO;kBACxC,EAAc,EAAO,KAAK;QACd,CAAA;OACV,CAAA;MAET,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAtCF,EAAO,GAsCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}

package/dist/ui/select.js

@@ -10,7 +10,7 @@ import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import { IconCheck as w, IconChevronDown as T, IconChevronUp as E } from "@tabler/icons-react";
 import { motion as D } from "framer-motion";
 //#region src/ui/select.tsx
-var O = e, k = r, A = u, j = _("flex w-full items-center justify-between whitespace-nowrap rounded-ds-md placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1", {
+var O = e, k = r, A = u, j = _("flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1", {
 	variants: {
 		variant: {
 			default: "border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7",
@@ -97,7 +97,7 @@ var F = x.forwardRef(({ className: e, children: n, position: r = "popper", ...a
 			...h.snappy,
 			opacity: g.fade
 		},
-		className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
+		className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
 		children: [
 			/* @__PURE__ */ S(N, {}),
 			/* @__PURE__ */ S(c, {
@@ -117,7 +117,7 @@ var I = x.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ S(s, {
 I.displayName = s.displayName;
 var L = x.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ C(n, {
 	ref: i,
-	className: v("relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: v("relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...r,
 	children: [/* @__PURE__ */ S("span", {
 		className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",

package/dist/ui/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n *   <SelectTrigger size=\"lg\">\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"a\">Option A</SelectItem>\n *     <SelectItem value=\"b\">Option B</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n  'flex w-full items-center justify-between whitespace-nowrap rounded-ds-md placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7',\n        outline:\n          'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n      },\n      color: {\n        default: '',\n        error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n      },\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n *   <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(({ className, children, variant, color, size, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError =\n    color === 'error' ||\n    (fieldCtx.state === 'error' && color == null)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(selectTriggerVariants({ variant, color: isError && !color ? 'error' : color, size }), className)}\n    aria-invalid={isError || undefined}\n    aria-describedby={ariaDescribedBy}\n    aria-required={ariaRequired || undefined}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n  )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronUp} size=\"sm\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronDown} size=\"sm\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      asChild\n      {...props}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ ...springs.snappy, opacity: tweens.fade }}\n        className={cn(\n          'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-ds-02',\n            position === 'popper' &&\n              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-ds-03 py-ds-02b text-ds-md font-semibold', className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n *   <SelectTrigger size=\"lg\">\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"a\">Option A</SelectItem>\n *     <SelectItem value=\"b\">Option B</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n  'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7',\n        outline:\n          'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n      },\n      color: {\n        default: '',\n        error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n      },\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n *   <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(({ className, children, variant, color, size, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError =\n    color === 'error' ||\n    (fieldCtx.state === 'error' && color == null)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(selectTriggerVariants({ variant, color: isError && !color ? 'error' : color, size }), className)}\n    aria-invalid={isError || undefined}\n    aria-describedby={ariaDescribedBy}\n    aria-required={ariaRequired || undefined}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n  )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronUp} size=\"sm\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronDown} size=\"sm\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      asChild\n      {...props}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ ...springs.snappy, opacity: tweens.fade }}\n        className={cn(\n          'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-ds-02',\n            position === 'popper' &&\n              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-ds-03 py-ds-02b text-ds-md font-semibold', className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/ui/sheet.js

@@ -90,11 +90,11 @@ var O = {
 				children: [
 					d && /* @__PURE__ */ g("div", {
 						className: "flex justify-center pt-ds-03 pb-ds-02",
-						children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-ds-full bg-surface-border" })
+						children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
 					}),
 					/* @__PURE__ */ _(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 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 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__ */ g(p, {
 							icon: v,
 							size: "sm"

package/dist/ui/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\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  const contextValue = React.useMemo(\n    () => ({ open, onClose: () => handleOpenChange(false) }),\n    [open, handleOpenChange],\n  )\n\n  return (\n    <SheetOpenContext.Provider value={contextValue}>\n      <SheetPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n        {children}\n      </SheetPrimitive.Root>\n    </SheetOpenContext.Provider>\n  )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay forceMount asChild>\n    <motion.div\n      ref={ref}\n      className={cn('fixed inset-0 z-modal bg-overlay', className)}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={tweens.fade}\n      {...motionProps(props)}\n    />\n  </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n  top: { y: '-100%' },\n  bottom: { y: '100%' },\n  left: { x: '-100%' },\n  right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n  top: { y: 0 },\n  bottom: { y: 0 },\n  left: { x: 0 },\n  right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n  'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n        bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n        right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n  responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n  const isReduced = useReducedMotion()\n  const { open, onClose } = React.useContext(SheetOpenContext)\n  const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n  const internalRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <SheetPortal forceMount>\n          <SheetOverlay />\n          <SheetPrimitive.Content forceMount asChild>\n            <motion.div\n              ref={composedRef}\n              className={cn(sheetVariants({ side: effectiveSide }), className)}\n              initial={slideInitial[effectiveSide]}\n              animate={slideAnimate[effectiveSide]}\n              exit={slideInitial[effectiveSide]}\n              transition={springs.smooth}\n              drag={isMobile && !isReduced ? 'y' : false}\n              dragConstraints={{ top: 0 }}\n              dragElastic={0.2}\n              onDragEnd={\n                isMobile\n                  ? (\n                      _: unknown,\n                      info: { offset: { y: number }; velocity: { y: number } },\n                    ) => {\n                      const h =\n                        internalRef.current?.getBoundingClientRect().height ?? 300\n                      if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n                        onClose()\n                    }\n                  : undefined\n              }\n              {...motionProps(props)}\n            >\n              {isMobile && (\n                <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                  <div className=\"h-1 w-8 rounded-ds-full bg-surface-border\" />\n                </div>\n              )}\n              <SheetPrimitive.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 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={IconX} size=\"sm\" />\n                <span className=\"sr-only\">Close</span>\n              </SheetPrimitive.Close>\n              {children}\n            </motion.div>\n          </SheetPrimitive.Content>\n        </SheetPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = 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-03 text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = 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)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\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  const contextValue = React.useMemo(\n    () => ({ open, onClose: () => handleOpenChange(false) }),\n    [open, handleOpenChange],\n  )\n\n  return (\n    <SheetOpenContext.Provider value={contextValue}>\n      <SheetPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n        {children}\n      </SheetPrimitive.Root>\n    </SheetOpenContext.Provider>\n  )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay forceMount asChild>\n    <motion.div\n      ref={ref}\n      className={cn('fixed inset-0 z-modal bg-overlay', className)}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={tweens.fade}\n      {...motionProps(props)}\n    />\n  </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n  top: { y: '-100%' },\n  bottom: { y: '100%' },\n  left: { x: '-100%' },\n  right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n  top: { y: 0 },\n  bottom: { y: 0 },\n  left: { x: 0 },\n  right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n  'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n        bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n        right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n  responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n  const isReduced = useReducedMotion()\n  const { open, onClose } = React.useContext(SheetOpenContext)\n  const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n  const internalRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <SheetPortal forceMount>\n          <SheetOverlay />\n          <SheetPrimitive.Content forceMount asChild>\n            <motion.div\n              ref={composedRef}\n              className={cn(sheetVariants({ side: effectiveSide }), className)}\n              initial={slideInitial[effectiveSide]}\n              animate={slideAnimate[effectiveSide]}\n              exit={slideInitial[effectiveSide]}\n              transition={springs.smooth}\n              drag={isMobile && !isReduced ? 'y' : false}\n              dragConstraints={{ top: 0 }}\n              dragElastic={0.2}\n              onDragEnd={\n                isMobile\n                  ? (\n                      _: unknown,\n                      info: { offset: { y: number }; velocity: { y: number } },\n                    ) => {\n                      const h =\n                        internalRef.current?.getBoundingClientRect().height ?? 300\n                      if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n                        onClose()\n                    }\n                  : undefined\n              }\n              {...motionProps(props)}\n            >\n              {isMobile && (\n                <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                  <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n                </div>\n              )}\n              <SheetPrimitive.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 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={IconX} size=\"sm\" />\n                <span className=\"sr-only\">Close</span>\n              </SheetPrimitive.Close>\n              {children}\n            </motion.div>\n          </SheetPrimitive.Content>\n        </SheetPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = 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-03 text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = 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)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/sidebar.js

@@ -130,7 +130,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
 			children: /* @__PURE__ */ w("aside", {
 				"aria-label": "Sidebar",
 				"data-sidebar": "sidebar",
-				className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised",
+				className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised",
 				children: a
 			})
 		})]
@@ -175,7 +175,7 @@ var P = _(({ className: e, ...t }, n) => {
 P.displayName = "SidebarRail";
 var F = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("main", {
 	ref: n,
-	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow-raised", e),
+	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised", e),
 	...t
 }));
 F.displayName = "SidebarInset";
@@ -226,14 +226,14 @@ V.displayName = "SidebarGroup";
 var H = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "div", {
 	ref: a,
 	"data-sidebar": "group-label",
-	className: r("flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", t),
+	className: r("flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", t),
 	...i
 }));
 H.displayName = "SidebarGroupLabel";
 var U = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "button", {
 	ref: a,
 	"data-sidebar": "group-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
+	className: r("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
 	...i
 }));
 U.displayName = "SidebarGroupAction";
@@ -258,7 +258,7 @@ var K = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("li", {
 	...t
 }));
 K.displayName = "SidebarMenuItem";
-var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
+var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "hover:bg-surface-raised-hover hover:text-surface-fg",
@@ -287,7 +287,7 @@ var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 		...u,
 		children: n ? l : /* @__PURE__ */ T(C, { children: [i && /* @__PURE__ */ w(E.span, {
 			layoutId: "sidebar-active-indicator",
-			className: "absolute inset-0 rounded-ds-md bg-accent-2",
+			className: "absolute inset-0 rounded-control bg-accent-2",
 			transition: t.smooth
 		}), /* @__PURE__ */ w("span", {
 			className: "relative z-[1] flex w-full items-center gap-[inherit]",
@@ -308,14 +308,14 @@ q.displayName = "SidebarMenuButton";
 var J = _(({ className: t, asChild: n = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ w(n ? e : "button", {
 	ref: o,
 	"data-sidebar": "menu-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
+	className: r("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
 	...a
 }));
 J.displayName = "SidebarMenuAction";
 var Y = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "menu-badge",
-	className: r("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg", "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", e),
+	className: r("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg", "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", e),
 	...t
 }));
 Y.displayName = "SidebarMenuBadge";
@@ -324,10 +324,10 @@ var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
 	return /* @__PURE__ */ T("div", {
 		ref: i,
 		"data-sidebar": "menu-skeleton",
-		className: r("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
+		className: r("flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03", e),
 		...n,
 		children: [t && /* @__PURE__ */ w(s, {
-			className: "h-ico-sm w-ico-sm rounded-ds-md",
+			className: "h-ico-sm w-ico-sm rounded-control",
 			"data-sidebar": "menu-skeleton-icon"
 		}), /* @__PURE__ */ w(s, {
 			className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -354,7 +354,7 @@ var $ = _(({ asChild: t = !1, size: n = "md", isActive: i, className: a, ...o },
 	"data-sidebar": "menu-sub-button",
 	"data-size": n,
 	"data-active": i,
-	className: r("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", n === "sm" && "text-ds-sm", n === "md" && "text-ds-md", "group-data-[collapsible=icon]:hidden", a),
+	className: r("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", n === "sm" && "text-ds-sm", n === "md" && "text-ds-md", "group-data-[collapsible=icon]:hidden", a),
 	...o
 }));
 $.displayName = "SidebarMenuSubButton";