@techsio/ui-kit 0.53.0 → 0.54.0

package/dist/atoms/numeric-input.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { normalizeProps, useMachine } from "@zag-js/react";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
 import { tv } from "../utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -81,65 +81,76 @@ const numericInputVariants = tv({
         size: "md"
     }
 });
+const triggerIconSizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md"
+};
 const NumericInputContext = /*#__PURE__*/ createContext(null);
 function useNumericInputContext() {
     const context = useContext(NumericInputContext);
     if (!context) throw new Error("NumericInput components must be used within NumericInput.Root");
     return context;
 }
-function NumericInput({ id, name, size, disabled = false, required = false, pattern, readOnly, inputMode, value, defaultValue, onChange, dir = "ltr", describedBy, min, max, step = 1, precision, allowMouseWheel = true, allowOverflow, clampValueOnBlur = true, spinOnPress = true, formatOptions, invalid, children, ref, className, locale = "cs-CZ", ...props }) {
+function NumericInput({ id, size, value, defaultValue, onChange, dir = "ltr", describedBy, precision, children, ref, className, locale = "cs-CZ", ...props }) {
     const generatedId = useId();
-    const uniqueId = id || generatedId;
+    const [machineProps, elementProps] = __rspack_external__zag_js_number_input_f1a1f439.splitProps(props);
+    const { formatOptions, invalid, disabled = false, required = false, step = 1, allowMouseWheel = true, clampValueOnBlur = true, spinOnPress = true, focusInputOnChange = true } = machineProps;
     const resolvedFormatOptions = precision ? {
         ...formatOptions ?? {},
         maximumFractionDigits: precision
     } : formatOptions;
     const formatValue = (inputValue)=>{
-        if (!resolvedFormatOptions) return String(inputValue);
+        if ("string" == typeof inputValue || !resolvedFormatOptions) return String(inputValue);
         return new Intl.NumberFormat(locale, resolvedFormatOptions).format(inputValue);
     };
-    const stringValue = void 0 !== value ? formatValue(value) : void 0;
-    const stringDefaultValue = void 0 !== defaultValue ? formatValue(defaultValue) : void 0;
     const service = useMachine(__rspack_external__zag_js_number_input_f1a1f439.machine, {
-        id: uniqueId,
-        ids: id ? {
-            input: id
-        } : void 0,
-        min,
-        max,
-        step,
-        name,
+        ...machineProps,
         disabled,
-        locale,
         required,
-        pattern,
-        readOnly,
-        inputMode,
-        dir,
-        invalid,
-        value: stringValue,
-        defaultValue: stringDefaultValue,
+        step,
         allowMouseWheel,
-        allowOverflow,
         clampValueOnBlur,
         spinOnPress,
+        focusInputOnChange,
+        id: id || generatedId,
+        ids: id ? {
+            ...machineProps.ids,
+            input: id
+        } : machineProps.ids,
+        dir,
+        locale,
+        value: void 0 !== value ? formatValue(value) : void 0,
+        defaultValue: void 0 !== defaultValue ? formatValue(defaultValue) : void 0,
         formatOptions: resolvedFormatOptions,
         onValueChange: (details)=>{
             onChange?.(details.valueAsNumber);
-        },
-        focusInputOnChange: true
+            machineProps.onValueChange?.(details);
+        }
     });
     const api = __rspack_external__zag_js_number_input_f1a1f439.connect(service, normalizeProps);
+    useEffect(()=>{
+        const inputId = api.getInputProps().id;
+        const input = inputId ? service.scope.getById(inputId) : null;
+        if (input && input === service.scope.getActiveElement() && !api.focused) service.send({
+            type: "INPUT.FOCUS"
+        });
+    }, [
+        api,
+        service
+    ]);
     const styles = numericInputVariants({
         size
     });
+    const inputDisabled = api.getInputProps().disabled;
     return /*#__PURE__*/ jsx(NumericInputContext.Provider, {
         value: {
             api,
             size,
             styles,
             invalid,
-            describedBy
+            describedBy,
+            controlledValue: "string" == typeof value ? value : void 0
         },
         children: /*#__PURE__*/ jsx("div", {
             className: styles.root({
@@ -147,7 +158,11 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
             }),
             ref: ref,
             ...api.getRootProps(),
-            ...props,
+            ...elementProps,
+            onWheelCapture: (event)=>{
+                if (inputDisabled || machineProps.readOnly) event.stopPropagation();
+                elementProps.onWheelCapture?.(event);
+            },
             children: children
         })
     });
@@ -166,13 +181,53 @@ NumericInput.Control = function({ children, ref, className, ...props }) {
     });
 };
 NumericInput.Input = function({ ref, className, ...props }) {
-    const { api, styles, describedBy } = useNumericInputContext();
+    const { api, styles, describedBy, controlledValue } = useNumericInputContext();
+    const inputRef = useRef(null);
+    const mergedRef = useMemo(()=>(node)=>{
+            inputRef.current = node;
+            const cleanup = "function" == typeof ref ? ref(node) : void 0;
+            if (ref && "function" != typeof ref) ref.current = node;
+            return ()=>{
+                inputRef.current = null;
+                if ("function" == typeof cleanup) cleanup();
+                else if ("function" == typeof ref) ref(null);
+                else if (ref) ref.current = null;
+            };
+        }, [
+        ref
+    ]);
+    useLayoutEffect(()=>{
+        if (void 0 === controlledValue) return;
+        const view = inputRef.current?.ownerDocument.defaultView;
+        if (!view) return;
+        let cancelled = false;
+        let frame;
+        queueMicrotask(()=>{
+            if (cancelled) return;
+            frame = view.requestAnimationFrame(()=>{
+                const input = inputRef.current;
+                if (!input || input.value === controlledValue) return;
+                const start = input.selectionStart;
+                const end = input.selectionEnd;
+                const direction = input.selectionDirection;
+                input.value = controlledValue;
+                if (input.ownerDocument.activeElement === input && null !== start && null !== end) input.setSelectionRange(Math.min(start, controlledValue.length), Math.min(end, controlledValue.length), direction ?? void 0);
+            });
+        });
+        return ()=>{
+            cancelled = true;
+            if (void 0 !== frame) view.cancelAnimationFrame(frame);
+        };
+    }, [
+        api,
+        controlledValue
+    ]);
     const ariaDescribedBy = [
         props["aria-describedby"],
         describedBy
     ].filter(Boolean).join(" ") || void 0;
     return /*#__PURE__*/ jsx(Input, {
-        ref: ref,
+        ref: void 0 === controlledValue ? ref : mergedRef,
         ...api.getInputProps(),
         ...props,
         "aria-describedby": ariaDescribedBy,
@@ -183,7 +238,7 @@ NumericInput.Input = function({ ref, className, ...props }) {
 };
 NumericInput.IncrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-increment", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
     const { api, styles, size } = useNumericInputContext();
-    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
+    const resolvedIconSize = iconSize ?? triggerIconSizes[size ?? "md"];
     return /*#__PURE__*/ jsx(Button, {
         block: block,
         className: styles.trigger({
@@ -206,7 +261,7 @@ NumericInput.IncrementTrigger = function({ variant = "primary", theme = "borderl
 };
 NumericInput.DecrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-decrement", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
     const { api, styles, size } = useNumericInputContext();
-    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
+    const resolvedIconSize = iconSize ?? triggerIconSizes[size ?? "md"];
     return /*#__PURE__*/ jsx(Button, {
         block: block,
         className: styles.trigger({

package/dist/molecules/quantity-field.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Label } from "../atoms/label.js";
+import { NumericInput } from "../atoms/numeric-input.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const descriptionSeparator = /\s+/;
+const quantityFieldVariants = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-quantity-field",
+        control: "flex min-w-0 flex-wrap items-center gap-quantity-field-control",
+        numeric: "min-w-quantity-field-control-min-width flex-1",
+        input: "min-w-0",
+        unit: "min-w-0 max-w-full break-words text-quantity-field-unit-fg",
+        message: "text-quantity-field-message-fg",
+        label: ""
+    },
+    variants: {
+        size: {
+            sm: {
+                unit: "text-quantity-field-unit-sm"
+            },
+            md: {
+                unit: "text-quantity-field-unit-md"
+            },
+            lg: {
+                unit: "text-quantity-field-unit-lg"
+            }
+        },
+        hideLabel: {
+            true: {
+                label: "sr-only"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        hideLabel: false
+    }
+});
+function hasContent(content) {
+    return null != content && false !== content && "" !== content;
+}
+function QuantityField({ id, label, unitLabel, value, onValueChange, onValueCommit, helperText, error, hideLabel = false, pending = false, pendingLabel, disabled = false, readOnly = false, required, describedBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, size = "md", formatOptions, ref, className, ...props }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const unitId = `${inputId}-unit`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const pendingId = `${inputId}-pending`;
+    const hasError = hasContent(error);
+    const hasHelper = hasContent(helperText);
+    const blocked = pending || disabled || readOnly;
+    const mergedDescribedBy = [
+        describedBy,
+        ariaDescribedBy,
+        unitId,
+        hasHelper ? helperId : void 0,
+        hasError ? errorId : void 0,
+        pending ? pendingId : void 0
+    ].filter(Boolean).flatMap((description)=>description?.split(descriptionSeparator) ?? []).filter(Boolean);
+    const inputDescribedBy = [
+        ...new Set(mergedDescribedBy)
+    ].join(" ");
+    const styles = quantityFieldVariants({
+        size,
+        hideLabel
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.root({
+            className
+        }),
+        "data-pending": pending || void 0,
+        "data-validation": hasError ? "error" : void 0,
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                className: styles.label(),
+                disabled: disabled || pending,
+                htmlFor: inputId,
+                required: required,
+                size: size,
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                "aria-busy": pending || void 0,
+                className: styles.control(),
+                children: [
+                    /*#__PURE__*/ jsx(NumericInput, {
+                        ...props,
+                        allowOverflow: false,
+                        clampValueOnBlur: false,
+                        className: styles.numeric(),
+                        describedBy: inputDescribedBy,
+                        disabled: disabled || pending,
+                        formatOptions: formatOptions ?? {
+                            useGrouping: false,
+                            maximumFractionDigits: 20
+                        },
+                        id: inputId,
+                        invalid: hasError,
+                        onValueChange: (details)=>{
+                            if (!blocked) onValueChange(details);
+                        },
+                        onValueCommit: (details)=>{
+                            if (!blocked) onValueCommit?.(details);
+                        },
+                        readOnly: readOnly,
+                        required: required,
+                        size: size,
+                        value: value,
+                        children: /*#__PURE__*/ jsxs(NumericInput.Control, {
+                            className: styles.numeric(),
+                            "data-validation": hasError ? "error" : void 0,
+                            children: [
+                                /*#__PURE__*/ jsx(NumericInput.Input, {
+                                    "aria-label": ariaLabel,
+                                    "aria-labelledby": ariaLabelledBy,
+                                    autoFocus: autoFocus,
+                                    className: styles.input(),
+                                    ref: ref
+                                }),
+                                /*#__PURE__*/ jsxs(NumericInput.TriggerContainer, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(NumericInput.IncrementTrigger, {}),
+                                        /*#__PURE__*/ jsx(NumericInput.DecrementTrigger, {})
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: styles.unit(),
+                        id: unitId,
+                        children: unitLabel
+                    })
+                ]
+            }),
+            hasHelper && /*#__PURE__*/ jsx(StatusText, {
+                className: styles.message(),
+                id: helperId,
+                size: size,
+                children: helperText
+            }),
+            hasError && /*#__PURE__*/ jsx(StatusText, {
+                id: errorId,
+                size: size,
+                status: "error",
+                children: error
+            }),
+            pending && /*#__PURE__*/ jsx(StatusText, {
+                "aria-atomic": "true",
+                "aria-live": "polite",
+                className: styles.message(),
+                id: pendingId,
+                role: "status",
+                size: size,
+                children: pendingLabel
+            })
+        ]
+    });
+}
+export { QuantityField };

package/dist/src/atoms/numeric-input.d.ts

@@ -2,7 +2,7 @@
  * NumericInput — @techsio/ui-kit atom.
  *
  * @component NumericInput
- * @componentVersion v1.0.1
+ * @componentVersion v1.1.0
  * @skill numeric-input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *
@@ -12,10 +12,10 @@
 import * as numberInput from "@zag-js/number-input";
 import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
 import type { IconType } from "./icon.js";
-export type NumericInputProps = Omit<numberInput.Props, "value" | "defaultValue" | "id"> & Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> & {
+export type NumericInputProps = Omit<numberInput.Props, "value" | "defaultValue" | "id"> & Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children" | "defaultValue"> & {
     size?: "sm" | "md" | "lg";
-    value?: number;
-    defaultValue?: number;
+    value?: number | string;
+    defaultValue?: number | string;
     onChange?: (value: number) => void;
     precision?: number;
     children?: ReactNode;
@@ -24,7 +24,7 @@ export type NumericInputProps = Omit<numberInput.Props, "value" | "defaultValue"
     id?: string;
     locale?: string;
 };
-export declare function NumericInput({ id, name, size, disabled, required, pattern, readOnly, inputMode, value, defaultValue, onChange, dir, describedBy, min, max, step, precision, allowMouseWheel, allowOverflow, clampValueOnBlur, spinOnPress, formatOptions, invalid, children, ref, className, locale, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ id, size, value, defaultValue, onChange, dir, describedBy, precision, children, ref, className, locale, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NumericInput {
     var Control: ({ children, ref, className, ...props }: NumericInputControlProps) => import("react/jsx-runtime").JSX.Element;
     var Input: ({ ref, className, ...props }: NumericInputInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/atoms/numeric-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numeric-input.d.ts","sourceRoot":"","sources":["../../../src/atoms/numeric-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"numeric-input.d.ts","sourceRoot":"","sources":["../../../src/atoms/numeric-input.tsx"],"names":[],"mappings":"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"}

package/dist/src/molecules/quantity-field.d.ts

@@ -0,0 +1,30 @@
+/**
+ * QuantityField — @techsio/ui-kit molecule.
+ *
+ * @component QuantityField
+ * @componentVersion v1.0.0
+ * @skill quantity-field-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ */
+import { type ReactNode, type Ref } from "react";
+import { type NumericInputProps } from "../atoms/numeric-input.js";
+type QuantityFieldPendingProps = {
+    pending: true;
+    pendingLabel: string;
+} | {
+    pending?: false;
+    pendingLabel?: string;
+};
+export type QuantityFieldProps = Omit<NumericInputProps, "children" | "value" | "defaultValue" | "onChange" | "ref" | "invalid" | "allowOverflow" | "clampValueOnBlur" | "precision" | "ids"> & QuantityFieldPendingProps & {
+    label: ReactNode;
+    unitLabel: string;
+    value: string;
+    onValueChange: NonNullable<NumericInputProps["onValueChange"]>;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    hideLabel?: boolean;
+    ref?: Ref<HTMLInputElement>;
+};
+export declare function QuantityField({ id, label, unitLabel, value, onValueChange, onValueCommit, helperText, error, hideLabel, pending, pendingLabel, disabled, readOnly, required, describedBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, size, formatOptions, ref, className, ...props }: QuantityFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=quantity-field.d.ts.map

package/dist/src/molecules/quantity-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-field.d.ts","sourceRoot":"","sources":["../../../src/molecules/quantity-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AA2B7E,KAAK,yBAAyB,GAC1B;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,iBAAiB,EACf,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,GACV,KAAK,GACL,SAAS,GACT,eAAe,GACf,kBAAkB,GAClB,WAAW,GACX,KAAK,CACR,GACC,yBAAyB,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;IAC9D,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B,CAAA;AAWH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,SAAS,EACT,KAAK,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,YAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,WAAW,EACX,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,EACT,IAAW,EACX,aAAa,EACb,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAkHpB"}

package/dist/src/templates/numeric-input.d.ts

@@ -2,7 +2,7 @@
  * NumericInput — @techsio/ui-kit template.
  *
  * @component NumericInput
- * @componentVersion v1.0.1
+ * @componentVersion v1.1.0
  * @skill numeric-input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/stories/atoms/numeric-input.stories.d.ts

@@ -20,4 +20,8 @@ export declare const WithPrecision: Story;
 export declare const CustomLayoutHorizontal: Story;
 export declare const Disabled: Story;
 export declare const CustomButtonProps: Story;
+export declare const ControlledDraft: Story;
+export declare const CallbackCompatibility: Story;
+export declare const UncontrolledDefaults: Story;
+export declare const ExplicitUndefinedDefaults: Story;
 //# sourceMappingURL=numeric-input.stories.d.ts.map

package/dist/stories/atoms/numeric-input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numeric-input.stories.d.ts","sourceRoot":"","sources":["../../../stories/atoms/numeric-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAEpF,KAAK,cAAc,GAAG,iBAAiB,GAAG;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAanC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAyExB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAkC1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAgC3B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyBpC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA+C/B,CAAA"}
+{"version":3,"file":"numeric-input.stories.d.ts","sourceRoot":"","sources":["../../../stories/atoms/numeric-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAQpF,KAAK,cAAc,GAAG,iBAAiB,GAAG;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAanC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAyExB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAkC1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAgC3B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyBpC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA+C/B,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAuC7B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KA0EnC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KA0ClC,CAAA;AAGD,eAAO,MAAM,yBAAyB,EAAE,KA6BvC,CAAA"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiStD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA4StD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/form-numeric-input.stories.d.ts

@@ -14,4 +14,5 @@ export declare const WithScrubber: Story;
 export declare const AllSizes: Story;
 export declare const WithPrecision: Story;
 export declare const ComplexDemo: Story;
+export declare const ControlledDraft: Story;
 //# sourceMappingURL=form-numeric-input.stories.d.ts.map

package/dist/stories/molecules/form-numeric-input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-numeric-input.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/form-numeric-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAA;AAEzE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA6HvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAG9C,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KA8F9B,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA2BtB,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,KAuDzB,CAAA"}
+{"version":3,"file":"form-numeric-input.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/form-numeric-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAA;AAEzE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA6HvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAG9C,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KA8F9B,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA2BtB,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,KAuDzB,CAAA;AAOD,eAAO,MAAM,eAAe,EAAE,KAiE7B,CAAA"}

package/dist/stories/molecules/quantity-field.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QuantityField } from "../../src/molecules/quantity-field.js";
+declare const meta: Meta<typeof QuantityField>;
+export default meta;
+type Story = StoryObj<typeof QuantityField>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const RejectedUpdate: Story;
+export declare const DecimalQuantity: Story;
+export declare const Bounds: Story;
+export declare const CompactLongUnit: Story;
+export declare const PendingAndReadOnly: Story;
+export declare const InputAttributes: Story;
+export declare const FormIdentity: Story;
+//# sourceMappingURL=quantity-field.stories.d.ts.map

package/dist/stories/molecules/quantity-field.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-field.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/quantity-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EACN,aAAa,EAEb,MAAM,oCAAoC,CAAA;AAI3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA+CpC,CAAA;AACD,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAgB3C,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAiD5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAuDhC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgD1B,CAAA"}

package/dist/test/numeric-input.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=numeric-input.spec.d.ts.map

package/dist/test/numeric-input.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-input.spec.d.ts","sourceRoot":"","sources":["../../test/numeric-input.spec.ts"],"names":[],"mappings":""}

package/dist/test/quantity-field.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=quantity-field.spec.d.ts.map

package/dist/test/quantity-field.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-field.spec.d.ts","sourceRoot":"","sources":["../../test/quantity-field.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/components/components.css

@@ -34,6 +34,7 @@
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
 @import "./molecules/_price-block.css";
+@import "./molecules/_quantity-field.css";
 @import "./molecules/_radio-card.css";
 @import "./molecules/_radio-group.css";
 @import "./molecules/_menu.css";

package/src/tokens/components/molecules/_quantity-field.css

@@ -0,0 +1,17 @@
+@theme static {
+  /* Reference layer */
+  --color-quantity-field-unit: var(--color-fg-primary);
+  --color-quantity-field-message: var(--color-fg-primary);
+
+  /* Derived foreground */
+  --color-quantity-field-unit-fg: var(--color-quantity-field-unit);
+  --color-quantity-field-message-fg: var(--color-quantity-field-message);
+
+  /* Layout and typography follow the existing form controls. */
+  --gap-quantity-field: var(--spacing-form-field);
+  --gap-quantity-field-control: var(--spacing-150);
+  --spacing-quantity-field-control-min-width: var(--spacing-950);
+  --text-quantity-field-unit-sm: var(--text-sm);
+  --text-quantity-field-unit-md: var(--text-md);
+  --text-quantity-field-unit-lg: var(--text-lg);
+}