@rovula/ui 0.0.76 → 0.0.78

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";

package/dist/components/TextInput/TextInput.js

@@ -15,7 +15,7 @@ import { helperTextVariant, iconSearchWrapperVariant, iconVariant, iconWrapperVa
 import { XCircleIcon, ExclamationCircleIcon, MagnifyingGlassIcon, } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
@@ -86,12 +86,13 @@ export const TextInput = forwardRef((_a, ref) => {
     const startIconElement = useMemo(() => {
         if (!hasLeftSectionIcon)
             return;
-        if (renderStartIcon)
-            return renderStartIcon();
+        if (renderStartIcon) {
+            return (_jsx("div", { className: cn(iconSearchWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: renderStartIcon() }));
+        }
         if (iconMode === "flat") {
-            return (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx("div", { className: iconClassname, onClick: handleOnClickLeftSectionIcon, children: startIcon }) }));
+            return (_jsx("div", { className: cn(iconSearchWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx("div", { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickLeftSectionIcon, children: startIcon }) }));
         }
-        return (_jsx("div", { className: startIconWrapperClassname, onClick: handleOnClickLeftSectionIcon, children: startIcon }));
+        return (_jsx("div", { className: cn(startIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.startIconWrapper), onClick: handleOnClickLeftSectionIcon, children: startIcon }));
     }, [
         hasLeftSectionIcon,
         startIcon,
@@ -105,12 +106,13 @@ export const TextInput = forwardRef((_a, ref) => {
     const endIconElement = useMemo(() => {
         if (!hasRightSectionIcon)
             return;
-        if (renderEndIcon)
-            return renderEndIcon();
+        if (renderEndIcon) {
+            return (_jsx("div", { className: cn(iconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: renderEndIcon() }));
+        }
         if (iconMode === "flat") {
-            return (_jsx("div", { className: cn(iconWrapperClassname, "flex"), children: _jsx("div", { className: iconClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }) }));
+            return (_jsx("div", { className: cn(iconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: _jsx("div", { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickRightSectionIcon, children: endIcon }) }));
         }
-        return (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }));
+        return (_jsx("div", { className: cn(endIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.endIconWrapper), onClick: handleOnClickRightSectionIcon, children: endIcon }));
     }, [
         hasRightSectionIcon,
         endIcon,
@@ -121,9 +123,9 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(iconSearchWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(MagnifyingGlassIcon, { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(iconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(XCircleIcon, { type: "button", className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
                                 }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });

package/dist/components/Toast/Toast.styles.js

@@ -18,7 +18,7 @@ export const toastVariants = cva([
         variant: "success",
     },
 });
-export const toastViewportVariants = cva(["fixed z-[100] flex w-auto flex-col-reverse px-4"], {
+export const toastViewportVariants = cva(["fixed z-[1000] flex w-auto flex-col-reverse px-4"], {
     variants: {
         position: {
             "top-center": "top-[40px] left-0 right-0 justify-self-center",

package/dist/esm/bundle.css

@@ -638,6 +638,12 @@ input[type=number] {
 .top-0{
   top: 0px;
 }
+.top-0\.5{
+  top: 0.125rem;
+}
+.top-1{
+  top: 0.25rem;
+}
 .top-4{
   top: 1rem;
 }
@@ -659,6 +665,9 @@ input[type=number] {
 .z-50{
   z-index: 50;
 }
+.z-\[1000\]{
+  z-index: 1000;
+}
 .z-\[100\]{
   z-index: 100;
 }
@@ -987,6 +996,9 @@ input[type=number] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-2xl{
+  max-width: 42rem;
+}
 .max-w-\[300px\]{
   max-width: 300px;
 }
@@ -996,6 +1008,9 @@ input[type=number] {
 .max-w-lg{
   max-width: 32rem;
 }
+.max-w-md{
+  max-width: 28rem;
+}
 .flex-1{
   flex: 1 1 0%;
 }
@@ -1863,6 +1878,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-gray-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -3159,6 +3178,10 @@ input[type=number] {
   line-height: var(--label-label2-line-height, 10px);
   font-weight: var(--label-label2-weight, 400);
 }
+.text-lg{
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -3252,6 +3275,9 @@ input[type=number] {
 .font-medium{
   font-weight: 500;
 }
+.font-semibold{
+  font-weight: 600;
+}
 .uppercase{
   text-transform: uppercase;
 }
@@ -3452,6 +3478,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.text-gray-700{
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
 .text-green-500{
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -4086,6 +4116,9 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-input-active-stroke\/10:hover{
+  background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
+}
 .hover\:bg-input-disable-bg:hover{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5165,6 +5198,9 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
+.disabled\:opacity-30:disabled{
+  opacity: 0.3;
+}
 .disabled\:opacity-50:disabled{
   opacity: 0.5;
 }
@@ -5814,6 +5850,10 @@ input[type=number] {
   .md\:right-\[40px\]{
     right: 40px;
   }
+
+  .md\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]){
   width: 1rem;