@techsio/ui-kit 0.52.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/availability-status.js

@@ -0,0 +1,99 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../atoms/icon.js";
+import { Skeleton } from "../atoms/skeleton.js";
+import { tv } from "../utils.js";
+const availabilityStatusVariants = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-availability-status",
+        summary: "flex min-w-0 items-start gap-availability-status-summary",
+        icon: "size-availability-status-icon shrink-0 self-start",
+        content: "flex min-w-0 flex-col gap-availability-status-content",
+        label: "break-words font-availability-status-label text-availability-status-label-size",
+        detail: "break-words text-availability-status-detail-fg text-availability-status-detail-size",
+        pending: "w-availability-status-pending max-w-full gap-availability-status-pending",
+        pendingLine: "h-availability-status-pending-line"
+    },
+    variants: {
+        status: {
+            available: {
+                icon: "text-availability-status-fg-available",
+                label: "text-availability-status-fg-available"
+            },
+            limited: {
+                icon: "text-availability-status-fg-limited",
+                label: "text-availability-status-fg-limited"
+            },
+            preorder: {
+                icon: "text-availability-status-fg-preorder",
+                label: "text-availability-status-fg-preorder"
+            },
+            unavailable: {
+                icon: "text-availability-status-fg-unavailable",
+                label: "text-availability-status-fg-unavailable"
+            },
+            unknown: {
+                icon: "text-availability-status-fg-unknown",
+                label: "text-availability-status-fg-unknown"
+            },
+            pending: {}
+        }
+    }
+});
+const defaultIcons = {
+    available: "token-icon-availability-status-available",
+    limited: "token-icon-availability-status-limited",
+    preorder: "token-icon-availability-status-preorder",
+    unavailable: "token-icon-availability-status-unavailable",
+    unknown: "token-icon-availability-status-unknown"
+};
+function AvailabilityStatus({ status, label, detail, icon, showIcon = true, pendingLabel, className, ref, ...props }) {
+    const styles = availabilityStatusVariants({
+        status
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.root({
+            className
+        }),
+        ...props,
+        "data-status": status,
+        ref: ref,
+        children: "pending" === status ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "sr-only",
+                    children: pendingLabel
+                }),
+                /*#__PURE__*/ jsx(Skeleton.Text, {
+                    "aria-hidden": "true",
+                    className: styles.pendingLine(),
+                    containerClassName: styles.pending(),
+                    isLoaded: false,
+                    noOfLines: 2,
+                    size: "sm"
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: styles.summary(),
+            children: [
+                showIcon ? /*#__PURE__*/ jsx(Icon, {
+                    className: styles.icon(),
+                    icon: icon ?? defaultIcons[status]
+                }) : null,
+                /*#__PURE__*/ jsxs("div", {
+                    className: styles.content(),
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: styles.label(),
+                            children: label
+                        }),
+                        detail ? /*#__PURE__*/ jsx("span", {
+                            className: styles.detail(),
+                            children: detail
+                        }) : null
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { AvailabilityStatus };

package/dist/molecules/price-block.js

@@ -0,0 +1,122 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../atoms/badge.js";
+import { Skeleton } from "../atoms/skeleton.js";
+import { tv } from "../utils.js";
+const priceBlockVariants = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-price-block",
+        primaryRow: "flex min-w-0 flex-wrap items-baseline gap-price-block-primary",
+        prefix: "break-words text-price-block-prefix-fg text-price-block-prefix-size",
+        amount: "break-words font-price-block-amount text-price-block-amount-fg text-price-block-amount-size",
+        original: "break-words text-price-block-original-fg text-price-block-original-size",
+        metadata: "flex min-w-0 flex-wrap items-center gap-price-block-metadata text-price-block-metadata-fg text-price-block-metadata-size",
+        separator: "text-price-block-separator-fg",
+        detail: "break-words text-price-block-detail-fg text-price-block-detail-size",
+        pending: "w-price-block-pending max-w-full gap-price-block-pending",
+        pendingLine: "h-price-block-pending-line"
+    }
+});
+function PriceMetadata({ taxLabel, unitLabel }) {
+    const styles = priceBlockVariants();
+    if (!(taxLabel || unitLabel)) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.metadata(),
+        children: [
+            taxLabel ? /*#__PURE__*/ jsx("span", {
+                children: taxLabel
+            }) : null,
+            taxLabel && unitLabel ? /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: styles.separator(),
+                children: "\xb7"
+            }) : null,
+            unitLabel ? /*#__PURE__*/ jsx("span", {
+                children: unitLabel
+            }) : null
+        ]
+    });
+}
+function PriceBlock({ state, amountLabel, originalLabel, originalSrLabel, discountLabel, taxLabel, unitLabel, prefix, label, detail, pendingLabel, className, ref, ...props }) {
+    const styles = priceBlockVariants();
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.root({
+            className
+        }),
+        ...props,
+        "data-state": state,
+        ref: ref,
+        children: [
+            "pending" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        children: pendingLabel
+                    }),
+                    /*#__PURE__*/ jsx(Skeleton.Text, {
+                        "aria-hidden": "true",
+                        className: styles.pendingLine(),
+                        containerClassName: styles.pending(),
+                        isLoaded: false,
+                        noOfLines: 2,
+                        size: "sm"
+                    })
+                ]
+            }) : null,
+            "on-request" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: styles.primaryRow(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: styles.amount(),
+                            children: label
+                        })
+                    }),
+                    detail ? /*#__PURE__*/ jsx("span", {
+                        className: styles.detail(),
+                        children: detail
+                    }) : null
+                ]
+            }) : null,
+            "known" === state || "from" === state || "discounted" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: styles.primaryRow(),
+                        children: [
+                            "from" === state ? /*#__PURE__*/ jsx("span", {
+                                className: styles.prefix(),
+                                children: prefix
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                className: styles.amount(),
+                                children: amountLabel
+                            }),
+                            "discounted" === state ? /*#__PURE__*/ jsxs("del", {
+                                className: styles.original(),
+                                children: [
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "sr-only",
+                                        children: [
+                                            originalSrLabel,
+                                            " "
+                                        ]
+                                    }),
+                                    originalLabel
+                                ]
+                            }) : null,
+                            "discounted" === state && discountLabel ? /*#__PURE__*/ jsx(Badge, {
+                                size: "sm",
+                                variant: "discount",
+                                children: discountLabel
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(PriceMetadata, {
+                        taxLabel: taxLabel,
+                        unitLabel: unitLabel
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+export { PriceBlock };

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":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAA;AAEnD,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EACd,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAyGtC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,WAAW,CAAC,KAAK,EACjB,OAAO,GAAG,cAAc,GAAG,IAAI,CAChC,GACC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAEH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAW,EACX,WAAW,EACX,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,eAAsB,EACtB,aAAa,EACb,gBAAuB,EACvB,WAAkB,EAClB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,GAAG,EACH,SAAS,EACT,MAAgB,EAChB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAiEnB;yBA9Fe,YAAY;0DA0GzB,wBAAwB;8CA0BxB,sBAAsB;2JAyDtB,iCAAiC;2JAmEjC,iCAAiC;iDAoCjC,yBAAyB;mEAwBzB,iCAAiC;;;AA3NpC,UAAU,wBAAyB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACxE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwBD,UAAU,sBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B;AAwBD,UAAU,iCACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAE5D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAA;IACrE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,SAAS,CAAA;IAG/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA+CD,UAAU,iCACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAE5D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAA;IACrE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,SAAS,CAAA;IAG/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA+CD,UAAU,yBAA0B,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACzE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAoBD,UAAU,iCACR,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}
+{"version":3,"file":"numeric-input.d.ts","sourceRoot":"","sources":["../../../src/atoms/numeric-input.tsx"],"names":[],"mappings":"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"}

package/dist/src/molecules/availability-status.d.ts

@@ -0,0 +1,37 @@
+/**
+ * AvailabilityStatus — @techsio/ui-kit molecule.
+ *
+ * @component AvailabilityStatus
+ * @componentVersion v1.0.0
+ * @skill availability-status-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the availability-status-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import type { HTMLAttributes, Ref } from "react";
+import { type IconType } from "../atoms/icon.js";
+type AvailabilityStatusNativeProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type SettledAvailability = "available" | "limited" | "preorder" | "unavailable" | "unknown";
+type SettledAvailabilityProps = {
+    status: SettledAvailability;
+    label: string;
+    detail?: string;
+    icon?: IconType;
+    showIcon?: boolean;
+    pendingLabel?: never;
+};
+type PendingAvailabilityProps = {
+    status: "pending";
+    pendingLabel: string;
+    label?: never;
+    detail?: never;
+    icon?: never;
+    showIcon?: never;
+};
+export type AvailabilityStatusProps = AvailabilityStatusNativeProps & (SettledAvailabilityProps | PendingAvailabilityProps);
+export declare function AvailabilityStatus({ status, label, detail, icon, showIcon, pendingLabel, className, ref, ...props }: AvailabilityStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=availability-status.d.ts.map

package/dist/src/molecules/availability-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-status.d.ts","sourceRoot":"","sources":["../../../src/molecules/availability-status.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAqDnD,KAAK,6BAA6B,GAAG,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACV,GAAG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CACzB,CAAA;AAED,KAAK,mBAAmB,GACrB,WAAW,GACX,SAAS,GACT,UAAU,GACV,aAAa,GACb,SAAS,CAAA;AAEZ,KAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,mBAAmB,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAA;CACpB,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GAClE,CAAC,wBAAwB,GAAG,wBAAwB,CAAC,CAAA;AAEtD,wBAAgB,kBAAkB,CAAC,EAClC,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAe,EACf,YAAY,EACZ,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACR,EAAE,uBAAuB,2CAsCzB"}

package/dist/src/molecules/price-block.d.ts

@@ -0,0 +1,84 @@
+/**
+ * PriceBlock — @techsio/ui-kit molecule.
+ *
+ * @component PriceBlock
+ * @componentVersion v1.0.0
+ * @skill price-block-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the price-block-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import type { HTMLAttributes, Ref } from "react";
+type PriceBlockNativeProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type KnownPriceProps = {
+    state: "known";
+    amountLabel: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    prefix?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type FromPriceProps = {
+    state: "from";
+    prefix: string;
+    amountLabel: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type DiscountedPriceProps = {
+    state: "discounted";
+    amountLabel: string;
+    originalLabel: string;
+    originalSrLabel: string;
+    discountLabel?: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    prefix?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type OnRequestPriceProps = {
+    state: "on-request";
+    label: string;
+    detail?: string;
+    amountLabel?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    taxLabel?: never;
+    unitLabel?: never;
+    prefix?: never;
+    pendingLabel?: never;
+};
+type PendingPriceProps = {
+    state: "pending";
+    pendingLabel: string;
+    amountLabel?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    taxLabel?: never;
+    unitLabel?: never;
+    prefix?: never;
+    label?: never;
+    detail?: never;
+};
+export type PriceBlockProps = PriceBlockNativeProps & (KnownPriceProps | FromPriceProps | DiscountedPriceProps | OnRequestPriceProps | PendingPriceProps);
+export declare function PriceBlock({ state, amountLabel, originalLabel, originalSrLabel, discountLabel, taxLabel, unitLabel, prefix, label, detail, pendingLabel, className, ref, ...props }: PriceBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=price-block.d.ts.map

package/dist/src/molecules/price-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-block.d.ts","sourceRoot":"","sources":["../../../src/molecules/price-block.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;AAwRtD,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/availability-status.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AvailabilityStatus, type AvailabilityStatusProps } from "../../src/molecules/availability-status.js";
+declare const meta: Meta<typeof AvailabilityStatus>;
+export default meta;
+type Story = Omit<StoryObj<typeof meta>, "args"> & {
+    args?: Partial<AvailabilityStatusProps>;
+};
+type PlaygroundStory = StoryObj<Extract<AvailabilityStatusProps, {
+    label: string;
+}>>;
+export declare const Playground: PlaygroundStory;
+export declare const States: Story;
+export declare const LongContent: Story;
+//# sourceMappingURL=availability-status.stories.d.ts.map

package/dist/stories/molecules/availability-status.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-status.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/availability-status.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC7B,MAAM,yCAAyC,CAAA;AAGhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAOzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,eAAe,GAAG,QAAQ,CAC7B,OAAO,CAAC,uBAAuB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACpD,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,eAqBxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA6CpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqBzB,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/price-block.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PriceBlock, type PriceBlockProps } from "../../src/molecules/price-block.js";
+declare const meta: Meta<typeof PriceBlock>;
+export default meta;
+type Story = Omit<StoryObj<typeof meta>, "args"> & {
+    args?: Partial<PriceBlockProps>;
+};
+type PlaygroundStory = StoryObj<Extract<PriceBlockProps, {
+    state: "discounted";
+}>>;
+export declare const Playground: PlaygroundStory;
+export declare const States: Story;
+export declare const LongContent: Story;
+//# sourceMappingURL=price-block.stories.d.ts.map

package/dist/stories/molecules/price-block.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-block.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/price-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,MAAM,iCAAiC,CAAA;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAC/B,CAAA;AACD,KAAK,eAAe,GAAG,QAAQ,CAC9B,OAAO,CAAC,eAAe,EAAE;IAAE,KAAK,EAAE,YAAY,CAAA;CAAE,CAAC,CACjD,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,eAuBxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkCpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,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/price-availability.spec.d.ts

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

package/dist/test/price-availability.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-availability.spec.d.ts","sourceRoot":"","sources":["../../test/price-availability.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.52.0",
+  "version": "0.54.0",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/components/components.css

@@ -18,6 +18,7 @@
 @import "./atoms/_tooltip.css";
 
 @import "./molecules/_accordion.css";
+@import "./molecules/_availability-status.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
 @import "./molecules/_cascade-select.css";
@@ -32,6 +33,8 @@
 @import "./molecules/_form-error-summary.css";
 @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/_availability-status.css

@@ -0,0 +1,74 @@
+@theme static {
+  /* Reference layer */
+  --color-availability-status-available: var(--color-fg-status-success);
+  --color-availability-status-limited: var(--color-fg-status-warning);
+  --color-availability-status-preorder: var(--color-fg-accent-primary);
+  --color-availability-status-unavailable: var(--color-fg-status-error);
+  --color-availability-status-unknown: var(--color-fg-secondary);
+  --color-availability-status-muted: var(--color-fg-secondary);
+
+  --spacing-availability-status-compact: var(--spacing-100);
+  --spacing-availability-status-icon-base: var(--spacing-250);
+  --spacing-availability-status-pending-line-base: var(--spacing-250);
+  --spacing-availability-status-pending-width-base: calc(
+    var(--spacing-950) *
+    2
+  );
+
+  /* Derived color layer */
+  --color-availability-status-fg-available: var(
+    --color-availability-status-available
+  );
+  --color-availability-status-fg-limited: var(
+    --color-availability-status-limited
+  );
+  --color-availability-status-fg-preorder: var(
+    --color-availability-status-preorder
+  );
+  --color-availability-status-fg-unavailable: var(
+    --color-availability-status-unavailable
+  );
+  --color-availability-status-fg-unknown: var(
+    --color-availability-status-unknown
+  );
+  --color-availability-status-detail-fg: var(--color-availability-status-muted);
+
+  /* Derived layout and typography layer */
+  --gap-availability-status: var(--spacing-availability-status-compact);
+  --gap-availability-status-summary: var(--spacing-availability-status-compact);
+  --gap-availability-status-content: var(--spacing-availability-status-compact);
+  --gap-availability-status-pending: var(--spacing-availability-status-compact);
+  --spacing-availability-status-icon: var(
+    --spacing-availability-status-icon-base
+  );
+  --spacing-availability-status-pending-line: var(
+    --spacing-availability-status-pending-line-base
+  );
+  --spacing-availability-status-pending: var(
+    --spacing-availability-status-pending-width-base
+  );
+
+  --text-availability-status-label-size: var(--text-sm);
+  --text-availability-status-detail-size: var(--text-xs);
+  --font-weight-availability-status-label: var(--font-weight-medium);
+}
+
+@utility token-icon-availability-status-available {
+  @apply token-icon-check-circle;
+}
+
+@utility token-icon-availability-status-limited {
+  @apply token-icon-alert;
+}
+
+@utility token-icon-availability-status-preorder {
+  @apply icon-[mdi--clock-outline];
+}
+
+@utility token-icon-availability-status-unavailable {
+  @apply icon-[mdi--close-circle-outline];
+}
+
+@utility token-icon-availability-status-unknown {
+  @apply icon-[mdi--help-circle-outline];
+}

package/src/tokens/components/molecules/_price-block.css

@@ -0,0 +1,35 @@
+@theme static {
+  /* Reference layer */
+  --color-price-block-content: var(--color-fg-primary);
+  --color-price-block-muted: var(--color-fg-secondary);
+
+  --spacing-price-block-compact: var(--spacing-50);
+  --spacing-price-block-related: var(--spacing-100);
+  --spacing-price-block-pending-line-base: var(--spacing-350);
+  --spacing-price-block-pending-width-base: calc(var(--spacing-950) * 2);
+
+  /* Derived color layer */
+  --color-price-block-amount-fg: var(--color-price-block-content);
+  --color-price-block-prefix-fg: var(--color-price-block-muted);
+  --color-price-block-original-fg: var(--color-price-block-muted);
+  --color-price-block-metadata-fg: var(--color-price-block-muted);
+  --color-price-block-separator-fg: var(--color-price-block-muted);
+  --color-price-block-detail-fg: var(--color-price-block-muted);
+
+  /* Derived layout and typography layer */
+  --gap-price-block: var(--spacing-price-block-related);
+  --gap-price-block-primary: var(--spacing-price-block-related);
+  --gap-price-block-metadata: var(--spacing-price-block-compact);
+  --gap-price-block-pending: var(--spacing-price-block-compact);
+  --spacing-price-block-pending-line: var(
+    --spacing-price-block-pending-line-base
+  );
+  --spacing-price-block-pending: var(--spacing-price-block-pending-width-base);
+
+  --text-price-block-amount-size: var(--text-lg);
+  --text-price-block-prefix-size: var(--text-sm);
+  --text-price-block-original-size: var(--text-sm);
+  --text-price-block-metadata-size: var(--text-xs);
+  --text-price-block-detail-size: var(--text-sm);
+  --font-weight-price-block-amount: var(--font-weight-medium);
+}

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);
+}