@devalok/shilp-sutra 0.55.1 → 0.57.0

package/dist/ui/input-otp.js

@@ -37,7 +37,7 @@ var p = r.forwardRef(({ index: t, className: n, ...o }, s) => {
 	let d = r.useContext(c), f = r.useContext(l), { char: p, hasFakeCaret: m, isActive: h } = d.slots[t];
 	return /* @__PURE__ */ a("div", {
 		ref: s,
-		className: e("relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control", u[f], "group-[.is-error]/otp:border-error-7", h && "z-raised ring-2 ring-accent-9", n),
+		className: e("relative flex items-center justify-center border-y border-r border-surface-border-interactive transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control", u[f], "group-[.is-error]/otp:border-error-7", h && "z-raised ring-2 ring-accent-9", n),
 		...o,
 		children: [p, m && /* @__PURE__ */ i("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-body-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-body-md',\n  lg: 'h-ds-md w-ds-md text-heading-xs',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,IAAI,GAE5D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAIM,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,EAAa,GACzB,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;CAEpF,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,CACF;GACA,WAAW,EAAG,+BAA+B,CAAS;GACtD,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC;AACD,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,CAAe,GAClD,IAAO,EAAM,WAAW,CAAmB,GAC3C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;CAE/D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,CACF;EACA,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;EAC/E,CAAA,CAEJ;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;CAAM,CAAA;AAC/B,CAAA,CACN;AACD,EAAkB,cAAc"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-body-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-body-md',\n  lg: 'h-ds-md w-ds-md text-heading-xs',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-interactive transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,IAAI,GAE5D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAIM,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,EAAa,GACzB,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;CAEpF,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,CACF;GACA,WAAW,EAAG,+BAA+B,CAAS;GACtD,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC;AACD,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,CAAe,GAClD,IAAO,EAAM,WAAW,CAAmB,GAC3C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;CAE/D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,oMACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,CACF;EACA,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;EAC/E,CAAA,CAEJ;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;CAAM,CAAA;AAC/B,CAAA,CACN;AACD,EAAkB,cAAc"}

package/dist/ui/input.js

@@ -1,21 +1,21 @@
 "use client";
 import { IconProvider as e } from "./icon-context.js";
-import { cva as t } from "../_chunks/vendor-utils.js";
-import { cn as n } from "./lib/utils.js";
-import { useFormField as r } from "./form.js";
-import { resolveFieldState as i } from "../_chunks/field-state.js";
-import * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cn as t } from "./lib/utils.js";
+import { useFormField as n } from "./form.js";
+import { resolveFieldState as r } from "../_chunks/field-state.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
 //#region src/ui/input.tsx
-var c = t([
+var c = s([
 	"relative flex items-center w-full font-sans",
-	"bg-surface-raised-hover text-surface-fg",
-	"border border-surface-border-strong rounded-control",
-	"hover:bg-surface-raised-active",
+	"bg-surface-panel-hover text-surface-fg",
+	"border border-surface-border-interactive rounded-control",
+	"hover:bg-surface-panel-active",
 	"transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard",
-	"focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border",
+	"focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-accent-7",
 	"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled",
-	"has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default"
+	"has-[:read-only]:bg-surface-panel has-[:read-only]:cursor-default"
 ], {
 	variants: { size: {
 		xs: "h-ds-xs-plus text-body-sm",
@@ -34,8 +34,8 @@ var c = t([
 	sm: "sm",
 	md: "md",
 	lg: "lg"
-}, d = a.forwardRef(({ className: t, type: a, state: d, size: f = "md", startSection: p, endSection: m, startSectionClickable: h, endSectionClickable: g, startSectionType: _, endSectionType: v, wrapperClassName: y, ...b }, x) => {
-	let S = f ?? "md", C = r(), w = i(d, C.state), T = b["aria-describedby"] ?? C.helperTextId, E = b["aria-required"] ?? C.required, D = b.id ?? C.inputId, O = !!p, k = !!m, A = _ ?? (typeof p == "string" ? "label" : "icon"), j = v ?? (typeof m == "string" ? "label" : "icon"), M = {
+}, d = i.forwardRef(({ className: i, type: s, state: d, size: f = "md", startSection: p, endSection: m, startSectionClickable: h, endSectionClickable: g, startSectionType: _, endSectionType: v, wrapperClassName: y, ...b }, x) => {
+	let S = f ?? "md", C = n(), w = r(d, C.state), T = b["aria-describedby"] ?? C.helperTextId, E = b["aria-required"] ?? C.required, D = b.id ?? C.inputId, O = !!p, k = !!m, A = _ ?? (typeof p == "string" ? "label" : "icon"), j = v ?? (typeof m == "string" ? "label" : "icon"), M = {
 		xs: "px-ds-02",
 		sm: "px-ds-02",
 		md: "px-ds-03",
@@ -46,28 +46,28 @@ var c = t([
 		md: "text-body-sm",
 		lg: "text-body-md"
 	};
-	return /* @__PURE__ */ s("div", {
-		className: n(c({ size: S }), w === "error" && "border-error-7 focus-within:ring-error-7", w === "warning" && "border-warning-7 focus-within:ring-warning-7", w === "success" && "border-success-7 focus-within:ring-success-7", y),
+	return /* @__PURE__ */ o("div", {
+		className: t(c({ size: S }), w === "error" && "border-error-7 focus-within:ring-error-7", w === "warning" && "border-warning-7 focus-within:ring-warning-7", w === "success" && "border-success-7 focus-within:ring-success-7", y),
 		children: [
-			O && A === "label" && /* @__PURE__ */ o("span", {
-				className: n("flex items-center shrink-0 select-none self-stretch", "border-r border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-l-[inherit]", M[S], N[S], !h && "pointer-events-none"),
+			O && A === "label" && /* @__PURE__ */ a("span", {
+				className: t("flex items-center shrink-0 select-none self-stretch", "border-r border-surface-border", "bg-surface-panel text-surface-fg-muted", "rounded-l-[inherit]", M[S], N[S], !h && "pointer-events-none"),
 				children: p
 			}),
-			O && A === "icon" && /* @__PURE__ */ o(e, {
+			O && A === "icon" && /* @__PURE__ */ a(e, {
 				size: u[S],
-				children: /* @__PURE__ */ o("span", {
-					className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !h && "pointer-events-none"),
+				children: /* @__PURE__ */ a("span", {
+					className: t("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !h && "pointer-events-none"),
 					children: p
 				})
 			}),
-			/* @__PURE__ */ o("input", {
-				type: a,
-				className: n("flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans", "placeholder:text-surface-fg-subtle", "disabled:cursor-not-allowed", "read-only:cursor-default", {
+			/* @__PURE__ */ a("input", {
+				type: s,
+				className: t("flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans", "placeholder:text-surface-fg-muted", "disabled:cursor-not-allowed", "read-only:cursor-default", {
 					xs: "px-ds-02",
 					sm: "px-ds-03",
 					md: "px-ds-03",
 					lg: "px-ds-04"
-				}[S], O && A === "icon" && "pl-0", k && j === "icon" && "pr-0", t),
+				}[S], O && A === "icon" && "pl-0", k && j === "icon" && "pr-0", i),
 				"aria-invalid": w === "error" || void 0,
 				"aria-describedby": T,
 				"aria-required": E || void 0,
@@ -75,14 +75,14 @@ var c = t([
 				...b,
 				id: D
 			}),
-			k && j === "label" && /* @__PURE__ */ o("span", {
-				className: n("flex items-center shrink-0 select-none self-stretch", "border-l border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-r-[inherit]", M[S], N[S], !g && "pointer-events-none"),
+			k && j === "label" && /* @__PURE__ */ a("span", {
+				className: t("flex items-center shrink-0 select-none self-stretch", "border-l border-surface-border", "bg-surface-panel text-surface-fg-muted", "rounded-r-[inherit]", M[S], N[S], !g && "pointer-events-none"),
 				children: m
 			}),
-			k && j === "icon" && /* @__PURE__ */ o(e, {
+			k && j === "icon" && /* @__PURE__ */ a(e, {
 				size: u[S],
-				children: /* @__PURE__ */ o("span", {
-					className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !g && "pointer-events-none"),
+				children: /* @__PURE__ */ a("span", {
+					className: t("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !g && "pointer-events-none"),
 					children: m
 				})
 			})

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-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-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-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":";;;;;;;;;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,2CACA,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,sCACA,+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,2CACA,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-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"}

package/dist/ui/lib/utils.js

@@ -1,4 +1,5 @@
-import { clsx as e, extendTailwindMerge as t } from "../../_chunks/vendor-utils.js";
+import { clsx as e } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
 //#region src/ui/lib/utils.ts
 var n = t({ extend: {
 	theme: { spacing: [

package/dist/ui/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/ui/lib/utils.ts"],"sourcesContent":["// @server-safe\nimport { type ClassValue,clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      spacing: ['ds-01', 'ds-02', 'ds-02b', 'ds-03', 'ds-04', 'ds-05', 'ds-05b', 'ds-06', 'ds-06b', 'ds-07', 'ds-08', 'ds-09', 'ds-10', 'ds-11', 'ds-12', 'ds-13'],\n    },\n    classGroups: {\n      // All size ramps live in the font-size group so they're mutually exclusive\n      // with EACH OTHER but NOT confused with text-COLOR utilities (text-error-11,\n      // text-surface-fg, …). Without registering these, tw-merge classifies\n      // `text-body-md` as a colour and silently strips a real colour on the same element.\n      'font-size': [\n        { 'text-ds': ['xs', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] },\n        { 'text-heading': ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'] },\n        { 'text-body': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label-plain': ['lg', 'md', 'sm'] },\n        'text-caption',\n        'text-code',\n      ],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;AAIA,IAAM,IAAU,EAAoB,EAClC,QAAQ;CACN,OAAO,EACL,SAAS;EAAC;EAAS;EAAS;EAAU;EAAS;EAAS;EAAS;EAAU;EAAS;EAAU;EAAS;EAAS;EAAS;EAAS;EAAS;EAAS;CAAO,EAC7J;CACA,aAAa,EAKX,aAAa;EACX,EAAE,WAAW;GAAC;GAAM;GAAM;GAAM;GAAQ;GAAM;GAAM;GAAO;GAAO;GAAO;GAAO;EAAK,EAAE;EACvF,EAAE,gBAAgB;GAAC;GAAO;GAAM;GAAM;GAAM;GAAM;EAAI,EAAE;EACxD,EAAE,aAAa;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACxC,EAAE,cAAc;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACzC,EAAE,oBAAoB;GAAC;GAAM;GAAM;EAAI,EAAE;EACzC;EACA;CACF,EACF;AACF,EACF,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/ui/lib/utils.ts"],"sourcesContent":["// @server-safe\nimport { type ClassValue,clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      spacing: ['ds-01', 'ds-02', 'ds-02b', 'ds-03', 'ds-04', 'ds-05', 'ds-05b', 'ds-06', 'ds-06b', 'ds-07', 'ds-08', 'ds-09', 'ds-10', 'ds-11', 'ds-12', 'ds-13'],\n    },\n    classGroups: {\n      // All size ramps live in the font-size group so they're mutually exclusive\n      // with EACH OTHER but NOT confused with text-COLOR utilities (text-error-11,\n      // text-surface-fg, …). Without registering these, tw-merge classifies\n      // `text-body-md` as a colour and silently strips a real colour on the same element.\n      'font-size': [\n        { 'text-ds': ['xs', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] },\n        { 'text-heading': ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'] },\n        { 'text-body': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label': ['lg', 'md', 'sm', 'xs'] },\n        { 'text-label-plain': ['lg', 'md', 'sm'] },\n        'text-caption',\n        'text-code',\n      ],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAIA,IAAM,IAAU,EAAoB,EAClC,QAAQ;CACN,OAAO,EACL,SAAS;EAAC;EAAS;EAAS;EAAU;EAAS;EAAS;EAAS;EAAU;EAAS;EAAU;EAAS;EAAS;EAAS;EAAS;EAAS;EAAS;CAAO,EAC7J;CACA,aAAa,EAKX,aAAa;EACX,EAAE,WAAW;GAAC;GAAM;GAAM;GAAM;GAAQ;GAAM;GAAM;GAAO;GAAO;GAAO;GAAO;EAAK,EAAE;EACvF,EAAE,gBAAgB;GAAC;GAAO;GAAM;GAAM;GAAM;GAAM;EAAI,EAAE;EACxD,EAAE,aAAa;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACxC,EAAE,cAAc;GAAC;GAAM;GAAM;GAAM;EAAI,EAAE;EACzC,EAAE,oBAAoB;GAAC;GAAM;GAAM;EAAI,EAAE;EACzC;EACA;CACF,EACF;AACF,EACF,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}

package/dist/ui/menubar.js

@@ -32,13 +32,13 @@ var N = f, P = b.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ x(m,
 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-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover", e),
+	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),
 	...t
 }));
 F.displayName = y.displayName;
 var I = b.forwardRef(({ className: e, inset: t, children: i, ...a }, o) => /* @__PURE__ */ S(v, {
 	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-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0", t && "pl-ds-07", e),
+	className: 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),
 	...a,
 	children: [/* @__PURE__ */ x("span", {
 		className: "min-w-0 truncate",
@@ -89,13 +89,13 @@ var R = b.forwardRef(({ className: e, align: t = "start", alignOffset: r = -4, s
 R.displayName = a.displayName;
 var z = b.forwardRef(({ className: e, inset: t, ...r }, i) => /* @__PURE__ */ x(s, {
 	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-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: 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
 }));
 z.displayName = s.displayName;
 var B = b.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /* @__PURE__ */ S(i, {
 	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-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	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,
 	...o,
 	children: [/* @__PURE__ */ x("span", {
@@ -109,7 +109,7 @@ var B = b.forwardRef(({ className: e, children: t, checked: a, ...o }, s) => /*
 B.displayName = i.displayName;
 var V = b.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ S(p, {
 	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-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	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: "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-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-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-body-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    <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-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-body-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-body-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    <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 { 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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"}

package/dist/ui/navigation-menu.js

@@ -23,7 +23,7 @@ var v = f.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ p(c, {
 v.displayName = c.displayName;
 var y = o, b = f.forwardRef(({ className: e, children: t, ...i }, a) => /* @__PURE__ */ m(u, {
 	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-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: 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,
 	children: [
 		t,

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-control bg-transparent px-ds-05 py-ds-03 text-body-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 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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"}
+{"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-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',\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 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":";;;;;;;;;;AAWA,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,uEACA,CACF;CACA,GAAI;WANN,CAQG,GACD,kBAAC,GAAD,CAAyB,CAAA,CACG;EAC/B;AACD,EAAe,cAAA,EAA2C;AAE1D,IAAM,IAAqB,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EACT,yEACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAmB,cAAA,EAA2C;AAE9D,IAAM,IAAqB,GAErB,IAAwB,EAAM,YAGjC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,yUACA,CACF;CACA,GAAI;WANN;EAQG;EAAU;EACX,kBAAC,GAAD;GAAM,MAAM;GAAiB,MAAK;GAAK,WAAU;EAA4G,CAAA;CAC9H;EAClC;AACD,EAAsB,cAAA,EAA8C;AAIpE,IAAM,IAAuB;CAC3B,cAAc;EAAE,GAAG;EAAU,SAAS;CAAE;CACxC,YAAY;EAAE,GAAG;EAAS,SAAS;CAAE;CACrC,YAAY;EAAE,GAAG;EAAU,SAAS;CAAE;CACtC,UAAU;EAAE,GAAG;EAAS,SAAS;CAAE;CACnC,QAAQ;EAAE,GAAG;EAAG,SAAS;CAAE;AAC7B,GAEM,IAAwB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAc,EAAM,aACvB,MAAgC;EAE/B,AADA,EAA4D,UAAU,GAClE,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAuD,UAAU;CACjF,GACA,CAAC,CAAG,CACN,GAEM,CAAC,GAAW,KAAgB,EAAM,SAAwB,IAAI;CAGpE,EAAM,gBAAgB;EACpB,IAAM,IAAK,EAAS;EACpB,IAAI,CAAC,GAAI;EAGT,IAAM,IAAU,EAAG,aAAa,aAAa;EAC7C,AAAI,KAAS,EAAa,CAAO;EAEjC,IAAM,IAAW,IAAI,kBAAkB,MAAc;GACnD,KAAK,IAAM,KAAK,GACd,IAAI,EAAE,kBAAkB,eAAe;IACrC,IAAM,IAAM,EAAG,aAAa,aAAa;IACzC,EAAa,CAAG;GAClB;EAEJ,CAAC;EAED,OADA,EAAS,QAAQ,GAAI;GAAE,YAAY;GAAM,iBAAiB,CAAC,aAAa;EAAE,CAAC,SAC9D,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAU,KAAa,EAAU,WAAW,OAAO,IACrD,EAAqB,KACrB,KAAa,EAAU,WAAW,KAAK,IACrC,EAAqB,SACrB;EAAE,GAAG;EAAG,SAAS;CAAE,GAEnB,IAAU,KAAa,EAAU,WAAW,OAAO,IACrD,EAAqB,SACrB,KAAa,EAAU,WAAW,KAAK,IACrC,EAAqB,KACrB,EAAqB;CAE3B,OACE,kBAAC,GAAD;EACE,KAAK;EACL,WAAW,EACT,6CACA,CACF;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GAEW;GACA;GACT,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;GAAK;GACtD,WAAU;aAET,EAAM;EACG,GAPL,CAOK;CACmB,CAAA;AAErC,CAAC;AACD,EAAsB,cAAA,EAA8C;AAEpE,IAAM,IAAqB,GAIrB,IAAyB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAc,EAAM,aACvB,MAAgC;EAE/B,AADA,EAA4D,UAAU,GAClE,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAuD,UAAU;CACjF,GACA,CAAC,CAAG,CACN,GAEM,CAAC,GAAQ,KAAa,EAAM,SAAS,EAAK;CAoBhD,OAlBA,EAAM,gBAAgB;EACpB,IAAM,IAAK,EAAS;EACpB,IAAI,CAAC,GAAI;EAET,IAAM,IAAU,EAAG,aAAa,YAAY;EAC5C,EAAU,MAAY,MAAM;EAE5B,IAAM,IAAW,IAAI,kBAAkB,MAAc;GACnD,KAAK,IAAM,KAAK,GACd,AAAI,EAAE,kBAAkB,gBACtB,EAAU,EAAG,aAAa,YAAY,MAAM,MAAM;EAGxD,CAAC;EAED,OADA,EAAS,QAAQ,GAAI;GAAE,YAAY;GAAM,iBAAiB,CAAC,YAAY;EAAE,CAAC,SAC7D,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAK,WAAW,EAAG,8CAA8C;YAAjE,CACE,kBAAC,GAAD;GACE,WAAW,EACT,sNACA,CACF;GACA,KAAK;GACL,GAAI;EACL,CAAA,GAED,kBAAC,EAAO,KAAR;GACE,eAAA;GACA,WAAU;GACV,SAAS;GACT,SAAS,IAAS;IAAE,SAAS;IAAG,OAAO;GAAE,IAAI;IAAE,SAAS;IAAG,OAAO;GAAK;GACvE,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;GAAK;EACvD,CAAA,CACE;;AAET,CAAC;AACD,EAAuB,cAAA,EACY;AAInC,IAAM,IAA0B,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAAQ;CAClC,IAAM,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAc,EAAM,aACvB,MAAgC;EAE/B,AADA,EAA4D,UAAU,GAClE,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAuD,UAAU;CACjF,GACA,CAAC,CAAG,CACN,GAEM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK;CAoBtD,OAlBA,EAAM,gBAAgB;EACpB,IAAM,IAAK,EAAS;EACpB,IAAI,CAAC,GAAI;EAET,IAAM,IAAU,EAAG,aAAa,YAAY;EAC5C,EAAa,MAAY,SAAS;EAElC,IAAM,IAAW,IAAI,kBAAkB,MAAc;GACnD,KAAK,IAAM,KAAK,GACd,AAAI,EAAE,kBAAkB,gBACtB,EAAa,EAAG,aAAa,YAAY,MAAM,SAAS;EAG9D,CAAC;EAED,OADA,EAAS,QAAQ,GAAI;GAAE,YAAY;GAAM,iBAAiB,CAAC,YAAY;EAAE,CAAC,SAC7D,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC,GAGH,kBAAC,GAAD;EACE,KAAK;EACL,WAAW,EACT,0EACA,CACF;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,QAAA;GACA,SAAS;GACT,SAAS,IAAY,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;GACnD,YAAY,EAAO;GACnB,WAAU;EACX,CAAA;CACgC,CAAA;AAEvC,CAAC;AACD,EAAwB,cAAA,EACY"}

package/dist/ui/number-input.js

@@ -1,14 +1,14 @@
 "use client";
-import { cva as e } from "../_chunks/vendor-utils.js";
-import { cn as t } from "./lib/utils.js";
-import { Icon as n } from "./icon.js";
-import { useFormField as r } from "./form.js";
-import { resolveFieldState as i } from "../_chunks/field-state.js";
-import * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { IconMinus as c, IconPlus as l } from "@tabler/icons-react";
+import { cn as e } from "./lib/utils.js";
+import { Icon as t } from "./icon.js";
+import { useFormField as n } from "./form.js";
+import { resolveFieldState as r } from "../_chunks/field-state.js";
+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";
+import { cva as l } from "class-variance-authority";
 //#region src/ui/number-input.tsx
-var u = e("flex items-center justify-between rounded-control border border-surface-border-strong", {
+var u = l("flex items-center justify-between rounded-control border border-surface-border-interactive", {
 	variants: { size: {
 		xs: "h-ds-xs-plus",
 		sm: "h-ds-sm",
@@ -36,43 +36,43 @@ var u = e("flex items-center justify-between rounded-control border border-surfa
 	error: "border-error-7",
 	warning: "border-warning-7",
 	success: "border-success-7"
-}, h = a.forwardRef(({ value: e = 0, onValueChange: a, min: h = -(2 ** 53 - 1), max: g = 2 ** 53 - 1, step: _ = 1, disabled: v = !1, className: y, size: b = "md", state: x, "aria-label": S, ...C }, w) => {
-	let T = b ?? "md", E = r(), D = S ?? (C.id || E.helperTextId ? void 0 : "Numeric value"), O = i(x, E.state) ?? "default", k = (e) => {
+}, h = i.forwardRef(({ value: i = 0, onValueChange: l, min: h = -(2 ** 53 - 1), max: g = 2 ** 53 - 1, step: _ = 1, disabled: v = !1, className: y, size: b = "md", state: x, "aria-label": S, ...C }, w) => {
+	let T = b ?? "md", E = n(), D = S ?? (C.id || E.helperTextId ? void 0 : "Numeric value"), O = r(x, E.state) ?? "default", k = (e) => {
 		let t = e.target.value.trim();
 		if (t === "" || t === "-") {
-			a?.(h >= 0 ? h : 0);
+			l?.(h >= 0 ? h : 0);
 			return;
 		}
 		let n = Number(t);
-		Number.isNaN(n) || a?.(Math.min(Math.max(n, h), g));
-	}, A = (t) => {
-		t.preventDefault();
-		let n = e + _;
-		n <= g && a?.(n);
-	}, j = (t) => {
-		t.preventDefault();
-		let n = e - _;
-		n >= h && a?.(n);
+		Number.isNaN(n) || l?.(Math.min(Math.max(n, h), g));
+	}, A = (e) => {
+		e.preventDefault();
+		let t = i + _;
+		t <= g && l?.(t);
+	}, j = (e) => {
+		e.preventDefault();
+		let t = i - _;
+		t >= h && l?.(t);
 	}, M = d[T], N = f[T], P = p[T];
-	return /* @__PURE__ */ s("div", {
-		className: t(u({ size: T }), m[O], y),
+	return /* @__PURE__ */ o("div", {
+		className: e(u({ size: T }), m[O], y),
 		children: [
-			/* @__PURE__ */ o("button", {
+			/* @__PURE__ */ a("button", {
 				type: "button",
 				onClick: j,
-				disabled: v || e <= h,
+				disabled: v || i <= h,
 				"aria-label": "Decrease value",
 				title: "Decrease",
-				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", M),
-				children: /* @__PURE__ */ o(n, {
-					icon: c,
+				className: e("flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-panel-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", M),
+				children: /* @__PURE__ */ a(t, {
+					icon: s,
 					size: N
 				})
 			}),
-			/* @__PURE__ */ o("input", {
+			/* @__PURE__ */ a("input", {
 				ref: w,
 				type: "number",
-				value: e,
+				value: i,
 				onChange: k,
 				min: h,
 				max: g,
@@ -81,19 +81,19 @@ var u = e("flex items-center justify-between rounded-control border border-surfa
 				"aria-label": D,
 				"aria-invalid": O === "error" || void 0,
 				"aria-describedby": C["aria-describedby"] ?? E.helperTextId,
-				className: t("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", P),
+				className: e("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", P),
 				...C,
 				id: C.id ?? E.inputId
 			}),
-			/* @__PURE__ */ o("button", {
+			/* @__PURE__ */ a("button", {
 				type: "button",
 				onClick: A,
-				disabled: v || e >= g,
+				disabled: v || i >= g,
 				"aria-label": "Increase value",
 				title: "Increase",
-				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", M),
-				children: /* @__PURE__ */ o(n, {
-					icon: l,
+				className: e("flex items-center justify-center border-0 rounded-control-inner text-surface-fg-subtle hover:bg-surface-panel-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", M),
+				children: /* @__PURE__ */ a(t, {
+					icon: c,
 					size: N
 				})
 			})