@rovula/ui 0.0.76 → 0.0.77

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -362,6 +362,13 @@ declare const meta: {
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts

@@ -352,6 +352,13 @@ declare const meta: {
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { InputProps as TextInputProps } from "../TextInput/TextInput";
+export type NumberInputProps = Omit<TextInputProps, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: number | string;
+    defaultValue?: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    hideControls?: boolean;
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    formatDisplay?: boolean;
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    prefix?: string;
+    suffix?: string;
+    onChange?: (value: number | undefined) => void;
+    onValueChange?: (value: string) => void;
+};
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "type" | "onChange" | "value" | "defaultValue"> & {
+    value?: number | string;
+    defaultValue?: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    hideControls?: boolean;
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    formatDisplay?: boolean;
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    prefix?: string;
+    suffix?: string;
+    onChange?: (value: number | undefined) => void;
+    onValueChange?: (value: string) => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/dist/cjs/types/components/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput } from "@/index";
+declare const meta: Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const WithMinMax: Story;
+export declare const WithStep: Story;
+export declare const IntegerOnly: Story;
+export declare const ControllWithOutLine: Story;
+export declare const WithoutControls: Story;
+export declare const ErrorState: Story;
+export declare const HelperText: Story;
+export declare const Disabled: Story;
+export declare const FormattedNumber: Story;
+export declare const CurrencyFormat: Story;
+export declare const CurrencyThailand: Story;
+export declare const CustomSeparators: Story;

package/dist/cjs/types/components/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput, default } from "./NumberInput";
+export type { NumberInputProps } from "./NumberInput";

package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts

@@ -279,9 +279,9 @@ declare const meta: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         required?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
         loop?: boolean | undefined;
         asChild?: boolean | undefined;
-        onValueChange?: ((value: string) => void) | undefined;
         ref?: React.LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -314,6 +314,13 @@ declare const meta: {
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/components/Slider/Slider.stories.d.ts

@@ -289,10 +289,10 @@ declare const meta: {
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        onValueChange?: ((value: number[]) => void) | undefined;
         asChild?: boolean | undefined;
         inverted?: boolean | undefined;
         minStepsBetweenThumbs?: number | undefined;
-        onValueChange?: ((value: number[]) => void) | undefined;
         onValueCommit?: ((value: number[]) => void) | undefined;
         ref?: React.LegacyRef<HTMLSpanElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/cjs/types/components/TextInput/TextInput.d.ts

@@ -21,6 +21,13 @@ export type InputProps = {
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
@@ -48,6 +55,13 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -23,6 +23,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string;
         labelClassName?: string;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        };
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
         renderStartIcon?: () => React.ReactNode;
@@ -54,6 +61,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/index.d.ts

@@ -2,6 +2,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
@@ -38,6 +39,7 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,254 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from "react";
+import { TextInput, } from "../TextInput/TextInput";
+import { ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
+export const NumberInput = forwardRef((_a, ref) => {
+    var _b;
+    var { value, defaultValue, min, max, step = 1, precision, hideControls = false, allowDecimal = true, allowNegative = true, formatDisplay = false, thousandSeparator = ",", decimalSeparator = ".", prefix = "", suffix = "", disabled = false, onChange, onValueChange, className, size = "md" } = _a, props = __rest(_a, ["value", "defaultValue", "min", "max", "step", "precision", "hideControls", "allowDecimal", "allowNegative", "formatDisplay", "thousandSeparator", "decimalSeparator", "prefix", "suffix", "disabled", "onChange", "onValueChange", "className", "size"]);
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "").toString());
+    const [isFocused, setIsFocused] = useState(false);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    // Helper function to remove formatting
+    const unformatNumber = useCallback((formattedValue) => {
+        let cleaned = formattedValue;
+        // Remove prefix and suffix
+        if (prefix)
+            cleaned = cleaned.replace(prefix, "");
+        if (suffix)
+            cleaned = cleaned.replace(suffix, "");
+        // Remove thousand separators
+        if (thousandSeparator) {
+            cleaned = cleaned.split(thousandSeparator).join("");
+        }
+        // Replace decimal separator with standard dot
+        if (decimalSeparator !== ".") {
+            cleaned = cleaned.replace(decimalSeparator, ".");
+        }
+        return cleaned.trim();
+    }, [prefix, suffix, thousandSeparator, decimalSeparator]);
+    // Helper function to format number for display
+    const formatNumber = useCallback((numValue) => {
+        if (!formatDisplay || numValue === "" || numValue === "-")
+            return numValue;
+        const num = parseFloat(numValue);
+        if (isNaN(num))
+            return numValue;
+        let formatted = num.toString();
+        // Apply precision formatting
+        if (precision !== undefined) {
+            formatted = num.toFixed(precision);
+        }
+        // Split into integer and decimal parts
+        const parts = formatted.split(".");
+        let integerPart = parts[0];
+        const decimalPart = parts[1];
+        // Add thousand separators
+        if (thousandSeparator) {
+            integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+        }
+        // Combine with decimal separator
+        formatted = decimalPart
+            ? `${integerPart}${decimalSeparator}${decimalPart}`
+            : integerPart;
+        // Add prefix and suffix
+        if (prefix)
+            formatted = `${prefix}${formatted}`;
+        if (suffix)
+            formatted = `${formatted}${suffix}`;
+        return formatted;
+    }, [
+        formatDisplay,
+        precision,
+        thousandSeparator,
+        decimalSeparator,
+        prefix,
+        suffix,
+    ]);
+    const validateAndFormat = useCallback((val) => {
+        if (val === "" || val === "-")
+            return val;
+        let numValue = parseFloat(val);
+        if (isNaN(numValue))
+            return internalValue;
+        // Apply min/max constraints
+        if (min !== undefined && numValue < min)
+            numValue = min;
+        if (max !== undefined && numValue > max)
+            numValue = max;
+        // Apply precision
+        if (precision !== undefined) {
+            numValue = parseFloat(numValue.toFixed(precision));
+        }
+        return numValue.toString();
+    }, [min, max, precision, internalValue]);
+    const handleInputChange = useCallback((e) => {
+        let inputValue = e.target.value;
+        // Unformat the input if formatting is enabled
+        if (formatDisplay) {
+            inputValue = unformatNumber(inputValue);
+        }
+        // Allow empty input
+        if (inputValue === "") {
+            setInternalValue("");
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+            return;
+        }
+        // Allow negative sign at the start
+        if (allowNegative && inputValue === "-") {
+            setInternalValue("-");
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("-");
+            return;
+        }
+        // Filter non-numeric characters based on settings
+        const regex = allowDecimal
+            ? allowNegative
+                ? /^-?\d*\.?\d*$/
+                : /^\d*\.?\d*$/
+            : allowNegative
+                ? /^-?\d*$/
+                : /^\d*$/;
+        if (!regex.test(inputValue)) {
+            return;
+        }
+        setInternalValue(inputValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(inputValue);
+        // Only call onChange with a valid number
+        const numValue = parseFloat(inputValue);
+        if (!isNaN(numValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(numValue);
+        }
+    }, [
+        allowDecimal,
+        allowNegative,
+        formatDisplay,
+        unformatNumber,
+        onChange,
+        onValueChange,
+    ]);
+    const handleFocus = useCallback((e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props]);
+    const handleBlur = useCallback((e) => {
+        var _a;
+        setIsFocused(false);
+        const formatted = validateAndFormat(internalValue);
+        setInternalValue(formatted);
+        const numValue = parseFloat(formatted);
+        if (!isNaN(numValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(numValue);
+        }
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [internalValue, validateAndFormat, onChange, props]);
+    const increment = useCallback((e) => {
+        if (disabled)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        const currentValue = parseFloat(internalValue) || 0;
+        let newValue = currentValue + step;
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        const formatted = validateAndFormat(newValue.toString());
+        setInternalValue(formatted);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(formatted));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatted);
+    }, [
+        internalValue,
+        step,
+        max,
+        disabled,
+        validateAndFormat,
+        onChange,
+        onValueChange,
+    ]);
+    const decrement = useCallback((e) => {
+        if (disabled)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        const currentValue = parseFloat(internalValue) || 0;
+        let newValue = currentValue - step;
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        const formatted = validateAndFormat(newValue.toString());
+        setInternalValue(formatted);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(formatted));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatted);
+    }, [
+        internalValue,
+        step,
+        min,
+        disabled,
+        validateAndFormat,
+        onChange,
+        onValueChange,
+    ]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        switch (e.key) {
+            case "ArrowUp":
+                increment(e);
+                break;
+            case "ArrowDown":
+                decrement(e);
+                break;
+            case "Enter":
+                e.currentTarget.blur();
+                break;
+            default:
+                break;
+        }
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [increment, decrement, props]);
+    // Sync internal value with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value.toString());
+        }
+    }, [value]);
+    // Get the display value (formatted when not focused)
+    const displayValue = React.useMemo(() => {
+        if (isFocused || !formatDisplay) {
+            return internalValue;
+        }
+        return formatNumber(internalValue);
+    }, [isFocused, formatDisplay, internalValue, formatNumber]);
+    const controlsSize = {
+        sm: "w-3 h-3",
+        md: "w-4 h-4",
+        lg: "w-6 h-6",
+    }[size];
+    const paddingSize = {
+        sm: "absolute top-0.5",
+        md: "absolute top-1",
+        lg: "absolute top-1",
+    }[size];
+    const renderControls = () => {
+        if (hideControls)
+            return null;
+        return (_jsxs("div", { className: cn("flex flex-col", props.iconMode === "flat" && paddingSize), children: [_jsx("button", { type: "button", onClick: increment, disabled: disabled ||
+                        (max !== undefined && parseFloat(internalValue) >= max), className: cn(" hover:bg-input-active-stroke/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-full text-input-filled-text"), tabIndex: -1, children: _jsx(ChevronUpIcon, { className: controlsSize }) }), _jsx("button", { type: "button", onClick: decrement, disabled: disabled ||
+                        (min !== undefined && parseFloat(internalValue) <= min), className: cn(" hover:bg-input-active-stroke/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-full text-input-filled-text"), tabIndex: -1, children: _jsx(ChevronDownIcon, { className: controlsSize }) })] }));
+    };
+    return (_jsx(TextInput, Object.assign({}, props, { ref: inputRef, type: "text", inputMode: "decimal", value: displayValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, size: size, hasClearIcon: false, endIcon: renderControls(), className: cn(className) })));
+});
+NumberInput.displayName = "NumberInput";
+export default NumberInput;

package/dist/components/NumberInput/NumberInput.stories.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberInput } from "@/index";
+const meta = {
+    title: "Components/NumberInput",
+    component: NumberInput,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-base-bg2", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["sm", "md", "lg"],
+        },
+        rounded: {
+            control: { type: "radio" },
+            options: ["none", "normal", "full"],
+        },
+        variant: {
+            control: { type: "radio" },
+            options: ["flat", "outline", "underline"],
+        },
+        isFloatingLabel: { control: "boolean" },
+        fullwidth: { control: "boolean" },
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+        hideControls: { control: "boolean" },
+        allowDecimal: { control: "boolean" },
+        allowNegative: { control: "boolean" },
+    },
+    args: {
+        label: "Number",
+        placeholder: "Enter a number",
+        size: "md",
+        rounded: "normal",
+        variant: "outline",
+        isFloatingLabel: true,
+        fullwidth: true,
+        disabled: false,
+        error: false,
+        required: true,
+        hideControls: false,
+        allowDecimal: true,
+        allowNegative: true,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const WithMinMax = {
+    args: {
+        label: "Age",
+        min: 0,
+        max: 120,
+        helperText: "Age must be between 0 and 120",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const WithStep = {
+    args: {
+        label: "Rating",
+        min: 0,
+        max: 5,
+        step: 0.5,
+        defaultValue: 2.5,
+        helperText: "Use 0.5 increments",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const IntegerOnly = {
+    args: {
+        label: "Quantity",
+        allowDecimal: false,
+        min: 1,
+        defaultValue: 1,
+        helperText: "Integer values only",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const ControllWithOutLine = {
+    args: {
+        label: "Quantity",
+        allowDecimal: false,
+        iconMode: "flat",
+        min: 1,
+        defaultValue: 1,
+        helperText: "Integer values only",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const WithoutControls = {
+    args: {
+        label: "Custom Number",
+        hideControls: true,
+        helperText: "No increment/decrement buttons",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const ErrorState = {
+    args: {
+        error: true,
+        errorMessage: "Value exceeds maximum allowed",
+        defaultValue: 150,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const HelperText = {
+    args: {
+        helperText: "Enter a number between 0 and 100",
+        min: 0,
+        max: 100,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+        defaultValue: 50,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const FormattedNumber = {
+    args: {
+        label: "Amount",
+        formatDisplay: true,
+        precision: 2,
+        defaultValue: 1234567.89,
+        helperText: "Number with thousand separator",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const CurrencyFormat = {
+    args: {
+        label: "Price",
+        formatDisplay: true,
+        precision: 2,
+        prefix: "$",
+        defaultValue: 1230.0,
+        min: 0,
+        helperText: "Currency format with $ prefix",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const CurrencyThailand = {
+    args: {
+        label: "ราคา",
+        formatDisplay: true,
+        precision: 2,
+        suffix: " ฿",
+        defaultValue: 15000.5,
+        min: 0,
+        helperText: "Thai Baht format",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const CustomSeparators = {
+    args: {
+        label: "European Format",
+        formatDisplay: true,
+        precision: 2,
+        thousandSeparator: ".",
+        decimalSeparator: ",",
+        defaultValue: 9999.99,
+        helperText: "European number format (9.999,99)",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(NumberInput, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(NumberInput, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(NumberInput, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};

package/dist/components/NumberInput/index.js

@@ -0,0 +1 @@
+export { NumberInput, default } from "./NumberInput";