@brijbyte/agentic-ui 0.0.3 → 0.0.5

package/dist/meter/circular-meter.js

@@ -0,0 +1,86 @@
+import meter_module_default from "./meter.module.js";
+import { getMeterState } from "./meterState.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/meter/circular-meter.tsx
+const SIZES = {
+	sm: {
+		diameter: 56,
+		strokeWidth: 5
+	},
+	md: {
+		diameter: 80,
+		strokeWidth: 7
+	},
+	lg: {
+		diameter: 112,
+		strokeWidth: 9
+	}
+};
+function CircularMeter({ value, min = 0, max = 100, low, high, optimum = "high", label, showValue = false, format, size = "md", className = "" }) {
+	const clampedValue = Math.min(Math.max(value, min), max);
+	const state = getMeterState(clampedValue, min, max, low, high, optimum);
+	const { diameter, strokeWidth } = SIZES[size];
+	const radius = (diameter - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const dashOffset = circumference * (1 - (clampedValue - min) / (max - min));
+	const center = diameter / 2;
+	return /* @__PURE__ */ jsx(Meter.Root, {
+		value: clampedValue,
+		min,
+		max,
+		...format !== void 0 && { format },
+		className: `${meter_module_default["circular-root"]} ${meter_module_default[`circular-${size}`]} ${className}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "relative",
+				width: diameter,
+				height: diameter
+			},
+			children: [/* @__PURE__ */ jsxs("svg", {
+				width: diameter,
+				height: diameter,
+				viewBox: `0 0 ${diameter} ${diameter}`,
+				className: meter_module_default["circular-svg"],
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: center,
+					cy: center,
+					r: radius,
+					strokeWidth,
+					className: meter_module_default["circular-track"]
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: center,
+					cy: center,
+					r: radius,
+					strokeWidth,
+					strokeDasharray: circumference,
+					strokeDashoffset: dashOffset,
+					className: meter_module_default["circular-indicator"],
+					"data-meter-state": state,
+					style: {
+						transform: "rotate(-90deg)",
+						transformOrigin: "center"
+					}
+				})]
+			}), (showValue || label != null) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: [showValue && /* @__PURE__ */ jsx(Meter.Value, { className: meter_module_default["circular-value"] }), label != null && /* @__PURE__ */ jsx(Meter.Label, {
+					className: meter_module_default["circular-label"],
+					children: label
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { CircularMeter };
+
+//# sourceMappingURL=circular-meter.js.map

package/dist/meter/circular-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-meter.js","names":["BaseMeter","styles"],"sources":["../../src/meter/circular-meter.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport styles from \"./meter.module.css\";\nimport { getMeterState } from \"./meterState\";\n\nexport type CircularMeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface CircularMeterProps {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** Upper boundary of the low zone. Values ≤ this are \"low\". */\n  low?: number;\n  /** Lower boundary of the high zone. Values ≥ this are \"high\". */\n  high?: number;\n  /**\n   * Which zone is optimal — determines stroke colour:\n   * - `\"high\"` (default) → high=green, mid=amber, low=red   (battery, signal)\n   * - `\"low\"`            → low=green, mid=amber, high=red   (CPU load, disk)\n   * - `\"mid\"`            → mid=green, low/high=amber         (temperature)\n   */\n  optimum?: \"low\" | \"mid\" | \"high\";\n  /** Accessible + visible label shown below the value inside the circle. */\n  label?: ReactNode;\n  /** Show the formatted value inside the circle. @default false */\n  showValue?: boolean;\n  /** `Intl.NumberFormatOptions` for value formatting. */\n  format?: Intl.NumberFormatOptions;\n  size?: CircularMeterSize;\n  className?: string;\n}\n\nconst SIZES: Record<CircularMeterSize, { diameter: number; strokeWidth: number }> = {\n  sm: { diameter: 56, strokeWidth: 5 },\n  md: { diameter: 80, strokeWidth: 7 },\n  lg: { diameter: 112, strokeWidth: 9 },\n};\n\nexport function CircularMeter({\n  value,\n  min = 0,\n  max = 100,\n  low,\n  high,\n  optimum = \"high\",\n  label,\n  showValue = false,\n  format,\n  size = \"md\",\n  className = \"\",\n}: CircularMeterProps) {\n  const clampedValue = Math.min(Math.max(value, min), max);\n  const state = getMeterState(clampedValue, min, max, low, high, optimum);\n\n  const { diameter, strokeWidth } = SIZES[size];\n  const radius = (diameter - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const dashOffset = circumference * (1 - (clampedValue - min) / (max - min));\n  const center = diameter / 2;\n\n  return (\n    <BaseMeter.Root\n      value={clampedValue}\n      min={min}\n      max={max}\n      {...(format !== undefined && { format })}\n      className={`${styles[\"circular-root\"]} ${styles[`circular-${size}`]} ${className}`}\n    >\n      <div style={{ position: \"relative\", width: diameter, height: diameter }}>\n        <svg\n          width={diameter}\n          height={diameter}\n          viewBox={`0 0 ${diameter} ${diameter}`}\n          className={styles[\"circular-svg\"]}\n          aria-hidden=\"true\"\n        >\n          {/* Background track ring */}\n          <circle cx={center} cy={center} r={radius} strokeWidth={strokeWidth} className={styles[\"circular-track\"]} />\n          {/* Value arc — origin at 12 o'clock */}\n          <circle\n            cx={center}\n            cy={center}\n            r={radius}\n            strokeWidth={strokeWidth}\n            strokeDasharray={circumference}\n            strokeDashoffset={dashOffset}\n            className={styles[\"circular-indicator\"]}\n            data-meter-state={state}\n            style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n          />\n        </svg>\n\n        {(showValue || label != null) && (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            {showValue && <BaseMeter.Value className={styles[\"circular-value\"]} />}\n            {label != null && <BaseMeter.Label className={styles[\"circular-label\"]}>{label}</BaseMeter.Label>}\n          </div>\n        )}\n      </div>\n    </BaseMeter.Root>\n  );\n}\n"],"mappings":";;;;;AAmCA,MAAM,QAA8E;CAClF,IAAI;EAAE,UAAU;EAAI,aAAa;EAAG;CACpC,IAAI;EAAE,UAAU;EAAI,aAAa;EAAG;CACpC,IAAI;EAAE,UAAU;EAAK,aAAa;EAAG;CACtC;AAED,SAAgB,cAAc,EAC5B,OACA,MAAM,GACN,MAAM,KACN,KACA,MACA,UAAU,QACV,OACA,YAAY,OACZ,QACA,OAAO,MACP,YAAY,MACS;CACrB,MAAM,eAAe,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;CACxD,MAAM,QAAQ,cAAc,cAAc,KAAK,KAAK,KAAK,MAAM,QAAQ;CAEvE,MAAM,EAAE,UAAU,gBAAgB,MAAM;CACxC,MAAM,UAAU,WAAW,eAAe;CAC1C,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,aAAa,iBAAiB,KAAK,eAAe,QAAQ,MAAM;CACtE,MAAM,SAAS,WAAW;AAE1B,QACE,oBAACA,MAAU,MAAX;EACE,OAAO;EACF;EACA;EACL,GAAK,WAAW,KAAA,KAAa,EAAE,QAAQ;EACvC,WAAW,GAAGC,qBAAO,iBAAiB,GAAGA,qBAAO,YAAY,QAAQ,GAAG;YAEvE,qBAAC,OAAD;GAAK,OAAO;IAAE,UAAU;IAAY,OAAO;IAAU,QAAQ;IAAU;aAAvE,CACE,qBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,SAAS,GAAG;IAC5B,WAAWA,qBAAO;IAClB,eAAY;cALd,CAQE,oBAAC,UAAD;KAAQ,IAAI;KAAQ,IAAI;KAAQ,GAAG;KAAqB;KAAa,WAAWA,qBAAO;KAAqB,CAAA,EAE5G,oBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACU;KACb,iBAAiB;KACjB,kBAAkB;KAClB,WAAWA,qBAAO;KAClB,oBAAkB;KAClB,OAAO;MAAE,WAAW;MAAkB,iBAAiB;MAAU;KACjE,CAAA,CACE;QAEJ,aAAa,SAAS,SACtB,qBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,OAAO;KACP,SAAS;KACT,eAAe;KACf,YAAY;KACZ,gBAAgB;KACjB;cARH,CAUG,aAAa,oBAACD,MAAU,OAAX,EAAiB,WAAWC,qBAAO,mBAAqB,CAAA,EACrE,SAAS,QAAQ,oBAACD,MAAU,OAAX;KAAiB,WAAWC,qBAAO;eAAoB;KAAwB,CAAA,CAC7F;MAEJ;;EACS,CAAA"}

package/dist/meter/index.d.ts

@@ -0,0 +1,4 @@
+import { Meter, MeterProps, MeterSize, styles } from "./meter.js";
+import { CircularMeter, CircularMeterProps, CircularMeterSize } from "./circular-meter.js";
+import { MeterIndicator, MeterIndicatorProps, MeterLabel, MeterLabelProps, MeterTrack, MeterTrackProps, MeterValue, MeterValueProps } from "./parts.js";
+export { CircularMeter, type CircularMeterProps, type CircularMeterSize, Meter, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, type MeterSize, styles as MeterStyles, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps };

package/dist/meter/index.js

@@ -0,0 +1,5 @@
+import meter_module_default from "./meter.module.js";
+import { Meter } from "./meter.js";
+import { CircularMeter } from "./circular-meter.js";
+import { MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "./parts.js";
+export { CircularMeter, Meter, MeterIndicator, MeterLabel, meter_module_default as MeterStyles, MeterTrack, MeterValue };

package/dist/meter/meter.css

@@ -0,0 +1,152 @@
+@layer components {
+  .root_vOHIVq {
+    gap: var(--space-1-5);
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+  }
+
+  .label-row_vOHIVq {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .label_vOHIVq, .value_vOHIVq {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+  }
+
+  .track_vOHIVq {
+    background-color: var(--color-surface-3);
+    border-radius: var(--radius-full);
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .track-sm_vOHIVq {
+    height: 4px;
+  }
+
+  .track-md_vOHIVq {
+    height: 6px;
+  }
+
+  .track-lg_vOHIVq {
+    height: 8px;
+  }
+
+  .indicator_vOHIVq {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    height: 100%;
+    transition: width var(--duration-slower) var(--easing-standard);
+  }
+
+  .indicator_vOHIVq[data-meter-state="optimum"] {
+    background-color: var(--color-success-solid);
+  }
+
+  .indicator_vOHIVq[data-meter-state="suboptimal"] {
+    background-color: var(--color-warning-solid);
+  }
+
+  .indicator_vOHIVq[data-meter-state="critical"] {
+    background-color: var(--color-error-solid);
+  }
+
+  .tick_vOHIVq {
+    background-color: var(--color-canvas);
+    opacity: .6;
+    pointer-events: none;
+    width: 1px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .circular-root_vOHIVq {
+    align-items: center;
+    gap: var(--space-1-5);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .circular-svg_vOHIVq {
+    overflow: visible;
+  }
+
+  .circular-track_vOHIVq {
+    fill: none;
+    stroke: var(--color-surface-3);
+  }
+
+  .circular-indicator_vOHIVq {
+    fill: none;
+    stroke: var(--color-accent);
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--duration-slower) var(--easing-standard);
+  }
+
+  .circular-indicator_vOHIVq[data-meter-state="optimum"] {
+    stroke: var(--color-success-solid);
+  }
+
+  .circular-indicator_vOHIVq[data-meter-state="suboptimal"] {
+    stroke: var(--color-warning-solid);
+  }
+
+  .circular-indicator_vOHIVq[data-meter-state="critical"] {
+    stroke: var(--color-error-solid);
+  }
+
+  .circular-center_vOHIVq {
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-0-5);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .circular-value_vOHIVq {
+    font-family: var(--font-mono);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: 1;
+  }
+
+  .circular-label_vOHIVq {
+    font-family: var(--font-mono);
+    color: var(--color-secondary);
+    line-height: 1;
+  }
+
+  .circular-sm_vOHIVq .circular-value_vOHIVq {
+    font-size: var(--font-size-sm);
+  }
+
+  .circular-sm_vOHIVq .circular-label_vOHIVq {
+    font-size: var(--font-size-xs);
+  }
+
+  .circular-md_vOHIVq .circular-value_vOHIVq {
+    font-size: var(--font-size-xl);
+  }
+
+  .circular-md_vOHIVq .circular-label_vOHIVq {
+    font-size: var(--font-size-xs);
+  }
+
+  .circular-lg_vOHIVq .circular-value_vOHIVq {
+    font-size: var(--font-size-2xl);
+  }
+
+  .circular-lg_vOHIVq .circular-label_vOHIVq {
+    font-size: var(--font-size-sm);
+  }
+}

package/dist/meter/meter.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import styles from "./meter.module.css";
+
+//#region src/meter/meter.d.ts
+type MeterSize = "sm" | "md" | "lg";
+interface MeterProps {
+  /** Current value. Must be between `min` and `max`. */
+  value: number;
+  /** Minimum value of the range. @default 0 */
+  min?: number;
+  /** Maximum value of the range. @default 100 */
+  max?: number;
+  /** Upper boundary of the low zone. Values ≤ this are "low". */
+  low?: number;
+  /** Lower boundary of the high zone. Values ≥ this are "high". */
+  high?: number;
+  /**
+   * Which zone is optimal — determines fill colour:
+   * - `"high"` (default) → high=green, mid=amber, low=red   (battery, signal)
+   * - `"low"`            → low=green, mid=amber, high=red   (CPU load, disk)
+   * - `"mid"`            → mid=green, low/high=amber         (temperature)
+   */
+  optimum?: "low" | "mid" | "high";
+  /** Accessible + visible label. */
+  label?: ReactNode;
+  /** Show the formatted value next to the label. @default false */
+  showValue?: boolean;
+  /** `Intl.NumberFormatOptions` for value formatting. */
+  format?: Intl.NumberFormatOptions;
+  /** Show tick marks at low/high threshold positions. @default false */
+  showTicks?: boolean;
+  /** Bar thickness. @default "md" */
+  size?: MeterSize;
+  className?: string;
+}
+/**
+ * Displays a scalar measurement within a known range. Use `low` / `high` /
+ * `optimum` thresholds to colour the fill based on whether the value is in
+ * an optimal, suboptimal, or critical zone.
+ */
+declare function Meter({
+  value,
+  min,
+  max,
+  low,
+  high,
+  optimum,
+  label,
+  showValue,
+  format,
+  showTicks,
+  size,
+  className
+}: MeterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Meter, MeterProps, MeterSize, styles };
+//# sourceMappingURL=meter.d.ts.map

package/dist/meter/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","names":[],"sources":["../../src/meter/meter.tsx"],"mappings":";;;;;KAKY,SAAA;AAAA,UAEK,UAAA;;EAEf,KAAA;EAJmB;EAMnB,GAAA;EANmB;EAQnB,GAAA;EANe;EAQf,GAAA;;EAEA,IAAA;EAaS;;;;;;EANT,OAAA;EATA;EAWA,KAAA,GAAQ,SAAA;EAFR;EAIA,SAAA;EAFQ;EAIR,MAAA,GAAS,IAAA,CAAK,mBAAA;EAAd;EAEA,SAAA;EAFc;EAId,IAAA,GAAO,SAAA;EACP,SAAA;AAAA;;;;AAQF;;iBAAgB,KAAA,CAAA;EACd,KAAA;EACA,GAAA;EACA,GAAA;EACA,GAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,SAAA;EACA,MAAA;EACA,SAAA;EACA,IAAA;EACA;AAAA,GACC,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/meter/meter.js

@@ -0,0 +1,50 @@
+import meter_module_default from "./meter.module.js";
+import { getMeterState } from "./meterState.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#region src/meter/meter.tsx
+/**
+* Displays a scalar measurement within a known range. Use `low` / `high` /
+* `optimum` thresholds to colour the fill based on whether the value is in
+* an optimal, suboptimal, or critical zone.
+*/
+function Meter$1({ value, min = 0, max = 100, low, high, optimum = "high", label, showValue = false, format, showTicks = false, size = "md", className = "" }) {
+	const clampedValue = Math.min(Math.max(value, min), max);
+	const state = getMeterState(clampedValue, min, max, low, high, optimum);
+	const lowPct = low != null ? (low - min) / (max - min) * 100 : null;
+	const highPct = high != null ? (high - min) / (max - min) * 100 : null;
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		value: clampedValue,
+		min,
+		max,
+		...format !== void 0 && { format },
+		className: `${meter_module_default.root} ${className}`,
+		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: meter_module_default["label-row"],
+			children: [label != null && /* @__PURE__ */ jsx(Meter.Label, {
+				className: meter_module_default.label,
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Meter.Value, { className: meter_module_default.value })]
+		}), /* @__PURE__ */ jsxs(Meter.Track, {
+			className: `${meter_module_default.track} ${meter_module_default[`track-${size}`]}`,
+			children: [
+				/* @__PURE__ */ jsx(Meter.Indicator, {
+					className: meter_module_default.indicator,
+					"data-meter-state": state
+				}),
+				showTicks && lowPct != null && /* @__PURE__ */ jsx("div", {
+					className: meter_module_default.tick,
+					style: { left: `${lowPct}%` }
+				}),
+				showTicks && highPct != null && /* @__PURE__ */ jsx("div", {
+					className: meter_module_default.tick,
+					style: { left: `${highPct}%` }
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Meter$1 as Meter };
+
+//# sourceMappingURL=meter.js.map

package/dist/meter/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":["Meter","BaseMeter","styles"],"sources":["../../src/meter/meter.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport styles from \"./meter.module.css\";\nimport { getMeterState } from \"./meterState\";\n\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface MeterProps {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Minimum value of the range. @default 0 */\n  min?: number;\n  /** Maximum value of the range. @default 100 */\n  max?: number;\n  /** Upper boundary of the low zone. Values ≤ this are \"low\". */\n  low?: number;\n  /** Lower boundary of the high zone. Values ≥ this are \"high\". */\n  high?: number;\n  /**\n   * Which zone is optimal — determines fill colour:\n   * - `\"high\"` (default) → high=green, mid=amber, low=red   (battery, signal)\n   * - `\"low\"`            → low=green, mid=amber, high=red   (CPU load, disk)\n   * - `\"mid\"`            → mid=green, low/high=amber         (temperature)\n   */\n  optimum?: \"low\" | \"mid\" | \"high\";\n  /** Accessible + visible label. */\n  label?: ReactNode;\n  /** Show the formatted value next to the label. @default false */\n  showValue?: boolean;\n  /** `Intl.NumberFormatOptions` for value formatting. */\n  format?: Intl.NumberFormatOptions;\n  /** Show tick marks at low/high threshold positions. @default false */\n  showTicks?: boolean;\n  /** Bar thickness. @default \"md\" */\n  size?: MeterSize;\n  className?: string;\n}\n\n/**\n * Displays a scalar measurement within a known range. Use `low` / `high` /\n * `optimum` thresholds to colour the fill based on whether the value is in\n * an optimal, suboptimal, or critical zone.\n */\nexport function Meter({\n  value,\n  min = 0,\n  max = 100,\n  low,\n  high,\n  optimum = \"high\",\n  label,\n  showValue = false,\n  format,\n  showTicks = false,\n  size = \"md\",\n  className = \"\",\n}: MeterProps) {\n  const clampedValue = Math.min(Math.max(value, min), max);\n  const state = getMeterState(clampedValue, min, max, low, high, optimum);\n  const lowPct = low != null ? ((low - min) / (max - min)) * 100 : null;\n  const highPct = high != null ? ((high - min) / (max - min)) * 100 : null;\n\n  return (\n    <BaseMeter.Root\n      value={clampedValue}\n      min={min}\n      max={max}\n      {...(format !== undefined && { format })}\n      className={`${styles.root} ${className}`}\n    >\n      {(label != null || showValue) && (\n        <div className={styles[\"label-row\"]}>\n          {label != null && <BaseMeter.Label className={styles.label}>{label}</BaseMeter.Label>}\n          {showValue && <BaseMeter.Value className={styles.value} />}\n        </div>\n      )}\n      <BaseMeter.Track className={`${styles.track} ${styles[`track-${size}`]}`}>\n        <BaseMeter.Indicator className={styles.indicator} data-meter-state={state} />\n        {showTicks && lowPct != null && <div className={styles.tick} style={{ left: `${lowPct}%` }} />}\n        {showTicks && highPct != null && <div className={styles.tick} style={{ left: `${highPct}%` }} />}\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n\nexport { styles as MeterStyles };\n"],"mappings":";;;;;;;;;;AA2CA,SAAgBA,QAAM,EACpB,OACA,MAAM,GACN,MAAM,KACN,KACA,MACA,UAAU,QACV,OACA,YAAY,OACZ,QACA,YAAY,OACZ,OAAO,MACP,YAAY,MACC;CACb,MAAM,eAAe,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;CACxD,MAAM,QAAQ,cAAc,cAAc,KAAK,KAAK,KAAK,MAAM,QAAQ;CACvE,MAAM,SAAS,OAAO,QAAS,MAAM,QAAQ,MAAM,OAAQ,MAAM;CACjE,MAAM,UAAU,QAAQ,QAAS,OAAO,QAAQ,MAAM,OAAQ,MAAM;AAEpE,QACE,qBAACC,MAAU,MAAX;EACE,OAAO;EACF;EACA;EACL,GAAK,WAAW,KAAA,KAAa,EAAE,QAAQ;EACvC,WAAW,GAAGC,qBAAO,KAAK,GAAG;YAL/B,EAOI,SAAS,QAAQ,cACjB,qBAAC,OAAD;GAAK,WAAWA,qBAAO;aAAvB,CACG,SAAS,QAAQ,oBAACD,MAAU,OAAX;IAAiB,WAAWC,qBAAO;cAAQ;IAAwB,CAAA,EACpF,aAAa,oBAACD,MAAU,OAAX,EAAiB,WAAWC,qBAAO,OAAS,CAAA,CACtD;MAER,qBAACD,MAAU,OAAX;GAAiB,WAAW,GAAGC,qBAAO,MAAM,GAAGA,qBAAO,SAAS;aAA/D;IACE,oBAACD,MAAU,WAAX;KAAqB,WAAWC,qBAAO;KAAW,oBAAkB;KAAS,CAAA;IAC5E,aAAa,UAAU,QAAQ,oBAAC,OAAD;KAAK,WAAWA,qBAAO;KAAM,OAAO,EAAE,MAAM,GAAG,OAAO,IAAI;KAAI,CAAA;IAC7F,aAAa,WAAW,QAAQ,oBAAC,OAAD;KAAK,WAAWA,qBAAO;KAAM,OAAO,EAAE,MAAM,GAAG,QAAQ,IAAI;KAAI,CAAA;IAChF;KACH"}

package/dist/meter/meter.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/meter/meter.module.js

@@ -0,0 +1,27 @@
+//#region src/meter/meter.module.css
+var meter_module_default = {
+	"circular-center": "circular-center_vOHIVq",
+	"circular-indicator": "circular-indicator_vOHIVq",
+	"circular-label": "circular-label_vOHIVq",
+	"circular-lg": "circular-lg_vOHIVq",
+	"circular-md": "circular-md_vOHIVq",
+	"circular-root": "circular-root_vOHIVq",
+	"circular-sm": "circular-sm_vOHIVq",
+	"circular-svg": "circular-svg_vOHIVq",
+	"circular-track": "circular-track_vOHIVq",
+	"circular-value": "circular-value_vOHIVq",
+	"indicator": "indicator_vOHIVq",
+	"label": "label_vOHIVq",
+	"label-row": "label-row_vOHIVq",
+	"root": "root_vOHIVq",
+	"tick": "tick_vOHIVq",
+	"track": "track_vOHIVq",
+	"track-lg": "track-lg_vOHIVq",
+	"track-md": "track-md_vOHIVq",
+	"track-sm": "track-sm_vOHIVq",
+	"value": "value_vOHIVq"
+};
+//#endregion
+export { meter_module_default as default };
+
+//# sourceMappingURL=meter.module.js.map

package/dist/meter/meter.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.module.js","names":[],"sources":["../../src/meter/meter.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-1-5);\n    width: 100%;\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n  }\n\n  .value {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n  }\n\n  /* ── Track (the outer bar) ──────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    width: 100%;\n    background-color: var(--color-surface-3);\n    border-radius: var(--radius-full);\n    overflow: hidden;\n  }\n\n  .track-sm {\n    height: 4px;\n  }\n  .track-md {\n    height: 6px;\n  }\n  .track-lg {\n    height: 8px;\n  }\n\n  /* ── Indicator (the fill) ───────────────────────────────────────── */\n\n  .indicator {\n    height: 100%;\n    border-radius: var(--radius-full);\n    background-color: var(--color-accent);\n    transition: width var(--duration-slower) var(--easing-standard);\n  }\n\n  /* Threshold-based colours — driven by data attributes set in JS */\n  .indicator[data-meter-state=\"optimum\"] {\n    background-color: var(--color-success-solid);\n  }\n  .indicator[data-meter-state=\"suboptimal\"] {\n    background-color: var(--color-warning-solid);\n  }\n  .indicator[data-meter-state=\"critical\"] {\n    background-color: var(--color-error-solid);\n  }\n\n  /* ── Tick marks for low / high thresholds ───────────────────────── */\n\n  .tick {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--color-canvas);\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  /* ── Circular gauge ─────────────────────────────────────────────── */\n\n  .circular-root {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-1-5);\n  }\n\n  .circular-svg {\n    overflow: visible;\n  }\n\n  /* Track ring */\n  .circular-track {\n    fill: none;\n    stroke: var(--color-surface-3);\n  }\n\n  /* Value arc */\n  .circular-indicator {\n    fill: none;\n    stroke: var(--color-accent);\n    stroke-linecap: round;\n    transition: stroke-dashoffset var(--duration-slower) var(--easing-standard);\n  }\n\n  .circular-indicator[data-meter-state=\"optimum\"] {\n    stroke: var(--color-success-solid);\n  }\n  .circular-indicator[data-meter-state=\"suboptimal\"] {\n    stroke: var(--color-warning-solid);\n  }\n  .circular-indicator[data-meter-state=\"critical\"] {\n    stroke: var(--color-error-solid);\n  }\n\n  /* Centre text stack */\n  .circular-center {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-0-5);\n  }\n\n  .circular-value {\n    font-family: var(--font-mono);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary);\n    line-height: 1;\n  }\n\n  .circular-label {\n    font-family: var(--font-mono);\n    color: var(--color-secondary);\n    line-height: 1;\n  }\n\n  /* Size variants */\n  .circular-sm .circular-value {\n    font-size: var(--font-size-sm);\n  }\n  .circular-sm .circular-label {\n    font-size: var(--font-size-xs);\n  }\n  .circular-md .circular-value {\n    font-size: var(--font-size-xl);\n  }\n  .circular-md .circular-label {\n    font-size: var(--font-size-xs);\n  }\n  .circular-lg .circular-value {\n    font-size: var(--font-size-2xl);\n  }\n  .circular-lg .circular-label {\n    font-size: var(--font-size-sm);\n  }\n}\n"],"mappings":""}

package/dist/meter/meterState.js

@@ -0,0 +1,18 @@
+//#region src/meter/meterState.ts
+/**
+* Derives the semantic zone from value + thresholds,
+* following the HTML <meter> spec colouring algorithm.
+*
+* Returns undefined when no thresholds are defined (plain accent colour).
+*/
+function getMeterState(value, min, max, low, high, optimum) {
+	if (low === void 0 && high === void 0) return void 0;
+	const zone = value <= (low ?? min) ? "low" : value >= (high ?? max) ? "high" : "mid";
+	if (zone === optimum) return "optimum";
+	if (optimum === "mid") return "suboptimal";
+	return zone === "mid" ? "suboptimal" : "critical";
+}
+//#endregion
+export { getMeterState };
+
+//# sourceMappingURL=meterState.js.map

package/dist/meter/meterState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meterState.js","names":[],"sources":["../../src/meter/meterState.ts"],"sourcesContent":["/**\n * Derives the semantic zone from value + thresholds,\n * following the HTML <meter> spec colouring algorithm.\n *\n * Returns undefined when no thresholds are defined (plain accent colour).\n */\nexport function getMeterState(\n  value: number,\n  min: number,\n  max: number,\n  low: number | undefined,\n  high: number | undefined,\n  optimum: \"low\" | \"mid\" | \"high\",\n): \"optimum\" | \"suboptimal\" | \"critical\" | undefined {\n  if (low === undefined && high === undefined) return undefined;\n\n  const effectiveLow = low ?? min;\n  const effectiveHigh = high ?? max;\n\n  const zone: \"low\" | \"mid\" | \"high\" = value <= effectiveLow ? \"low\" : value >= effectiveHigh ? \"high\" : \"mid\";\n\n  if (zone === optimum) return \"optimum\";\n\n  // \"mid\" optimum → no critical zone, extremes are equally suboptimal\n  if (optimum === \"mid\") return \"suboptimal\";\n\n  // \"low\" or \"high\" optimum → adjacent zone = suboptimal, far end = critical\n  return zone === \"mid\" ? \"suboptimal\" : \"critical\";\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,cACd,OACA,KACA,KACA,KACA,MACA,SACmD;AACnD,KAAI,QAAQ,KAAA,KAAa,SAAS,KAAA,EAAW,QAAO,KAAA;CAKpD,MAAM,OAA+B,UAHhB,OAAO,OAGiC,QAAQ,UAF/C,QAAQ,OAEgE,SAAS;AAEvG,KAAI,SAAS,QAAS,QAAO;AAG7B,KAAI,YAAY,MAAO,QAAO;AAG9B,QAAO,SAAS,QAAQ,eAAe"}

package/dist/meter/parts.d.ts

@@ -0,0 +1,25 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Meter } from "@base-ui/react/meter";
+
+//#region src/meter/parts.d.ts
+type BaseTrackProps = ComponentPropsWithoutRef<typeof Meter.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof Meter.Indicator>;
+type BaseLabelProps = ComponentPropsWithoutRef<typeof Meter.Label>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof Meter.Value>;
+interface MeterTrackProps extends BaseTrackProps {
+  size?: "sm" | "md" | "lg";
+}
+interface MeterIndicatorProps extends BaseIndicatorProps {
+  /** Threshold state — controls fill colour. Set automatically by the high-level Meter wrapper. */
+  "data-meter-state"?: "optimum" | "suboptimal" | "critical";
+}
+interface MeterLabelProps extends BaseLabelProps {}
+interface MeterValueProps extends BaseValueProps {}
+declare const MeterTrack: react.ForwardRefExoticComponent<MeterTrackProps & react.RefAttributes<HTMLDivElement>>;
+declare const MeterIndicator: react.ForwardRefExoticComponent<MeterIndicatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const MeterLabel: react.ForwardRefExoticComponent<MeterLabelProps & react.RefAttributes<HTMLSpanElement>>;
+declare const MeterValue: react.ForwardRefExoticComponent<MeterValueProps & react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { MeterIndicator, MeterIndicatorProps, MeterLabel, MeterLabelProps, MeterTrack, MeterTrackProps, MeterValue, MeterValueProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/meter/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/meter/parts.tsx"],"mappings":";;;;;KAyBK,cAAA,GAAiB,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,KAC3D,kBAAA,GAAqB,wBAAA,QAAgC,KAAA,CAAU,SAAA;AAAA,KAC/D,cAAA,GAAiB,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,KAC3D,cAAA,GAAiB,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,UAE/C,eAAA,SAAwB,cAAA;EACvC,IAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,kBAAA;EARS;EAUpD,kBAAA;AAAA;AAAA,UAEe,eAAA,SAAwB,cAAA;AAAA,UACxB,eAAA,SAAwB,cAAA;AAAA,cAE5B,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAaV,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOd,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,cAOV,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}

package/dist/meter/parts.js

@@ -0,0 +1,57 @@
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
+import meter_module_default from "./meter.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Meter } from "@base-ui/react/meter";
+//#region src/meter/parts.tsx
+/**
+* Styled primitives for Meter.
+*
+* @example
+* ```tsx
+* import { Meter } from '@base-ui/react/meter';
+* import { MeterTrack, MeterIndicator, MeterLabel, MeterValue } from '@brijbyte/agentic-ui/meter';
+*
+* <Meter.Root value={68} min={0} max={100}>
+*   <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+*     <MeterLabel>Storage</MeterLabel>
+*     <MeterValue />
+*   </div>
+*   <MeterTrack>
+*     <MeterIndicator />
+*   </MeterTrack>
+* </Meter.Root>
+* ```
+*/
+const MeterTrack = forwardRef(function MeterTrack({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		ref,
+		className: (state) => cx(meter_module_default.track, meter_module_default[`track-${size}`], resolveClassName(className, state)),
+		...props
+	});
+});
+const MeterIndicator = forwardRef(function MeterIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		ref,
+		className: (state) => cx(meter_module_default.indicator, resolveClassName(className, state)),
+		...props
+	});
+});
+const MeterLabel = forwardRef(function MeterLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		ref,
+		className: (state) => cx(meter_module_default.label, resolveClassName(className, state)),
+		...props
+	});
+});
+const MeterValue = forwardRef(function MeterValue({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Meter.Value, {
+		ref,
+		className: (state) => cx(meter_module_default.value, resolveClassName(className, state)),
+		...props
+	});
+});
+//#endregion
+export { MeterIndicator, MeterLabel, MeterTrack, MeterValue };
+
+//# sourceMappingURL=parts.js.map

package/dist/meter/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseMeter","styles"],"sources":["../../src/meter/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Meter.\n *\n * @example\n * ```tsx\n * import { Meter } from '@base-ui/react/meter';\n * import { MeterTrack, MeterIndicator, MeterLabel, MeterValue } from '@brijbyte/agentic-ui/meter';\n *\n * <Meter.Root value={68} min={0} max={100}>\n *   <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n *     <MeterLabel>Storage</MeterLabel>\n *     <MeterValue />\n *   </div>\n *   <MeterTrack>\n *     <MeterIndicator />\n *   </MeterTrack>\n * </Meter.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport styles from \"./meter.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseTrackProps = ComponentPropsWithoutRef<typeof BaseMeter.Track>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseMeter.Indicator>;\ntype BaseLabelProps = ComponentPropsWithoutRef<typeof BaseMeter.Label>;\ntype BaseValueProps = ComponentPropsWithoutRef<typeof BaseMeter.Value>;\n\nexport interface MeterTrackProps extends BaseTrackProps {\n  size?: \"sm\" | \"md\" | \"lg\";\n}\nexport interface MeterIndicatorProps extends BaseIndicatorProps {\n  /** Threshold state — controls fill colour. Set automatically by the high-level Meter wrapper. */\n  \"data-meter-state\"?: \"optimum\" | \"suboptimal\" | \"critical\";\n}\nexport interface MeterLabelProps extends BaseLabelProps {}\nexport interface MeterValueProps extends BaseValueProps {}\n\nexport const MeterTrack = forwardRef<ComponentRef<typeof BaseMeter.Track>, MeterTrackProps>(function MeterTrack(\n  { className, size = \"md\", ...props },\n  ref,\n) {\n  return (\n    <BaseMeter.Track\n      ref={ref}\n      className={(state) => cx(styles.track, styles[`track-${size}`], resolveClassName(className, state))}\n      {...props}\n    />\n  );\n});\n\nexport const MeterIndicator = forwardRef<ComponentRef<typeof BaseMeter.Indicator>, MeterIndicatorProps>(function MeterIndicator(\n  { className, ...props },\n  ref,\n) {\n  return <BaseMeter.Indicator ref={ref} className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />;\n});\n\nexport const MeterLabel = forwardRef<ComponentRef<typeof BaseMeter.Label>, MeterLabelProps>(function MeterLabel(\n  { className, ...props },\n  ref,\n) {\n  return <BaseMeter.Label ref={ref} className={(state) => cx(styles.label, resolveClassName(className, state))} {...props} />;\n});\n\nexport const MeterValue = forwardRef<ComponentRef<typeof BaseMeter.Value>, MeterValueProps>(function MeterValue(\n  { className, ...props },\n  ref,\n) {\n  return <BaseMeter.Value ref={ref} className={(state) => cx(styles.value, resolveClassName(className, state))} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,OAAO,MAAM,GAAG,SAC7B,KACA;AACA,QACE,oBAACA,MAAU,OAAX;EACO;EACL,YAAY,UAAU,GAAGC,qBAAO,OAAOA,qBAAO,SAAS,SAAS,iBAAiB,WAAW,MAAM,CAAC;EACnG,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,WAAX;EAA0B;EAAK,YAAY,UAAU,GAAGC,qBAAO,WAAW,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACnI;AAEF,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,OAAX;EAAsB;EAAK,YAAY,UAAU,GAAGC,qBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC3H;AAEF,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,OAAX;EAAsB;EAAK,YAAY,UAAU,GAAGC,qBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC3H"}

package/dist/number-field/number-field.d.ts

@@ -6,20 +6,36 @@ import styles from "./number-field.module.css";
 interface NumberFieldProps {
   /** Visible label text. When present a scrub-area is also rendered. */
   label?: ReactNode;
+  /** Initial value (uncontrolled). */
   defaultValue?: number;
+  /** Current value (controlled). `null` when the field is empty. */
   value?: number | null;
+  /** Called when the value changes. */
   onValueChange?: (value: number | null) => void;
+  /** Minimum allowed value. */
   min?: number;
+  /** Maximum allowed value. */
   max?: number;
+  /** Increment/decrement step size. @default 1 */
   step?: number;
+  /** Prevent interaction. */
   disabled?: boolean;
+  /** Allow reading but not editing. */
   readOnly?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** `Intl.NumberFormatOptions` for display formatting. */
   format?: Intl.NumberFormatOptions;
+  /** Allow changing the value by scrolling the mouse wheel. */
   allowWheelScrub?: boolean;
   className?: string;
 }
+/**
+ * A numeric input with stepper buttons and a scrub area. Supports min/max
+ * clamping, step size, locale-aware formatting, and keyboard/scroll input.
+ */
 declare function NumberField({
   label,
   className,

package/dist/number-field/number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","names":[],"sources":["../../src/number-field/number-field.tsx"],"mappings":";;;;;UAKiB,gBAAA;;EAEf,KAAA,GAAQ,SAAA;EACR,YAAA;EACA,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,GAAA;EACA,GAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,MAAA,GAAS,IAAA,CAAK,mBAAA;EACd,eAAA;EACA,SAAA;AAAA;AAAA,iBA2Bc,WAAA,CAAA;EAAc,KAAA;EAAO,SAAA;EAAW,aAAA;EAAA,GAAkB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"number-field.d.ts","names":[],"sources":["../../src/number-field/number-field.tsx"],"mappings":";;;;;UAKiB,gBAAA;;EAEf,KAAA,GAAQ,SAAA;EAFO;EAIf,YAAA;;EAEA,KAAA;EAJA;EAMA,aAAA,IAAiB,KAAA;EAJjB;EAMA,GAAA;EAFA;EAIA,GAAA;EAFA;EAIA,IAAA;EAAA;EAEA,QAAA;EAEA;EAAA,QAAA;EAIA;EAFA,QAAA;EAIS;EAFT,IAAA;EAIA;EAFA,MAAA,GAAS,IAAA,CAAK,mBAAA;EAGL;EADT,eAAA;EACA,SAAA;AAAA;;;;;iBA+Bc,WAAA,CAAA;EAAc,KAAA;EAAO,SAAA;EAAW,aAAA;EAAA,GAAkB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/number-field/number-field.js

@@ -39,6 +39,10 @@ function ScrubCursorIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" })
 	});
 }
+/**
+* A numeric input with stepper buttons and a scrub area. Supports min/max
+* clamping, step size, locale-aware formatting, and keyboard/scroll input.
+*/
 function NumberField$1({ label, className, onValueChange, ...props }) {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(NumberField.Root, {

package/dist/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":["NumberField","BaseNumberField","styles"],"sources":["../../src/number-field/number-field.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport styles from \"./number-field.module.css\";\n\nexport interface NumberFieldProps {\n  /** Visible label text. When present a scrub-area is also rendered. */\n  label?: ReactNode;\n  defaultValue?: number;\n  value?: number | null;\n  onValueChange?: (value: number | null) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  format?: Intl.NumberFormatOptions;\n  allowWheelScrub?: boolean;\n  className?: string;\n}\n\nfunction MinusIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" aria-hidden>\n      <path d=\"M0 5H10\" />\n    </svg>\n  );\n}\n\nfunction PlusIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" aria-hidden>\n      <path d=\"M0 5H5M10 5H5M5 5V0M5 5V10\" />\n    </svg>\n  );\n}\n\nfunction ScrubCursorIcon() {\n  return (\n    <svg width=\"24\" height=\"12\" viewBox=\"0 0 24 14\" fill=\"currentColor\" stroke=\"white\" strokeWidth=\"0.5\" aria-hidden>\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport function NumberField({ label, className, onValueChange, ...props }: NumberFieldProps) {\n  const id = useId();\n\n  return (\n    <BaseNumberField.Root id={id} className={`${styles.root} ${className ?? \"\"}`} onValueChange={onValueChange as never} {...props}>\n      {label && (\n        <BaseNumberField.ScrubArea className={styles[\"scrub-area\"]}>\n          <label htmlFor={id} className={styles.label}>\n            {label}\n          </label>\n          <BaseNumberField.ScrubAreaCursor className={styles[\"scrub-area-cursor\"]}>\n            <ScrubCursorIcon />\n          </BaseNumberField.ScrubAreaCursor>\n        </BaseNumberField.ScrubArea>\n      )}\n      <BaseNumberField.Group className={styles.group}>\n        <BaseNumberField.Decrement className={`${styles[\"step-button\"]} ${styles.decrement}`}>\n          <MinusIcon />\n        </BaseNumberField.Decrement>\n        <BaseNumberField.Input className={styles.input} />\n        <BaseNumberField.Increment className={`${styles[\"step-button\"]} ${styles.increment}`}>\n          <PlusIcon />\n        </BaseNumberField.Increment>\n      </BaseNumberField.Group>\n    </BaseNumberField.Root>\n  );\n}\nexport { styles as NumberFieldStyles };\n"],"mappings":";;;;;AAuBA,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAM,eAAA;YAClG,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;EAChB,CAAA;;AAIV,SAAS,WAAW;AAClB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAM,eAAA;YAClG,oBAAC,QAAD,EAAM,GAAE,8BAA+B,CAAA;EACnC,CAAA;;AAIV,SAAS,kBAAkB;AACzB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAe,QAAO;EAAQ,aAAY;EAAM,eAAA;YACnG,oBAAC,QAAD,EAAM,GAAE,6FAA8F,CAAA;EAClG,CAAA;;AAIV,SAAgBA,cAAY,EAAE,OAAO,WAAW,eAAe,GAAG,SAA2B;CAC3F,MAAM,KAAK,OAAO;AAElB,QACE,qBAACC,YAAgB,MAAjB;EAA0B;EAAI,WAAW,GAAGC,4BAAO,KAAK,GAAG,aAAa;EAAqB;EAAwB,GAAI;YAAzH,CACG,SACC,qBAACD,YAAgB,WAAjB;GAA2B,WAAWC,4BAAO;aAA7C,CACE,oBAAC,SAAD;IAAO,SAAS;IAAI,WAAWA,4BAAO;cACnC;IACK,CAAA,EACR,oBAACD,YAAgB,iBAAjB;IAAiC,WAAWC,4BAAO;cACjD,oBAAC,iBAAD,EAAmB,CAAA;IACa,CAAA,CACR;MAE9B,qBAACD,YAAgB,OAAjB;GAAuB,WAAWC,4BAAO;aAAzC;IACE,oBAACD,YAAgB,WAAjB;KAA2B,WAAW,GAAGC,4BAAO,eAAe,GAAGA,4BAAO;eACvE,oBAAC,WAAD,EAAa,CAAA;KACa,CAAA;IAC5B,oBAACD,YAAgB,OAAjB,EAAuB,WAAWC,4BAAO,OAAS,CAAA;IAClD,oBAACD,YAAgB,WAAjB;KAA2B,WAAW,GAAGC,4BAAO,eAAe,GAAGA,4BAAO;eACvE,oBAAC,UAAD,EAAY,CAAA;KACc,CAAA;IACN;KACH"}
+{"version":3,"file":"number-field.js","names":["NumberField","BaseNumberField","styles"],"sources":["../../src/number-field/number-field.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport styles from \"./number-field.module.css\";\n\nexport interface NumberFieldProps {\n  /** Visible label text. When present a scrub-area is also rendered. */\n  label?: ReactNode;\n  /** Initial value (uncontrolled). */\n  defaultValue?: number;\n  /** Current value (controlled). `null` when the field is empty. */\n  value?: number | null;\n  /** Called when the value changes. */\n  onValueChange?: (value: number | null) => void;\n  /** Minimum allowed value. */\n  min?: number;\n  /** Maximum allowed value. */\n  max?: number;\n  /** Increment/decrement step size. @default 1 */\n  step?: number;\n  /** Prevent interaction. */\n  disabled?: boolean;\n  /** Allow reading but not editing. */\n  readOnly?: boolean;\n  /** Mark the field as required for form validation. */\n  required?: boolean;\n  /** HTML name attribute for form submission. */\n  name?: string;\n  /** `Intl.NumberFormatOptions` for display formatting. */\n  format?: Intl.NumberFormatOptions;\n  /** Allow changing the value by scrolling the mouse wheel. */\n  allowWheelScrub?: boolean;\n  className?: string;\n}\n\nfunction MinusIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" aria-hidden>\n      <path d=\"M0 5H10\" />\n    </svg>\n  );\n}\n\nfunction PlusIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" aria-hidden>\n      <path d=\"M0 5H5M10 5H5M5 5V0M5 5V10\" />\n    </svg>\n  );\n}\n\nfunction ScrubCursorIcon() {\n  return (\n    <svg width=\"24\" height=\"12\" viewBox=\"0 0 24 14\" fill=\"currentColor\" stroke=\"white\" strokeWidth=\"0.5\" aria-hidden>\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\n/**\n * A numeric input with stepper buttons and a scrub area. Supports min/max\n * clamping, step size, locale-aware formatting, and keyboard/scroll input.\n */\nexport function NumberField({ label, className, onValueChange, ...props }: NumberFieldProps) {\n  const id = useId();\n\n  return (\n    <BaseNumberField.Root id={id} className={`${styles.root} ${className ?? \"\"}`} onValueChange={onValueChange as never} {...props}>\n      {label && (\n        <BaseNumberField.ScrubArea className={styles[\"scrub-area\"]}>\n          <label htmlFor={id} className={styles.label}>\n            {label}\n          </label>\n          <BaseNumberField.ScrubAreaCursor className={styles[\"scrub-area-cursor\"]}>\n            <ScrubCursorIcon />\n          </BaseNumberField.ScrubAreaCursor>\n        </BaseNumberField.ScrubArea>\n      )}\n      <BaseNumberField.Group className={styles.group}>\n        <BaseNumberField.Decrement className={`${styles[\"step-button\"]} ${styles.decrement}`}>\n          <MinusIcon />\n        </BaseNumberField.Decrement>\n        <BaseNumberField.Input className={styles.input} />\n        <BaseNumberField.Increment className={`${styles[\"step-button\"]} ${styles.increment}`}>\n          <PlusIcon />\n        </BaseNumberField.Increment>\n      </BaseNumberField.Group>\n    </BaseNumberField.Root>\n  );\n}\nexport { styles as NumberFieldStyles };\n"],"mappings":";;;;;AAmCA,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAM,eAAA;YAClG,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;EAChB,CAAA;;AAIV,SAAS,WAAW;AAClB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAM,eAAA;YAClG,oBAAC,QAAD,EAAM,GAAE,8BAA+B,CAAA;EACnC,CAAA;;AAIV,SAAS,kBAAkB;AACzB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAe,QAAO;EAAQ,aAAY;EAAM,eAAA;YACnG,oBAAC,QAAD,EAAM,GAAE,6FAA8F,CAAA;EAClG,CAAA;;;;;;AAQV,SAAgBA,cAAY,EAAE,OAAO,WAAW,eAAe,GAAG,SAA2B;CAC3F,MAAM,KAAK,OAAO;AAElB,QACE,qBAACC,YAAgB,MAAjB;EAA0B;EAAI,WAAW,GAAGC,4BAAO,KAAK,GAAG,aAAa;EAAqB;EAAwB,GAAI;YAAzH,CACG,SACC,qBAACD,YAAgB,WAAjB;GAA2B,WAAWC,4BAAO;aAA7C,CACE,oBAAC,SAAD;IAAO,SAAS;IAAI,WAAWA,4BAAO;cACnC;IACK,CAAA,EACR,oBAACD,YAAgB,iBAAjB;IAAiC,WAAWC,4BAAO;cACjD,oBAAC,iBAAD,EAAmB,CAAA;IACa,CAAA,CACR;MAE9B,qBAACD,YAAgB,OAAjB;GAAuB,WAAWC,4BAAO;aAAzC;IACE,oBAACD,YAAgB,WAAjB;KAA2B,WAAW,GAAGC,4BAAO,eAAe,GAAGA,4BAAO;eACvE,oBAAC,WAAD,EAAa,CAAA;KACa,CAAA;IAC5B,oBAACD,YAAgB,OAAjB,EAAuB,WAAWC,4BAAO,OAAS,CAAA;IAClD,oBAACD,YAAgB,WAAjB;KAA2B,WAAW,GAAGC,4BAAO,eAAe,GAAGA,4BAAO;eACvE,oBAAC,UAAD,EAAY,CAAA;KACc,CAAA;IACN;KACH"}