@neuronix-tech/ui 0.0.0-stage → 0.2.0

package/dist/cli/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+console.log("@neuronix-tech/ui init \u2014 coming soon. The theme block format is defined by @neuronix/tokens.");

package/dist/components/button/button.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ButtonProps } from './button.types.js';
+import '@base-ui/react/button';
+import './button.variants.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../../lib/sealed.js';
+
+/**
+ * The Neuronix button. Pick a `variant`; the height/typography come from the
+ * project's density tokens, so every button in the app is the same size.
+ * For links, pass your router's Link via `render`:
+ *
+ *   <Button render={<Link href="/clients" />}>View clients</Button>
+ */
+declare function Button({ variant, isLoading, fullWidth, disabled, children, tooltip, ...props }: ButtonProps): react.JSX.Element;
+
+export { Button };

package/dist/components/button/button.js

@@ -0,0 +1,40 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { buttonVariants, spinnerSizes } from "./button.variants.js";
+import { cn } from "../../lib/cn.js";
+import { SpinnerPrimitive } from "../../primitives/spinner.js";
+import { TooltipContent, TooltipRoot, TooltipTrigger } from "../../primitives/tooltip.js";
+function Button({
+  variant = "default",
+  isLoading = false,
+  fullWidth = false,
+  disabled,
+  children,
+  tooltip,
+  ...props
+}) {
+  const button = /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      "aria-busy": isLoading || void 0,
+      disabled: disabled || isLoading,
+      ...props,
+      className: cn(buttonVariants({ variant, size: "default" }), fullWidth && "nxui:w-full"),
+      children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "nxui:invisible nxui:contents", children }),
+        /* @__PURE__ */ jsx(SpinnerPrimitive, { className: cn("nxui:absolute nxui:inset-0 nxui:m-auto", spinnerSizes.default) })
+      ] }) : children
+    }
+  );
+  if (!tooltip) return button;
+  return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\n\nimport type { ButtonProps } from \"./button.types.js\"\nimport { buttonVariants, spinnerSizes } from \"./button.variants.js\"\nimport { cn } from \"../../lib/cn.js\"\nimport { SpinnerPrimitive } from \"../../primitives/spinner.js\"\nimport { TooltipContent, TooltipRoot, TooltipTrigger } from \"../../primitives/tooltip.js\"\n\n/**\n * The Neuronix button. Pick a `variant`; the height/typography come from the\n * project's density tokens, so every button in the app is the same size.\n * For links, pass your router's Link via `render`:\n *\n *   <Button render={<Link href=\"/clients\" />}>View clients</Button>\n */\nfunction Button({\n  variant = \"default\",\n  isLoading = false,\n  fullWidth = false,\n  disabled,\n  children,\n  tooltip,\n  ...props\n}: ButtonProps) {\n  const button = (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      aria-busy={isLoading || undefined}\n      disabled={disabled || isLoading}\n      {...props}\n      // className comes AFTER the spread: a Base UI `render` merge (e.g. Toast\n      // Action/Close rendering this component) injects its own className prop,\n      // and the sealed classes must always win.\n      className={cn(buttonVariants({ variant, size: \"default\" }), fullWidth && \"nxui:w-full\")}\n    >\n      {isLoading ? (\n        <>\n          {/* `contents` keeps the children as direct flex items (gap, icon padding\n              selectors, width all preserved); `invisible` hides them while their\n              space is kept, so the button never resizes. */}\n          <span className=\"nxui:invisible nxui:contents\">{children}</span>\n          <SpinnerPrimitive className={cn(\"nxui:absolute nxui:inset-0 nxui:m-auto\", spinnerSizes.default)} />\n        </>\n      ) : (\n        children\n      )}\n    </ButtonPrimitive>\n  )\n\n  if (!tooltip) return button\n\n  return (\n    <TooltipRoot>\n      <TooltipTrigger render={button} />\n      <TooltipContent>{tooltip}</TooltipContent>\n    </TooltipRoot>\n  )\n}\n\nexport { Button }\n"],"mappings":";AAsCQ,mBAIE,KAJF;AApCR,SAAS,UAAU,uBAAuB;AAG1C,SAAS,gBAAgB,oBAAoB;AAC7C,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,aAAa,sBAAsB;AAS5D,SAAS,OAAO;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW,aAAa;AAAA,MACxB,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MAIJ,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAG,aAAa,aAAa;AAAA,MAErF,sBACC,iCAIE;AAAA,4BAAC,UAAK,WAAU,gCAAgC,UAAS;AAAA,QACzD,oBAAC,oBAAiB,WAAW,GAAG,0CAA0C,aAAa,OAAO,GAAG;AAAA,SACnG,IAEA;AAAA;AAAA,EAEJ;AAGF,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,qBAAC,eACC;AAAA,wBAAC,kBAAe,QAAQ,QAAQ;AAAA,IAChC,oBAAC,kBAAgB,mBAAQ;AAAA,KAC3B;AAEJ;","names":[]}

package/dist/components/button/button.types.d.ts

@@ -0,0 +1,36 @@
+import { Button } from '@base-ui/react/button';
+import { ButtonVariantProps } from './button.variants.js';
+import { Sealed } from '../../lib/sealed.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Note: there is deliberately NO size prop. Control size is a project-level
+ * decision (the density preset chosen at `init`), never a per-call one — that's
+ * how every button in an app stays the same height. Icon-only buttons are a
+ * separate shape: use <IconButton>.
+ */
+interface ButtonProps extends Sealed<Button.Props>, Omit<ButtonVariantProps, "size"> {
+    /**
+     * Replaces the children with a centered spinner while KEEPING their layout
+     * space, so the button never resizes; also disables the button and sets
+     * aria-busy. Never render a conditional spinner as children yourself —
+     * `{isPending ? <Spinner/> : "Save"}` resizes the button. This prop exists
+     * so that pattern stays extinct.
+     */
+    isLoading?: boolean;
+    /**
+     * Text shown in a tooltip above the button. Tooltips are a prop, never a
+     * wrapper you compose — the library owns delay, positioning, and styling.
+     */
+    tooltip?: string;
+    /**
+     * Fills the parent's width. Use ONLY for full-bleed CTAs (login/onboarding),
+     * mobile dialog footers, and empty-state actions — never as a default look.
+     * Wanting a wide button via a stretch container (flex-col/grid) instead of
+     * this prop is an anti-pattern: width must be a visible, deliberate decision.
+     */
+    fullWidth?: boolean;
+}
+
+export type { ButtonProps };

package/dist/components/button/button.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=button.types.js.map

package/dist/components/button/button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/button/button.variants.d.ts

@@ -0,0 +1,32 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Ported from nx-automations ui/button.tsx with two systematic changes:
+ * - every class carries the `nxui:` prefix (sealed, collision-free stylesheet)
+ * - fixed heights/text sizes became density tokens (h-7 → h-control-md,
+ *   text-xs → text-body) so the project's density preset applies globally.
+ *
+ * Border COLOR lives per variant, never in the base: there is no tailwind-merge,
+ * so a base `border-transparent` plus outline's `border-border` would both apply
+ * and the stylesheet order (not the class order) would pick the winner — which
+ * silently erased the outline border. Every class axis is set exactly once.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Loading-overlay spinner size per button size (mirrors the icon auto-size). */
+declare const spinnerSizes: {
+    readonly default: "nxui:size-3.5";
+    readonly xs: "nxui:size-2.5";
+    readonly sm: "nxui:size-3";
+    readonly lg: "nxui:size-4";
+    readonly icon: "nxui:size-3.5";
+    readonly "icon-xs": "nxui:size-2.5";
+    readonly "icon-sm": "nxui:size-3";
+    readonly "icon-lg": "nxui:size-4";
+};
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+export { type ButtonVariantProps, buttonVariants, spinnerSizes };

package/dist/components/button/button.variants.js

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+const buttonVariants = cva(
+  "nxui:group/button nxui:relative nxui:inline-flex nxui:shrink-0 nxui:items-center nxui:justify-center nxui:rounded-md nxui:border nxui:bg-clip-padding nxui:text-body/relaxed nxui:font-medium nxui:whitespace-nowrap nxui:transition-all nxui:outline-none nxui:select-none nxui:focus-visible:border-ring nxui:focus-visible:ring-2 nxui:focus-visible:ring-ring/30 nxui:active:not-aria-[haspopup]:translate-y-px nxui:disabled:pointer-events-none nxui:disabled:opacity-50 nxui:aria-invalid:border-destructive nxui:aria-invalid:ring-2 nxui:aria-invalid:ring-destructive/20 nxui:dark:aria-invalid:border-destructive/50 nxui:dark:aria-invalid:ring-destructive/40 nxui:[&_svg]:pointer-events-none nxui:[&_svg]:shrink-0 nxui:[&_svg:not([class*=size-])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "nxui:border-transparent nxui:bg-primary nxui:text-primary-foreground nxui:hover:bg-primary/80",
+        outline: "nxui:border-border nxui:hover:bg-input/50 nxui:hover:text-foreground nxui:aria-expanded:bg-muted nxui:aria-expanded:text-foreground nxui:dark:bg-input/30",
+        secondary: "nxui:border-transparent nxui:bg-secondary nxui:text-secondary-foreground nxui:hover:bg-[color-mix(in_oklch,var(--nx-secondary),var(--nx-foreground)_5%)] nxui:aria-expanded:bg-secondary nxui:aria-expanded:text-secondary-foreground",
+        ghost: "nxui:border-transparent nxui:hover:bg-muted nxui:hover:text-foreground nxui:aria-expanded:bg-muted nxui:aria-expanded:text-foreground nxui:dark:hover:bg-muted/50",
+        destructive: "nxui:border-transparent nxui:bg-destructive/10 nxui:text-destructive nxui:hover:bg-destructive/20 nxui:focus-visible:border-destructive/40 nxui:focus-visible:ring-destructive/20 nxui:dark:bg-destructive/20 nxui:dark:hover:bg-destructive/30 nxui:dark:focus-visible:ring-destructive/40",
+        link: "nxui:border-transparent nxui:text-primary nxui:underline-offset-4 nxui:hover:underline"
+      },
+      size: {
+        default: "nxui:h-control-md nxui:gap-1 nxui:px-2 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-3.5",
+        xs: "nxui:h-control-xs nxui:gap-1 nxui:rounded-sm nxui:px-2 nxui:text-body-xs nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-2.5",
+        sm: "nxui:h-control-sm nxui:gap-1 nxui:px-2 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-3",
+        lg: "nxui:h-control-lg nxui:gap-1 nxui:px-2.5 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-2 nxui:has-data-[icon=inline-start]:pl-2 nxui:[&_svg:not([class*=size-])]:size-4",
+        icon: "nxui:size-control-md nxui:[&_svg:not([class*=size-])]:size-3.5",
+        "icon-xs": "nxui:size-control-xs nxui:rounded-sm nxui:[&_svg:not([class*=size-])]:size-2.5",
+        "icon-sm": "nxui:size-control-sm nxui:[&_svg:not([class*=size-])]:size-3",
+        "icon-lg": "nxui:size-control-lg nxui:[&_svg:not([class*=size-])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const spinnerSizes = {
+  default: "nxui:size-3.5",
+  xs: "nxui:size-2.5",
+  sm: "nxui:size-3",
+  lg: "nxui:size-4",
+  icon: "nxui:size-3.5",
+  "icon-xs": "nxui:size-2.5",
+  "icon-sm": "nxui:size-3",
+  "icon-lg": "nxui:size-4"
+};
+export {
+  buttonVariants,
+  spinnerSizes
+};
+//# sourceMappingURL=button.variants.js.map

package/dist/components/button/button.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Ported from nx-automations ui/button.tsx with two systematic changes:\n * - every class carries the `nxui:` prefix (sealed, collision-free stylesheet)\n * - fixed heights/text sizes became density tokens (h-7 → h-control-md,\n *   text-xs → text-body) so the project's density preset applies globally.\n *\n * Border COLOR lives per variant, never in the base: there is no tailwind-merge,\n * so a base `border-transparent` plus outline's `border-border` would both apply\n * and the stylesheet order (not the class order) would pick the winner — which\n * silently erased the outline border. Every class axis is set exactly once.\n */\nexport const buttonVariants = cva(\n  \"nxui:group/button nxui:relative nxui:inline-flex nxui:shrink-0 nxui:items-center nxui:justify-center nxui:rounded-md nxui:border nxui:bg-clip-padding nxui:text-body/relaxed nxui:font-medium nxui:whitespace-nowrap nxui:transition-all nxui:outline-none nxui:select-none nxui:focus-visible:border-ring nxui:focus-visible:ring-2 nxui:focus-visible:ring-ring/30 nxui:active:not-aria-[haspopup]:translate-y-px nxui:disabled:pointer-events-none nxui:disabled:opacity-50 nxui:aria-invalid:border-destructive nxui:aria-invalid:ring-2 nxui:aria-invalid:ring-destructive/20 nxui:dark:aria-invalid:border-destructive/50 nxui:dark:aria-invalid:ring-destructive/40 nxui:[&_svg]:pointer-events-none nxui:[&_svg]:shrink-0 nxui:[&_svg:not([class*=size-])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"nxui:border-transparent nxui:bg-primary nxui:text-primary-foreground nxui:hover:bg-primary/80\",\n        outline:\n          \"nxui:border-border nxui:hover:bg-input/50 nxui:hover:text-foreground nxui:aria-expanded:bg-muted nxui:aria-expanded:text-foreground nxui:dark:bg-input/30\",\n        secondary:\n          \"nxui:border-transparent nxui:bg-secondary nxui:text-secondary-foreground nxui:hover:bg-[color-mix(in_oklch,var(--nx-secondary),var(--nx-foreground)_5%)] nxui:aria-expanded:bg-secondary nxui:aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"nxui:border-transparent nxui:hover:bg-muted nxui:hover:text-foreground nxui:aria-expanded:bg-muted nxui:aria-expanded:text-foreground nxui:dark:hover:bg-muted/50\",\n        destructive:\n          \"nxui:border-transparent nxui:bg-destructive/10 nxui:text-destructive nxui:hover:bg-destructive/20 nxui:focus-visible:border-destructive/40 nxui:focus-visible:ring-destructive/20 nxui:dark:bg-destructive/20 nxui:dark:hover:bg-destructive/30 nxui:dark:focus-visible:ring-destructive/40\",\n        link: \"nxui:border-transparent nxui:text-primary nxui:underline-offset-4 nxui:hover:underline\",\n      },\n      size: {\n        default:\n          \"nxui:h-control-md nxui:gap-1 nxui:px-2 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-3.5\",\n        xs: \"nxui:h-control-xs nxui:gap-1 nxui:rounded-sm nxui:px-2 nxui:text-body-xs nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-2.5\",\n        sm: \"nxui:h-control-sm nxui:gap-1 nxui:px-2 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-1.5 nxui:has-data-[icon=inline-start]:pl-1.5 nxui:[&_svg:not([class*=size-])]:size-3\",\n        lg: \"nxui:h-control-lg nxui:gap-1 nxui:px-2.5 nxui:text-body/relaxed nxui:has-data-[icon=inline-end]:pr-2 nxui:has-data-[icon=inline-start]:pl-2 nxui:[&_svg:not([class*=size-])]:size-4\",\n        icon: \"nxui:size-control-md nxui:[&_svg:not([class*=size-])]:size-3.5\",\n        \"icon-xs\": \"nxui:size-control-xs nxui:rounded-sm nxui:[&_svg:not([class*=size-])]:size-2.5\",\n        \"icon-sm\": \"nxui:size-control-sm nxui:[&_svg:not([class*=size-])]:size-3\",\n        \"icon-lg\": \"nxui:size-control-lg nxui:[&_svg:not([class*=size-])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\n/** Loading-overlay spinner size per button size (mirrors the icon auto-size). */\nexport const spinnerSizes = {\n  default: \"nxui:size-3.5\",\n  xs: \"nxui:size-2.5\",\n  sm: \"nxui:size-3\",\n  lg: \"nxui:size-4\",\n  icon: \"nxui:size-3.5\",\n  \"icon-xs\": \"nxui:size-2.5\",\n  \"icon-sm\": \"nxui:size-3\",\n  \"icon-lg\": \"nxui:size-4\",\n} as const\n\nexport type ButtonVariantProps = VariantProps<typeof buttonVariants>\n"],"mappings":"AAAA,SAAS,WAA8B;AAahC,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,aACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SACE;AAAA,QACF,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGO,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;","names":[]}

package/dist/components/button/index.d.ts

@@ -0,0 +1,8 @@
+export { Button } from './button.js';
+export { ButtonProps } from './button.types.js';
+import 'react';
+import '@base-ui/react/button';
+import './button.variants.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../../lib/sealed.js';

package/dist/components/button/index.js

@@ -0,0 +1,5 @@
+import { Button } from "./button.js";
+export {
+  Button
+};
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export { Button } from \"./button.js\"\nexport type { ButtonProps } from \"./button.types.js\"\n"],"mappings":"AAAA,SAAS,cAAc;","names":[]}

package/dist/components/form-currency-input/form-currency-input.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import { FormCurrencyInputProps } from './form-currency-input.types.js';
+
+/**
+ * Money input. Form state stores the plain amount (`number | null`, e.g.
+ * 1234.5); the display groups thousands as the user types and pads to two
+ * decimals on blur ("1,234.50"). The currency code is a visual adornment only.
+ */
+declare function FormCurrencyInput<T extends FieldValues, N extends FieldPath<T>>({ id, label, optional, field, error, isLoading, disabled, autoFocus, placeholder, labelHint, currency, }: FormCurrencyInputProps<T, N>): react.JSX.Element;
+
+export { FormCurrencyInput };

package/dist/components/form-currency-input/form-currency-input.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNumberMask } from "../../hooks/use-number-mask.js";
+import { asFiniteNumber, sanitizeDecimal } from "../../lib/format/number.js";
+import { Field, FieldError } from "../../primitives/field.js";
+import { ControlLoadingOverlay, FormFieldLabel } from "../../primitives/form-field.js";
+import { InputPrimitive } from "../../primitives/input.js";
+const formatMoney = (value) => value.toFixed(2);
+function FormCurrencyInput({
+  id,
+  label,
+  optional = false,
+  field,
+  error,
+  isLoading = false,
+  disabled = false,
+  autoFocus = false,
+  placeholder = "0.00",
+  labelHint,
+  currency = "MXN"
+}) {
+  const value = asFiniteNumber(field.value);
+  const { ref, display, onChange, reformat } = useNumberMask({
+    value,
+    sanitize: sanitizeDecimal,
+    format: formatMoney,
+    onValueChange: field.onChange
+  });
+  return /* @__PURE__ */ jsxs(Field, { "data-invalid": !!error || void 0, className: "nxui:gap-1", children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { htmlFor: id, label, optional, labelHint }),
+    /* @__PURE__ */ jsxs("div", { className: "nxui:relative", children: [
+      /* @__PURE__ */ jsx(
+        InputPrimitive,
+        {
+          ref,
+          id,
+          type: "text",
+          inputMode: "decimal",
+          autoComplete: "off",
+          autoFocus,
+          placeholder,
+          disabled: disabled || isLoading,
+          "aria-invalid": !!error || void 0,
+          className: "nxui:pr-12",
+          value: display,
+          onChange,
+          onBlur: () => {
+            reformat();
+            field.onBlur();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "nxui:pointer-events-none nxui:absolute nxui:top-1/2 nxui:right-2 nxui:-translate-y-1/2 nxui:text-body nxui:text-muted-foreground", children: currency }),
+      isLoading && /* @__PURE__ */ jsx(ControlLoadingOverlay, {})
+    ] }),
+    /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+  ] });
+}
+export {
+  FormCurrencyInput
+};
+//# sourceMappingURL=form-currency-input.js.map

package/dist/components/form-currency-input/form-currency-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-currency-input/form-currency-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FieldPath, FieldValues } from \"react-hook-form\"\n\nimport type { FormCurrencyInputProps } from \"./form-currency-input.types.js\"\nimport { useNumberMask } from \"../../hooks/use-number-mask.js\"\nimport { asFiniteNumber, sanitizeDecimal } from \"../../lib/format/number.js\"\nimport { Field, FieldError } from \"../../primitives/field.js\"\nimport { ControlLoadingOverlay, FormFieldLabel } from \"../../primitives/form-field.js\"\nimport { InputPrimitive } from \"../../primitives/input.js\"\n\nconst formatMoney = (value: number) => value.toFixed(2)\n\n/**\n * Money input. Form state stores the plain amount (`number | null`, e.g.\n * 1234.5); the display groups thousands as the user types and pads to two\n * decimals on blur (\"1,234.50\"). The currency code is a visual adornment only.\n */\nexport function FormCurrencyInput<T extends FieldValues, N extends FieldPath<T>>({\n  id,\n  label,\n  optional = false,\n  field,\n  error,\n  isLoading = false,\n  disabled = false,\n  autoFocus = false,\n  placeholder = \"0.00\",\n  labelHint,\n  currency = \"MXN\",\n}: FormCurrencyInputProps<T, N>) {\n  const value = asFiniteNumber(field.value)\n\n  const { ref, display, onChange, reformat } = useNumberMask({\n    value,\n    sanitize: sanitizeDecimal,\n    format: formatMoney,\n    onValueChange: field.onChange,\n  })\n\n  return (\n    <Field data-invalid={!!error || undefined} className=\"nxui:gap-1\">\n      <FormFieldLabel htmlFor={id} label={label} optional={optional} labelHint={labelHint} />\n      <div className=\"nxui:relative\">\n        <InputPrimitive\n          ref={ref}\n          id={id}\n          type=\"text\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          disabled={disabled || isLoading}\n          aria-invalid={!!error || undefined}\n          className=\"nxui:pr-12\"\n          value={display}\n          onChange={onChange}\n          onBlur={() => {\n            reformat()\n            field.onBlur()\n          }}\n        />\n        <span className=\"nxui:pointer-events-none nxui:absolute nxui:top-1/2 nxui:right-2 nxui:-translate-y-1/2 nxui:text-body nxui:text-muted-foreground\">\n          {currency}\n        </span>\n        {isLoading && <ControlLoadingOverlay />}\n      </div>\n      <FieldError errors={[error]} />\n    </Field>\n  )\n}\n"],"mappings":";AA0CM,cACA,YADA;AArCN,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,OAAO,kBAAkB;AAClC,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,sBAAsB;AAE/B,MAAM,cAAc,CAAC,UAAkB,MAAM,QAAQ,CAAC;AAO/C,SAAS,kBAAiE;AAAA,EAC/E;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AACb,GAAiC;AAC/B,QAAM,QAAQ,eAAe,MAAM,KAAK;AAExC,QAAM,EAAE,KAAK,SAAS,UAAU,SAAS,IAAI,cAAc;AAAA,IACzD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,eAAe,MAAM;AAAA,EACvB,CAAC;AAED,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,SAAS,QAAW,WAAU,cACnD;AAAA,wBAAC,kBAAe,SAAS,IAAI,OAAc,UAAoB,WAAsB;AAAA,IACrF,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,UAAU,YAAY;AAAA,UACtB,gBAAc,CAAC,CAAC,SAAS;AAAA,UACzB,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA,QAAQ,MAAM;AACZ,qBAAS;AACT,kBAAM,OAAO;AAAA,UACf;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAK,WAAU,oIACb,oBACH;AAAA,MACC,aAAa,oBAAC,yBAAsB;AAAA,OACvC;AAAA,IACA,oBAAC,cAAW,QAAQ,CAAC,KAAK,GAAG;AAAA,KAC/B;AAEJ;","names":[]}

package/dist/components/form-currency-input/form-currency-input.types.d.ts

@@ -0,0 +1,32 @@
+import { FieldValues, FieldPath, ControllerRenderProps, FieldError } from 'react-hook-form';
+
+/**
+ * Closed union — adding a currency is a deliberate library change (minor
+ * release), never a per-project string.
+ */
+type CurrencyCode = "MXN" | "USD";
+interface FormCurrencyInputProps<T extends FieldValues, N extends FieldPath<T>> {
+    id: string;
+    label: string;
+    /** Required is the DEFAULT: non-optional fields render "label *". */
+    optional?: boolean;
+    /**
+     * react-hook-form binding. Required: the mask owns the value round-trip.
+     * Form state stores the PLAIN AMOUNT as `number | null` (e.g. 1234.5) —
+     * the grouped/padded display string and the currency code never enter state.
+     */
+    field: ControllerRenderProps<T, N>;
+    /** react-hook-form field error; presence turns the field invalid. */
+    error?: FieldError;
+    /** Spinner overlay while an async source seeds the value; also disables the control. */
+    isLoading?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    /** Explanation behind the label (dotted underline + tooltip). */
+    labelHint?: string;
+    /** Visual adornment only — never part of the value. */
+    currency?: CurrencyCode;
+}
+
+export type { CurrencyCode, FormCurrencyInputProps };

package/dist/components/form-currency-input/form-currency-input.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=form-currency-input.types.js.map

package/dist/components/form-currency-input/form-currency-input.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/form-currency-input/index.d.ts

@@ -0,0 +1,4 @@
+export { FormCurrencyInput } from './form-currency-input.js';
+export { CurrencyCode, FormCurrencyInputProps } from './form-currency-input.types.js';
+import 'react';
+import 'react-hook-form';

package/dist/components/form-currency-input/index.js

@@ -0,0 +1,5 @@
+import { FormCurrencyInput } from "./form-currency-input.js";
+export {
+  FormCurrencyInput
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form-currency-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-currency-input/index.ts"],"sourcesContent":["export { FormCurrencyInput } from \"./form-currency-input.js\"\nexport type { FormCurrencyInputProps, CurrencyCode } from \"./form-currency-input.types.js\"\n"],"mappings":"AAAA,SAAS,yBAAyB;","names":[]}

package/dist/components/form-number-input/form-number-input.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import { FormNumberInputProps } from './form-number-input.types.js';
+
+/**
+ * Numeric input built on type="text" — avoids the rough edges of
+ * `<input type="number">` (spinner arrows, scroll-to-change, unclearable).
+ * Live-groups thousands with a caret-stable mask; the form stores
+ * `number | null`, never the display string.
+ */
+declare function FormNumberInput<T extends FieldValues, N extends FieldPath<T>>({ id, label, optional, field, error, isLoading, disabled, autoFocus, placeholder, labelHint, allowDecimals, allowNegatives, grouped, }: FormNumberInputProps<T, N>): react.JSX.Element;
+
+export { FormNumberInput };

package/dist/components/form-number-input/form-number-input.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNumberMask } from "../../hooks/use-number-mask.js";
+import { asFiniteNumber } from "../../lib/format/number.js";
+import { Field, FieldError } from "../../primitives/field.js";
+import { ControlLoadingOverlay, FormFieldLabel } from "../../primitives/form-field.js";
+import { InputPrimitive } from "../../primitives/input.js";
+function sanitizeNumber(raw, allowDecimals, allowNegatives) {
+  const negative = allowNegatives && raw.startsWith("-");
+  const digits = raw.replace(allowDecimals ? /[^\d.]/g : /[^\d]/g, "");
+  let body = digits;
+  if (allowDecimals) {
+    const dot = digits.indexOf(".");
+    if (dot !== -1) {
+      body = digits.slice(0, dot + 1) + digits.slice(dot + 1).replace(/\./g, "");
+    }
+  }
+  return `${negative ? "-" : ""}${body}`;
+}
+const formatNumber = (value) => String(value);
+function FormNumberInput({
+  id,
+  label,
+  optional = false,
+  field,
+  error,
+  isLoading = false,
+  disabled = false,
+  autoFocus = false,
+  placeholder,
+  labelHint,
+  allowDecimals = false,
+  allowNegatives = false,
+  grouped = true
+}) {
+  const value = asFiniteNumber(field.value);
+  const { ref, display, onChange, reformat } = useNumberMask({
+    value,
+    sanitize: (raw) => sanitizeNumber(raw, allowDecimals, allowNegatives),
+    format: formatNumber,
+    onValueChange: field.onChange,
+    group: grouped
+  });
+  return /* @__PURE__ */ jsxs(Field, { "data-invalid": !!error || void 0, className: "nxui:gap-1", children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { htmlFor: id, label, optional, labelHint }),
+    /* @__PURE__ */ jsxs("div", { className: "nxui:relative", children: [
+      /* @__PURE__ */ jsx(
+        InputPrimitive,
+        {
+          ref,
+          id,
+          type: "text",
+          inputMode: allowDecimals ? "decimal" : "numeric",
+          autoComplete: "off",
+          autoFocus,
+          placeholder,
+          disabled: disabled || isLoading,
+          "aria-invalid": !!error || void 0,
+          value: display,
+          onChange,
+          onBlur: () => {
+            reformat();
+            field.onBlur();
+          }
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx(ControlLoadingOverlay, {})
+    ] }),
+    /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+  ] });
+}
+export {
+  FormNumberInput
+};
+//# sourceMappingURL=form-number-input.js.map

package/dist/components/form-number-input/form-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-number-input/form-number-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FieldPath, FieldValues } from \"react-hook-form\"\n\nimport type { FormNumberInputProps } from \"./form-number-input.types.js\"\nimport { useNumberMask } from \"../../hooks/use-number-mask.js\"\nimport { asFiniteNumber } from \"../../lib/format/number.js\"\nimport { Field, FieldError } from \"../../primitives/field.js\"\nimport { ControlLoadingOverlay, FormFieldLabel } from \"../../primitives/form-field.js\"\nimport { InputPrimitive } from \"../../primitives/input.js\"\n\nfunction sanitizeNumber(raw: string, allowDecimals: boolean, allowNegatives: boolean): string {\n  const negative = allowNegatives && raw.startsWith(\"-\")\n  const digits = raw.replace(allowDecimals ? /[^\\d.]/g : /[^\\d]/g, \"\")\n  let body = digits\n  if (allowDecimals) {\n    const dot = digits.indexOf(\".\")\n    if (dot !== -1) {\n      body = digits.slice(0, dot + 1) + digits.slice(dot + 1).replace(/\\./g, \"\")\n    }\n  }\n  return `${negative ? \"-\" : \"\"}${body}`\n}\n\nconst formatNumber = (value: number) => String(value)\n\n/**\n * Numeric input built on type=\"text\" — avoids the rough edges of\n * `<input type=\"number\">` (spinner arrows, scroll-to-change, unclearable).\n * Live-groups thousands with a caret-stable mask; the form stores\n * `number | null`, never the display string.\n */\nexport function FormNumberInput<T extends FieldValues, N extends FieldPath<T>>({\n  id,\n  label,\n  optional = false,\n  field,\n  error,\n  isLoading = false,\n  disabled = false,\n  autoFocus = false,\n  placeholder,\n  labelHint,\n  allowDecimals = false,\n  allowNegatives = false,\n  grouped = true,\n}: FormNumberInputProps<T, N>) {\n  const value = asFiniteNumber(field.value)\n\n  const { ref, display, onChange, reformat } = useNumberMask({\n    value,\n    sanitize: (raw) => sanitizeNumber(raw, allowDecimals, allowNegatives),\n    format: formatNumber,\n    onValueChange: field.onChange,\n    group: grouped,\n  })\n\n  return (\n    <Field data-invalid={!!error || undefined} className=\"nxui:gap-1\">\n      <FormFieldLabel htmlFor={id} label={label} optional={optional} labelHint={labelHint} />\n      <div className=\"nxui:relative\">\n        <InputPrimitive\n          ref={ref}\n          id={id}\n          type=\"text\"\n          inputMode={allowDecimals ? \"decimal\" : \"numeric\"}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          disabled={disabled || isLoading}\n          aria-invalid={!!error || undefined}\n          value={display}\n          onChange={onChange}\n          onBlur={() => {\n            reformat()\n            field.onBlur()\n          }}\n        />\n        {isLoading && <ControlLoadingOverlay />}\n      </div>\n      <FieldError errors={[error]} />\n    </Field>\n  )\n}\n"],"mappings":";AA2DM,cACA,YADA;AAtDN,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,kBAAkB;AAClC,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,sBAAsB;AAE/B,SAAS,eAAe,KAAa,eAAwB,gBAAiC;AAC5F,QAAM,WAAW,kBAAkB,IAAI,WAAW,GAAG;AACrD,QAAM,SAAS,IAAI,QAAQ,gBAAgB,YAAY,UAAU,EAAE;AACnE,MAAI,OAAO;AACX,MAAI,eAAe;AACjB,UAAM,MAAM,OAAO,QAAQ,GAAG;AAC9B,QAAI,QAAQ,IAAI;AACd,aAAO,OAAO,MAAM,GAAG,MAAM,CAAC,IAAI,OAAO,MAAM,MAAM,CAAC,EAAE,QAAQ,OAAO,EAAE;AAAA,IAC3E;AAAA,EACF;AACA,SAAO,GAAG,WAAW,MAAM,EAAE,GAAG,IAAI;AACtC;AAEA,MAAM,eAAe,CAAC,UAAkB,OAAO,KAAK;AAQ7C,SAAS,gBAA+D;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AACZ,GAA+B;AAC7B,QAAM,QAAQ,eAAe,MAAM,KAAK;AAExC,QAAM,EAAE,KAAK,SAAS,UAAU,SAAS,IAAI,cAAc;AAAA,IACzD;AAAA,IACA,UAAU,CAAC,QAAQ,eAAe,KAAK,eAAe,cAAc;AAAA,IACpE,QAAQ;AAAA,IACR,eAAe,MAAM;AAAA,IACrB,OAAO;AAAA,EACT,CAAC;AAED,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,SAAS,QAAW,WAAU,cACnD;AAAA,wBAAC,kBAAe,SAAS,IAAI,OAAc,UAAoB,WAAsB;AAAA,IACrF,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAW,gBAAgB,YAAY;AAAA,UACvC,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,UAAU,YAAY;AAAA,UACtB,gBAAc,CAAC,CAAC,SAAS;AAAA,UACzB,OAAO;AAAA,UACP;AAAA,UACA,QAAQ,MAAM;AACZ,qBAAS;AACT,kBAAM,OAAO;AAAA,UACf;AAAA;AAAA,MACF;AAAA,MACC,aAAa,oBAAC,yBAAsB;AAAA,OACvC;AAAA,IACA,oBAAC,cAAW,QAAQ,CAAC,KAAK,GAAG;AAAA,KAC/B;AAEJ;","names":[]}

package/dist/components/form-number-input/form-number-input.types.d.ts

@@ -0,0 +1,34 @@
+import { FieldValues, FieldPath, ControllerRenderProps, FieldError } from 'react-hook-form';
+
+interface FormNumberInputProps<T extends FieldValues, N extends FieldPath<T>> {
+    id: string;
+    label: string;
+    /** Required is the DEFAULT: non-optional fields render "label *". */
+    optional?: boolean;
+    /**
+     * react-hook-form binding from a <Controller>. Required here (unlike
+     * FormTextInput): the mask must own the value round-trip — form state stores
+     * `number | null`, the grouped display string never leaves the component.
+     */
+    field: ControllerRenderProps<T, N>;
+    /** react-hook-form field error; presence turns the field invalid. */
+    error?: FieldError;
+    /** Spinner overlay while an async source seeds the value; also disables the control. */
+    isLoading?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    /** Explanation behind the label (dotted underline + tooltip). */
+    labelHint?: string;
+    /** Allow a single decimal point. Off by default (counts, quantities). */
+    allowDecimals?: boolean;
+    /** Allow a leading minus sign. Off by default. */
+    allowNegatives?: boolean;
+    /**
+     * Group thousands while typing (1,234,567). Pass false for years, indices,
+     * or any count where "2,026" would be wrong.
+     */
+    grouped?: boolean;
+}
+
+export type { FormNumberInputProps };

package/dist/components/form-number-input/form-number-input.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=form-number-input.types.js.map

package/dist/components/form-number-input/form-number-input.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/form-number-input/index.d.ts

@@ -0,0 +1,4 @@
+export { FormNumberInput } from './form-number-input.js';
+export { FormNumberInputProps } from './form-number-input.types.js';
+import 'react';
+import 'react-hook-form';

package/dist/components/form-number-input/index.js

@@ -0,0 +1,5 @@
+import { FormNumberInput } from "./form-number-input.js";
+export {
+  FormNumberInput
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form-number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-number-input/index.ts"],"sourcesContent":["export { FormNumberInput } from \"./form-number-input.js\"\nexport type { FormNumberInputProps } from \"./form-number-input.types.js\"\n"],"mappings":"AAAA,SAAS,uBAAuB;","names":[]}

package/dist/components/form-percentage-input/form-percentage-input.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import { FormPercentageInputProps } from './form-percentage-input.types.js';
+
+/**
+ * Percentage input. Form state stores PERCENT POINTS (`number | null`: typing
+ * 15 stores 15, never 0.15) and clamps to [min, max] on blur. Convert to a
+ * fraction at the boundary with `percentToFraction` when the math needs it.
+ */
+declare function FormPercentageInput<T extends FieldValues, N extends FieldPath<T>>({ id, label, optional, field, error, isLoading, disabled, autoFocus, placeholder, labelHint, min, max, }: FormPercentageInputProps<T, N>): react.JSX.Element;
+
+export { FormPercentageInput };

package/dist/components/form-percentage-input/form-percentage-input.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNumberMask } from "../../hooks/use-number-mask.js";
+import { asFiniteNumber, sanitizeDecimal } from "../../lib/format/number.js";
+import { Field, FieldError } from "../../primitives/field.js";
+import { ControlLoadingOverlay, FormFieldLabel } from "../../primitives/form-field.js";
+import { InputPrimitive } from "../../primitives/input.js";
+const formatPercent = (value) => String(value);
+function FormPercentageInput({
+  id,
+  label,
+  optional = false,
+  field,
+  error,
+  isLoading = false,
+  disabled = false,
+  autoFocus = false,
+  placeholder = "0",
+  labelHint,
+  min = 0,
+  max = 100
+}) {
+  const value = asFiniteNumber(field.value);
+  const { ref, display, onChange, reformat } = useNumberMask({
+    value,
+    sanitize: sanitizeDecimal,
+    format: formatPercent,
+    onValueChange: field.onChange
+  });
+  return /* @__PURE__ */ jsxs(Field, { "data-invalid": !!error || void 0, className: "nxui:gap-1", children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { htmlFor: id, label, optional, labelHint }),
+    /* @__PURE__ */ jsxs("div", { className: "nxui:relative", children: [
+      /* @__PURE__ */ jsx(
+        InputPrimitive,
+        {
+          ref,
+          id,
+          type: "text",
+          inputMode: "decimal",
+          autoComplete: "off",
+          autoFocus,
+          placeholder,
+          disabled: disabled || isLoading,
+          "aria-invalid": !!error || void 0,
+          className: "nxui:pr-8",
+          value: display,
+          onChange,
+          onBlur: () => {
+            const clamped = value !== null ? Math.min(Math.max(value, min), max) : null;
+            if (clamped !== value) field.onChange(clamped);
+            reformat(clamped);
+            field.onBlur();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "nxui:pointer-events-none nxui:absolute nxui:top-1/2 nxui:right-2 nxui:-translate-y-1/2 nxui:text-body nxui:text-muted-foreground", children: "%" }),
+      isLoading && /* @__PURE__ */ jsx(ControlLoadingOverlay, {})
+    ] }),
+    /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+  ] });
+}
+export {
+  FormPercentageInput
+};
+//# sourceMappingURL=form-percentage-input.js.map

package/dist/components/form-percentage-input/form-percentage-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-percentage-input/form-percentage-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FieldPath, FieldValues } from \"react-hook-form\"\n\nimport type { FormPercentageInputProps } from \"./form-percentage-input.types.js\"\nimport { useNumberMask } from \"../../hooks/use-number-mask.js\"\nimport { asFiniteNumber, sanitizeDecimal } from \"../../lib/format/number.js\"\nimport { Field, FieldError } from \"../../primitives/field.js\"\nimport { ControlLoadingOverlay, FormFieldLabel } from \"../../primitives/form-field.js\"\nimport { InputPrimitive } from \"../../primitives/input.js\"\n\nconst formatPercent = (value: number) => String(value)\n\n/**\n * Percentage input. Form state stores PERCENT POINTS (`number | null`: typing\n * 15 stores 15, never 0.15) and clamps to [min, max] on blur. Convert to a\n * fraction at the boundary with `percentToFraction` when the math needs it.\n */\nexport function FormPercentageInput<T extends FieldValues, N extends FieldPath<T>>({\n  id,\n  label,\n  optional = false,\n  field,\n  error,\n  isLoading = false,\n  disabled = false,\n  autoFocus = false,\n  placeholder = \"0\",\n  labelHint,\n  min = 0,\n  max = 100,\n}: FormPercentageInputProps<T, N>) {\n  const value = asFiniteNumber(field.value)\n\n  const { ref, display, onChange, reformat } = useNumberMask({\n    value,\n    sanitize: sanitizeDecimal,\n    format: formatPercent,\n    onValueChange: field.onChange,\n  })\n\n  return (\n    <Field data-invalid={!!error || undefined} className=\"nxui:gap-1\">\n      <FormFieldLabel htmlFor={id} label={label} optional={optional} labelHint={labelHint} />\n      <div className=\"nxui:relative\">\n        <InputPrimitive\n          ref={ref}\n          id={id}\n          type=\"text\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          disabled={disabled || isLoading}\n          aria-invalid={!!error || undefined}\n          className=\"nxui:pr-8\"\n          value={display}\n          onChange={onChange}\n          onBlur={() => {\n            const clamped = value !== null ? Math.min(Math.max(value, min), max) : null\n            if (clamped !== value) field.onChange(clamped)\n            reformat(clamped)\n            field.onBlur()\n          }}\n        />\n        <span className=\"nxui:pointer-events-none nxui:absolute nxui:top-1/2 nxui:right-2 nxui:-translate-y-1/2 nxui:text-body nxui:text-muted-foreground\">\n          %\n        </span>\n        {isLoading && <ControlLoadingOverlay />}\n      </div>\n      <FieldError errors={[error]} />\n    </Field>\n  )\n}\n"],"mappings":";AA2CM,cACA,YADA;AAtCN,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,OAAO,kBAAkB;AAClC,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,sBAAsB;AAE/B,MAAM,gBAAgB,CAAC,UAAkB,OAAO,KAAK;AAO9C,SAAS,oBAAmE;AAAA,EACjF;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AACR,GAAmC;AACjC,QAAM,QAAQ,eAAe,MAAM,KAAK;AAExC,QAAM,EAAE,KAAK,SAAS,UAAU,SAAS,IAAI,cAAc;AAAA,IACzD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,eAAe,MAAM;AAAA,EACvB,CAAC;AAED,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,SAAS,QAAW,WAAU,cACnD;AAAA,wBAAC,kBAAe,SAAS,IAAI,OAAc,UAAoB,WAAsB;AAAA,IACrF,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,UAAU,YAAY;AAAA,UACtB,gBAAc,CAAC,CAAC,SAAS;AAAA,UACzB,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA,QAAQ,MAAM;AACZ,kBAAM,UAAU,UAAU,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG,IAAI;AACvE,gBAAI,YAAY,MAAO,OAAM,SAAS,OAAO;AAC7C,qBAAS,OAAO;AAChB,kBAAM,OAAO;AAAA,UACf;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAK,WAAU,oIAAmI,eAEnJ;AAAA,MACC,aAAa,oBAAC,yBAAsB;AAAA,OACvC;AAAA,IACA,oBAAC,cAAW,QAAQ,CAAC,KAAK,GAAG;AAAA,KAC/B;AAEJ;","names":[]}