@devalok/shilp-sutra 0.48.0 → 0.49.0

package/dist/ui/lib/use-controllable-open.d.ts

@@ -0,0 +1,32 @@
+"use client";
+/**
+ * Options for {@link useControllableOpen}. Mirrors the standard Radix open-state
+ * prop trio so a component can spread its own props straight in.
+ */
+export interface UseControllableOpenOptions {
+    /** Controlled open value. When defined, the hook is in controlled mode. */
+    open?: boolean;
+    /** Initial open value in uncontrolled mode. @default false */
+    defaultOpen?: boolean;
+    /** Called on every open/close request (both modes). */
+    onOpenChange?: (open: boolean) => void;
+}
+export interface ControllableOpen {
+    /** The effective open state (controlled value, or internal state). */
+    open: boolean;
+    /** Request a new open state — updates internal state (uncontrolled) and always fires `onOpenChange`. */
+    setOpen: (next: boolean) => void;
+    /** Convenience: `setOpen(false)`. Stable across renders. */
+    close: () => void;
+}
+/**
+ * Controlled/uncontrolled open-state machine shared by every overlay
+ * (Dialog, Popover, Sheet, Tooltip, DropdownMenu, …). The effective `open` is
+ * kept in React state even in controlled mode so overlays can drive
+ * `AnimatePresence` exit animations from it.
+ *
+ * Extracted so the identical block isn't hand-copied per overlay — one fix
+ * site instead of six.
+ */
+export declare function useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange, }: UseControllableOpenOptions): ControllableOpen;
+//# sourceMappingURL=use-controllable-open.d.ts.map

package/dist/ui/lib/use-controllable-open.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-open.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/use-controllable-open.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,IAAI,EAAE,OAAO,CAAA;IACb,wGAAwG;IACxG,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,GACb,EAAE,0BAA0B,GAAG,gBAAgB,CAgB/C"}

package/dist/ui/link.js

@@ -1,5 +1,5 @@
 "use client";
-import { Hn as e } from "../_chunks/primitives.js";
+import { Vn as e } from "../_chunks/primitives.js";
 import { cn as t } from "./lib/utils.js";
 import * as n from "react";
 import { jsx as r } from "react/jsx-runtime";

package/dist/ui/number-input.d.ts

@@ -1,7 +1,9 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
+import { FieldState } from './lib/field-state';
 import * as React from 'react';
-export type NumberInputState = 'default' | 'error' | 'warning' | 'success';
+/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */
+export type NumberInputState = FieldState;
 declare const numberInputWrapperVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -47,7 +49,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /** Size of the number input. Controls height, button sizes, text size. */
     size?: NumberInputSize;
     /** Validation state controlling border color. */
-    state?: NumberInputState;
+    state?: FieldState;
 }
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInput, numberInputWrapperVariants };

package/dist/ui/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/ui/number-input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE1E,QAAA,MAAM,0BAA0B;;8EAa/B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAkClG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACjI,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,gBAAgB,CAAA;CACzB;AAED,QAAA,MAAM,WAAW,2FAwHhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,0BAA0B,EAAE,CAAA"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/ui/number-input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAGtE,sFAAsF;AACtF,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAA;AAEzC,QAAA,MAAM,0BAA0B;;8EAa/B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAkClG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACjI,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,2FAmHhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,0BAA0B,EAAE,CAAA"}

package/dist/ui/number-input.js

@@ -3,11 +3,12 @@ import { t 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 * 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 { t 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";
 //#region src/ui/number-input.tsx
-var l = e("flex items-center justify-between rounded-control border border-surface-border-strong", {
+var u = e("flex items-center justify-between rounded-control border border-surface-border-strong", {
 	variants: { size: {
 		xs: "h-ds-xs-plus",
 		sm: "h-ds-sm",
@@ -15,89 +16,89 @@ var l = e("flex items-center justify-between rounded-control border border-surfa
 		lg: "h-ds-lg"
 	} },
 	defaultVariants: { size: "md" }
-}), u = {
+}), d = {
 	xs: "h-[22px] w-[22px]",
 	sm: "h-ds-sm w-ds-sm",
 	md: "h-ds-sm w-ds-sm",
 	lg: "h-ds-md w-ds-md"
-}, d = {
+}, f = {
 	xs: "xs",
 	sm: "sm",
 	md: "sm",
 	lg: "md"
-}, f = {
-	xs: "text-ds-sm w-[28px]",
+}, p = {
+	xs: "text-ds-sm w-ds-06b",
 	sm: "text-ds-sm w-ds-sm-plus",
 	md: "text-ds-md w-ds-sm-plus",
 	lg: "text-ds-md w-ds-md"
-}, p = {
+}, m = {
 	default: "",
 	error: "border-error-7",
 	warning: "border-warning-7",
 	success: "border-success-7"
-}, m = i.forwardRef(({ value: e = 0, onValueChange: i, min: m = -(2 ** 53 - 1), max: h = 2 ** 53 - 1, step: g = 1, disabled: _ = !1, className: v, size: y = "md", state: b, "aria-label": x, ...S }, C) => {
-	let w = y ?? "md", T = r(), E = x ?? (S.id || T.helperTextId ? void 0 : "Numeric value"), D = b ?? (T.state === "helper" ? "default" : T.state) ?? "default", O = (e) => {
+}, 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) => {
 		let t = e.target.value.trim();
 		if (t === "" || t === "-") {
-			i?.(m >= 0 ? m : 0);
+			a?.(h >= 0 ? h : 0);
 			return;
 		}
 		let n = Number(t);
-		Number.isNaN(n) || i?.(Math.min(Math.max(n, m), h));
-	}, k = (t) => {
-		t.preventDefault();
-		let n = e + g;
-		n <= h && i?.(n);
+		Number.isNaN(n) || a?.(Math.min(Math.max(n, h), g));
 	}, A = (t) => {
 		t.preventDefault();
-		let n = e - g;
-		n >= m && i?.(n);
-	}, j = u[w], M = d[w], N = f[w];
-	return /* @__PURE__ */ o("div", {
-		className: t(l({ size: w }), p[D], v),
+		let n = e + _;
+		n <= g && a?.(n);
+	}, j = (t) => {
+		t.preventDefault();
+		let n = e - _;
+		n >= h && a?.(n);
+	}, M = d[T], N = f[T], P = p[T];
+	return /* @__PURE__ */ s("div", {
+		className: t(u({ size: T }), m[O], y),
 		children: [
-			/* @__PURE__ */ a("button", {
+			/* @__PURE__ */ o("button", {
 				type: "button",
-				onClick: A,
-				disabled: _ || e <= m,
+				onClick: j,
+				disabled: v || e <= 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", j),
-				children: /* @__PURE__ */ a(n, {
-					icon: s,
-					size: M
+				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,
+					size: N
 				})
 			}),
-			/* @__PURE__ */ a("input", {
-				ref: C,
+			/* @__PURE__ */ o("input", {
+				ref: w,
 				type: "number",
 				value: e,
-				onChange: O,
-				min: m,
-				max: h,
-				step: g,
-				disabled: _,
-				"aria-label": E,
-				"aria-invalid": D === "error" || void 0,
-				"aria-describedby": S["aria-describedby"] ?? T.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", N),
-				...S
+				onChange: k,
+				min: h,
+				max: g,
+				step: _,
+				disabled: v,
+				"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),
+				...C
 			}),
-			/* @__PURE__ */ a("button", {
+			/* @__PURE__ */ o("button", {
 				type: "button",
-				onClick: k,
-				disabled: _ || e >= h,
+				onClick: A,
+				disabled: v || e >= 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", j),
-				children: /* @__PURE__ */ a(n, {
-					icon: c,
-					size: M
+				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,
+					size: N
 				})
 			})
 		]
 	});
 });
-m.displayName = "NumberInput";
+h.displayName = "NumberInput";
 //#endregion
-export { m as NumberInput, l as numberInputWrapperVariants };
+export { h as NumberInput, u as numberInputWrapperVariants };

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

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

package/dist/ui/pagination.js

@@ -1,5 +1,5 @@
 "use client";
-import { Hn as e } from "../_chunks/primitives.js";
+import { Vn as e } from "../_chunks/primitives.js";
 import { cn as t } from "./lib/utils.js";
 import { Icon as n } from "./icon.js";
 import * as r from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CA4BnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,aAAa,4GAA0B,CAAA;AAE7C,QAAA,MAAM,cAAc,gKAiDlB,CAAA;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEjG,OAAO,EAAE,OAAO,EAAE,aAAa,EAAC,cAAc,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAkBnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,aAAa,4GAA0B,CAAA;AAE7C,QAAA,MAAM,cAAc,gKAiDlB,CAAA;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEjG,OAAO,EAAE,OAAO,EAAE,aAAa,EAAC,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/progress.d.ts

@@ -2,51 +2,75 @@
 import { VariantProps } from 'class-variance-authority';
 import * as ProgressPrimitive from '../primitives/react-progress';
 import * as React from 'react';
-declare const progressTrackVariants: (props?: ({
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressColor = 'accent' | 'success' | 'warning' | 'error';
+export declare const progressTrackVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const progressIndicatorVariants: (props?: ({
-    color?: "default" | "success" | "error" | "warning" | null | undefined;
+export declare const progressIndicatorVariants: (props?: ({
+    color?: ProgressColor | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for Progress — a horizontal progress bar with size and color variants, an optional
- * percentage label, and an indeterminate animation when `value` is undefined/null.
- *
- * **Track size:** `sm` (4px) | `md` (8px, default) | `lg` (12px)
- *
- * **Indicator color:** `default` (brand interactive) | `success` | `warning` | `error`
- *
- * **Indeterminate:** Omit `value` (or pass `undefined`) to show an animated indeterminate bar.
- * When `value` is provided, it should be a number between 0–100.
- *
- * **`showLabel`:** Renders the percentage value next to the bar (only when `value` is set).
- *
- * @example
- * // Determinate upload progress:
- * <Progress value={uploadPercent} color="default" showLabel />
- *
- * @example
- * // Indeterminate loading bar (while waiting for an async operation):
- * <Progress size="sm" />
- *
- * @example
- * // Success-colored completion bar (e.g. after all tasks done):
- * <Progress value={100} color="success" size="md" />
- *
- * @example
- * // Warning threshold indicator (disk usage at 80%):
- * <Progress value={80} color="warning" showLabel size="lg" />
- * // These are just a few ways — feel free to combine props creatively!
- */
-interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'color'>, VariantProps<typeof progressTrackVariants>, VariantProps<typeof progressIndicatorVariants> {
-    /** Additional class names for the indicator element */
-    indicatorClassName?: string;
-    /** Display the percentage label next to the progress bar */
-    showLabel?: boolean;
-    /** When true, color auto-shifts by value: 0-59 = default (accent), 60-84 = warning, 85-100 = success, >100 = error. @default false */
+export interface ProgressRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 0–max. Omit (or null) for an indeterminate bar. */
+    value?: number | null;
+    /** Scale maximum. @default 100 */
+    max?: number;
+    /** Track thickness. @default 'md' */
+    size?: ProgressSize;
+}
+declare const ProgressRoot: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+export type ProgressTrackProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>;
+declare const ProgressTrack: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fill colour. Omit to auto-colour by value. */
+    color?: ProgressColor;
+    /** Force auto-colour even when `color` is unset. @default true when color unset */
     autoColor?: boolean;
 }
-declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
-export { Progress, progressIndicatorVariants, progressTrackVariants };
-export type { ProgressProps };
+declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ProgressSegmentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** This segment's portion of `max`. */
+    value: number;
+    color?: ProgressColor;
+}
+declare const ProgressSegment: React.ForwardRefExoticComponent<ProgressSegmentProps & React.RefAttributes<HTMLDivElement>>;
+export type ProgressLabelProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const ProgressLabel: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ProgressValueProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Format the percentage. Default: `${round(pct)}%`. */
+    format?: (pct: number, value: number | null, max: number) => React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const ProgressValue: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof progressTrackVariants> {
+    /** 0–max. Omit (or null) for an indeterminate bar. */
+    value?: number | null;
+    max?: number;
+    /** Fill colour. Omit + set `autoColor` to colour by value. */
+    color?: ProgressColor;
+    /** Auto-colour the fill by value (0–59 accent · 60–84 warning · 85–100 success · >100 error). @default false */
+    autoColor?: boolean;
+    /** Descriptive label rendered before the bar. */
+    label?: React.ReactNode;
+    /** Show the `{n}%` readout after the bar. */
+    showValue?: boolean;
+    /** Multi-segment bar: each slice is `value` (portion of max) + `color`. Overrides the single indicator. */
+    segments?: Array<{
+        value: number;
+        color?: ProgressColor;
+    }>;
+    /** Class for the Track element. */
+    trackClassName?: string;
+    /** Class for the single Indicator (ignored when `segments` is set). */
+    indicatorClassName?: string;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+    Segment: React.ForwardRefExoticComponent<ProgressSegmentProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export { Progress, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressSegment, ProgressTrack, ProgressValue, };
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/ui/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAA;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,QAAA,MAAM,qBAAqB;;8EAY1B,CAAA;AAED,QAAA,MAAM,yBAAyB;;8EAa9B,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,UAAU,aACR,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EAC7D,OAAO,CACR,EACD,YAAY,CAAC,OAAO,qBAAqB,CAAC,EAC1C,YAAY,CAAC,OAAO,yBAAyB,CAAC;IAChD,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sIAAsI;IACtI,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAMD,QAAA,MAAM,QAAQ,sFAwEb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,yBAAyB,EAAC,qBAAqB,EAAE,CAAA;AACpE,YAAY,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/ui/progress.tsx"],"names":[],"mappings":"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"}

package/dist/ui/progress.js

@@ -1,52 +1,156 @@
 "use client";
-import { A as e, k as t } from "../_chunks/primitives.js";
-import { springs as n } from "./lib/motion.js";
-import { t as r } from "../_chunks/vendor-utils.js";
-import { cn as i } from "./lib/utils.js";
-import * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { motion as c } from "framer-motion";
+import { k as e } from "../_chunks/primitives.js";
+import { springs as t } from "./lib/motion.js";
+import { t as n } from "../_chunks/vendor-utils.js";
+import { cn as r } from "./lib/utils.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { motion as s } from "framer-motion";
 //#region src/ui/progress.tsx
-var l = r("relative w-full overflow-hidden rounded-pill bg-surface-raised", {
+var c = n("relative w-full overflow-hidden rounded-pill bg-surface-raised", {
 	variants: { size: {
 		sm: "h-1",
 		md: "h-2",
 		lg: "h-3"
 	} },
 	defaultVariants: { size: "md" }
-}), u = r("h-full w-full flex-1 transition-[width] duration-moderate-02 ease-expressive-standard", {
-	variants: { color: {
-		default: "bg-accent-9",
-		success: "bg-success-9",
-		warning: "bg-warning-9",
-		error: "bg-error-9"
-	} },
-	defaultVariants: { color: "default" }
-}), d = a.forwardRef(({ className: r, value: a, size: d, color: f, indicatorClassName: p, showLabel: m, autoColor: h, ...g }, _) => {
-	let v = a == null, y = h && a != null ? a > 100 ? "error" : a >= 85 ? "success" : a >= 60 ? "warning" : "default" : f;
-	return /* @__PURE__ */ s("div", {
-		className: i("flex items-center gap-ds-03", m && "w-full"),
-		children: [/* @__PURE__ */ o(e, {
-			ref: _,
-			value: v ? null : a,
-			className: i(l({ size: d }), r),
-			...g,
-			children: v ? /* @__PURE__ */ o(t, { className: i(u({ color: y }), "w-2/5 animate-progress-indeterminate motion-reduce:animate-none", p) }) : /* @__PURE__ */ o(t, {
-				className: i("h-full", p),
-				asChild: !0,
-				children: /* @__PURE__ */ o(c.div, {
-					className: i(u({ color: y }), "transition-colors duration-moderate-01 ease-productive-standard"),
-					initial: !1,
-					animate: { width: `${a || 0}%` },
-					transition: n.smooth
+}), l = {
+	accent: "bg-accent-9",
+	success: "bg-success-9",
+	warning: "bg-warning-9",
+	error: "bg-error-9"
+}, u = n("h-full transition-[width] duration-moderate-02 ease-expressive-standard", {
+	variants: { color: l },
+	defaultVariants: { color: "accent" }
+});
+function d(e) {
+	return e == null ? "accent" : e > 100 ? "error" : e >= 85 ? "success" : e >= 60 ? "warning" : "accent";
+}
+var f = (e, t) => Math.max(0, Math.min(100, e / t * 100)), p = i.createContext(null);
+function m(e) {
+	let t = i.useContext(p);
+	if (!t) throw Error(`<Progress.${e}> must be rendered inside <Progress.Root>.`);
+	return t;
+}
+var h = i.forwardRef(({ value: e = null, max: t = 100, size: n = "md", className: o, children: s, ...c }, l) => {
+	let u = i.useMemo(() => ({
+		value: e,
+		max: t,
+		size: n,
+		indeterminate: e == null
+	}), [
+		e,
+		t,
+		n
+	]);
+	return /* @__PURE__ */ a(p.Provider, {
+		value: u,
+		children: /* @__PURE__ */ a("div", {
+			ref: l,
+			className: r("flex w-full items-center gap-ds-03", o),
+			...c,
+			children: s
+		})
+	});
+});
+h.displayName = "Progress.Root";
+var g = i.forwardRef(({ className: t, children: n, ...i }, o) => {
+	let { value: s, max: l, size: u, indeterminate: d } = m("Track");
+	return /* @__PURE__ */ a(e, {
+		ref: o,
+		value: d ? null : s,
+		max: l,
+		className: r(c({ size: u }), "flex-1", t),
+		...i,
+		children: n
+	});
+});
+g.displayName = "Progress.Track";
+var _ = i.forwardRef(({ color: e, autoColor: n, className: i, ...o }, c) => {
+	let { value: l, max: p, indeterminate: h } = m("Indicator"), g = e ?? (n === !1 ? "accent" : d(l));
+	return h ? /* @__PURE__ */ a("div", {
+		ref: c,
+		className: r(u({ color: g }), "w-2/5 animate-progress-indeterminate motion-reduce:animate-none", i),
+		...o
+	}) : /* @__PURE__ */ a(s.div, {
+		ref: c,
+		className: r(u({ color: g }), "transition-colors", i),
+		initial: !1,
+		animate: { width: `${f(l ?? 0, p)}%` },
+		transition: t.smooth,
+		...o
+	});
+});
+_.displayName = "Progress.Indicator";
+var v = i.forwardRef(({ value: e, color: t = "accent", className: n, style: i, ...o }, s) => {
+	let { max: c } = m("Segment");
+	return /* @__PURE__ */ a("div", {
+		ref: s,
+		"aria-hidden": "true",
+		className: r("h-full first:rounded-l-pill last:rounded-r-pill", l[t], n),
+		style: {
+			width: `${f(e, c)}%`,
+			...i
+		},
+		...o
+	});
+});
+v.displayName = "Progress.Segment";
+var y = i.forwardRef(({ className: e, ...t }, n) => (m("Label"), /* @__PURE__ */ a("span", {
+	ref: n,
+	className: r("shrink-0 text-ds-sm font-medium text-surface-fg", e),
+	...t
+})));
+y.displayName = "Progress.Label";
+var b = i.forwardRef(({ className: e, format: t, children: n, ...i }, o) => {
+	let { value: s, max: c, indeterminate: l } = m("Value"), u = l ? 0 : f(s ?? 0, c);
+	return /* @__PURE__ */ a("span", {
+		ref: o,
+		className: r("shrink-0 text-ds-xs text-surface-fg-muted tabular-nums", e),
+		...i,
+		children: n ?? (l ? "" : t ? t(u, s, c) : `${Math.round(u)}%`)
+	});
+});
+b.displayName = "Progress.Value";
+var x = i.forwardRef(({ value: e = null, max: t = 100, size: n, color: s, autoColor: c, label: l, showValue: u, segments: d, trackClassName: f, indicatorClassName: p, className: m, "aria-label": x, "aria-labelledby": S, ...C }, w) => {
+	let T = i.useId(), E = l != null;
+	return /* @__PURE__ */ o(h, {
+		ref: w,
+		value: e,
+		max: t,
+		size: n ?? "md",
+		className: m,
+		...C,
+		children: [
+			E && /* @__PURE__ */ a(y, {
+				id: T,
+				children: l
+			}),
+			/* @__PURE__ */ a(g, {
+				"aria-label": x,
+				"aria-labelledby": S ?? (E ? T : void 0),
+				className: r(d && "flex", f),
+				children: d ? d.map((e, t) => /* @__PURE__ */ a(v, {
+					value: e.value,
+					color: e.color
+				}, t)) : /* @__PURE__ */ a(_, {
+					color: s,
+					autoColor: c,
+					className: p
 				})
-			})
-		}), m && !v && /* @__PURE__ */ s("span", {
-			className: "shrink-0 text-ds-xs text-surface-fg-muted tabular-nums",
-			children: [a, "%"]
-		})]
+			}),
+			u && e != null && /* @__PURE__ */ a(b, {})
+		]
 	});
 });
-d.displayName = e.displayName;
+x.displayName = "Progress";
+var S = Object.assign(x, {
+	Root: h,
+	Track: g,
+	Indicator: _,
+	Segment: v,
+	Label: y,
+	Value: b
+});
 //#endregion
-export { d as Progress, u as progressIndicatorVariants, l as progressTrackVariants };
+export { S as Progress, _ as ProgressIndicator, y as ProgressLabel, h as ProgressRoot, v as ProgressSegment, g as ProgressTrack, b as ProgressValue, u as progressIndicatorVariants, c as progressTrackVariants };