@devalok/shilp-sutra 0.38.0 → 0.39.0

package/dist/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { cn } from './lib/utils'\n\nexport type InputState = 'default' | 'error' | 'warning' | 'success'\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-ds-md',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm',\n        sm: 'h-ds-sm text-ds-sm',\n        md: 'h-ds-md text-ds-md',\n        lg: 'h-ds-lg rounded-ds-lg text-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: InputState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win\n    const state =\n      stateProp ??\n      (fieldCtx.state === 'helper'\n        ? undefined\n        : (fieldCtx.state as InputState | undefined))\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-ds-sm',\n      sm: 'text-ds-sm',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAqDK,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAEzB,IACJ,MACC,EAAS,UAAU,WAChB,KAAA,IACC,EAAS,QACV,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AASD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,SAAM,CAAC,EAC9B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,EACD;YAPH;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,sBAC3B;cAEA;IACI,CAAA;GAGR,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,sBAC3B;eAEA;KACI,CAAA;IACM,CAAA;GAGjB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BArDqC;KAC3C,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAiDoB,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,EACD;IACD,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;IACJ,CAAA;GAED,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,sBACzB;cAEA;IACI,CAAA;GAGR,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,sBACzB;eAEA;KACI,CAAA;IACM,CAAA;GAEb;;EAGX;AACD,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { cn } from './lib/utils'\n\nexport type InputState = 'default' | 'error' | 'warning' | 'success'\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm',\n        sm: 'h-ds-sm text-ds-sm',\n        md: 'h-ds-md text-ds-md',\n        lg: 'h-ds-lg text-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: InputState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win\n    const state =\n      stateProp ??\n      (fieldCtx.state === 'helper'\n        ? undefined\n        : (fieldCtx.state as InputState | undefined))\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-ds-sm',\n      sm: 'text-ds-sm',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAqDK,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAEzB,IACJ,MACC,EAAS,UAAU,WAChB,KAAA,IACC,EAAS,QACV,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AASD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,SAAM,CAAC,EAC9B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,EACD;YAPH;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,sBAC3B;cAEA;IACI,CAAA;GAGR,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,sBAC3B;eAEA;KACI,CAAA;IACM,CAAA;GAGjB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BArDqC;KAC3C,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAiDoB,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,EACD;IACD,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;IACJ,CAAA;GAED,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,sBACzB;cAEA;IACI,CAAA;GAGR,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,sBACzB;eAEA;KACI,CAAA;IACM,CAAA;GAEb;;EAGX;AACD,EAAM,cAAc"}

package/dist/ui/link.js

@@ -6,7 +6,7 @@ import { jsx as r } from "react/jsx-runtime";
 //#region src/ui/link.tsx
 var i = n.forwardRef(({ className: n, inline: i = !0, asChild: a = !1, ...o }, s) => /* @__PURE__ */ r(a ? e : "a", {
 	ref: s,
-	className: t("text-accent-11 underline decoration-transparent hover:decoration-current underline-offset-2", "hover:text-accent-12 active:opacity-80 transition-[color,text-decoration-color,opacity] duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 rounded-ds-sm", i ? "inline" : "block", n),
+	className: t("text-accent-11 underline decoration-transparent hover:decoration-current underline-offset-2", "hover:text-accent-12 active:opacity-80 transition-[color,text-decoration-color,opacity] duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 rounded-control-inner", i ? "inline" : "block", n),
 	...o
 }));
 i.displayName = "Link";

package/dist/ui/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../src/ui/link.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  inline?: boolean\n  asChild?: boolean\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, inline = true, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'text-accent-11 underline decoration-transparent hover:decoration-current underline-offset-2',\n          'hover:text-accent-12 active:opacity-80 transition-[color,text-decoration-color,opacity] duration-fast-01 ease-productive-standard',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 rounded-ds-sm',\n          inline ? 'inline' : 'block',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nLink.displayName = 'Link'\n\nexport { Link }\n"],"mappings":";;;;;;AAYA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,YAAS,IAAM,aAAU,IAAO,GAAG,KAAS,MAItD,kBAHW,IAAU,IAAO,KAG5B;CACO;CACL,WAAW,EACT,+FACA,qIACA,2HACA,IAAS,WAAW,SACpB,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAK,cAAc"}
+{"version":3,"file":"link.js","names":[],"sources":["../../src/ui/link.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  inline?: boolean\n  asChild?: boolean\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, inline = true, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'text-accent-11 underline decoration-transparent hover:decoration-current underline-offset-2',\n          'hover:text-accent-12 active:opacity-80 transition-[color,text-decoration-color,opacity] duration-fast-01 ease-productive-standard',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 rounded-control-inner',\n          inline ? 'inline' : 'block',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nLink.displayName = 'Link'\n\nexport { Link }\n"],"mappings":";;;;;;AAYA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,YAAS,IAAM,aAAU,IAAO,GAAG,KAAS,MAItD,kBAHW,IAAU,IAAO,KAG5B;CACO;CACL,WAAW,EACT,+FACA,qIACA,mIACA,IAAS,WAAW,SACpB,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAK,cAAc"}

package/dist/ui/menubar.js

@@ -26,19 +26,19 @@ var A = l, j = s, M = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r })
 M.displayName = "MenubarSub";
 var N = m, P = b.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ x(e, {
 	ref: r,
-	className: v("flex h-ds-sm-plus items-center space-x-ds-02 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised", t),
+	className: v("flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised", t),
 	...n
 }));
 P.displayName = e.displayName;
 var F = b.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ x(r, {
 	ref: n,
-	className: v("flex cursor-default select-none items-center rounded-ds-sm px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover", e),
+	className: v("flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover", e),
 	...t
 }));
 F.displayName = r.displayName;
 var I = b.forwardRef(({ className: e, inset: n, children: r, ...i }, a) => /* @__PURE__ */ S(t, {
 	ref: a,
-	className: v("flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", n && "pl-ds-07", e),
+	className: v("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", n && "pl-ds-07", e),
 	...i,
 	children: [r, /* @__PURE__ */ x(y, {
 		icon: w,
@@ -69,7 +69,7 @@ var L = b.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */
 			...g.snappy,
 			opacity: _.fade
 		},
-		className: v("z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+		className: v("z-popover min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
 		children: t
 	})
 }) }));
@@ -79,20 +79,20 @@ var R = b.forwardRef(({ className: e, align: t = "start", alignOffset: n = -4, s
 	align: t,
 	alignOffset: n,
 	sideOffset: r,
-	className: v("z-popover min-w-[12rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", "data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out", e),
+	className: v("z-popover min-w-[12rem] rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", "data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out", e),
 	...a,
 	children: i
 }) }));
 R.displayName = u.displayName;
 var z = b.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ x(c, {
 	ref: r,
-	className: v("relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
+	className: v("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", t && "pl-ds-07", e),
 	...n
 }));
 z.displayName = c.displayName;
 var B = b.forwardRef(({ className: e, children: t, checked: n, ...r }, i) => /* @__PURE__ */ S(d, {
 	ref: i,
-	className: v("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	checked: n,
 	...r,
 	children: [/* @__PURE__ */ x("span", {
@@ -106,7 +106,7 @@ var B = b.forwardRef(({ className: e, children: t, checked: n, ...r }, i) => /*
 B.displayName = d.displayName;
 var V = b.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ S(i, {
 	ref: r,
-	className: v("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: v("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...n,
 	children: [/* @__PURE__ */ x("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",

package/dist/ui/menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.js","names":[],"sources":["../../src/ui/menubar.tsx"],"sourcesContent":["'use client'\n\nimport * as MenubarPrimitive from '@primitives/react-menubar'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst MenubarSubOpenContext = React.createContext(false)\n\nconst MenubarMenu: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>> = (props) => {\n  // MenubarPrimitive.Menu doesn't expose open/onOpenChange directly.\n  // We derive open from data-state on the trigger via a callback ref approach,\n  // but the cleanest way is to use the Menubar root's value prop.\n  // Since MenubarMenu doesn't have open/onOpenChange, we track via a wrapper\n  // that observes the trigger's data-state.\n  //\n  // Alternative: MenubarPrimitive.Menu has a `value` that the root uses.\n  // We'll use a simpler approach: track open via content mount state.\n  return <MenubarPrimitive.Menu {...props} />\n}\nMenubarMenu.displayName = 'MenubarMenu'\n\n// For Menubar, the Menu doesn't expose open/onOpenChange. Instead, we'll use a\n// different approach: wrap Content to use a local presence state based on data-state.\n// We create a wrapper component that tracks whether content should be shown.\n\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group\n\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal\n\nconst MenubarSub: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <MenubarSubOpenContext.Provider value={open}>\n      <MenubarPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </MenubarSubOpenContext.Provider>\n  )\n}\nMenubarSub.displayName = 'MenubarSub'\n\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =\n  MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      'flex h-ds-sm-plus items-center space-x-ds-02 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-ds-sm px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(MenubarSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <MenubarPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </MenubarPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\n// For MenubarContent, since MenubarMenu doesn't expose open/onOpenChange,\n// we use a wrapper that reads presence from a callback approach.\n// The cleanest solution: use a local state tracker via onCloseAutoFocus/onOpenAutoFocus\n// or simply keep CSS-free and let Radix handle mount/unmount naturally.\n//\n// Since Menubar menus are opened by the Menubar root (which tracks which menu value is open),\n// and MenubarPrimitive.Content already handles mount/unmount, we can use a ref-based approach\n// to detect the data-state attribute. However, the simplest reliable approach is to use\n// a wrapper that detects mount via useEffect.\n\n// MenubarContent uses CSS data-state animations instead of framer-motion because\n// MenubarPrimitive.Menu doesn't expose open/onOpenChange, making AnimatePresence\n// impossible to wire up for exit animations. The popover-in/popover-out keyframes\n// are defined in the tailwind preset and triggered by Radix's data-state attribute.\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = 'start', alignOffset = -4, sideOffset = 8, children, ...props },\n    ref,\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-popover min-w-[12rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n          'data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </MenubarPrimitive.Content>\n    </MenubarPrimitive.Portal>\n  ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors 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 left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-ds-sm text-surface-fg-subtle',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayName = 'MenubarShortcut'\n\nexport type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\nexport type MenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"menubar.js","names":[],"sources":["../../src/ui/menubar.tsx"],"sourcesContent":["'use client'\n\nimport * as MenubarPrimitive from '@primitives/react-menubar'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst MenubarSubOpenContext = React.createContext(false)\n\nconst MenubarMenu: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>> = (props) => {\n  // MenubarPrimitive.Menu doesn't expose open/onOpenChange directly.\n  // We derive open from data-state on the trigger via a callback ref approach,\n  // but the cleanest way is to use the Menubar root's value prop.\n  // Since MenubarMenu doesn't have open/onOpenChange, we track via a wrapper\n  // that observes the trigger's data-state.\n  //\n  // Alternative: MenubarPrimitive.Menu has a `value` that the root uses.\n  // We'll use a simpler approach: track open via content mount state.\n  return <MenubarPrimitive.Menu {...props} />\n}\nMenubarMenu.displayName = 'MenubarMenu'\n\n// For Menubar, the Menu doesn't expose open/onOpenChange. Instead, we'll use a\n// different approach: wrap Content to use a local presence state based on data-state.\n// We create a wrapper component that tracks whether content should be shown.\n\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group\n\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal\n\nconst MenubarSub: React.FC<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <MenubarSubOpenContext.Provider value={open}>\n      <MenubarPrimitive.Sub open={open} onOpenChange={handleOpenChange} {...props} />\n    </MenubarSubOpenContext.Provider>\n  )\n}\nMenubarSub.displayName = 'MenubarSub'\n\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =\n  MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      'flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-ds-md font-medium outline-hidden transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(MenubarSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <MenubarPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </MenubarPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\n// For MenubarContent, since MenubarMenu doesn't expose open/onOpenChange,\n// we use a wrapper that reads presence from a callback approach.\n// The cleanest solution: use a local state tracker via onCloseAutoFocus/onOpenAutoFocus\n// or simply keep CSS-free and let Radix handle mount/unmount naturally.\n//\n// Since Menubar menus are opened by the Menubar root (which tracks which menu value is open),\n// and MenubarPrimitive.Content already handles mount/unmount, we can use a ref-based approach\n// to detect the data-state attribute. However, the simplest reliable approach is to use\n// a wrapper that detects mount via useEffect.\n\n// MenubarContent uses CSS data-state animations instead of framer-motion because\n// MenubarPrimitive.Menu doesn't expose open/onOpenChange, making AnimatePresence\n// impossible to wire up for exit animations. The popover-in/popover-out keyframes\n// are defined in the tailwind preset and triggered by Radix's data-state attribute.\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = 'start', alignOffset = -4, sideOffset = 8, children, ...props },\n    ref,\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-popover min-w-[12rem] rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n          'data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </MenubarPrimitive.Content>\n    </MenubarPrimitive.Portal>\n  ),\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors 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 left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-ds-sm text-surface-fg-subtle',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayName = 'MenubarShortcut'\n\nexport type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\nexport type MenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/navigation-menu.js

@@ -23,7 +23,7 @@ var v = f.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ p(i, {
 v.displayName = i.displayName;
 var y = o, b = f.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ m(n, {
 	ref: i,
-	className: u("group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-ds-md bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
+	className: u("group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-control bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
 	...r,
 	children: [
 		t,
@@ -113,7 +113,7 @@ var C = t, w = f.forwardRef(({ className: e, ...t }, n) => {
 	}, []), /* @__PURE__ */ m("div", {
 		className: u("absolute left-0 top-full flex justify-center"),
 		children: [/* @__PURE__ */ p(r, {
-			className: u("origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]", e),
+			className: u("origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]", e),
 			ref: a,
 			...t
 		}), /* @__PURE__ */ p(g.div, {
@@ -159,7 +159,7 @@ var T = f.forwardRef(({ className: e, ...t }, n) => {
 			initial: !1,
 			animate: o ? { opacity: 1 } : { opacity: 0 },
 			transition: l.fade,
-			className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-surface-border shadow-raised-hover"
+			className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-control-inner bg-surface-border shadow-raised-hover"
 		})
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../src/ui/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as NavigationMenuPrimitive from '@primitives/react-navigation-menu'\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      'relative z-raised flex max-w-max flex-1 items-center justify-center',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      'group flex flex-1 list-none items-center justify-center space-x-ds-02',\n      className,\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-ds-md bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    {children}{' '}\n    <Icon icon={IconChevronDown} size=\"sm\" className=\"relative top-[1px] ml-ds-02 transition-transform duration-moderate-02 group-data-[state=open]:rotate-180\" />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\n// ── NavigationMenuContent — directional slide using data-motion ──\n\nconst contentSlideVariants = {\n  'from-start': { x: '-13rem', opacity: 0 },\n  'from-end': { x: '13rem', opacity: 0 },\n  'to-start': { x: '-13rem', opacity: 0 },\n  'to-end': { x: '13rem', opacity: 0 },\n  center: { x: 0, opacity: 1 },\n} as const\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [motionDir, setMotionDir] = React.useState<string | null>(null)\n\n  // Observe data-motion attribute changes from Radix\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    // Read initial value\n    const initial = el.getAttribute('data-motion')\n    if (initial) setMotionDir(initial)\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-motion') {\n          const val = el.getAttribute('data-motion')\n          setMotionDir(val)\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-motion'] })\n    return () => observer.disconnect()\n  }, [])\n\n  const initial = motionDir && motionDir.startsWith('from-')\n    ? contentSlideVariants[motionDir as keyof typeof contentSlideVariants]\n    : motionDir && motionDir.startsWith('to-')\n      ? contentSlideVariants.center\n      : { x: 0, opacity: 0 }\n\n  const animate = motionDir && motionDir.startsWith('from-')\n    ? contentSlideVariants.center\n    : motionDir && motionDir.startsWith('to-')\n      ? contentSlideVariants[motionDir as keyof typeof contentSlideVariants]\n      : contentSlideVariants.center\n\n  return (\n    <NavigationMenuPrimitive.Content\n      ref={composedRef}\n      className={cn(\n        'left-0 top-0 w-full md:absolute md:w-auto',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div\n        key={motionDir}\n        initial={initial}\n        animate={animate}\n        transition={{ ...springs.smooth, opacity: tweens.fade }}\n        className=\"w-full\"\n      >\n        {props.children}\n      </motion.div>\n    </NavigationMenuPrimitive.Content>\n  )\n})\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\n// ── NavigationMenuViewport — scale + fade with layout for size changes ──\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    const initial = el.getAttribute('data-state')\n    setIsOpen(initial === 'open')\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-state') {\n          setIsOpen(el.getAttribute('data-state') === 'open')\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-state'] })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <div className={cn('absolute left-0 top-full flex justify-center')}>\n      <NavigationMenuPrimitive.Viewport\n        className={cn(\n          'origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]',\n          className,\n        )}\n        ref={composedRef}\n        {...props}\n      />\n      {/* Overlay motion element for scale+fade animation */}\n      <motion.div\n        aria-hidden\n        className=\"absolute inset-0 pointer-events-none\"\n        initial={false}\n        animate={isOpen ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }}\n        transition={{ ...springs.smooth, opacity: tweens.fade }}\n      />\n    </div>\n  )\n})\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\n// ── NavigationMenuIndicator — fade + layout position sliding ──\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [isVisible, setIsVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    const initial = el.getAttribute('data-state')\n    setIsVisible(initial === 'visible')\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-state') {\n          setIsVisible(el.getAttribute('data-state') === 'visible')\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-state'] })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <NavigationMenuPrimitive.Indicator\n      ref={composedRef}\n      className={cn(\n        'top-full z-base flex h-ds-02b items-end justify-center overflow-hidden',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div\n        layout\n        initial={false}\n        animate={isVisible ? { opacity: 1 } : { opacity: 0 }}\n        transition={tweens.fade}\n        className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-surface-border shadow-raised-hover\"\n      />\n    </NavigationMenuPrimitive.Indicator>\n  )\n})\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\nexport type NavigationMenuContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n}\n"],"mappings":"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"}
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../src/ui/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as NavigationMenuPrimitive from '@primitives/react-navigation-menu'\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      'relative z-raised flex max-w-max flex-1 items-center justify-center',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      'group flex flex-1 list-none items-center justify-center space-x-ds-02',\n      className,\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-control bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    {children}{' '}\n    <Icon icon={IconChevronDown} size=\"sm\" className=\"relative top-[1px] ml-ds-02 transition-transform duration-moderate-02 group-data-[state=open]:rotate-180\" />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\n// ── NavigationMenuContent — directional slide using data-motion ──\n\nconst contentSlideVariants = {\n  'from-start': { x: '-13rem', opacity: 0 },\n  'from-end': { x: '13rem', opacity: 0 },\n  'to-start': { x: '-13rem', opacity: 0 },\n  'to-end': { x: '13rem', opacity: 0 },\n  center: { x: 0, opacity: 1 },\n} as const\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [motionDir, setMotionDir] = React.useState<string | null>(null)\n\n  // Observe data-motion attribute changes from Radix\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    // Read initial value\n    const initial = el.getAttribute('data-motion')\n    if (initial) setMotionDir(initial)\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-motion') {\n          const val = el.getAttribute('data-motion')\n          setMotionDir(val)\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-motion'] })\n    return () => observer.disconnect()\n  }, [])\n\n  const initial = motionDir && motionDir.startsWith('from-')\n    ? contentSlideVariants[motionDir as keyof typeof contentSlideVariants]\n    : motionDir && motionDir.startsWith('to-')\n      ? contentSlideVariants.center\n      : { x: 0, opacity: 0 }\n\n  const animate = motionDir && motionDir.startsWith('from-')\n    ? contentSlideVariants.center\n    : motionDir && motionDir.startsWith('to-')\n      ? contentSlideVariants[motionDir as keyof typeof contentSlideVariants]\n      : contentSlideVariants.center\n\n  return (\n    <NavigationMenuPrimitive.Content\n      ref={composedRef}\n      className={cn(\n        'left-0 top-0 w-full md:absolute md:w-auto',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div\n        key={motionDir}\n        initial={initial}\n        animate={animate}\n        transition={{ ...springs.smooth, opacity: tweens.fade }}\n        className=\"w-full\"\n      >\n        {props.children}\n      </motion.div>\n    </NavigationMenuPrimitive.Content>\n  )\n})\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\n// ── NavigationMenuViewport — scale + fade with layout for size changes ──\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    const initial = el.getAttribute('data-state')\n    setIsOpen(initial === 'open')\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-state') {\n          setIsOpen(el.getAttribute('data-state') === 'open')\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-state'] })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <div className={cn('absolute left-0 top-full flex justify-center')}>\n      <NavigationMenuPrimitive.Viewport\n        className={cn(\n          'origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]',\n          className,\n        )}\n        ref={composedRef}\n        {...props}\n      />\n      {/* Overlay motion element for scale+fade animation */}\n      <motion.div\n        aria-hidden\n        className=\"absolute inset-0 pointer-events-none\"\n        initial={false}\n        animate={isOpen ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }}\n        transition={{ ...springs.smooth, opacity: tweens.fade }}\n      />\n    </div>\n  )\n})\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\n// ── NavigationMenuIndicator — fade + layout position sliding ──\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLDivElement | null>).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  const [isVisible, setIsVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    const el = innerRef.current\n    if (!el) return\n\n    const initial = el.getAttribute('data-state')\n    setIsVisible(initial === 'visible')\n\n    const observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.attributeName === 'data-state') {\n          setIsVisible(el.getAttribute('data-state') === 'visible')\n        }\n      }\n    })\n    observer.observe(el, { attributes: true, attributeFilter: ['data-state'] })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <NavigationMenuPrimitive.Indicator\n      ref={composedRef}\n      className={cn(\n        'top-full z-base flex h-ds-02b items-end justify-center overflow-hidden',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div\n        layout\n        initial={false}\n        animate={isVisible ? { opacity: 1 } : { opacity: 0 }}\n        transition={tweens.fade}\n        className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-control-inner bg-surface-border shadow-raised-hover\"\n      />\n    </NavigationMenuPrimitive.Indicator>\n  )\n})\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\nexport type NavigationMenuContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n}\n"],"mappings":"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"}

package/dist/ui/number-input.js

@@ -7,7 +7,7 @@ import * as i from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { IconMinus as s, IconPlus as c } from "@tabler/icons-react";
 //#region src/ui/number-input.tsx
-var l = e("flex items-center justify-between rounded-ds-md border border-surface-border-strong", {
+var l = e("flex items-center justify-between rounded-control border border-surface-border-strong", {
 	variants: { size: {
 		xs: "h-ds-xs-plus",
 		sm: "h-ds-sm",
@@ -62,7 +62,7 @@ var l = e("flex items-center justify-between rounded-ds-md border border-surface
 				disabled: _ || e <= m,
 				"aria-label": "Decrease value",
 				title: "Decrease",
-				className: t("flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
+				className: t("flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
 				children: /* @__PURE__ */ a(n, {
 					icon: s,
 					size: M
@@ -89,7 +89,7 @@ var l = e("flex items-center justify-between rounded-ds-md border border-surface
 				disabled: _ || e >= h,
 				"aria-label": "Increase value",
 				title: "Increase",
-				className: t("flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
+				className: t("flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none", j),
 				children: /* @__PURE__ */ a(n, {
 					icon: c,
 					size: M

package/dist/ui/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../../src/ui/number-input.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconPlus } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { cn } from './lib/utils'\n\nexport type NumberInputState = 'default' | 'error' | 'warning' | 'success'\n\nconst numberInputWrapperVariants = cva(\n  'flex items-center justify-between rounded-ds-md border border-surface-border-strong',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus',\n        sm: 'h-ds-sm',\n        md: 'h-ds-md',\n        lg: 'h-ds-lg',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type NumberInputSize = NonNullable<VariantProps<typeof numberInputWrapperVariants>['size']>\n\n/** Maps size to stepper button dimensions */\nconst buttonSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'h-[22px] w-[22px]',\n  sm: 'h-ds-sm w-ds-sm',\n  md: 'h-ds-sm w-ds-sm',\n  lg: 'h-ds-md w-ds-md',\n}\n\n/** Maps size to Icon component size */\nconst iconSizeMap: Record<NonNullable<NumberInputSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps size to input text and width classes */\nconst inputSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'text-ds-sm w-[28px]',\n  sm: 'text-ds-sm w-ds-sm-plus',\n  md: 'text-ds-md w-ds-sm-plus',\n  lg: 'text-ds-md w-ds-md',\n}\n\n/** Maps state to border color classes */\nconst stateColorMap: Record<NonNullable<NumberInputState>, string> = {\n  default: '',\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\n/**\n * Props for NumberInput — a stepper control with \"−\" and \"+\" buttons flanking a numeric input,\n * clamped between `min` and `max`. The decrement/increment buttons are disabled when bounds are reached.\n *\n * **Controlled only:** Pass `value` + `onValueChange` for controlled usage. Uncontrolled usage is\n * possible but the buttons won't update the displayed value without `onValueChange`.\n *\n * **Step:** The `step` prop controls how much each button press increments/decrements (default 1).\n * Direct text input is also clamped to `[min, max]` on change.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n *\n * **Validation states:** `state=\"error\"` colors the border red.\n * Use with `<FormField>` to show helper text below the input.\n *\n * @example\n * // Quantity selector with 1–99 range:\n * <NumberInput value={qty} onValueChange={setQty} min={1} max={99} />\n *\n * @example\n * // Rating input (1–10, step 1):\n * <NumberInput value={rating} onValueChange={setRating} min={1} max={10} />\n *\n * @example\n * // Fine-grained opacity control (0–100, step 5):\n * <NumberInput value={opacity} onValueChange={setOpacity} min={0} max={100} step={5} />\n *\n * @example\n * // Disabled number display (read-only-like):\n * <NumberInput value={autoCalcValue} onValueChange={() => {}} disabled />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'size'> {\n  value?: number\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  /** Size of the number input. Controls height, button sizes, text size. */\n  size?: NumberInputSize\n  /** Validation state controlling border color. */\n  state?: NumberInputState\n}\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value = 0,\n      onValueChange,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled = false,\n      className,\n      size: sizeProp = 'md',\n      state: stateProp,\n      'aria-label': ariaLabelProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // If no explicit aria-label and not inside a FormField (no id to associate with Label),\n    // provide a sensible default\n    const ariaLabel = ariaLabelProp ?? (rest.id || fieldCtx.helperTextId ? undefined : 'Numeric value')\n\n    // Merge FormField context — explicit props always win\n    const state =\n      stateProp ??\n      (fieldCtx.state === 'helper'\n        ? 'default'\n        : (fieldCtx.state as NumberInputState | undefined)) ??\n      'default'\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value.trim()\n      if (raw === '' || raw === '-') {\n        onValueChange?.(min >= 0 ? min : 0)\n        return\n      }\n      const parsed = Number(raw)\n      if (Number.isNaN(parsed)) return\n      const clamped = Math.min(Math.max(parsed, min), max)\n      onValueChange?.(clamped)\n    }\n\n    const handleIncrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value + step\n      if (newValue <= max) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const handleDecrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value - step\n      if (newValue >= min) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const resolvedButtonSize = buttonSizeMap[size]\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedInputSize = inputSizeMap[size]\n\n    return (\n      <div\n        className={cn(\n          numberInputWrapperVariants({ size }),\n          stateColorMap[state],\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={handleDecrement}\n          disabled={disabled || value <= min}\n          aria-label=\"Decrease value\"\n          title=\"Decrease\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconMinus} size={resolvedIconSize} />\n        </button>\n\n        <input\n          ref={ref}\n          type=\"number\"\n          value={value}\n          onChange={handleInputChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={rest['aria-describedby'] ?? fieldCtx.helperTextId}\n          className={cn(\n            'bg-transparent font-semibold border-0 text-center text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n            resolvedInputSize,\n          )}\n          {...rest}\n        />\n\n        <button\n          type=\"button\"\n          onClick={handleIncrement}\n          disabled={disabled || value >= max}\n          aria-label=\"Increase value\"\n          title=\"Increase\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-ds-sm text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconPlus} size={resolvedIconSize} />\n        </button>\n      </div>\n    )\n  },\n)\nNumberInput.displayName = 'NumberInput'\n\nexport { NumberInput, numberInputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAA6B,EACjC,uFACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAKK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA+D;CACnE,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACV,EA8CK,IAAc,EAAM,YAEtB,EACE,WAAQ,GACR,kBACA,SAAM,gBACN,sBACA,UAAO,GACP,cAAW,IACX,cACA,MAAM,IAAW,MACjB,OAAO,GACP,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAGzB,IAAY,MAAkB,EAAK,MAAM,EAAS,eAAe,KAAA,IAAY,kBAG7E,IACJ,MACC,EAAS,UAAU,WAChB,YACC,EAAS,UACd,WAEI,KAAqB,MAA2C;EACpE,IAAM,IAAM,EAAE,OAAO,MAAM,MAAM;AACjC,MAAI,MAAQ,MAAM,MAAQ,KAAK;AAC7B,OAAgB,KAAO,IAAI,IAAM,EAAE;AACnC;;EAEF,IAAM,IAAS,OAAO,EAAI;AACtB,SAAO,MAAM,EAAO,IAExB,IADgB,KAAK,IAAI,KAAK,IAAI,GAAQ,EAAI,EAAE,EAAI,CAC5B;IAGpB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,IAAqB,EAAc,IACnC,IAAmB,EAAY,IAC/B,IAAoB,EAAa;AAEvC,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAA2B,EAAE,SAAM,CAAC,EACpC,EAAc,IACd,EACD;YALH;GAOE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,kTACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAoB,CAAA;IAC1C,CAAA;GAET,kBAAC,SAAD;IACO;IACL,MAAK;IACE;IACP,UAAU;IACL;IACA;IACC;IACI;IACV,cAAY;IACZ,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB,EAAK,uBAAuB,EAAS;IACvD,WAAW,EACT,8QACA,EACD;IACD,GAAI;IACJ,CAAA;GAEF,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,kTACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAM;KAAoB,CAAA;IACzC,CAAA;GACL;;EAGX;AACD,EAAY,cAAc"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../src/ui/number-input.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconPlus } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { cn } from './lib/utils'\n\nexport type NumberInputState = 'default' | 'error' | 'warning' | 'success'\n\nconst numberInputWrapperVariants = cva(\n  'flex items-center justify-between rounded-control border border-surface-border-strong',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus',\n        sm: 'h-ds-sm',\n        md: 'h-ds-md',\n        lg: 'h-ds-lg',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type NumberInputSize = NonNullable<VariantProps<typeof numberInputWrapperVariants>['size']>\n\n/** Maps size to stepper button dimensions */\nconst buttonSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'h-[22px] w-[22px]',\n  sm: 'h-ds-sm w-ds-sm',\n  md: 'h-ds-sm w-ds-sm',\n  lg: 'h-ds-md w-ds-md',\n}\n\n/** Maps size to Icon component size */\nconst iconSizeMap: Record<NonNullable<NumberInputSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps size to input text and width classes */\nconst inputSizeMap: Record<NonNullable<NumberInputSize>, string> = {\n  xs: 'text-ds-sm w-[28px]',\n  sm: 'text-ds-sm w-ds-sm-plus',\n  md: 'text-ds-md w-ds-sm-plus',\n  lg: 'text-ds-md w-ds-md',\n}\n\n/** Maps state to border color classes */\nconst stateColorMap: Record<NonNullable<NumberInputState>, string> = {\n  default: '',\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\n/**\n * Props for NumberInput — a stepper control with \"−\" and \"+\" buttons flanking a numeric input,\n * clamped between `min` and `max`. The decrement/increment buttons are disabled when bounds are reached.\n *\n * **Controlled only:** Pass `value` + `onValueChange` for controlled usage. Uncontrolled usage is\n * possible but the buttons won't update the displayed value without `onValueChange`.\n *\n * **Step:** The `step` prop controls how much each button press increments/decrements (default 1).\n * Direct text input is also clamped to `[min, max]` on change.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n *\n * **Validation states:** `state=\"error\"` colors the border red.\n * Use with `<FormField>` to show helper text below the input.\n *\n * @example\n * // Quantity selector with 1–99 range:\n * <NumberInput value={qty} onValueChange={setQty} min={1} max={99} />\n *\n * @example\n * // Rating input (1–10, step 1):\n * <NumberInput value={rating} onValueChange={setRating} min={1} max={10} />\n *\n * @example\n * // Fine-grained opacity control (0–100, step 5):\n * <NumberInput value={opacity} onValueChange={setOpacity} min={0} max={100} step={5} />\n *\n * @example\n * // Disabled number display (read-only-like):\n * <NumberInput value={autoCalcValue} onValueChange={() => {}} disabled />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'size'> {\n  value?: number\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  /** Size of the number input. Controls height, button sizes, text size. */\n  size?: NumberInputSize\n  /** Validation state controlling border color. */\n  state?: NumberInputState\n}\n\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value = 0,\n      onValueChange,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled = false,\n      className,\n      size: sizeProp = 'md',\n      state: stateProp,\n      'aria-label': ariaLabelProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // If no explicit aria-label and not inside a FormField (no id to associate with Label),\n    // provide a sensible default\n    const ariaLabel = ariaLabelProp ?? (rest.id || fieldCtx.helperTextId ? undefined : 'Numeric value')\n\n    // Merge FormField context — explicit props always win\n    const state =\n      stateProp ??\n      (fieldCtx.state === 'helper'\n        ? 'default'\n        : (fieldCtx.state as NumberInputState | undefined)) ??\n      'default'\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value.trim()\n      if (raw === '' || raw === '-') {\n        onValueChange?.(min >= 0 ? min : 0)\n        return\n      }\n      const parsed = Number(raw)\n      if (Number.isNaN(parsed)) return\n      const clamped = Math.min(Math.max(parsed, min), max)\n      onValueChange?.(clamped)\n    }\n\n    const handleIncrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value + step\n      if (newValue <= max) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const handleDecrement = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault() // Prevent form submission\n      const newValue = value - step\n      if (newValue >= min) {\n        onValueChange?.(newValue)\n      }\n    }\n\n    const resolvedButtonSize = buttonSizeMap[size]\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedInputSize = inputSizeMap[size]\n\n    return (\n      <div\n        className={cn(\n          numberInputWrapperVariants({ size }),\n          stateColorMap[state],\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={handleDecrement}\n          disabled={disabled || value <= min}\n          aria-label=\"Decrease value\"\n          title=\"Decrease\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconMinus} size={resolvedIconSize} />\n        </button>\n\n        <input\n          ref={ref}\n          type=\"number\"\n          value={value}\n          onChange={handleInputChange}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={rest['aria-describedby'] ?? fieldCtx.helperTextId}\n          className={cn(\n            'bg-transparent font-semibold border-0 text-center text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n            resolvedInputSize,\n          )}\n          {...rest}\n        />\n\n        <button\n          type=\"button\"\n          onClick={handleIncrement}\n          disabled={disabled || value >= max}\n          aria-label=\"Increase value\"\n          title=\"Increase\"\n          className={cn(\n            'flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,background-color,transform] duration-fast-01 ease-productive-standard disabled:opacity-action-disabled disabled:pointer-events-none',\n            resolvedButtonSize,\n          )}\n        >\n          <Icon icon={IconPlus} size={resolvedIconSize} />\n        </button>\n      </div>\n    )\n  },\n)\nNumberInput.displayName = 'NumberInput'\n\nexport { NumberInput, numberInputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAA6B,EACjC,yFACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAKK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGK,IAA+D;CACnE,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACV,EA8CK,IAAc,EAAM,YAEtB,EACE,WAAQ,GACR,kBACA,SAAM,gBACN,sBACA,UAAO,GACP,cAAW,IACX,cACA,MAAM,IAAW,MACjB,OAAO,GACP,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAGzB,IAAY,MAAkB,EAAK,MAAM,EAAS,eAAe,KAAA,IAAY,kBAG7E,IACJ,MACC,EAAS,UAAU,WAChB,YACC,EAAS,UACd,WAEI,KAAqB,MAA2C;EACpE,IAAM,IAAM,EAAE,OAAO,MAAM,MAAM;AACjC,MAAI,MAAQ,MAAM,MAAQ,KAAK;AAC7B,OAAgB,KAAO,IAAI,IAAM,EAAE;AACnC;;EAEF,IAAM,IAAS,OAAO,EAAI;AACtB,SAAO,MAAM,EAAO,IAExB,IADgB,KAAK,IAAI,KAAK,IAAI,GAAQ,EAAI,EAAE,EAAI,CAC5B;IAGpB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,KAAmB,MAA2C;AAClE,IAAE,gBAAgB;EAClB,IAAM,IAAW,IAAQ;AACzB,EAAI,KAAY,KACd,IAAgB,EAAS;IAIvB,IAAqB,EAAc,IACnC,IAAmB,EAAY,IAC/B,IAAoB,EAAa;AAEvC,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAA2B,EAAE,SAAM,CAAC,EACpC,EAAc,IACd,EACD;YALH;GAOE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,0TACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAoB,CAAA;IAC1C,CAAA;GAET,kBAAC,SAAD;IACO;IACL,MAAK;IACE;IACP,UAAU;IACL;IACA;IACC;IACI;IACV,cAAY;IACZ,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB,EAAK,uBAAuB,EAAS;IACvD,WAAW,EACT,8QACA,EACD;IACD,GAAI;IACJ,CAAA;GAEF,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU,KAAY,KAAS;IAC/B,cAAW;IACX,OAAM;IACN,WAAW,EACT,0TACA,EACD;cAED,kBAAC,GAAD;KAAM,MAAM;KAAU,MAAM;KAAoB,CAAA;IACzC,CAAA;GACL;;EAGX;AACD,EAAY,cAAc"}

package/dist/ui/pagination.js

@@ -29,7 +29,7 @@ d.displayName = "PaginationItem";
 var f = r.forwardRef(({ className: n, isActive: r = !1, asChild: a = !1, ...o }, s) => /* @__PURE__ */ i(a ? e : "button", {
 	ref: s,
 	"aria-current": r ? "page" : void 0,
-	className: t("inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95", r ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-raised-hover text-surface-fg", n),
+	className: t("inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-control text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95", r ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-raised-hover text-surface-fg", n),
 	...o
 }));
 f.displayName = "PaginationLink";

package/dist/ui/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../src/ui/pagination.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\nconst PaginationRoot = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn('mx-auto flex w-full justify-center', className)}\n    {...props}\n  />\n))\nPaginationRoot.displayName = 'PaginationRoot'\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-ds-02', className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn('', className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\n/**\n * Props for PaginationLink — a single page number button in a pagination row.\n * When `isActive` is true, the button gets the brand interactive fill and `aria-current=\"page\"`.\n *\n * @example\n * // Active page button:\n * <PaginationLink isActive onClick={() => goToPage(3)}>3</PaginationLink>\n *\n * @example\n * // Render as a Next.js Link via asChild:\n * <PaginationLink asChild isActive={currentPage === 5}>\n *   <Link href=\"/posts?page=5\">5</Link>\n * </PaginationLink>\n */\nexport interface PaginationLinkProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  isActive?: boolean\n  asChild?: boolean\n}\n\nconst PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(\n  ({ className, isActive = false, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95',\n          isActive\n            ? 'bg-accent-9 text-accent-fg'\n            : 'hover:bg-surface-raised-hover text-surface-fg',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to previous page\"\n    className={cn('w-auto gap-ds-02 pl-ds-03 pr-ds-04', className)}\n    {...props}\n  >\n    <Icon icon={IconChevronLeft} size=\"sm\" />\n    <span>Previous</span>\n  </PaginationLink>\n))\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to next page\"\n    className={cn('w-auto gap-ds-02 pl-ds-04 pr-ds-03', className)}\n    {...props}\n  >\n    <span>Next</span>\n    <Icon icon={IconChevronRight} size=\"sm\" />\n  </PaginationLink>\n))\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    aria-hidden=\"true\"\n    className={cn(\n      'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconDots} size=\"sm\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n))\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n/* ------------------------------------------------------------------ */\n/*  generatePagination helper                                         */\n/* ------------------------------------------------------------------ */\n\ntype PageItem = number | 'ellipsis'\n\n/**\n * Pure function that builds an array of page numbers and ellipsis markers.\n * Always shows first and last page, plus `siblingCount` pages around `current`.\n *\n * @example generatePagination(5, 10, 1) → [1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]\n */\nfunction generatePagination(\n  current: number,\n  total: number,\n  siblingCount: number,\n): PageItem[] {\n  // When total pages fit without any ellipsis\n  const totalSlots = siblingCount * 2 + 5 // first + last + current + 2*siblings + 2 ellipsis slots\n  if (total <= totalSlots) {\n    return Array.from({ length: total }, (_, i) => i + 1)\n  }\n\n  const leftSibling = Math.max(current - siblingCount, 1)\n  const rightSibling = Math.min(current + siblingCount, total)\n\n  const showLeftEllipsis = leftSibling > 2\n  const showRightEllipsis = rightSibling < total - 1\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    // e.g. [1, 2, 3, 4, 5, '...', 10]\n    const leftCount = siblingCount * 2 + 3\n    const leftPages = Array.from({ length: leftCount }, (_, i) => i + 1)\n    return [...leftPages, 'ellipsis', total]\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    // e.g. [1, '...', 6, 7, 8, 9, 10]\n    const rightCount = siblingCount * 2 + 3\n    const rightPages = Array.from(\n      { length: rightCount },\n      (_, i) => total - rightCount + 1 + i,\n    )\n    return [1, 'ellipsis', ...rightPages]\n  }\n\n  // Both ellipses: [1, '...', 4, 5, 6, '...', 10]\n  const middlePages = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  )\n  return [1, 'ellipsis', ...middlePages, 'ellipsis', total]\n}\n\n/* ------------------------------------------------------------------ */\n/*  PaginationNav — controlled convenience wrapper                    */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props for PaginationNav — a fully self-contained controlled pagination component that renders\n * Previous / page numbers (with ellipsis) / Next — using `generatePagination` internally.\n *\n * **1-indexed:** `currentPage` starts at 1 (not 0). `onPageChange` also receives 1-indexed values.\n *\n * **`siblingCount`:** Number of page buttons shown on each side of the current page (default 1).\n * A wider `siblingCount` shows more page buttons before switching to ellipsis.\n *\n * @example\n * // Basic controlled pagination:\n * <PaginationNav\n *   totalPages={24}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n * />\n *\n * @example\n * // Wider sibling range for a results grid (shows more page context):\n * <PaginationNav\n *   totalPages={100}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n *   siblingCount={2}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface PaginationNavProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of pages */\n  totalPages: number\n  /** Current active page (1-indexed) */\n  currentPage: number\n  /** Called when the user requests a different page */\n  onPageChange: (page: number) => void\n  /** Number of sibling page buttons shown on each side of the current page (default: 1) */\n  siblingCount?: number\n}\n\nconst PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(\n  (\n    {\n      totalPages,\n      currentPage,\n      onPageChange,\n      siblingCount = 1,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const pages = generatePagination(currentPage, totalPages, siblingCount)\n\n    return (\n      <PaginationRoot ref={ref} className={className} {...props}>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious\n              onClick={() => onPageChange(Math.max(1, currentPage - 1))}\n              disabled={currentPage <= 1}\n            />\n          </PaginationItem>\n\n          {pages.map((page, i) =>\n            page === 'ellipsis' ? (\n              <PaginationItem key={`e${i}`}>\n                <PaginationEllipsis />\n              </PaginationItem>\n            ) : (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  isActive={page === currentPage}\n                  onClick={() => onPageChange(page)}\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ),\n          )}\n\n          <PaginationItem>\n            <PaginationNext\n              onClick={() =>\n                onPageChange(Math.min(totalPages, currentPage + 1))\n              }\n              disabled={currentPage >= totalPages}\n            />\n          </PaginationItem>\n        </PaginationContent>\n      </PaginationRoot>\n    )\n  },\n)\nPaginationNav.displayName = 'PaginationNav'\n\nexport {\n  generatePagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNav,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationRoot,\n}\n"],"mappings":"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"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/ui/pagination.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\nconst PaginationRoot = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ className, ...props }, ref) => (\n  <nav\n    ref={ref}\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn('mx-auto flex w-full justify-center', className)}\n    {...props}\n  />\n))\nPaginationRoot.displayName = 'PaginationRoot'\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-ds-02', className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn('', className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\n/**\n * Props for PaginationLink — a single page number button in a pagination row.\n * When `isActive` is true, the button gets the brand interactive fill and `aria-current=\"page\"`.\n *\n * @example\n * // Active page button:\n * <PaginationLink isActive onClick={() => goToPage(3)}>3</PaginationLink>\n *\n * @example\n * // Render as a Next.js Link via asChild:\n * <PaginationLink asChild isActive={currentPage === 5}>\n *   <Link href=\"/posts?page=5\">5</Link>\n * </PaginationLink>\n */\nexport interface PaginationLinkProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  isActive?: boolean\n  asChild?: boolean\n}\n\nconst PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(\n  ({ className, isActive = false, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          'inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-control text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95',\n          isActive\n            ? 'bg-accent-9 text-accent-fg'\n            : 'hover:bg-surface-raised-hover text-surface-fg',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to previous page\"\n    className={cn('w-auto gap-ds-02 pl-ds-03 pr-ds-04', className)}\n    {...props}\n  >\n    <Icon icon={IconChevronLeft} size=\"sm\" />\n    <span>Previous</span>\n  </PaginationLink>\n))\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<\n  HTMLButtonElement,\n  PaginationLinkProps\n>(({ className, ...props }, ref) => (\n  <PaginationLink\n    ref={ref}\n    aria-label=\"Go to next page\"\n    className={cn('w-auto gap-ds-02 pl-ds-04 pr-ds-03', className)}\n    {...props}\n  >\n    <span>Next</span>\n    <Icon icon={IconChevronRight} size=\"sm\" />\n  </PaginationLink>\n))\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    aria-hidden=\"true\"\n    className={cn(\n      'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconDots} size=\"sm\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n))\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n/* ------------------------------------------------------------------ */\n/*  generatePagination helper                                         */\n/* ------------------------------------------------------------------ */\n\ntype PageItem = number | 'ellipsis'\n\n/**\n * Pure function that builds an array of page numbers and ellipsis markers.\n * Always shows first and last page, plus `siblingCount` pages around `current`.\n *\n * @example generatePagination(5, 10, 1) → [1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]\n */\nfunction generatePagination(\n  current: number,\n  total: number,\n  siblingCount: number,\n): PageItem[] {\n  // When total pages fit without any ellipsis\n  const totalSlots = siblingCount * 2 + 5 // first + last + current + 2*siblings + 2 ellipsis slots\n  if (total <= totalSlots) {\n    return Array.from({ length: total }, (_, i) => i + 1)\n  }\n\n  const leftSibling = Math.max(current - siblingCount, 1)\n  const rightSibling = Math.min(current + siblingCount, total)\n\n  const showLeftEllipsis = leftSibling > 2\n  const showRightEllipsis = rightSibling < total - 1\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    // e.g. [1, 2, 3, 4, 5, '...', 10]\n    const leftCount = siblingCount * 2 + 3\n    const leftPages = Array.from({ length: leftCount }, (_, i) => i + 1)\n    return [...leftPages, 'ellipsis', total]\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    // e.g. [1, '...', 6, 7, 8, 9, 10]\n    const rightCount = siblingCount * 2 + 3\n    const rightPages = Array.from(\n      { length: rightCount },\n      (_, i) => total - rightCount + 1 + i,\n    )\n    return [1, 'ellipsis', ...rightPages]\n  }\n\n  // Both ellipses: [1, '...', 4, 5, 6, '...', 10]\n  const middlePages = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  )\n  return [1, 'ellipsis', ...middlePages, 'ellipsis', total]\n}\n\n/* ------------------------------------------------------------------ */\n/*  PaginationNav — controlled convenience wrapper                    */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props for PaginationNav — a fully self-contained controlled pagination component that renders\n * Previous / page numbers (with ellipsis) / Next — using `generatePagination` internally.\n *\n * **1-indexed:** `currentPage` starts at 1 (not 0). `onPageChange` also receives 1-indexed values.\n *\n * **`siblingCount`:** Number of page buttons shown on each side of the current page (default 1).\n * A wider `siblingCount` shows more page buttons before switching to ellipsis.\n *\n * @example\n * // Basic controlled pagination:\n * <PaginationNav\n *   totalPages={24}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n * />\n *\n * @example\n * // Wider sibling range for a results grid (shows more page context):\n * <PaginationNav\n *   totalPages={100}\n *   currentPage={currentPage}\n *   onPageChange={setCurrentPage}\n *   siblingCount={2}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface PaginationNavProps\n  extends React.HTMLAttributes<HTMLElement> {\n  /** Total number of pages */\n  totalPages: number\n  /** Current active page (1-indexed) */\n  currentPage: number\n  /** Called when the user requests a different page */\n  onPageChange: (page: number) => void\n  /** Number of sibling page buttons shown on each side of the current page (default: 1) */\n  siblingCount?: number\n}\n\nconst PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(\n  (\n    {\n      totalPages,\n      currentPage,\n      onPageChange,\n      siblingCount = 1,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const pages = generatePagination(currentPage, totalPages, siblingCount)\n\n    return (\n      <PaginationRoot ref={ref} className={className} {...props}>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious\n              onClick={() => onPageChange(Math.max(1, currentPage - 1))}\n              disabled={currentPage <= 1}\n            />\n          </PaginationItem>\n\n          {pages.map((page, i) =>\n            page === 'ellipsis' ? (\n              <PaginationItem key={`e${i}`}>\n                <PaginationEllipsis />\n              </PaginationItem>\n            ) : (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  isActive={page === currentPage}\n                  onClick={() => onPageChange(page)}\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ),\n          )}\n\n          <PaginationItem>\n            <PaginationNext\n              onClick={() =>\n                onPageChange(Math.min(totalPages, currentPage + 1))\n              }\n              disabled={currentPage >= totalPages}\n            />\n          </PaginationItem>\n        </PaginationContent>\n      </PaginationRoot>\n    )\n  },\n)\nPaginationNav.displayName = 'PaginationNav'\n\nexport {\n  generatePagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNav,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationRoot,\n}\n"],"mappings":";;;;;;;;AASA,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,MAAK;CACL,cAAW;CACX,WAAW,EAAG,sCAAsC,EAAU;CAC9D,GAAI;CACJ,CAAA,CACF;AACF,EAAe,cAAc;AAE7B,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAAG,wCAAwC,EAAU;CAChE,GAAI;CACJ,CAAA,CACF;AACF,EAAkB,cAAc;AAEhC,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CAAS;CAAK,WAAW,EAAG,IAAI,EAAU;CAAE,GAAI;CAAS,CAAA,CACzD;AACF,EAAe,cAAc;AAsB7B,IAAM,IAAiB,EAAM,YAC1B,EAAE,cAAW,cAAW,IAAO,aAAU,IAAO,GAAG,KAAS,MAGzD,kBAFW,IAAU,IAAO,UAE5B;CACO;CACL,gBAAc,IAAW,SAAS,KAAA;CAClC,WAAW,EACT,mUACA,IACI,+BACA,iDACJ,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAe,cAAc;AAE7B,IAAM,IAAqB,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,cAAW;CACX,WAAW,EAAG,sCAAsC,EAAU;CAC9D,GAAI;WAJN,CAME,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAO,CAAA,EACzC,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA,CACN;GACjB;AACF,EAAmB,cAAc;AAEjC,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,cAAW;CACX,WAAW,EAAG,sCAAsC,EAAU;CAC9D,GAAI;WAJN,CAME,kBAAC,QAAD,EAAA,UAAM,QAAW,CAAA,EACjB,kBAAC,GAAD;EAAM,MAAM;EAAkB,MAAK;EAAO,CAAA,CAC3B;GACjB;AACF,EAAe,cAAc;AAE7B,IAAM,IAAqB,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,QAAD;CACO;CACL,eAAY;CACZ,WAAW,EACT,oFACA,EACD;CACD,GAAI;WAPN,CASE,kBAAC,GAAD;EAAM,MAAM;EAAU,MAAK;EAAO,CAAA,EAClC,kBAAC,QAAD;EAAM,WAAU;YAAU;EAAiB,CAAA,CACtC;GACP;AACF,EAAmB,cAAc;AAcjC,SAAS,EACP,GACA,GACA,GACY;AAGZ,KAAI,KADe,IAAe,IAAI,EAEpC,QAAO,MAAM,KAAK,EAAE,QAAQ,GAAO,GAAG,GAAG,MAAM,IAAI,EAAE;CAGvD,IAAM,IAAc,KAAK,IAAI,IAAU,GAAc,EAAE,EACjD,IAAe,KAAK,IAAI,IAAU,GAAc,EAAM,EAEtD,IAAmB,IAAc,GACjC,IAAoB,IAAe,IAAQ;AAEjD,KAAI,CAAC,KAAoB,GAAmB;EAE1C,IAAM,IAAY,IAAe,IAAI;AAErC,SAAO;GAAC,GADU,MAAM,KAAK,EAAE,QAAQ,GAAW,GAAG,GAAG,MAAM,IAAI,EAAE;GAC9C;GAAY;GAAM;;AAG1C,KAAI,KAAoB,CAAC,GAAmB;EAE1C,IAAM,IAAa,IAAe,IAAI;AAKtC,SAAO;GAAC;GAAG;GAAY,GAJJ,MAAM,KACvB,EAAE,QAAQ,GAAY,GACrB,GAAG,MAAM,IAAQ,IAAa,IAAI,EACpC;GACoC;;AAQvC,QAAO;EAAC;EAAG;EAAY,GAJH,MAAM,KACxB,EAAE,QAAQ,IAAe,IAAc,GAAG,GACzC,GAAG,MAAM,IAAc,EACzB;EACsC;EAAY;EAAM;;AA8C3D,IAAM,IAAgB,EAAM,YAExB,EACE,eACA,gBACA,iBACA,kBAAe,GACf,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAQ,EAAmB,GAAa,GAAY,EAAa;AAEvE,QACE,kBAAC,GAAD;EAAqB;EAAgB;EAAW,GAAI;YAClD,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,eAAe,EAAa,KAAK,IAAI,GAAG,IAAc,EAAE,CAAC;IACzD,UAAU,KAAe;IACzB,CAAA,EACa,CAAA;GAEhB,EAAM,KAAK,GAAM,MAChB,MAAS,aACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACP,EAFI,IAAI,IAER,GAEjB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,UAAU,MAAS;IACnB,eAAe,EAAa,EAAK;cAEhC;IACc,CAAA,EACF,EAPI,EAOJ,CAEpB;GAED,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,eACE,EAAa,KAAK,IAAI,GAAY,IAAc,EAAE,CAAC;IAErD,UAAU,KAAe;IACzB,CAAA,EACa,CAAA;GACC,EAAA,CAAA;EACL,CAAA;EAGtB;AACD,EAAc,cAAc"}

package/dist/ui/progress.js

@@ -7,7 +7,7 @@ import * as a from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { motion as c } from "framer-motion";
 //#region src/ui/progress.tsx
-var l = r("relative w-full overflow-hidden rounded-ds-full bg-surface-raised", {
+var l = r("relative w-full overflow-hidden rounded-pill bg-surface-raised", {
 	variants: { size: {
 		sm: "h-1",
 		md: "h-2",

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"}