@rovula/ui 0.0.75 → 0.0.77

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/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;
 }
@@ -4086,6 +4092,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 +5174,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;
 }