@xanui/ui 1.1.37 → 1.1.40

package/Image/index.js

@@ -1,27 +1,25 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import { Tag } from '@xanui/core';
 
 const Image = React.forwardRef((_a, ref) => {
-    var { children, src, alt, errorView } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "errorView"]);
-    const [faild, setFaild] = React.useState();
+    var { children, src, alt, errorView } = _a, rest = __rest(_a, ["children", "src", "alt", "errorView"]);
+    const [faild, setFaild] = useState();
     if (faild === false) {
         let t = errorView || (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || children;
-        return (jsxRuntime.jsx(core.Tag, Object.assign({ src: src }, rest, { sxr: {
+        return (jsx(Tag, Object.assign({ src: src }, rest, { sxr: {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
             }, component: "div", baseClass: 'image', ref: ref, children: t })));
     }
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ objectFit: "cover" }, rest, { component: "img", alt: alt, src: src, baseClass: 'image', onError: (e) => {
+    return (jsx(Tag, Object.assign({ objectFit: "cover" }, rest, { component: "img", alt: alt, src: src, baseClass: 'image', onError: (e) => {
             setFaild(false);
             rest.onError && rest.onError(e);
         }, ref: ref })));
 });
 
-module.exports = Image;
+export { Image as default };
 //# sourceMappingURL=index.js.map

package/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n\r\n    if (faild === false) {\r\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n        return (\r\n            <Tag\r\n                src={src}\r\n                {...rest as any}\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n                component=\"div\"\r\n                baseClass='image'\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            objectFit=\"cover\"\r\n            {...rest as any}\r\n            component=\"img\"\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='image'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                rest.onError && rest.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n\r\n    if (faild === false) {\r\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n        return (\r\n            <Tag\r\n                src={src}\r\n                {...rest as any}\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n                component=\"div\"\r\n                baseClass='image'\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            objectFit=\"cover\"\r\n            {...rest as any}\r\n            component=\"img\"\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='image'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                rest.onError && rest.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}

package/Input/index.cjs

@@ -0,0 +1,144 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../Label/index.cjs');
+
+const Input = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { value, refs } = _a, props = tslib.__rest(_a, ["value", "refs"]);
+    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, label, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "label", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (iconPlacement)
+        _p.iconPlacement = iconPlacement;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (helperText)
+        _p.helperText = helperText;
+    if (size)
+        _p.size = size;
+    if (rows)
+        _p.rows = rows;
+    if (minRows)
+        _p.minRows = minRows;
+    if (maxRows)
+        _p.maxRows = maxRows;
+    const p = core.useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    iconPlacement = p.iconPlacement;
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
+    helperText = p.helperText;
+    size = (_d = p.size) !== null && _d !== void 0 ? _d : 'medium';
+    rows = p.rows;
+    minRows = p.minRows;
+    maxRows = p.maxRows;
+    iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
+    if (!value)
+        iconPlacement = 'center';
+    const [_focused, setFocused] = React.useState(false);
+    let _focus = focused || _focused;
+    const inputRef = React.useRef(null);
+    const inputMergeRef = core.useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
+    React.useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [autoFocus]);
+    let _rows = React.useMemo(() => {
+        if (rows)
+            return rows;
+        if (value && multiline) {
+            let lines = value.split(`\n`).length;
+            if (minRows && minRows > lines) {
+                return minRows;
+            }
+            else if (maxRows && maxRows < lines) {
+                return maxRows;
+            }
+            else {
+                return lines;
+            }
+        }
+    }, [value]) || 1;
+    const sizes = {
+        small: {
+            height: 38,
+            gap: .5,
+            fontSize: 'button',
+        },
+        medium: {
+            height: 46,
+            gap: 1,
+            fontSize: "text"
+        },
+        large: {
+            height: 52,
+            gap: 1,
+            fontSize: 'big'
+        }
+    };
+    const _size = sizes[size];
+    let borderColor = _focus ? color : (variant === "fill" ? "transparent" : "divider");
+    borderColor = error ? "danger.primary" : borderColor;
+    let multiprops = {};
+    if (multiline) {
+        multiprops = {
+            rows: _rows,
+            sx: {
+                resize: "none"
+            }
+        };
+    }
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ width: fullWidth ? "100%" : "auto" }, rest, { ref: ref, baseClass: "input-wrapper", sxr: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: .5,
+        }, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
+                    width: "100%",
+                    overflow: "hidden",
+                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                                "-webkit-text-fill-color": "text.primary",
+                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
+                                transition: "background-color 5000s ease-in-out 0s"
+                            }, "& textarea": {
+                                resize: "none"
+                            } }), disabled: disabled || false, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
+                                    border: 0,
+                                    outline: 0,
+                                    bgcolor: "transparent",
+                                    color: error ? "danger.primary" : "text.primary",
+                                    fontSize: _size.fontSize,
+                                    height: multiline ? "auto" : _size.height + "px!important",
+                                    width: "100%",
+                                    maxHeight: 200,
+                                }, value: value, onChange: onChange, onFocus: (e) => {
+                                    focused !== null && focused !== void 0 ? focused : setFocused(true);
+                                    onFocus && onFocus(e);
+                                }, onBlur: (e) => {
+                                    focused !== null && focused !== void 0 ? focused : setFocused(false);
+                                    onBlur && onBlur(e);
+                                }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
+                            color: error ? "danger.primary" : "text.primary",
+                            fontSize: "small",
+                            lineHeight: "text",
+                            fontWeight: 'text',
+                            pl: .5,
+                        }, children: helperText }))] }))] })));
+});
+
+module.exports = Input;
+//# sourceMappingURL=index.cjs.map

package/Input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n    value?: string;\r\n    type?: TagProps<'input'>['type'];\r\n    name?: string;\r\n    placeholder?: string;\r\n    readOnly?: boolean;\r\n    autoFocus?: boolean;\r\n    autoComplete?: string;\r\n    label?: useBreakpointPropsType<string>;\r\n\r\n    onFocus?: (e: React.FocusEvent<any>) => void;\r\n    onBlur?: (e: React.FocusEvent<any>) => void;\r\n    onChange?: (e: React.ChangeEvent<any>) => void;\r\n    onInput?: (e: React.FormEvent<any>) => void;\r\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    fullWidth?: boolean;\r\n\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n    refs?: {\r\n        inputRoot?: React.Ref<\"div\">;\r\n        label?: React.Ref<\"label\">;\r\n        rootContainer?: React.Ref<\"div\">;\r\n        // startIcon?: React.Ref<ReactElement>;\r\n        // endIcon?: React.Ref<ReactElement>;\r\n        // inputContainer?: React.Ref<\"div\">;\r\n        input?: React.Ref<'input' | 'textarea'>;\r\n        helperText?: React.Ref<\"div\">;\r\n    };\r\n\r\n    slotProps?: {\r\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n        label?: Omit<LabelProps, \"children\">;\r\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n        input?: Partial<TagProps<T>>;\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        color,\r\n        label,\r\n        name,\r\n        placeholder,\r\n        type,\r\n        readOnly,\r\n        autoFocus,\r\n        autoComplete,\r\n        onFocus,\r\n        onBlur,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n\r\n        focused,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        fullWidth,\r\n        slotProps,\r\n\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    let _focus = focused || _focused\r\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n    useEffect(() => {\r\n        if (autoFocus) {\r\n            setTimeout(() => {\r\n                inputRef.current?.focus()\r\n            }, 100);\r\n        }\r\n    }, [autoFocus])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 46,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            width={fullWidth ? \"100%\" : \"auto\"}\r\n            {...rest}\r\n            ref={ref}\r\n            baseClass=\"input-wrapper\"\r\n            sxr={{\r\n                display: 'flex',\r\n                flexDirection: 'column',\r\n                gap: .5,\r\n            }}\r\n        >\r\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n            <Tag\r\n                {...slotProps?.inputRoot}\r\n                ref={refs?.inputRoot}\r\n                baseClass={'input-root'}\r\n                sxr={{\r\n                    width: \"100%\",\r\n                    overflow: \"hidden\",\r\n                }}\r\n            >\r\n                <Tag\r\n                    {...slotProps?.rootContainer}\r\n                    ref={refs?.rootContainer}\r\n                    baseClass='input-root-container'\r\n                    sxr={{\r\n                        width: \"100%\",\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                        flexWrap: \"nowrap\",\r\n                        transitionProperty: \"border, box-shadow, background\",\r\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                        border: variant === \"text\" ? 0 : \"1px solid\",\r\n                        borderColor: borderColor,\r\n                        borderRadius: 1,\r\n                        px: 1,\r\n                        // py: .5,\r\n                        ..._size,\r\n                        height: multiline ? \"auto\" : _size.height,\r\n                        minHeight: _size.height,\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n\r\n                        // ...(!!startIcon && {\r\n                        //     \"& :first-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: \"flex\",\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // }),\r\n\r\n                        // ...(!!endIcon && {\r\n                        //     \"& :last-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: 'flex',\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // })\r\n\r\n                    }}\r\n                    disabled={disabled || false}\r\n                >\r\n                    {/* {startIcon && <Tag\r\n                        {...slotProps?.startIcon}\r\n                        ref={refs?.startIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: \"flex\",\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-start-icon\"\r\n                    >{startIcon}</Tag>} */}\r\n                    {startIcon}\r\n                    {/* <Tag\r\n                        {...slotProps?.inputContainer}\r\n                        ref={refs?.inputContainer}\r\n                        baseClass='input-container'\r\n                        flex={1}\r\n                        sxr={{\r\n                            width: \"100%\",\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            flex: 1,\r\n                            minHeight: _size.height,\r\n                            \"& textarea\": {\r\n                                resize: \"none\"\r\n                            },\r\n                            \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                                \"-webkit-text-fill-color\": \"text.primary\",\r\n                                \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                                transition: \"background-color 5000s ease-in-out 0s\"\r\n                            } as any\r\n                        }}\r\n                    >\r\n                        \r\n                    </Tag> */}\r\n                    <Tag\r\n                        {...slotProps?.input}\r\n                        ref={inputMergeRef}\r\n                        baseClass='input'\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        onChange={onChange}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                        onKeyDown={onKeyDown}\r\n                        onKeyUp={onKeyUp}\r\n                        name={name}\r\n                        placeholder={placeholder}\r\n                        type={type}\r\n                        readOnly={readOnly}\r\n                        autoComplete={autoComplete}\r\n                    />\r\n                    {/* {endIcon && <Tag\r\n                        {...slotProps?.endIcon}\r\n                        ref={refs?.endIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: 'flex',\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-end-icon\"\r\n                    >{endIcon}</Tag>} */}\r\n                    {endIcon}\r\n                </Tag>\r\n                {helperText && <Tag\r\n                    {...slotProps?.helperText}\r\n                    ref={refs?.helperText}\r\n                    baseClass=\"input-helper-text\"\r\n                    sxr={{\r\n                        color: error ? \"danger.primary\" : \"text.primary\",\r\n                        fontSize: \"small\",\r\n                        lineHeight: \"text\",\r\n                        fontWeight: 'text',\r\n                        pl: .5,\r\n                    }}\r\n                >{helperText}</Tag>}\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/Input/index.js

@@ -1,16 +1,14 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index = require('../Label/index.js');
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useInterface, useBreakpointProps, useMergeRefs, Tag } from '@xanui/core';
+import Label from '../Label/index.js';
 
 const Input = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { value, refs } = _a, props = tslib.__rest(_a, ["value", "refs"]);
-    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, label, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "label", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
+    var { value, refs } = _a, props = __rest(_a, ["value", "refs"]);
+    let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, label, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "label", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -32,7 +30,7 @@ const Input = React.forwardRef((_a, ref) => {
         _p.minRows = minRows;
     if (maxRows)
         _p.maxRows = maxRows;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     startIcon = p.startIcon;
     endIcon = p.endIcon;
     iconPlacement = p.iconPlacement;
@@ -46,11 +44,11 @@ const Input = React.forwardRef((_a, ref) => {
     iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
     if (!value)
         iconPlacement = 'center';
-    const [_focused, setFocused] = React.useState(false);
+    const [_focused, setFocused] = useState(false);
     let _focus = focused || _focused;
     const inputRef = React.useRef(null);
-    const inputMergeRef = core.useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
-    React.useEffect(() => {
+    const inputMergeRef = useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
+    useEffect(() => {
         if (autoFocus) {
             setTimeout(() => {
                 var _a;
@@ -58,7 +56,7 @@ const Input = React.forwardRef((_a, ref) => {
             }, 100);
         }
     }, [autoFocus]);
-    let _rows = React.useMemo(() => {
+    let _rows = useMemo(() => {
         if (rows)
             return rows;
         if (value && multiline) {
@@ -103,20 +101,20 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ width: fullWidth ? "100%" : "auto" }, rest, { ref: ref, baseClass: "input-wrapper", sxr: {
+    return (jsxs(Tag, Object.assign({ width: fullWidth ? "100%" : "auto" }, rest, { ref: ref, baseClass: "input-wrapper", sxr: {
             display: 'flex',
             flexDirection: 'column',
             gap: .5,
-        }, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
+        }, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
                                 "-webkit-text-fill-color": "text.primary",
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
-                            } }), disabled: disabled || false, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
+                            } }), disabled: disabled || false, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                     border: 0,
                                     outline: 0,
                                     bgcolor: "transparent",
@@ -131,7 +129,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 }, onBlur: (e) => {
                                     focused !== null && focused !== void 0 ? focused : setFocused(false);
                                     onBlur && onBlur(e);
-                                }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
+                                }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
                             color: error ? "danger.primary" : "text.primary",
                             fontSize: "small",
                             lineHeight: "text",
@@ -140,5 +138,5 @@ const Input = React.forwardRef((_a, ref) => {
                         }, children: helperText }))] }))] })));
 });
 
-module.exports = Input;
+export { Input as default };
 //# sourceMappingURL=index.js.map

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n    value?: string;\r\n    type?: TagProps<'input'>['type'];\r\n    name?: string;\r\n    placeholder?: string;\r\n    readOnly?: boolean;\r\n    autoFocus?: boolean;\r\n    autoComplete?: string;\r\n    label?: useBreakpointPropsType<string>;\r\n\r\n    onFocus?: (e: React.FocusEvent<any>) => void;\r\n    onBlur?: (e: React.FocusEvent<any>) => void;\r\n    onChange?: (e: React.ChangeEvent<any>) => void;\r\n    onInput?: (e: React.FormEvent<any>) => void;\r\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    fullWidth?: boolean;\r\n\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n    refs?: {\r\n        inputRoot?: React.Ref<\"div\">;\r\n        label?: React.Ref<\"label\">;\r\n        rootContainer?: React.Ref<\"div\">;\r\n        // startIcon?: React.Ref<ReactElement>;\r\n        // endIcon?: React.Ref<ReactElement>;\r\n        // inputContainer?: React.Ref<\"div\">;\r\n        input?: React.Ref<'input' | 'textarea'>;\r\n        helperText?: React.Ref<\"div\">;\r\n    };\r\n\r\n    slotProps?: {\r\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n        label?: Omit<LabelProps, \"children\">;\r\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n        input?: Partial<TagProps<T>>;\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        color,\r\n        label,\r\n        name,\r\n        placeholder,\r\n        type,\r\n        readOnly,\r\n        autoFocus,\r\n        autoComplete,\r\n        onFocus,\r\n        onBlur,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n\r\n        focused,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        fullWidth,\r\n        slotProps,\r\n\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    let _focus = focused || _focused\r\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n    useEffect(() => {\r\n        if (autoFocus) {\r\n            setTimeout(() => {\r\n                inputRef.current?.focus()\r\n            }, 100);\r\n        }\r\n    }, [autoFocus])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 46,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            width={fullWidth ? \"100%\" : \"auto\"}\r\n            {...rest}\r\n            ref={ref}\r\n            baseClass=\"input-wrapper\"\r\n            sxr={{\r\n                display: 'flex',\r\n                flexDirection: 'column',\r\n                gap: .5,\r\n            }}\r\n        >\r\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n            <Tag\r\n                {...slotProps?.inputRoot}\r\n                ref={refs?.inputRoot}\r\n                baseClass={'input-root'}\r\n                sxr={{\r\n                    width: \"100%\",\r\n                    overflow: \"hidden\",\r\n                }}\r\n            >\r\n                <Tag\r\n                    {...slotProps?.rootContainer}\r\n                    ref={refs?.rootContainer}\r\n                    baseClass='input-root-container'\r\n                    sxr={{\r\n                        width: \"100%\",\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                        flexWrap: \"nowrap\",\r\n                        transitionProperty: \"border, box-shadow, background\",\r\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                        border: variant === \"text\" ? 0 : \"1px solid\",\r\n                        borderColor: borderColor,\r\n                        borderRadius: 1,\r\n                        px: 1,\r\n                        // py: .5,\r\n                        ..._size,\r\n                        height: multiline ? \"auto\" : _size.height,\r\n                        minHeight: _size.height,\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n\r\n                        // ...(!!startIcon && {\r\n                        //     \"& :first-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: \"flex\",\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // }),\r\n\r\n                        // ...(!!endIcon && {\r\n                        //     \"& :last-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: 'flex',\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // })\r\n\r\n                    }}\r\n                    disabled={disabled || false}\r\n                >\r\n                    {/* {startIcon && <Tag\r\n                        {...slotProps?.startIcon}\r\n                        ref={refs?.startIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: \"flex\",\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-start-icon\"\r\n                    >{startIcon}</Tag>} */}\r\n                    {startIcon}\r\n                    {/* <Tag\r\n                        {...slotProps?.inputContainer}\r\n                        ref={refs?.inputContainer}\r\n                        baseClass='input-container'\r\n                        flex={1}\r\n                        sxr={{\r\n                            width: \"100%\",\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            flex: 1,\r\n                            minHeight: _size.height,\r\n                            \"& textarea\": {\r\n                                resize: \"none\"\r\n                            },\r\n                            \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                                \"-webkit-text-fill-color\": \"text.primary\",\r\n                                \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                                transition: \"background-color 5000s ease-in-out 0s\"\r\n                            } as any\r\n                        }}\r\n                    >\r\n                        \r\n                    </Tag> */}\r\n                    <Tag\r\n                        {...slotProps?.input}\r\n                        ref={inputMergeRef}\r\n                        baseClass='input'\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        onChange={onChange}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                        onKeyDown={onKeyDown}\r\n                        onKeyUp={onKeyUp}\r\n                        name={name}\r\n                        placeholder={placeholder}\r\n                        type={type}\r\n                        readOnly={readOnly}\r\n                        autoComplete={autoComplete}\r\n                    />\r\n                    {/* {endIcon && <Tag\r\n                        {...slotProps?.endIcon}\r\n                        ref={refs?.endIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: 'flex',\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-end-icon\"\r\n                    >{endIcon}</Tag>} */}\r\n                    {endIcon}\r\n                </Tag>\r\n                {helperText && <Tag\r\n                    {...slotProps?.helperText}\r\n                    ref={refs?.helperText}\r\n                    baseClass=\"input-helper-text\"\r\n                    sxr={{\r\n                        color: error ? \"danger.primary\" : \"text.primary\",\r\n                        fontSize: \"small\",\r\n                        lineHeight: \"text\",\r\n                        fontWeight: 'text',\r\n                        pl: .5,\r\n                    }}\r\n                >{helperText}</Tag>}\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n    value?: string;\r\n    type?: TagProps<'input'>['type'];\r\n    name?: string;\r\n    placeholder?: string;\r\n    readOnly?: boolean;\r\n    autoFocus?: boolean;\r\n    autoComplete?: string;\r\n    label?: useBreakpointPropsType<string>;\r\n\r\n    onFocus?: (e: React.FocusEvent<any>) => void;\r\n    onBlur?: (e: React.FocusEvent<any>) => void;\r\n    onChange?: (e: React.ChangeEvent<any>) => void;\r\n    onInput?: (e: React.FormEvent<any>) => void;\r\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    fullWidth?: boolean;\r\n\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n    refs?: {\r\n        inputRoot?: React.Ref<\"div\">;\r\n        label?: React.Ref<\"label\">;\r\n        rootContainer?: React.Ref<\"div\">;\r\n        // startIcon?: React.Ref<ReactElement>;\r\n        // endIcon?: React.Ref<ReactElement>;\r\n        // inputContainer?: React.Ref<\"div\">;\r\n        input?: React.Ref<'input' | 'textarea'>;\r\n        helperText?: React.Ref<\"div\">;\r\n    };\r\n\r\n    slotProps?: {\r\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n        label?: Omit<LabelProps, \"children\">;\r\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n        input?: Partial<TagProps<T>>;\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        color,\r\n        label,\r\n        name,\r\n        placeholder,\r\n        type,\r\n        readOnly,\r\n        autoFocus,\r\n        autoComplete,\r\n        onFocus,\r\n        onBlur,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n\r\n        focused,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        fullWidth,\r\n        slotProps,\r\n\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    let _focus = focused || _focused\r\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n    useEffect(() => {\r\n        if (autoFocus) {\r\n            setTimeout(() => {\r\n                inputRef.current?.focus()\r\n            }, 100);\r\n        }\r\n    }, [autoFocus])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 46,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            width={fullWidth ? \"100%\" : \"auto\"}\r\n            {...rest}\r\n            ref={ref}\r\n            baseClass=\"input-wrapper\"\r\n            sxr={{\r\n                display: 'flex',\r\n                flexDirection: 'column',\r\n                gap: .5,\r\n            }}\r\n        >\r\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n            <Tag\r\n                {...slotProps?.inputRoot}\r\n                ref={refs?.inputRoot}\r\n                baseClass={'input-root'}\r\n                sxr={{\r\n                    width: \"100%\",\r\n                    overflow: \"hidden\",\r\n                }}\r\n            >\r\n                <Tag\r\n                    {...slotProps?.rootContainer}\r\n                    ref={refs?.rootContainer}\r\n                    baseClass='input-root-container'\r\n                    sxr={{\r\n                        width: \"100%\",\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                        flexWrap: \"nowrap\",\r\n                        transitionProperty: \"border, box-shadow, background\",\r\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                        border: variant === \"text\" ? 0 : \"1px solid\",\r\n                        borderColor: borderColor,\r\n                        borderRadius: 1,\r\n                        px: 1,\r\n                        // py: .5,\r\n                        ..._size,\r\n                        height: multiline ? \"auto\" : _size.height,\r\n                        minHeight: _size.height,\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n\r\n                        // ...(!!startIcon && {\r\n                        //     \"& :first-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: \"flex\",\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // }),\r\n\r\n                        // ...(!!endIcon && {\r\n                        //     \"& :last-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: 'flex',\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // })\r\n\r\n                    }}\r\n                    disabled={disabled || false}\r\n                >\r\n                    {/* {startIcon && <Tag\r\n                        {...slotProps?.startIcon}\r\n                        ref={refs?.startIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: \"flex\",\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-start-icon\"\r\n                    >{startIcon}</Tag>} */}\r\n                    {startIcon}\r\n                    {/* <Tag\r\n                        {...slotProps?.inputContainer}\r\n                        ref={refs?.inputContainer}\r\n                        baseClass='input-container'\r\n                        flex={1}\r\n                        sxr={{\r\n                            width: \"100%\",\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            flex: 1,\r\n                            minHeight: _size.height,\r\n                            \"& textarea\": {\r\n                                resize: \"none\"\r\n                            },\r\n                            \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                                \"-webkit-text-fill-color\": \"text.primary\",\r\n                                \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                                transition: \"background-color 5000s ease-in-out 0s\"\r\n                            } as any\r\n                        }}\r\n                    >\r\n                        \r\n                    </Tag> */}\r\n                    <Tag\r\n                        {...slotProps?.input}\r\n                        ref={inputMergeRef}\r\n                        baseClass='input'\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        onChange={onChange}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                        onKeyDown={onKeyDown}\r\n                        onKeyUp={onKeyUp}\r\n                        name={name}\r\n                        placeholder={placeholder}\r\n                        type={type}\r\n                        readOnly={readOnly}\r\n                        autoComplete={autoComplete}\r\n                    />\r\n                    {/* {endIcon && <Tag\r\n                        {...slotProps?.endIcon}\r\n                        ref={refs?.endIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: 'flex',\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-end-icon\"\r\n                    >{endIcon}</Tag>} */}\r\n                    {endIcon}\r\n                </Tag>\r\n                {helperText && <Tag\r\n                    {...slotProps?.helperText}\r\n                    ref={refs?.helperText}\r\n                    baseClass=\"input-helper-text\"\r\n                    sxr={{\r\n                        color: error ? \"danger.primary\" : \"text.primary\",\r\n                        fontSize: \"small\",\r\n                        lineHeight: \"text\",\r\n                        fontWeight: 'text',\r\n                        pl: .5,\r\n                    }}\r\n                >{helperText}</Tag>}\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/InputNumber/index.cjs

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Input/index.cjs');
+var UnfoldMore = require('@xanui/icons/UnfoldMore');
+
+const InputNumber = React.forwardRef((props, ref) => {
+    const isNumeric = !isNaN(Number(props.value));
+    let p = {};
+    if (!isNumeric) {
+        p.error = true;
+        p.helperText = "Value must be numeric";
+    }
+    return (jsxRuntime.jsx(index, Object.assign({}, props, p, { ref: ref, endIcon: jsxRuntime.jsx(UnfoldMore, {}), onKeyDown: (e) => {
+            props.onKeyDown && props.onKeyDown(e);
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            let val = parseInt(props.value || '0');
+            val = e.key === 'ArrowUp' ? val + 1 : val - 1;
+            e.target.value = String(val);
+            props.onChange && props.onChange(e);
+        }, value: props.value, onChange: e => {
+            e.target.value = e.target.value.replace(/\D/g, '');
+            props.onChange && props.onChange(e);
+        } })));
+});
+
+module.exports = InputNumber;
+//# sourceMappingURL=index.cjs.map

package/InputNumber/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\r\nimport React from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\r\n\r\nexport type InputNumberProps = InputProps\r\n\r\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\r\n   const isNumeric = !isNaN(Number(props.value));\r\n\r\n   let p: any = {}\r\n   if (!isNumeric) {\r\n      p.error = true;\r\n      p.helperText = \"Value must be numeric\";\r\n   }\r\n\r\n   return (\r\n      <Input\r\n         {...props}\r\n         {...p}\r\n         ref={ref}\r\n         endIcon={<UnfoldMore />}\r\n         onKeyDown={(e: any) => {\r\n            props.onKeyDown && props.onKeyDown(e);\r\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\r\n            e.preventDefault();\r\n            let val = parseInt(props.value || '0');\r\n            val = e.key === 'ArrowUp' ? val + 1 : val - 1;\r\n            e.target.value = String(val);\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n         value={props.value}\r\n         onChange={e => {\r\n            e.target.value = e.target.value.replace(/\\D/g, '')\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n      />\r\n   )\r\n})\r\n\r\nexport default InputNumber\r\n"],"names":[],"mappings":";;;;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}

package/InputNumber/index.js

@@ -1,10 +1,8 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../Input/index.js');
-var UnfoldMore = require('@xanui/icons/UnfoldMore');
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Input from '../Input/index.js';
+import UnfoldMore from '@xanui/icons/UnfoldMore';
 
 const InputNumber = React.forwardRef((props, ref) => {
     const isNumeric = !isNaN(Number(props.value));
@@ -13,7 +11,7 @@ const InputNumber = React.forwardRef((props, ref) => {
         p.error = true;
         p.helperText = "Value must be numeric";
     }
-    return (jsxRuntime.jsx(index, Object.assign({}, props, p, { ref: ref, endIcon: jsxRuntime.jsx(UnfoldMore, {}), onKeyDown: (e) => {
+    return (jsx(Input, Object.assign({}, props, p, { ref: ref, endIcon: jsx(UnfoldMore, {}), onKeyDown: (e) => {
             props.onKeyDown && props.onKeyDown(e);
             if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
                 return;
@@ -28,5 +26,5 @@ const InputNumber = React.forwardRef((props, ref) => {
         } })));
 });
 
-module.exports = InputNumber;
+export { InputNumber as default };
 //# sourceMappingURL=index.js.map

package/InputNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\r\nimport React from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\r\n\r\nexport type InputNumberProps = InputProps\r\n\r\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\r\n   const isNumeric = !isNaN(Number(props.value));\r\n\r\n   let p: any = {}\r\n   if (!isNumeric) {\r\n      p.error = true;\r\n      p.helperText = \"Value must be numeric\";\r\n   }\r\n\r\n   return (\r\n      <Input\r\n         {...props}\r\n         {...p}\r\n         ref={ref}\r\n         endIcon={<UnfoldMore />}\r\n         onKeyDown={(e: any) => {\r\n            props.onKeyDown && props.onKeyDown(e);\r\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\r\n            e.preventDefault();\r\n            let val = parseInt(props.value || '0');\r\n            val = e.key === 'ArrowUp' ? val + 1 : val - 1;\r\n            e.target.value = String(val);\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n         value={props.value}\r\n         onChange={e => {\r\n            e.target.value = e.target.value.replace(/\\D/g, '')\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n      />\r\n   )\r\n})\r\n\r\nexport default InputNumber\r\n"],"names":[],"mappings":";;;;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\r\nimport React from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\r\n\r\nexport type InputNumberProps = InputProps\r\n\r\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\r\n   const isNumeric = !isNaN(Number(props.value));\r\n\r\n   let p: any = {}\r\n   if (!isNumeric) {\r\n      p.error = true;\r\n      p.helperText = \"Value must be numeric\";\r\n   }\r\n\r\n   return (\r\n      <Input\r\n         {...props}\r\n         {...p}\r\n         ref={ref}\r\n         endIcon={<UnfoldMore />}\r\n         onKeyDown={(e: any) => {\r\n            props.onKeyDown && props.onKeyDown(e);\r\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\r\n            e.preventDefault();\r\n            let val = parseInt(props.value || '0');\r\n            val = e.key === 'ArrowUp' ? val + 1 : val - 1;\r\n            e.target.value = String(val);\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n         value={props.value}\r\n         onChange={e => {\r\n            e.target.value = e.target.value.replace(/\\D/g, '')\r\n            props.onChange && props.onChange(e);\r\n         }}\r\n      />\r\n   )\r\n})\r\n\r\nexport default InputNumber\r\n"],"names":[],"mappings":";;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}

package/Label/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Label = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    return jsxRuntime.jsx(core.Tag, Object.assign({ component: 'label' }, rest, { sxr: {
+            display: "inline-flex",
+            alignItems: "center",
+            verticalAlign: "middle",
+            fontSize: "text",
+            gap: .4,
+            color: "text.primary",
+            userSelect: "none",
+            cursor: "pointer",
+            fontWeight: "500",
+        }, baseClass: 'label', ref: ref, children: children }));
+});
+
+module.exports = Label;
+//# sourceMappingURL=index.cjs.map

package/Label/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n    return <Tag\r\n        component='label'\r\n        {...rest}\r\n        sxr={{\r\n            display: \"inline-flex\",\r\n            alignItems: \"center\",\r\n            verticalAlign: \"middle\",\r\n            fontSize: \"text\",\r\n            gap: .4,\r\n            color: \"text.primary\",\r\n            userSelect: \"none\",\r\n            cursor: \"pointer\",\r\n            fontWeight: \"500\",\r\n        }}\r\n        baseClass='label'\r\n        ref={ref}\r\n    >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}

package/Label/index.js

@@ -1,13 +1,11 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const Label = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    return jsxRuntime.jsx(core.Tag, Object.assign({ component: 'label' }, rest, { sxr: {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return jsx(Tag, Object.assign({ component: 'label' }, rest, { sxr: {
             display: "inline-flex",
             alignItems: "center",
             verticalAlign: "middle",
@@ -20,5 +18,5 @@ const Label = React.forwardRef((_a, ref) => {
         }, baseClass: 'label', ref: ref, children: children }));
 });
 
-module.exports = Label;
+export { Label as default };
 //# sourceMappingURL=index.js.map

package/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n    return <Tag\r\n        component='label'\r\n        {...rest}\r\n        sxr={{\r\n            display: \"inline-flex\",\r\n            alignItems: \"center\",\r\n            verticalAlign: \"middle\",\r\n            fontSize: \"text\",\r\n            gap: .4,\r\n            color: \"text.primary\",\r\n            userSelect: \"none\",\r\n            cursor: \"pointer\",\r\n            fontWeight: \"500\",\r\n        }}\r\n        baseClass='label'\r\n        ref={ref}\r\n    >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n    return <Tag\r\n        component='label'\r\n        {...rest}\r\n        sxr={{\r\n            display: \"inline-flex\",\r\n            alignItems: \"center\",\r\n            verticalAlign: \"middle\",\r\n            fontSize: \"text\",\r\n            gap: .4,\r\n            color: \"text.primary\",\r\n            userSelect: \"none\",\r\n            cursor: \"pointer\",\r\n            fontWeight: \"500\",\r\n        }}\r\n        baseClass='label'\r\n        ref={ref}\r\n    >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}