@devalok/shilp-sutra 0.57.0 → 0.60.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 { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-panel-hover text-surface-fg',\n    'border border-surface-border-interactive rounded-control',\n    'hover:bg-surface-panel-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-accent-7',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-panel has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm',\n        sm: 'h-ds-sm text-body-sm',\n        md: 'h-ds-md text-body-md',\n        lg: 'h-ds-lg text-body-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?: FieldState\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 (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\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-body-sm',\n      sm: 'text-body-sm',\n      md: 'text-body-sm',\n      lg: 'text-body-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-panel 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-muted',\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-panel 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":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAqDM,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,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,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;CACN,GAEM,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;CASA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,QAAK,CAAC,GAC7B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,CACF;YAPF;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,0CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,qBAC5B;cAEC;GACG,CAAA;GAGP,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,qBAC5B;eAEC;IACG,CAAA;GACM,CAAA;GAGhB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,qCACA,+BACA,4BACA;KArDN,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IAkDE,EAAa,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,CACF;IACA,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;GACL,CAAA;GAEA,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,0CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,qBAC1B;cAEC;GACG,CAAA;GAGP,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,qBAC1B;eAEC;IACG,CAAA;GACM,CAAA;EAEb;;AAET,CACF;AACA,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 { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-field text-surface-fg',\n    'border border-surface-border-interactive rounded-control',\n    'hover:bg-field-hover',\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-accent-7',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-sunken has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm',\n        sm: 'h-ds-sm text-body-sm',\n        md: 'h-ds-md text-body-md',\n        lg: 'h-ds-lg text-body-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?: FieldState\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 (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\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-body-sm',\n      sm: 'text-body-sm',\n      md: 'text-body-sm',\n      lg: 'text-body-md',\n    }\n\n    // 12px on every size (design 2026-08-24). Only applies to the bare field —\n    // an adjacent icon section still zeroes the padding on its side below.\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-04',\n      sm: 'px-ds-04',\n      md: 'px-ds-04',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          // Validation edges moved to step 8 (design 2026-08-24). This CLEARS the\n          // 3:1 non-text bar that step 7 missed: error 2.831:1 → 3.929:1 and\n          // success 2.557:1 → 3.441:1 in light (3.440:1 / 3.971:1 in dark).\n          // Warning stays at 7 — the designers marked it \"border color no\n          // changed\", so it keeps sitting at 2.319:1. See docs/deviations.md.\n          state === 'error' && 'border-error-8 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-8 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-panel 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-muted',\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-panel 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":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAqDM,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,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,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;CACN,GAEM,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;CAWA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,QAAK,CAAC,GAM7B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,CACF;YAZF;GAcG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,0CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,qBAC5B;cAEC;GACG,CAAA;GAGP,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,qBAC5B;eAEC;IACG,CAAA;GACM,CAAA;GAGhB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,qCACA,+BACA,4BACA;KA1DN,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IAuDE,EAAa,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,CACF;IACA,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;GACL,CAAA;GAEA,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,0CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,qBAC1B;cAEC;GACG,CAAA;GAGP,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,qBAC1B;eAEC;IACG,CAAA;GACM,CAAA;EAEb;;AAET,CACF;AACA,EAAM,cAAc"}

package/dist/ui/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../src/ui/menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAG7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAUvF,CAAA;AAOD,QAAA,MAAM,YAAY,EAAE,OAAO,gBAAgB,CAAC,KAA8B,CAAA;AAE1E,QAAA,MAAM,aAAa,EAAE,OAAO,gBAAgB,CAAC,MAAgC,CAAA;AAE7E,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,GAAG,CAAC,CAuBrF,CAAA;AAGD,QAAA,MAAM,iBAAiB,EAAE,OAAO,gBAAgB,CAAC,UACpB,CAAA;AAE7B,QAAA,MAAM,OAAO,yJAYX,CAAA;AAGF,QAAA,MAAM,cAAc,sKAYlB,CAAA;AAGF,QAAA,MAAM,iBAAiB;YAGX,OAAO;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKA+BrB,CAAA;AAiBF,QAAA,MAAM,cAAc,gKAyBnB,CAAA;AAGD,QAAA,MAAM,WAAW;YAGL,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,mBAAmB,qKAoBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKAmBpB,CAAA;AAGF,QAAA,MAAM,YAAY;YAGN,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKASpB,CAAA;AAGF,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACjG,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAE3F,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GACf,CAAA"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../src/ui/menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAG7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAUvF,CAAA;AAOD,QAAA,MAAM,YAAY,EAAE,OAAO,gBAAgB,CAAC,KAA8B,CAAA;AAE1E,QAAA,MAAM,aAAa,EAAE,OAAO,gBAAgB,CAAC,MAAgC,CAAA;AAE7E,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,GAAG,CAAC,CAuBrF,CAAA;AAGD,QAAA,MAAM,iBAAiB,EAAE,OAAO,gBAAgB,CAAC,UACpB,CAAA;AAE7B,QAAA,MAAM,OAAO,yJAYX,CAAA;AAGF,QAAA,MAAM,cAAc,sKAYlB,CAAA;AAGF,QAAA,MAAM,iBAAiB;YAGX,OAAO;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKAiCrB,CAAA;AAiBF,QAAA,MAAM,cAAc,gKAyBnB,CAAA;AAGD,QAAA,MAAM,WAAW;YAGL,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,mBAAmB,qKAoBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKAmBpB,CAAA;AAGF,QAAA,MAAM,YAAY;YAGN,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKASpB,CAAA;AAGF,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AACjG,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAE3F,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GACf,CAAA"}

package/dist/ui/menubar.js

@@ -1,61 +1,62 @@
 "use client";
 import { springs as e, tweens as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Icon as r } from "./icon.js";
-import { CheckboxItem2 as i, Content2 as a, Group2 as o, Item3 as s, ItemIndicator2 as c, Label2 as l, Menu as u, Portal2 as d, RadioGroup2 as f, RadioItem2 as p, Root3 as m, Separator2 as h, Sub2 as g, SubContent2 as _, SubTrigger2 as v, Trigger as y } from "../_chunks/primitives/react-menubar.js";
-import * as b from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { IconCheck as C, IconChevronRight as w, IconCircle as T } from "@tabler/icons-react";
-import { AnimatePresence as E, motion as D } from "framer-motion";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import { CheckboxItem2 as a, Content2 as o, Group2 as s, Item3 as c, ItemIndicator2 as l, Label2 as u, Menu as d, Portal2 as f, RadioGroup2 as p, RadioItem2 as m, Root3 as h, Separator2 as g, Sub2 as _, SubContent2 as v, SubTrigger2 as y, Trigger as b } from "../_chunks/primitives/react-menubar.js";
+import * as x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { IconCheck as w, IconChevronRight as T, IconCircle as E } from "@tabler/icons-react";
+import { AnimatePresence as D, motion as O } from "framer-motion";
 //#region src/ui/menubar.tsx
-var O = b.createContext(!1), k = (e) => /* @__PURE__ */ x(u, { ...e });
-k.displayName = "MenubarMenu";
-var A = o, j = d, M = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
-	let [i, a] = b.useState(t), o = e !== void 0, s = o ? e : i, c = b.useCallback((e) => {
+var k = x.createContext(!1), A = (e) => /* @__PURE__ */ S(d, { ...e });
+A.displayName = "MenubarMenu";
+var j = s, M = f, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
+	let [i, a] = x.useState(t), o = e !== void 0, s = o ? e : i, c = x.useCallback((e) => {
 		o || a(e), n?.(e);
 	}, [o, n]);
-	return /* @__PURE__ */ x(O.Provider, {
+	return /* @__PURE__ */ S(k.Provider, {
 		value: s,
-		children: /* @__PURE__ */ x(g, {
+		children: /* @__PURE__ */ S(_, {
 			open: s,
 			onOpenChange: c,
 			...r
 		})
 	});
 };
-M.displayName = "MenubarSub";
-var N = f, P = b.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ x(m, {
-	ref: r,
-	className: n("flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay bg-surface-overlay p-ds-02 shadow-raised", e),
+N.displayName = "MenubarSub";
+var P = p, F = x.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ S(h, {
+	ref: n,
+	className: r("flex h-ds-sm-plus items-center space-x-ds-02 rounded-overlay bg-surface-overlay p-ds-02 shadow-raised", e),
 	...t
 }));
-P.displayName = m.displayName;
-var F = b.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ x(y, {
-	ref: r,
-	className: n("flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-body-md font-medium outline-hidden transition-colors hover:bg-surface-panel-hover focus-visible:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover", e),
+F.displayName = h.displayName;
+var I = x.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ S(b, {
+	ref: n,
+	className: r("flex cursor-default select-none items-center rounded-control px-ds-04 py-ds-02 text-body-md font-medium outline-hidden transition-colors hover:bg-surface-panel-hover focus-visible:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover", e),
 	...t
 }));
-F.displayName = y.displayName;
-var I = b.forwardRef(({ className: e, inset: t, children: i, ...a }, o) => /* @__PURE__ */ S(v, {
+I.displayName = b.displayName;
+var L = x.forwardRef(({ className: e, inset: t, children: n, ...a }, o) => /* @__PURE__ */ C(y, {
 	ref: o,
-	className: n("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
+	className: r("flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden focus:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
 	...a,
-	children: [/* @__PURE__ */ x("span", {
+	children: [/* @__PURE__ */ S("span", {
 		className: "min-w-0 truncate",
-		children: i
-	}), /* @__PURE__ */ x(r, {
-		icon: w,
+		children: n
+	}), /* @__PURE__ */ S(i, {
+		icon: T,
 		size: "sm",
 		className: "ml-auto shrink-0"
 	})]
 }));
-I.displayName = v.displayName;
-var L = b.forwardRef(({ className: r, children: i, ...a }, o) => /* @__PURE__ */ x(E, { children: b.useContext(O) && /* @__PURE__ */ x(_, {
-	ref: o,
+L.displayName = y.displayName;
+var R = x.forwardRef(({ className: i, children: a, ...o }, s) => /* @__PURE__ */ S(n, { children: /* @__PURE__ */ S(D, { children: x.useContext(k) && /* @__PURE__ */ S(v, {
+	ref: s,
 	forceMount: !0,
 	asChild: !0,
-	...a,
-	children: /* @__PURE__ */ x(D.div, {
+	...o,
+	children: /* @__PURE__ */ S(O.div, {
 		initial: {
 			opacity: 0,
 			scale: .95
@@ -72,70 +73,70 @@ var L = b.forwardRef(({ className: r, children: i, ...a }, o) => /* @__PURE__ */
 			...e.snappy,
 			opacity: t.fade
 		},
-		className: n("z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", r),
-		children: i
+		className: r("z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", i),
+		children: a
 	})
-}) }));
-L.displayName = _.displayName;
-var R = b.forwardRef(({ className: e, align: t = "start", alignOffset: r = -4, sideOffset: i = 8, children: o, ...s }, c) => /* @__PURE__ */ x(d, { children: /* @__PURE__ */ x(a, {
+}) }) }));
+R.displayName = v.displayName;
+var z = x.forwardRef(({ className: e, align: t = "start", alignOffset: n = -4, sideOffset: i = 8, children: a, ...s }, c) => /* @__PURE__ */ S(f, { children: /* @__PURE__ */ S(o, {
 	ref: c,
 	align: t,
-	alignOffset: r,
+	alignOffset: n,
 	sideOffset: i,
-	className: n("z-popover min-w-[12rem] rounded-overlay 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: r("z-popover min-w-[12rem] rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", "data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out", e),
 	...s,
-	children: o
+	children: a
 }) }));
-R.displayName = a.displayName;
-var z = b.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ x(s, {
+z.displayName = o.displayName;
+var B = x.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ S(c, {
 	ref: i,
-	className: n("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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),
-	...r
+	className: r("relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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 = s.displayName;
-var B = b.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /* @__PURE__ */ S(i, {
+B.displayName = c.displayName;
+var V = x.forwardRef(({ className: e, children: t, checked: n, ...o }, s) => /* @__PURE__ */ C(a, {
 	ref: s,
-	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
-	checked: a,
+	className: r("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	checked: n,
 	...o,
-	children: [/* @__PURE__ */ x("span", {
+	children: [/* @__PURE__ */ S("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ x(c, { children: /* @__PURE__ */ x(r, {
-			icon: C,
+		children: /* @__PURE__ */ S(l, { children: /* @__PURE__ */ S(i, {
+			icon: w,
 			size: "sm"
 		}) })
 	}), t]
 }));
-B.displayName = i.displayName;
-var V = b.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ S(p, {
+V.displayName = a.displayName;
+var H = x.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ C(m, {
 	ref: i,
-	className: n("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
-	...r,
-	children: [/* @__PURE__ */ x("span", {
+	className: r("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-body-md outline-hidden transition-colors focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	...n,
+	children: [/* @__PURE__ */ S("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
-		children: /* @__PURE__ */ x(c, { children: /* @__PURE__ */ x(T, { className: "h-2 w-2 fill-current" }) })
-	}), /* @__PURE__ */ x("span", {
+		children: /* @__PURE__ */ S(l, { children: /* @__PURE__ */ S(E, { className: "h-2 w-2 fill-current" }) })
+	}), /* @__PURE__ */ S("span", {
 		className: "min-w-0 truncate",
 		children: t
 	})]
 }));
-V.displayName = p.displayName;
-var H = b.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ x(l, {
+H.displayName = m.displayName;
+var U = x.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ S(u, {
 	ref: i,
-	className: n("px-ds-03 py-ds-02b text-body-md font-semibold", t && "pl-ds-07", e),
-	...r
+	className: r("px-ds-03 py-ds-02b text-body-md font-semibold", t && "pl-ds-07", e),
+	...n
 }));
-H.displayName = l.displayName;
-var U = b.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ x(h, {
-	ref: r,
-	className: n("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
+U.displayName = u.displayName;
+var W = x.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ S(g, {
+	ref: n,
+	className: r("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
 	...t
 }));
-U.displayName = h.displayName;
-var W = ({ className: e, ...t }) => /* @__PURE__ */ x("span", {
-	className: n("ml-auto text-body-sm text-surface-fg-subtle", e),
+W.displayName = g.displayName;
+var G = ({ className: e, ...t }) => /* @__PURE__ */ S("span", {
+	className: r("ml-auto text-body-sm text-surface-fg-subtle", e),
 	...t
 });
-W.displayName = "MenubarShortcut";
+G.displayName = "MenubarShortcut";
 //#endregion
-export { P as Menubar, B as MenubarCheckboxItem, R as MenubarContent, A as MenubarGroup, z as MenubarItem, H as MenubarLabel, k as MenubarMenu, j as MenubarPortal, N as MenubarRadioGroup, V as MenubarRadioItem, U as MenubarSeparator, W as MenubarShortcut, M as MenubarSub, L as MenubarSubContent, I as MenubarSubTrigger, F as MenubarTrigger };
+export { F as Menubar, V as MenubarCheckboxItem, z as MenubarContent, j as MenubarGroup, B as MenubarItem, U as MenubarLabel, A as MenubarMenu, M as MenubarPortal, P as MenubarRadioGroup, H as MenubarRadioItem, W as MenubarSeparator, G as MenubarShortcut, N as MenubarSub, R as MenubarSubContent, L as MenubarSubTrigger, I as MenubarTrigger };

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-overlay 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-body-md font-medium outline-hidden transition-colors hover:bg-surface-panel-hover focus-visible:bg-surface-panel-hover data-[state=open]:bg-surface-panel-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-body-md outline-hidden focus:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover [&_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    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\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 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 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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    <span className=\"min-w-0 truncate\">{children}</span>\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-body-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-body-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 { MotionPreference } from '../motion/motion-preference'\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 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-body-md font-medium outline-hidden transition-colors hover:bg-surface-panel-hover focus-visible:bg-surface-panel-hover data-[state=open]:bg-surface-panel-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-body-md outline-hidden focus:bg-surface-panel-hover data-[state=open]:bg-surface-panel-hover [&_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    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\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    <MotionPreference>\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 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    </MotionPreference>\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 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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-body-md outline-hidden transition-colors focus:bg-surface-panel-hover 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    <span className=\"min-w-0 truncate\">{children}</span>\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-body-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-body-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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/ui/navigation-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,uBAAuB,MAAM,mCAAmC,CAAA;AAG5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,cAAc,iKAelB,CAAA;AAGF,QAAA,MAAM,kBAAkB,+KAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,uHAA+B,CAAA;AAEvD,QAAA,MAAM,qBAAqB,oLAezB,CAAA;AAaF,QAAA,MAAM,qBAAqB,8KAqEzB,CAAA;AAGF,QAAA,MAAM,kBAAkB,2HAA+B,CAAA;AAIvD,QAAA,MAAM,sBAAsB,+KAsD1B,CAAA;AAMF,QAAA,MAAM,uBAAuB,gLAoD3B,CAAA;AAIF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAA;AACrG,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,CAAA;AAE/G,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/ui/navigation-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,uBAAuB,MAAM,mCAAmC,CAAA;AAG5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,cAAc,iKAelB,CAAA;AAGF,QAAA,MAAM,kBAAkB,+KAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,uHAA+B,CAAA;AAEvD,QAAA,MAAM,qBAAqB,oLAezB,CAAA;AAaF,QAAA,MAAM,qBAAqB,8KAuEzB,CAAA;AAGF,QAAA,MAAM,kBAAkB,2HAA+B,CAAA;AAIvD,QAAA,MAAM,sBAAsB,+KAwD1B,CAAA;AAMF,QAAA,MAAM,uBAAuB,gLAsD3B,CAAA;AAIF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAA;AACrG,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,CAAA;AAE/G,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,GACvB,CAAA"}

package/dist/ui/navigation-menu.js

@@ -1,42 +1,43 @@
 "use client";
 import { springs as e, tweens as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Icon as r } from "./icon.js";
-import { Content as i, Indicator as a, Item as o, Link as s, List as c, Root2 as l, Trigger as u, Viewport as d } from "../_chunks/primitives/react-navigation-menu.js";
-import * as f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { IconChevronDown as h } from "@tabler/icons-react";
-import { motion as g } from "framer-motion";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import { Content as a, Indicator as o, Item as s, Link as c, List as l, Root2 as u, Trigger as d, Viewport as f } from "../_chunks/primitives/react-navigation-menu.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconChevronDown as g } from "@tabler/icons-react";
+import { motion as _ } from "framer-motion";
 //#region src/ui/navigation-menu.tsx
-var _ = f.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ m(l, {
+var v = p.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ h(u, {
 	ref: i,
-	className: n("relative z-raised flex max-w-max flex-1 items-center justify-center", e),
-	...r,
-	children: [t, /* @__PURE__ */ p(w, {})]
+	className: r("relative z-raised flex max-w-max flex-1 items-center justify-center", e),
+	...n,
+	children: [t, /* @__PURE__ */ m(T, {})]
 }));
-_.displayName = l.displayName;
-var v = f.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ p(c, {
-	ref: r,
-	className: n("group flex flex-1 list-none items-center justify-center space-x-ds-02", e),
+v.displayName = u.displayName;
+var y = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(l, {
+	ref: n,
+	className: r("group flex flex-1 list-none items-center justify-center space-x-ds-02", e),
 	...t
 }));
-v.displayName = c.displayName;
-var y = o, b = f.forwardRef(({ className: e, children: t, ...i }, a) => /* @__PURE__ */ m(u, {
+y.displayName = l.displayName;
+var b = s, x = p.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ h(d, {
 	ref: a,
-	className: 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-body-md font-medium transition-colors hover:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
-	...i,
+	className: r("group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-control bg-transparent px-ds-05 py-ds-03 text-body-md font-medium transition-colors hover:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled", e),
+	...n,
 	children: [
 		t,
 		" ",
-		/* @__PURE__ */ p(r, {
-			icon: h,
+		/* @__PURE__ */ m(i, {
+			icon: g,
 			size: "sm",
 			className: "relative top-[1px] ml-ds-02 transition-transform duration-moderate-02 group-data-[state=open]:rotate-180"
 		})
 	]
 }));
-b.displayName = u.displayName;
-var x = {
+x.displayName = d.displayName;
+var S = {
 	"from-start": {
 		x: "-13rem",
 		opacity: 0
@@ -57,19 +58,19 @@ var x = {
 		x: 0,
 		opacity: 1
 	}
-}, S = f.forwardRef(({ className: r, ...a }, o) => {
-	let s = f.useRef(null), c = f.useCallback((e) => {
-		s.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
-	}, [o]), [l, u] = f.useState(null);
-	f.useEffect(() => {
-		let e = s.current;
+}, C = p.forwardRef(({ className: i, ...o }, s) => {
+	let c = p.useRef(null), l = p.useCallback((e) => {
+		c.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+	}, [s]), [u, d] = p.useState(null);
+	p.useEffect(() => {
+		let e = c.current;
 		if (!e) return;
 		let t = e.getAttribute("data-motion");
-		t && u(t);
+		t && d(t);
 		let n = new MutationObserver((t) => {
 			for (let n of t) if (n.attributeName === "data-motion") {
 				let t = e.getAttribute("data-motion");
-				u(t);
+				d(t);
 			}
 		});
 		return n.observe(e, {
@@ -77,54 +78,54 @@ var x = {
 			attributeFilter: ["data-motion"]
 		}), () => n.disconnect();
 	}, []);
-	let d = l && l.startsWith("from-") ? x[l] : l && l.startsWith("to-") ? x.center : {
+	let f = u && u.startsWith("from-") ? S[u] : u && u.startsWith("to-") ? S.center : {
 		x: 0,
 		opacity: 0
-	}, m = l && l.startsWith("from-") ? x.center : l && l.startsWith("to-") ? x[l] : x.center;
-	return /* @__PURE__ */ p(i, {
-		ref: c,
-		className: n("left-0 top-0 w-full md:absolute md:w-auto", r),
-		...a,
-		children: /* @__PURE__ */ p(g.div, {
-			initial: d,
-			animate: m,
+	}, h = u && u.startsWith("from-") ? S.center : u && u.startsWith("to-") ? S[u] : S.center;
+	return /* @__PURE__ */ m(n, { children: /* @__PURE__ */ m(a, {
+		ref: l,
+		className: r("left-0 top-0 w-full md:absolute md:w-auto", i),
+		...o,
+		children: /* @__PURE__ */ m(_.div, {
+			initial: f,
+			animate: h,
 			transition: {
 				...e.smooth,
 				opacity: t.fade
 			},
 			className: "w-full",
-			children: a.children
-		}, l)
-	});
+			children: o.children
+		}, u)
+	}) });
 });
-S.displayName = i.displayName;
-var C = s, w = f.forwardRef(({ className: r, ...i }, a) => {
-	let o = f.useRef(null), s = f.useCallback((e) => {
-		o.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
-	}, [a]), [c, l] = f.useState(!1);
-	return f.useEffect(() => {
-		let e = o.current;
+C.displayName = a.displayName;
+var w = c, T = p.forwardRef(({ className: i, ...a }, o) => {
+	let s = p.useRef(null), c = p.useCallback((e) => {
+		s.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+	}, [o]), [l, u] = p.useState(!1);
+	return p.useEffect(() => {
+		let e = s.current;
 		if (!e) return;
 		let t = e.getAttribute("data-state");
-		l(t === "open");
+		u(t === "open");
 		let n = new MutationObserver((t) => {
-			for (let n of t) n.attributeName === "data-state" && l(e.getAttribute("data-state") === "open");
+			for (let n of t) n.attributeName === "data-state" && u(e.getAttribute("data-state") === "open");
 		});
 		return n.observe(e, {
 			attributes: !0,
 			attributeFilter: ["data-state"]
 		}), () => n.disconnect();
-	}, []), /* @__PURE__ */ m("div", {
-		className: n("absolute left-0 top-full flex justify-center"),
-		children: [/* @__PURE__ */ p(d, {
-			className: n("origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-overlay bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]", r),
-			ref: s,
-			...i
-		}), /* @__PURE__ */ p(g.div, {
+	}, []), /* @__PURE__ */ m(n, { children: /* @__PURE__ */ h("div", {
+		className: r("absolute left-0 top-full flex justify-center"),
+		children: [/* @__PURE__ */ m(f, {
+			className: r("origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-overlay bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]", i),
+			ref: c,
+			...a
+		}), /* @__PURE__ */ m(_.div, {
 			"aria-hidden": !0,
 			className: "absolute inset-0 pointer-events-none",
 			initial: !1,
-			animate: c ? {
+			animate: l ? {
 				opacity: 1,
 				scale: 1
 			} : {
@@ -136,38 +137,38 @@ var C = s, w = f.forwardRef(({ className: r, ...i }, a) => {
 				opacity: t.fade
 			}
 		})]
-	});
+	}) });
 });
-w.displayName = d.displayName;
-var T = f.forwardRef(({ className: e, ...r }, i) => {
-	let o = f.useRef(null), s = f.useCallback((e) => {
-		o.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-	}, [i]), [c, l] = f.useState(!1);
-	return f.useEffect(() => {
-		let e = o.current;
+T.displayName = f.displayName;
+var E = p.forwardRef(({ className: e, ...i }, a) => {
+	let s = p.useRef(null), c = p.useCallback((e) => {
+		s.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+	}, [a]), [l, u] = p.useState(!1);
+	return p.useEffect(() => {
+		let e = s.current;
 		if (!e) return;
 		let t = e.getAttribute("data-state");
-		l(t === "visible");
+		u(t === "visible");
 		let n = new MutationObserver((t) => {
-			for (let n of t) n.attributeName === "data-state" && l(e.getAttribute("data-state") === "visible");
+			for (let n of t) n.attributeName === "data-state" && u(e.getAttribute("data-state") === "visible");
 		});
 		return n.observe(e, {
 			attributes: !0,
 			attributeFilter: ["data-state"]
 		}), () => n.disconnect();
-	}, []), /* @__PURE__ */ p(a, {
-		ref: s,
-		className: n("top-full z-base flex h-ds-02b items-end justify-center overflow-hidden", e),
-		...r,
-		children: /* @__PURE__ */ p(g.div, {
+	}, []), /* @__PURE__ */ m(n, { children: /* @__PURE__ */ m(o, {
+		ref: c,
+		className: r("top-full z-base flex h-ds-02b items-end justify-center overflow-hidden", e),
+		...i,
+		children: /* @__PURE__ */ m(_.div, {
 			layout: !0,
 			initial: !1,
-			animate: c ? { opacity: 1 } : { opacity: 0 },
+			animate: l ? { opacity: 1 } : { opacity: 0 },
 			transition: t.fade,
 			className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-control-inner bg-surface-border shadow-raised-hover"
 		})
-	});
+	}) });
 });
-T.displayName = a.displayName;
+E.displayName = o.displayName;
 //#endregion
-export { _ as NavigationMenu, S as NavigationMenuContent, T as NavigationMenuIndicator, y as NavigationMenuItem, C as NavigationMenuLink, v as NavigationMenuList, b as NavigationMenuTrigger, w as NavigationMenuViewport };
+export { v as NavigationMenu, C as NavigationMenuContent, E as NavigationMenuIndicator, b as NavigationMenuItem, w as NavigationMenuLink, y as NavigationMenuList, x as NavigationMenuTrigger, T as NavigationMenuViewport };