@neuronix-tech/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,33 @@
+import { FieldValues, FieldPath, ControllerRenderProps, FieldError } from 'react-hook-form';
+
+interface FormPercentageInputProps<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.
+     *
+     * OUTPUT CONTRACT — form state stores PERCENT POINTS as `number | null`:
+     * the user types 15 → state holds 15, NEVER 0.15. This is the UI convention
+     * (state matches the screen; Stripe/Shopify store rates the same way). When
+     * a backend or formula expects a fraction, convert explicitly at the
+     * boundary with `percentToFraction` (exported from @neuronix-tech/ui).
+     */
+    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;
+    /** Inclusive lower bound applied on blur. Default 0. */
+    min?: number;
+    /** Inclusive upper bound applied on blur. Default 100. */
+    max?: number;
+}
+
+export type { FormPercentageInputProps };

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

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

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

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

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

@@ -0,0 +1,4 @@
+export { FormPercentageInput } from './form-percentage-input.js';
+export { FormPercentageInputProps } from './form-percentage-input.types.js';
+import 'react';
+import 'react-hook-form';

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

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

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

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

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { FieldValues, FieldPath } from 'react-hook-form';
+import { FormTextInputProps } from './form-text-input.types.js';
+
+/**
+ * The standard text field: label (required by default, "*"), control, error —
+ * always the same skeleton. Bind it through a react-hook-form <Controller>:
+ *
+ *   <Controller
+ *     control={form.control}
+ *     name="name"
+ *     render={({ field, fieldState }) => (
+ *       <FormTextInput id="name" label="Name" field={field} error={fieldState.error} />
+ *     )}
+ *   />
+ */
+declare function FormTextInput<T extends FieldValues, N extends FieldPath<T>>({ id, label, optional, field, error, isLoading, disabled, autoFocus, maxLength, uppercase, type, placeholder, prefix, labelHint, }: FormTextInputProps<T, N>): react.JSX.Element;
+
+export { FormTextInput };

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, FieldError } from "../../primitives/field.js";
+import { ControlLoadingOverlay, FormFieldLabel } from "../../primitives/form-field.js";
+import { InputPrimitive } from "../../primitives/input.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText
+} from "../../primitives/input-group.js";
+function FormTextInput({
+  id,
+  label,
+  optional = false,
+  field,
+  error,
+  isLoading = false,
+  disabled = false,
+  autoFocus = false,
+  maxLength,
+  uppercase = false,
+  type = "text",
+  placeholder,
+  prefix,
+  labelHint
+}) {
+  const controlledValue = field && field.value !== null && field.value !== void 0 ? String(field.value) : "";
+  const inputProps = {
+    id,
+    name: field?.name,
+    ref: field?.ref,
+    value: field ? controlledValue : void 0,
+    maxLength,
+    type,
+    placeholder,
+    autoFocus,
+    autoComplete: "off",
+    disabled: disabled || isLoading,
+    "aria-invalid": !!error || void 0,
+    onBlur: field?.onBlur,
+    onChange: (e) => {
+      if (uppercase) {
+        e.target.value = e.target.value.toUpperCase();
+      }
+      field?.onChange?.(e);
+    }
+  };
+  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: [
+      prefix ? /* @__PURE__ */ jsxs(InputGroup, { children: [
+        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(InputGroupText, { children: prefix }) }),
+        /* @__PURE__ */ jsx(InputGroupInput, { ...inputProps })
+      ] }) : /* @__PURE__ */ jsx(InputPrimitive, { ...inputProps }),
+      isLoading && /* @__PURE__ */ jsx(ControlLoadingOverlay, {})
+    ] }),
+    /* @__PURE__ */ jsx(FieldError, { errors: [error] })
+  ] });
+}
+export {
+  FormTextInput
+};
+//# sourceMappingURL=form-text-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-text-input/form-text-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FieldPath, FieldValues } from \"react-hook-form\"\n\nimport type { FormTextInputProps } from \"./form-text-input.types.js\"\nimport { Field, FieldError } from \"../../primitives/field.js\"\nimport { ControlLoadingOverlay, FormFieldLabel } from \"../../primitives/form-field.js\"\nimport { InputPrimitive } from \"../../primitives/input.js\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"../../primitives/input-group.js\"\n\n/**\n * The standard text field: label (required by default, \"*\"), control, error —\n * always the same skeleton. Bind it through a react-hook-form <Controller>:\n *\n *   <Controller\n *     control={form.control}\n *     name=\"name\"\n *     render={({ field, fieldState }) => (\n *       <FormTextInput id=\"name\" label=\"Name\" field={field} error={fieldState.error} />\n *     )}\n *   />\n */\nexport function FormTextInput<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  maxLength,\n  uppercase = false,\n  type = \"text\",\n  placeholder,\n  prefix,\n  labelHint,\n}: FormTextInputProps<T, N>) {\n  const controlledValue =\n    field && field.value !== null && field.value !== undefined ? String(field.value) : \"\"\n\n  const inputProps = {\n    id,\n    name: field?.name,\n    ref: field?.ref,\n    value: field ? controlledValue : undefined,\n    maxLength,\n    type,\n    placeholder,\n    autoFocus,\n    autoComplete: \"off\",\n    disabled: disabled || isLoading,\n    \"aria-invalid\": !!error || undefined,\n    onBlur: field?.onBlur,\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (uppercase) {\n        e.target.value = e.target.value.toUpperCase()\n      }\n      field?.onChange?.(e)\n    },\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        {prefix ? (\n          <InputGroup>\n            <InputGroupAddon align=\"inline-start\">\n              <InputGroupText>{prefix}</InputGroupText>\n            </InputGroupAddon>\n            <InputGroupInput {...inputProps} />\n          </InputGroup>\n        ) : (\n          <InputPrimitive {...inputProps} />\n        )}\n        {isLoading && <ControlLoadingOverlay />}\n      </div>\n      <FieldError errors={[error]} />\n    </Field>\n  )\n}\n"],"mappings":";AAqEM,cAGI,YAHJ;AAhEN,SAAS,OAAO,kBAAkB;AAClC,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,cAA6D;AAAA,EAC3E;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,kBACJ,SAAS,MAAM,UAAU,QAAQ,MAAM,UAAU,SAAY,OAAO,MAAM,KAAK,IAAI;AAErF,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,MAAM,OAAO;AAAA,IACb,KAAK,OAAO;AAAA,IACZ,OAAO,QAAQ,kBAAkB;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,UAAU,YAAY;AAAA,IACtB,gBAAgB,CAAC,CAAC,SAAS;AAAA,IAC3B,QAAQ,OAAO;AAAA,IACf,UAAU,CAAC,MAA2C;AACpD,UAAI,WAAW;AACb,UAAE,OAAO,QAAQ,EAAE,OAAO,MAAM,YAAY;AAAA,MAC9C;AACA,aAAO,WAAW,CAAC;AAAA,IACrB;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,SAAS,QAAW,WAAU,cACnD;AAAA,wBAAC,kBAAe,SAAS,IAAI,OAAc,UAAoB,WAAsB;AAAA,IACrF,qBAAC,SAAI,WAAU,iBACZ;AAAA,eACC,qBAAC,cACC;AAAA,4BAAC,mBAAgB,OAAM,gBACrB,8BAAC,kBAAgB,kBAAO,GAC1B;AAAA,QACA,oBAAC,mBAAiB,GAAG,YAAY;AAAA,SACnC,IAEA,oBAAC,kBAAgB,GAAG,YAAY;AAAA,MAEjC,aAAa,oBAAC,yBAAsB;AAAA,OACvC;AAAA,IACA,oBAAC,cAAW,QAAQ,CAAC,KAAK,GAAG;AAAA,KAC/B;AAEJ;","names":[]}

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

@@ -0,0 +1,45 @@
+import { FieldValues, FieldPath, ControllerRenderProps, FieldError } from 'react-hook-form';
+
+/**
+ * Deliberately a closed union — numeric entry must go through FormNumberInput
+ * (which formats and stores number | null); `type="number"` is not available.
+ */
+type TextInputType = "text" | "email" | "password" | "url" | "tel" | "search";
+interface FormTextInputProps<T extends FieldValues, N extends FieldPath<T>> {
+    id: string;
+    label: string;
+    /**
+     * Required is the DEFAULT: non-optional fields render "label *". Pass
+     * `optional` to drop the asterisk — inverted from the usual `required` flag
+     * so the common case needs no prop.
+     */
+    optional?: boolean;
+    /**
+     * react-hook-form binding from a <Controller>. Optional so the input can be
+     * driven externally/uncontrolled in rare non-form contexts.
+     */
+    field?: ControllerRenderProps<T, N>;
+    /** react-hook-form field error; presence turns the field invalid (red label, ring, message). */
+    error?: FieldError;
+    /** Overlays a spinner on the control while an async source fills it. */
+    isLoading?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    /** Forces typed text to uppercase at the event level (value stored uppercase). */
+    uppercase?: boolean;
+    type?: TextInputType;
+    placeholder?: string;
+    /**
+     * Fixed adornment rendered before the value (e.g. "#" for a channel name).
+     * Purely visual — never part of the field's value.
+     */
+    prefix?: string;
+    /**
+     * Explanation behind the label (dotted underline + tooltip) for fields whose
+     * meaning is not obvious from the label alone.
+     */
+    labelHint?: string;
+}
+
+export type { FormTextInputProps, TextInputType };

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

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

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

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

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

@@ -0,0 +1,4 @@
+export { FormTextInput } from './form-text-input.js';
+export { FormTextInputProps, TextInputType } from './form-text-input.types.js';
+import 'react';
+import 'react-hook-form';

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

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

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

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

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { IconButtonProps } from './icon-button.types.js';
+import '@base-ui/react/button';
+import '../../lib/sealed.js';
+import '../button/button.variants.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Square, icon-only button at the project's control size. Pass one icon as the
+ * child; it is auto-sized. Give it a `tooltip` — an icon alone rarely explains
+ * itself.
+ *
+ *   <IconButton aria-label="Delete" tooltip="Delete" variant="destructive">
+ *     <IconTrash />
+ *   </IconButton>
+ */
+declare function IconButton({ variant, isLoading, disabled, children, tooltip, ...props }: IconButtonProps): react.JSX.Element;
+
+export { IconButton };

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,32 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cn } from "../../lib/cn.js";
+import { SpinnerPrimitive } from "../../primitives/spinner.js";
+import { TooltipContent, TooltipRoot, TooltipTrigger } from "../../primitives/tooltip.js";
+import { buttonVariants, spinnerSizes } from "../button/button.variants.js";
+function IconButton({ variant = "ghost", isLoading = false, disabled, children, tooltip, ...props }) {
+  const button = /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "icon-button",
+      "aria-busy": isLoading || void 0,
+      disabled: disabled || isLoading,
+      className: cn(buttonVariants({ variant, size: "icon" })),
+      ...props,
+      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.icon) })
+      ] }) : children
+    }
+  );
+  if (!tooltip) return button;
+  return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\n\nimport type { IconButtonProps } from \"./icon-button.types.js\"\nimport { cn } from \"../../lib/cn.js\"\nimport { SpinnerPrimitive } from \"../../primitives/spinner.js\"\nimport { TooltipContent, TooltipRoot, TooltipTrigger } from \"../../primitives/tooltip.js\"\nimport { buttonVariants, spinnerSizes } from \"../button/button.variants.js\"\n\n/**\n * Square, icon-only button at the project's control size. Pass one icon as the\n * child; it is auto-sized. Give it a `tooltip` — an icon alone rarely explains\n * itself.\n *\n *   <IconButton aria-label=\"Delete\" tooltip=\"Delete\" variant=\"destructive\">\n *     <IconTrash />\n *   </IconButton>\n */\nfunction IconButton({ variant = \"ghost\", isLoading = false, disabled, children, tooltip, ...props }: IconButtonProps) {\n  const button = (\n    <ButtonPrimitive\n      data-slot=\"icon-button\"\n      aria-busy={isLoading || undefined}\n      disabled={disabled || isLoading}\n      className={cn(buttonVariants({ variant, size: \"icon\" }))}\n      {...props}\n    >\n      {isLoading ? (\n        <>\n          <span className=\"nxui:invisible nxui:contents\">{children}</span>\n          <SpinnerPrimitive className={cn(\"nxui:absolute nxui:inset-0 nxui:m-auto\", spinnerSizes.icon)} />\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 { IconButton }\n"],"mappings":";AA6BQ,mBACE,KADF;AA3BR,SAAS,UAAU,uBAAuB;AAG1C,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,aAAa,sBAAsB;AAC5D,SAAS,gBAAgB,oBAAoB;AAW7C,SAAS,WAAW,EAAE,UAAU,SAAS,YAAY,OAAO,UAAU,UAAU,SAAS,GAAG,MAAM,GAAoB;AACpH,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW,aAAa;AAAA,MACxB,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,OAAO,CAAC,CAAC;AAAA,MACtD,GAAG;AAAA,MAEH,sBACC,iCACE;AAAA,4BAAC,UAAK,WAAU,gCAAgC,UAAS;AAAA,QACzD,oBAAC,oBAAiB,WAAW,GAAG,0CAA0C,aAAa,IAAI,GAAG;AAAA,SAChG,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/icon-button/icon-button.types.d.ts

@@ -0,0 +1,24 @@
+import { Button } from '@base-ui/react/button';
+import { Sealed } from '../../lib/sealed.js';
+import { ButtonVariantProps } from '../button/button.variants.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Icon-only button: a SHAPE, not a size — it renders square at the project's
+ * control size. `aria-label` is required by the type because an icon-only
+ * control has no accessible name without it. Prefer also passing `tooltip`
+ * (usually the same text): an icon alone rarely explains itself.
+ */
+interface IconButtonProps extends Sealed<Button.Props>, Omit<ButtonVariantProps, "size"> {
+    "aria-label": string;
+    /** Same no-resize loading overlay as Button. */
+    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;
+}
+
+export type { IconButtonProps };

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

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

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

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

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

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

package/dist/components/icon-button/index.js

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

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

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

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

@@ -0,0 +1,2 @@
+export { Spinner, SpinnerProps } from './spinner.js';
+import 'react';

package/dist/components/spinner/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/spinner/index.ts"],"sourcesContent":["export { Spinner, type SpinnerProps } from \"./spinner.js\"\n"],"mappings":"AAAA,SAAS,eAAkC;","names":[]}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+
+interface SpinnerProps {
+    /** Accessible label announced to screen readers. Defaults to "Loading". */
+    "aria-label"?: string;
+}
+/**
+ * Standalone loading spinner, one size — sizing is a library decision, not a
+ * caller decision. Components that embed a spinner (Button's isLoading, future
+ * DataLoading) size it internally. Inside a Button, use `isLoading` instead —
+ * never compose a Spinner into button children manually.
+ */
+declare function Spinner({ "aria-label": ariaLabel }: SpinnerProps): react.JSX.Element;
+
+export { Spinner, type SpinnerProps };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { SpinnerPrimitive } from "../../primitives/spinner.js";
+function Spinner({ "aria-label": ariaLabel = "Loading" }) {
+  return /* @__PURE__ */ jsx(SpinnerPrimitive, { className: "nxui:size-4", "aria-label": ariaLabel });
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { SpinnerPrimitive } from \"../../primitives/spinner.js\"\n\nexport interface SpinnerProps {\n  /** Accessible label announced to screen readers. Defaults to \"Loading\". */\n  \"aria-label\"?: string\n}\n\n/**\n * Standalone loading spinner, one size — sizing is a library decision, not a\n * caller decision. Components that embed a spinner (Button's isLoading, future\n * DataLoading) size it internally. Inside a Button, use `isLoading` instead —\n * never compose a Spinner into button children manually.\n */\nfunction Spinner({ \"aria-label\": ariaLabel = \"Loading\" }: SpinnerProps) {\n  return <SpinnerPrimitive className=\"nxui:size-4\" aria-label={ariaLabel} />\n}\n\nexport { Spinner }\n"],"mappings":"AAcS;AAdT,SAAS,wBAAwB;AAajC,SAAS,QAAQ,EAAE,cAAc,YAAY,UAAU,GAAiB;AACtE,SAAO,oBAAC,oBAAiB,WAAU,eAAc,cAAY,WAAW;AAC1E;","names":[]}

package/dist/hooks/use-number-mask.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+
+interface UseNumberMaskArgs {
+    value: number | null;
+    sanitize: (raw: string) => string;
+    format: (value: number) => string;
+    onValueChange: (value: number | null) => void;
+    group?: boolean;
+}
+/**
+ * Live-formatting numeric input mask (ported from nx-automations): groups
+ * thousands as the user types and keeps the caret stable when separators
+ * shift. The form state stores `number | null` — the grouped string is
+ * display only. Blur normalization (padding, clamping) is the caller's job
+ * via `reformat`.
+ */
+declare function useNumberMask({ value, sanitize, format, onValueChange, group, }: UseNumberMaskArgs): {
+    ref: react.RefObject<HTMLInputElement | null>;
+    display: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    reformat: (v?: number | null) => void;
+};
+
+export { useNumberMask };

package/dist/hooks/use-number-mask.js

@@ -0,0 +1,59 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+import { groupNumeric, stripGroups } from "../lib/format/number.js";
+function parseNumeric(raw) {
+  if (raw === "" || raw === "-" || raw === ".") return null;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : null;
+}
+const countSignificant = (s) => (s.match(/[\d.-]/g) ?? []).length;
+function caretAfterSignificant(formatted, anchor) {
+  if (anchor <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < formatted.length; i += 1) {
+    if (formatted[i] !== ",") {
+      seen += 1;
+      if (seen === anchor) return i + 1;
+    }
+  }
+  return formatted.length;
+}
+function useNumberMask({
+  value,
+  sanitize,
+  format,
+  onValueChange,
+  group = true
+}) {
+  const ref = useRef(null);
+  const caret = useRef(null);
+  const mask = (raw) => group ? groupNumeric(raw) : raw;
+  const toDisplay = (v) => mask(v === null ? "" : format(v));
+  const [display, setDisplay] = useState(() => toDisplay(value));
+  const [lastExternal, setLastExternal] = useState(value);
+  if (value !== lastExternal) {
+    setLastExternal(value);
+    if (parseNumeric(stripGroups(display)) !== value) setDisplay(toDisplay(value));
+  }
+  useLayoutEffect(() => {
+    if (caret.current !== null && ref.current) {
+      ref.current.setSelectionRange(caret.current, caret.current);
+      caret.current = null;
+    }
+  });
+  const onChange = (event) => {
+    const raw = event.target.value;
+    const anchor = countSignificant(raw.slice(0, event.target.selectionStart ?? raw.length));
+    const cleaned = sanitize(stripGroups(raw));
+    const next = mask(cleaned);
+    setDisplay(next);
+    caret.current = next === display ? null : caretAfterSignificant(next, anchor);
+    onValueChange(parseNumeric(cleaned));
+  };
+  const reformat = (v = value) => setDisplay(toDisplay(v));
+  return { ref, display, onChange, reformat };
+}
+export {
+  useNumberMask
+};
+//# sourceMappingURL=use-number-mask.js.map

package/dist/hooks/use-number-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-number-mask.ts"],"sourcesContent":["\"use client\"\n\nimport { useLayoutEffect, useRef, useState } from \"react\"\n\nimport { groupNumeric, stripGroups } from \"../lib/format/number.js\"\n\nfunction parseNumeric(raw: string): number | null {\n  if (raw === \"\" || raw === \"-\" || raw === \".\") return null\n  const n = Number(raw)\n  return Number.isFinite(n) ? n : null\n}\n\nconst countSignificant = (s: string) => (s.match(/[\\d.-]/g) ?? []).length\n\n// Caret index just after the `anchor`-th significant (non-comma) char.\nfunction caretAfterSignificant(formatted: string, anchor: number): number {\n  if (anchor <= 0) return 0\n  let seen = 0\n  for (let i = 0; i < formatted.length; i += 1) {\n    if (formatted[i] !== \",\") {\n      seen += 1\n      if (seen === anchor) return i + 1\n    }\n  }\n  return formatted.length\n}\n\ninterface UseNumberMaskArgs {\n  value: number | null\n  sanitize: (raw: string) => string\n  format: (value: number) => string\n  onValueChange: (value: number | null) => void\n  group?: boolean\n}\n\n/**\n * Live-formatting numeric input mask (ported from nx-automations): groups\n * thousands as the user types and keeps the caret stable when separators\n * shift. The form state stores `number | null` — the grouped string is\n * display only. Blur normalization (padding, clamping) is the caller's job\n * via `reformat`.\n */\nexport function useNumberMask({\n  value,\n  sanitize,\n  format,\n  onValueChange,\n  group = true,\n}: UseNumberMaskArgs) {\n  const ref = useRef<HTMLInputElement>(null)\n  const caret = useRef<number | null>(null)\n\n  const mask = (raw: string) => (group ? groupNumeric(raw) : raw)\n  const toDisplay = (v: number | null) => mask(v === null ? \"\" : format(v))\n\n  const [display, setDisplay] = useState(() => toDisplay(value))\n  const [lastExternal, setLastExternal] = useState(value)\n\n  // Re-sync from the form (reset / edit seeding) unless the user is mid-edit\n  // of the same numeric value.\n  if (value !== lastExternal) {\n    setLastExternal(value)\n    if (parseNumeric(stripGroups(display)) !== value) setDisplay(toDisplay(value))\n  }\n\n  useLayoutEffect(() => {\n    if (caret.current !== null && ref.current) {\n      ref.current.setSelectionRange(caret.current, caret.current)\n      caret.current = null\n    }\n  })\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = event.target.value\n    const anchor = countSignificant(raw.slice(0, event.target.selectionStart ?? raw.length))\n    const cleaned = sanitize(stripGroups(raw))\n    const next = mask(cleaned)\n    setDisplay(next)\n    // A rejected keystroke leaves `next` === `display`: no re-render happens,\n    // so null the caret rather than strand a stale index for a later render.\n    caret.current = next === display ? null : caretAfterSignificant(next, anchor)\n    onValueChange(parseNumeric(cleaned))\n  }\n\n  const reformat = (v: number | null = value) => setDisplay(toDisplay(v))\n\n  return { ref, display, onChange, reformat }\n}\n"],"mappings":";AAEA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,cAAc,mBAAmB;AAE1C,SAAS,aAAa,KAA4B;AAChD,MAAI,QAAQ,MAAM,QAAQ,OAAO,QAAQ,IAAK,QAAO;AACrD,QAAM,IAAI,OAAO,GAAG;AACpB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAEA,MAAM,mBAAmB,CAAC,OAAe,EAAE,MAAM,SAAS,KAAK,CAAC,GAAG;AAGnE,SAAS,sBAAsB,WAAmB,QAAwB;AACxE,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK,GAAG;AAC5C,QAAI,UAAU,CAAC,MAAM,KAAK;AACxB,cAAQ;AACR,UAAI,SAAS,OAAQ,QAAO,IAAI;AAAA,IAClC;AAAA,EACF;AACA,SAAO,UAAU;AACnB;AAiBO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAsB;AACpB,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,QAAQ,OAAsB,IAAI;AAExC,QAAM,OAAO,CAAC,QAAiB,QAAQ,aAAa,GAAG,IAAI;AAC3D,QAAM,YAAY,CAAC,MAAqB,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC,CAAC;AAExE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,UAAU,KAAK,CAAC;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAItD,MAAI,UAAU,cAAc;AAC1B,oBAAgB,KAAK;AACrB,QAAI,aAAa,YAAY,OAAO,CAAC,MAAM,MAAO,YAAW,UAAU,KAAK,CAAC;AAAA,EAC/E;AAEA,kBAAgB,MAAM;AACpB,QAAI,MAAM,YAAY,QAAQ,IAAI,SAAS;AACzC,UAAI,QAAQ,kBAAkB,MAAM,SAAS,MAAM,OAAO;AAC1D,YAAM,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AAED,QAAM,WAAW,CAAC,UAA+C;AAC/D,UAAM,MAAM,MAAM,OAAO;AACzB,UAAM,SAAS,iBAAiB,IAAI,MAAM,GAAG,MAAM,OAAO,kBAAkB,IAAI,MAAM,CAAC;AACvF,UAAM,UAAU,SAAS,YAAY,GAAG,CAAC;AACzC,UAAM,OAAO,KAAK,OAAO;AACzB,eAAW,IAAI;AAGf,UAAM,UAAU,SAAS,UAAU,OAAO,sBAAsB,MAAM,MAAM;AAC5E,kBAAc,aAAa,OAAO,CAAC;AAAA,EACrC;AAEA,QAAM,WAAW,CAAC,IAAmB,UAAU,WAAW,UAAU,CAAC,CAAC;AAEtE,SAAO,EAAE,KAAK,SAAS,UAAU,SAAS;AAC5C;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { Button } from './components/button/button.js';
+export { ButtonProps } from './components/button/button.types.js';
+export { FormCurrencyInput } from './components/form-currency-input/form-currency-input.js';
+export { CurrencyCode, FormCurrencyInputProps } from './components/form-currency-input/form-currency-input.types.js';
+export { FormNumberInput } from './components/form-number-input/form-number-input.js';
+export { FormNumberInputProps } from './components/form-number-input/form-number-input.types.js';
+export { FormPercentageInput } from './components/form-percentage-input/form-percentage-input.js';
+export { FormPercentageInputProps } from './components/form-percentage-input/form-percentage-input.types.js';
+export { fractionToPercent, percentToFraction } from './lib/format/percent.js';
+export { FormTextInput } from './components/form-text-input/form-text-input.js';
+export { FormTextInputProps, TextInputType } from './components/form-text-input/form-text-input.types.js';
+export { IconButton } from './components/icon-button/icon-button.js';
+export { IconButtonProps } from './components/icon-button/icon-button.types.js';
+export { Spinner, SpinnerProps } from './components/spinner/spinner.js';
+import 'react';
+import '@base-ui/react/button';
+import './components/button/button.variants.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './lib/sealed.js';
+import 'react-hook-form';

package/dist/index.js

@@ -0,0 +1,28 @@
+import { Button } from "./components/button/index.js";
+import {
+  FormCurrencyInput
+} from "./components/form-currency-input/index.js";
+import {
+  FormNumberInput
+} from "./components/form-number-input/index.js";
+import {
+  FormPercentageInput
+} from "./components/form-percentage-input/index.js";
+import { percentToFraction, fractionToPercent } from "./lib/format/percent.js";
+import {
+  FormTextInput
+} from "./components/form-text-input/index.js";
+import { IconButton } from "./components/icon-button/index.js";
+import { Spinner } from "./components/spinner/index.js";
+export {
+  Button,
+  FormCurrencyInput,
+  FormNumberInput,
+  FormPercentageInput,
+  FormTextInput,
+  IconButton,
+  Spinner,
+  fractionToPercent,
+  percentToFraction
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @neuronix-tech/ui — sealed catalog barrel. Only finished catalog components are\n * exported here; primitives stay internal by design.\n */\nexport { Button, type ButtonProps } from \"./components/button/index.js\"\nexport {\n  FormCurrencyInput,\n  type FormCurrencyInputProps,\n  type CurrencyCode,\n} from \"./components/form-currency-input/index.js\"\nexport {\n  FormNumberInput,\n  type FormNumberInputProps,\n} from \"./components/form-number-input/index.js\"\nexport {\n  FormPercentageInput,\n  type FormPercentageInputProps,\n} from \"./components/form-percentage-input/index.js\"\nexport { percentToFraction, fractionToPercent } from \"./lib/format/percent.js\"\nexport {\n  FormTextInput,\n  type FormTextInputProps,\n  type TextInputType,\n} from \"./components/form-text-input/index.js\"\nexport { IconButton, type IconButtonProps } from \"./components/icon-button/index.js\"\nexport { Spinner, type SpinnerProps } from \"./components/spinner/index.js\"\n"],"mappings":"AAIA,SAAS,cAAgC;AACzC;AAAA,EACE;AAAA,OAGK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,mBAAmB,yBAAyB;AACrD;AAAA,EACE;AAAA,OAGK;AACP,SAAS,kBAAwC;AACjD,SAAS,eAAkC;","names":[]}

package/dist/lib/cn.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Internal class combiner. Deliberately clsx-only — no tailwind-merge: consumers
+ * cannot pass className, so every class string is authored in this package and
+ * conflicts are resolved at authoring time, not runtime.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/cn.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\n\n/**\n * Internal class combiner. Deliberately clsx-only — no tailwind-merge: consumers\n * cannot pass className, so every class string is authored in this package and\n * conflicts are resolved at authoring time, not runtime.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs)\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AAO/B,SAAS,MAAM,QAA8B;AAClD,SAAO,KAAK,MAAM;AACpB;","names":[]}

package/dist/lib/format/number.d.ts

@@ -0,0 +1,6 @@
+declare const stripGroups: (s: string) => string;
+declare function groupNumeric(raw: string): string;
+declare function sanitizeDecimal(raw: string, maxDecimals?: number): string;
+declare const asFiniteNumber: (value: unknown) => number | null;
+
+export { asFiniteNumber, groupNumeric, sanitizeDecimal, stripGroups };

package/dist/lib/format/number.js

@@ -0,0 +1,26 @@
+const stripGroups = (s) => s.replace(/,/g, "");
+function groupNumeric(raw) {
+  if (raw === "" || raw === "-") return raw;
+  const negative = raw.startsWith("-");
+  const body = negative ? raw.slice(1) : raw;
+  const dot = body.indexOf(".");
+  const intPart = dot === -1 ? body : body.slice(0, dot);
+  const rest = dot === -1 ? "" : body.slice(dot);
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${negative ? "-" : ""}${grouped}${rest}`;
+}
+function sanitizeDecimal(raw, maxDecimals = 2) {
+  const s = raw.replace(/[^\d.]/g, "");
+  const dot = s.indexOf(".");
+  if (dot === -1) return s;
+  const dec = s.slice(dot + 1).replace(/\./g, "").slice(0, maxDecimals);
+  return `${s.slice(0, dot)}.${dec}`;
+}
+const asFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+export {
+  asFiniteNumber,
+  groupNumeric,
+  sanitizeDecimal,
+  stripGroups
+};
+//# sourceMappingURL=number.js.map

package/dist/lib/format/number.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/format/number.ts"],"sourcesContent":["// Live-input helpers — operate on partial numeric strings while typing, which\n// Intl.NumberFormat can't (it needs a complete number). Used by the numeric\n// form inputs' mask (see hooks/use-number-mask). Ported from nx-automations.\n\nexport const stripGroups = (s: string) => s.replace(/,/g, \"\")\n\n// Assumes an already-sanitized string (digits, optional leading \"-\", one \".\").\nexport function groupNumeric(raw: string): string {\n  if (raw === \"\" || raw === \"-\") return raw\n  const negative = raw.startsWith(\"-\")\n  const body = negative ? raw.slice(1) : raw\n  const dot = body.indexOf(\".\")\n  const intPart = dot === -1 ? body : body.slice(0, dot)\n  const rest = dot === -1 ? \"\" : body.slice(dot)\n  const grouped = intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n  return `${negative ? \"-\" : \"\"}${grouped}${rest}`\n}\n\nexport function sanitizeDecimal(raw: string, maxDecimals = 2): string {\n  const s = raw.replace(/[^\\d.]/g, \"\")\n  const dot = s.indexOf(\".\")\n  if (dot === -1) return s\n  const dec = s\n    .slice(dot + 1)\n    .replace(/\\./g, \"\")\n    .slice(0, maxDecimals)\n  return `${s.slice(0, dot)}.${dec}`\n}\n\nexport const asFiniteNumber = (value: unknown): number | null =>\n  typeof value === \"number\" && Number.isFinite(value) ? value : null\n"],"mappings":"AAIO,MAAM,cAAc,CAAC,MAAc,EAAE,QAAQ,MAAM,EAAE;AAGrD,SAAS,aAAa,KAAqB;AAChD,MAAI,QAAQ,MAAM,QAAQ,IAAK,QAAO;AACtC,QAAM,WAAW,IAAI,WAAW,GAAG;AACnC,QAAM,OAAO,WAAW,IAAI,MAAM,CAAC,IAAI;AACvC,QAAM,MAAM,KAAK,QAAQ,GAAG;AAC5B,QAAM,UAAU,QAAQ,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;AACrD,QAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,MAAM,GAAG;AAC7C,QAAM,UAAU,QAAQ,QAAQ,yBAAyB,GAAG;AAC5D,SAAO,GAAG,WAAW,MAAM,EAAE,GAAG,OAAO,GAAG,IAAI;AAChD;AAEO,SAAS,gBAAgB,KAAa,cAAc,GAAW;AACpE,QAAM,IAAI,IAAI,QAAQ,WAAW,EAAE;AACnC,QAAM,MAAM,EAAE,QAAQ,GAAG;AACzB,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,MAAM,EACT,MAAM,MAAM,CAAC,EACb,QAAQ,OAAO,EAAE,EACjB,MAAM,GAAG,WAAW;AACvB,SAAO,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG;AAClC;AAEO,MAAM,iBAAiB,CAAC,UAC7B,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,IAAI,QAAQ;","names":[]}

package/dist/lib/format/percent.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Percentage boundary converters.
+ *
+ * FormPercentageInput stores PERCENT POINTS in form state (user types 15 →
+ * state holds 15) — the UI convention (what you see is what's stored). When a
+ * backend or formula expects a FRACTION (0.15), convert explicitly at the
+ * boundary with these — one greppable call instead of scattered `/100`s.
+ *
+ *   api.discountRate = percentToFraction(values.discount)   // 15 → 0.15
+ *   defaultValues: { discount: fractionToPercent(api.rate) } // 0.15 → 15
+ */
+declare const percentToFraction: (points: number | null) => number | null;
+declare const fractionToPercent: (fraction: number | null) => number | null;
+
+export { fractionToPercent, percentToFraction };