@neuronix-tech/ui 0.0.0-stage → 0.2.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,
+      ...props,
+      className: cn(buttonVariants({ variant, size: "icon" })),
+      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      {...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: \"icon\" }))}\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":";AAgCQ,mBACE,KADF;AA9BR,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,MACrB,GAAG;AAAA,MAIJ,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,OAAO,CAAC,CAAC;AAAA,MAEtD,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/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toaster, errorToast, successToast, warningToast } from './toast.js';
+export { ToastActionOptions, ToastOptions } from './toast.types.js';
+import 'react';

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+import { Toaster, successToast, warningToast, errorToast } from "./toast.js";
+export {
+  Toaster,
+  errorToast,
+  successToast,
+  warningToast
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/index.ts"],"sourcesContent":["export { Toaster, successToast, warningToast, errorToast } from \"./toast.js\"\nexport type { ToastOptions, ToastActionOptions } from \"./toast.types.js\"\n"],"mappings":"AAAA,SAAS,SAAS,cAAc,cAAc,kBAAkB;","names":[]}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ToastOptions } from './toast.types.js';
+
+/** Renders every live toast in the current provider. Internal — not exported publicly. */
+declare function ToastList(): react.JSX.Element[];
+/**
+ * Mount ONCE, at the root of the app (e.g. Next.js `app/layout.tsx`, as a
+ * sibling of `{children}`). It renders the toast viewport; every
+ * successToast / warningToast / errorToast call anywhere in the app shows up
+ * here. It takes no props: placement, timing, and stacking are library-owned.
+ */
+declare function Toaster(): react.JSX.Element;
+/**
+ * Confirms that something the user did worked ("Client saved"). The most
+ * common toast — fire it from a mutation's success callback, never on render.
+ */
+declare function successToast(title: string, options?: ToastOptions): void;
+/**
+ * The action went through but something deserves attention ("Saved, but 2
+ * contacts were skipped"). Not for failures — those are errorToast.
+ */
+declare function warningToast(title: string, options?: ToastOptions): void;
+/**
+ * Something the user asked for failed and was NOT applied ("Couldn't save the
+ * client"). Announced assertively to screen readers. Field-level validation
+ * errors belong on the field (the Form* `error` prop), never in a toast.
+ */
+declare function errorToast(title: string, options?: ToastOptions): void;
+
+export { ToastList, Toaster, errorToast, successToast, warningToast };

package/dist/components/toast/toast.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertOctagon, IconAlertTriangle, IconCircleCheck, IconX } from "@tabler/icons-react";
+import { toastIconVariants, toastViewportClasses } from "./toast.variants.js";
+import { Button } from "../button/index.js";
+import { IconButton } from "../icon-button/index.js";
+import {
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+  toastManager,
+  useToastManager
+} from "../../primitives/toast.js";
+const ICONS = {
+  success: IconCircleCheck,
+  warning: IconAlertTriangle,
+  error: IconAlertOctagon
+};
+function isToastType(type) {
+  return type !== void 0 && type in ICONS;
+}
+function ToastList() {
+  const { toasts } = useToastManager();
+  return toasts.map((item) => {
+    const type = isToastType(item.type) ? item.type : null;
+    const Icon = type ? ICONS[type] : null;
+    return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+      Icon && /* @__PURE__ */ jsx("span", { "data-slot": "toast-icon", className: toastIconVariants({ type }), children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "nxui:flex nxui:min-w-0 nxui:flex-1 nxui:flex-col", children: [
+        /* @__PURE__ */ jsx(ToastTitle, {}),
+        /* @__PURE__ */ jsx(ToastDescription, {})
+      ] }),
+      /* @__PURE__ */ jsx(ToastAction, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }) }),
+      /* @__PURE__ */ jsx(ToastClose, { render: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Close" }), children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": "true" }) })
+    ] }) }, item.id);
+  });
+}
+function Toaster() {
+  return /* @__PURE__ */ jsx(ToastProvider, { toastManager, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, { className: toastViewportClasses, children: /* @__PURE__ */ jsx(ToastList, {}) }) }) });
+}
+function addToast(type, title, options = {}) {
+  const { description, action } = options;
+  toastManager.add({
+    type,
+    title,
+    description,
+    // Errors interrupt the screen reader (role="alert"); success and warning
+    // are announced politely so they never cut off what the user is hearing.
+    priority: type === "error" ? "high" : "low",
+    actionProps: action ? { children: action.label, onClick: action.onClick } : void 0
+  });
+}
+function successToast(title, options) {
+  addToast("success", title, options);
+}
+function warningToast(title, options) {
+  addToast("warning", title, options);
+}
+function errorToast(title, options) {
+  addToast("error", title, options);
+}
+export {
+  ToastList,
+  Toaster,
+  errorToast,
+  successToast,
+  warningToast
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\"\n\nimport { IconAlertOctagon, IconAlertTriangle, IconCircleCheck, IconX } from \"@tabler/icons-react\"\n\nimport type { ToastOptions } from \"./toast.types.js\"\nimport { toastIconVariants, toastViewportClasses, type ToastType } from \"./toast.variants.js\"\nimport { Button } from \"../button/index.js\"\nimport { IconButton } from \"../icon-button/index.js\"\nimport {\n  ToastAction,\n  ToastClose,\n  ToastContent,\n  ToastDescription,\n  ToastPortal,\n  ToastProvider,\n  ToastRoot,\n  ToastTitle,\n  ToastViewport,\n  toastManager,\n  useToastManager,\n} from \"../../primitives/toast.js\"\n\nconst ICONS = {\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error: IconAlertOctagon,\n} as const satisfies Record<ToastType, unknown>\n\nfunction isToastType(type: string | undefined): type is ToastType {\n  return type !== undefined && type in ICONS\n}\n\n/** Renders every live toast in the current provider. Internal — not exported publicly. */\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map((item) => {\n    const type = isToastType(item.type) ? item.type : null\n    const Icon = type ? ICONS[type] : null\n    return (\n      <ToastRoot key={item.id} toast={item}>\n        <ToastContent>\n          {Icon && (\n            <span data-slot=\"toast-icon\" className={toastIconVariants({ type })}>\n              <Icon aria-hidden=\"true\" />\n            </span>\n          )}\n          <div className=\"nxui:flex nxui:min-w-0 nxui:flex-1 nxui:flex-col\">\n            <ToastTitle />\n            <ToastDescription />\n          </div>\n          <ToastAction render={<Button variant=\"outline\" />} />\n          <ToastClose render={<IconButton variant=\"ghost\" aria-label=\"Close\" />}>\n            <IconX aria-hidden=\"true\" />\n          </ToastClose>\n        </ToastContent>\n      </ToastRoot>\n    )\n  })\n}\n\n/**\n * Mount ONCE, at the root of the app (e.g. Next.js `app/layout.tsx`, as a\n * sibling of `{children}`). It renders the toast viewport; every\n * successToast / warningToast / errorToast call anywhere in the app shows up\n * here. It takes no props: placement, timing, and stacking are library-owned.\n */\nfunction Toaster() {\n  return (\n    <ToastProvider toastManager={toastManager}>\n      <ToastPortal>\n        <ToastViewport className={toastViewportClasses}>\n          <ToastList />\n        </ToastViewport>\n      </ToastPortal>\n    </ToastProvider>\n  )\n}\n\nfunction addToast(type: ToastType, title: string, options: ToastOptions = {}) {\n  const { description, action } = options\n  toastManager.add({\n    type,\n    title,\n    description,\n    // Errors interrupt the screen reader (role=\"alert\"); success and warning\n    // are announced politely so they never cut off what the user is hearing.\n    priority: type === \"error\" ? \"high\" : \"low\",\n    actionProps: action ? { children: action.label, onClick: action.onClick } : undefined,\n  })\n}\n\n/**\n * Confirms that something the user did worked (\"Client saved\"). The most\n * common toast — fire it from a mutation's success callback, never on render.\n */\nfunction successToast(title: string, options?: ToastOptions) {\n  addToast(\"success\", title, options)\n}\n\n/**\n * The action went through but something deserves attention (\"Saved, but 2\n * contacts were skipped\"). Not for failures — those are errorToast.\n */\nfunction warningToast(title: string, options?: ToastOptions) {\n  addToast(\"warning\", title, options)\n}\n\n/**\n * Something the user asked for failed and was NOT applied (\"Couldn't save the\n * client\"). Announced assertively to screen readers. Field-level validation\n * errors belong on the field (the Form* `error` prop), never in a toast.\n */\nfunction errorToast(title: string, options?: ToastOptions) {\n  addToast(\"error\", title, options)\n}\n\nexport { Toaster, ToastList, successToast, warningToast, errorToast }\n"],"mappings":";AA4Cc,cAGJ,YAHI;AA1Cd,SAAS,kBAAkB,mBAAmB,iBAAiB,aAAa;AAG5E,SAAS,mBAAmB,4BAA4C;AACxE,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,QAAQ;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,SAAS,YAAY,MAA6C;AAChE,SAAO,SAAS,UAAa,QAAQ;AACvC;AAGA,SAAS,YAAY;AACnB,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO,OAAO,IAAI,CAAC,SAAS;AAC1B,UAAM,OAAO,YAAY,KAAK,IAAI,IAAI,KAAK,OAAO;AAClD,UAAM,OAAO,OAAO,MAAM,IAAI,IAAI;AAClC,WACE,oBAAC,aAAwB,OAAO,MAC9B,+BAAC,gBACE;AAAA,cACC,oBAAC,UAAK,aAAU,cAAa,WAAW,kBAAkB,EAAE,KAAK,CAAC,GAChE,8BAAC,QAAK,eAAY,QAAO,GAC3B;AAAA,MAEF,qBAAC,SAAI,WAAU,oDACb;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,oBAAiB;AAAA,SACpB;AAAA,MACA,oBAAC,eAAY,QAAQ,oBAAC,UAAO,SAAQ,WAAU,GAAI;AAAA,MACnD,oBAAC,cAAW,QAAQ,oBAAC,cAAW,SAAQ,SAAQ,cAAW,SAAQ,GACjE,8BAAC,SAAM,eAAY,QAAO,GAC5B;AAAA,OACF,KAfc,KAAK,EAgBrB;AAAA,EAEJ,CAAC;AACH;AAQA,SAAS,UAAU;AACjB,SACE,oBAAC,iBAAc,cACb,8BAAC,eACC,8BAAC,iBAAc,WAAW,sBACxB,8BAAC,aAAU,GACb,GACF,GACF;AAEJ;AAEA,SAAS,SAAS,MAAiB,OAAe,UAAwB,CAAC,GAAG;AAC5E,QAAM,EAAE,aAAa,OAAO,IAAI;AAChC,eAAa,IAAI;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,UAAU,SAAS,UAAU,SAAS;AAAA,IACtC,aAAa,SAAS,EAAE,UAAU,OAAO,OAAO,SAAS,OAAO,QAAQ,IAAI;AAAA,EAC9E,CAAC;AACH;AAMA,SAAS,aAAa,OAAe,SAAwB;AAC3D,WAAS,WAAW,OAAO,OAAO;AACpC;AAMA,SAAS,aAAa,OAAe,SAAwB;AAC3D,WAAS,WAAW,OAAO,OAAO;AACpC;AAOA,SAAS,WAAW,OAAe,SAAwB;AACzD,WAAS,SAAS,OAAO,OAAO;AAClC;","names":[]}

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

@@ -0,0 +1,22 @@
+/**
+ * A single follow-up action rendered as an outline button inside the toast
+ * (e.g. "Undo", "View", "Retry"). Clicking it runs `onClick`; the toast stays
+ * open unless the handler moves the user elsewhere or the timer runs out.
+ */
+interface ToastActionOptions {
+    label: string;
+    onClick: () => void;
+}
+/**
+ * Everything a call site may decide about a toast. Placement, duration, icon,
+ * color, and stacking are library-owned — the function you call (success /
+ * warning / error) is the whole styling menu.
+ */
+interface ToastOptions {
+    /** Secondary line under the title, in muted text. Keep it to one sentence. */
+    description?: string;
+    /** Optional follow-up action. One per toast — a toast is not a dialog. */
+    action?: ToastActionOptions;
+}
+
+export type { ToastActionOptions, ToastOptions };

package/dist/components/toast/toast.types.js

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

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

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

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

@@ -0,0 +1,23 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Placement is a library decision: bottom-right on desktop, full-width (with a
+ * 16px gutter) on narrow screens — identical in every app.
+ */
+declare const toastViewportClasses = "nxui:fixed nxui:inset-x-4 nxui:bottom-4 nxui:z-50 nxui:mx-auto nxui:w-auto nxui:max-w-sm nxui:sm:right-4 nxui:sm:left-auto nxui:sm:mx-0 nxui:sm:w-full";
+/**
+ * The type only tints the leading icon; the surface stays the neutral popover
+ * so a stack of mixed toasts reads as one family. nx-automations tinted only
+ * the error icon — every type gets its status color here (Law 14).
+ *
+ * The icon box is one control tall, like the title row and the action/close
+ * buttons, so the whole first line shares one center even when the
+ * description wraps below it.
+ */
+declare const toastIconVariants: (props?: ({
+    type?: "error" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToastType = NonNullable<VariantProps<typeof toastIconVariants>["type"]>;
+
+export { type ToastType, toastIconVariants, toastViewportClasses };

package/dist/components/toast/toast.variants.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+const toastViewportClasses = "nxui:fixed nxui:inset-x-4 nxui:bottom-4 nxui:z-50 nxui:mx-auto nxui:w-auto nxui:max-w-sm nxui:sm:right-4 nxui:sm:left-auto nxui:sm:mx-0 nxui:sm:w-full";
+const toastIconVariants = cva(
+  "nxui:flex nxui:h-control-md nxui:shrink-0 nxui:items-center nxui:[&_svg]:pointer-events-none nxui:[&_svg:not([class*=size-])]:size-4",
+  {
+    variants: {
+      type: {
+        success: "nxui:text-success",
+        warning: "nxui:text-warning",
+        error: "nxui:text-destructive"
+      }
+    }
+  }
+);
+export {
+  toastIconVariants,
+  toastViewportClasses
+};
+//# sourceMappingURL=toast.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/toast.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Placement is a library decision: bottom-right on desktop, full-width (with a\n * 16px gutter) on narrow screens — identical in every app.\n */\nexport const toastViewportClasses =\n  \"nxui:fixed nxui:inset-x-4 nxui:bottom-4 nxui:z-50 nxui:mx-auto nxui:w-auto nxui:max-w-sm nxui:sm:right-4 nxui:sm:left-auto nxui:sm:mx-0 nxui:sm:w-full\"\n\n/**\n * The type only tints the leading icon; the surface stays the neutral popover\n * so a stack of mixed toasts reads as one family. nx-automations tinted only\n * the error icon — every type gets its status color here (Law 14).\n *\n * The icon box is one control tall, like the title row and the action/close\n * buttons, so the whole first line shares one center even when the\n * description wraps below it.\n */\nexport const toastIconVariants = cva(\n  \"nxui:flex nxui:h-control-md nxui:shrink-0 nxui:items-center nxui:[&_svg]:pointer-events-none nxui:[&_svg:not([class*=size-])]:size-4\",\n  {\n    variants: {\n      type: {\n        success: \"nxui:text-success\",\n        warning: \"nxui:text-warning\",\n        error: \"nxui:text-destructive\",\n      },\n    },\n  }\n)\n\nexport type ToastType = NonNullable<VariantProps<typeof toastIconVariants>[\"type\"]>\n"],"mappings":"AAAA,SAAS,WAA8B;AAMhC,MAAM,uBACX;AAWK,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","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 };