@xanui/ui 1.1.26 → 1.1.28

package/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}

package/Drawer/index.mjs

@@ -30,9 +30,9 @@ const Drawer = (_a) => {
     size = p.size || "medium";
     let isSide = placement === 'left' || placement === 'right';
     let sizes = {
-        small: 200,
-        medium: 300,
-        large: 400
+        small: 220,
+        medium: 330,
+        large: 440
     };
     let _size = sizes[size] || size;
     return (jsx(Layer, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {

package/Drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}

package/IconButton/index.js

@@ -48,7 +48,7 @@ const IconButton = React.forwardRef((_a, ref) => {
             alignItems: "center",
             justifyContent: "center",
             lineHeight: 1,
-            fontSize: Math.round((size / 3) * 2),
+            fontSize: "button",
             bgcolor: "transparent",
             "& svg": {
                 fontSize: Math.round((size / 3) * 1.8),
@@ -57,12 +57,6 @@ const IconButton = React.forwardRef((_a, ref) => {
                 height: "1em",
                 flexShrink: 0,
             },
-            "& > *": {
-                fontSize: Math.round((size / 3) * 2),
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
         }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
 });
 

package/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n\n                lineHeight: 1,\n                fontSize: Math.round((size / 3) * 2),\n\n                bgcolor: \"transparent\",\n\n                \"& svg\": {\n                    fontSize: Math.round((size / 3) * 1.8),\n                    display: \"block\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    flexShrink: 0,\n                },\n\n                \"& > *\": {\n                    fontSize: Math.round((size / 3) * 2),\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                },\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;AAED;AACI;AACA;AACA;AACA;AACH;;AAUjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n\n                lineHeight: 1,\n                fontSize: \"button\",\n\n                bgcolor: \"transparent\",\n\n                \"& svg\": {\n                    fontSize: Math.round((size / 3) * 1.8),\n                    display: \"block\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    flexShrink: 0,\n                },\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/IconButton/index.mjs

@@ -46,7 +46,7 @@ const IconButton = React.forwardRef((_a, ref) => {
             alignItems: "center",
             justifyContent: "center",
             lineHeight: 1,
-            fontSize: Math.round((size / 3) * 2),
+            fontSize: "button",
             bgcolor: "transparent",
             "& svg": {
                 fontSize: Math.round((size / 3) * 1.8),
@@ -55,12 +55,6 @@ const IconButton = React.forwardRef((_a, ref) => {
                 height: "1em",
                 flexShrink: 0,
             },
-            "& > *": {
-                fontSize: Math.round((size / 3) * 2),
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
         }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
 });
 

package/IconButton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n\n                lineHeight: 1,\n                fontSize: Math.round((size / 3) * 2),\n\n                bgcolor: \"transparent\",\n\n                \"& svg\": {\n                    fontSize: Math.round((size / 3) * 1.8),\n                    display: \"block\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    flexShrink: 0,\n                },\n\n                \"& > *\": {\n                    fontSize: Math.round((size / 3) * 2),\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                },\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;AAED;AACI;AACA;AACA;AACA;AACH;;AAUjB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n\n                lineHeight: 1,\n                fontSize: \"button\",\n\n                bgcolor: \"transparent\",\n\n                \"& svg\": {\n                    fontSize: Math.round((size / 3) * 1.8),\n                    display: \"block\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    flexShrink: 0,\n                },\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/Input/index.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
+import { LabelProps } from '../Label/index.js';
 
-type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" | "color"> & {
+type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" | "color" | "label"> & {
     value?: string;
     type?: TagProps<'input'>['type'];
     name?: string;
@@ -9,6 +10,7 @@ type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" |
     readOnly?: boolean;
     autoFocus?: boolean;
     autoComplete?: string;
+    label?: useBreakpointPropsType<string>;
     onFocus?: (e: React.FocusEvent<any>) => void;
     onBlur?: (e: React.FocusEvent<any>) => void;
     onChange?: (e: React.ChangeEvent<any>) => void;
@@ -30,18 +32,16 @@ type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" |
     multiline?: boolean;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
     refs?: {
+        inputRoot?: React.Ref<"div">;
+        label?: React.Ref<"label">;
         rootContainer?: React.Ref<"div">;
-        startIcon?: React.Ref<ReactElement>;
-        endIcon?: React.Ref<ReactElement>;
-        inputContainer?: React.Ref<"div">;
         input?: React.Ref<'input' | 'textarea'>;
         helperText?: React.Ref<"div">;
     };
     slotProps?: {
+        inputRoot?: Omit<TagProps<"div">, "children">;
+        label?: Omit<LabelProps, "children">;
         rootContainer?: Omit<TagProps<"div">, "children">;
-        startIcon?: Omit<TagProps<'div'>, "children">;
-        endIcon?: Omit<TagProps<'div'>, "children">;
-        inputContainer?: Omit<TagProps<"div">, "children">;
         helperText?: Omit<TagProps<"div">, "children">;
         input?: Partial<TagProps<T>>;
     };

package/Input/index.js

@@ -5,11 +5,12 @@ 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');
 
 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, 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", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
+    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;
@@ -75,12 +76,12 @@ const Input = React.forwardRef((_a, ref) => {
     }, [value]) || 1;
     const sizes = {
         small: {
-            height: 40,
+            height: 38,
             gap: .5,
             fontSize: 'button',
         },
         medium: {
-            height: 48,
+            height: 46,
             gap: 1,
             fontSize: "text"
         },
@@ -102,73 +103,41 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ width: fullWidth ? "100%" : undefined }, rest, { ref: ref, baseClass: 'input-root', classNames: {
-            'input-full-width': fullWidth || false,
-            'input-focused': _focus,
-            'input-error': error || false,
-            [`input-variant-${variant}`]: true,
-            [`input-size-${size}`]: true,
-        }, 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: 'root-container', sxr: {
+    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%",
-                    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,
-                    py: .5,
-                }, disabled: disabled || false }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.startIcon, flex: "0 0 auto", sxr: {
-                            height: "100%",
-                            alignItems: 'center',
-                            justifyContent: "center",
-                            display: "flex",
-                            color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-start-icon", children: startIcon })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.inputContainer, baseClass: 'input-container', flex: 1, sxr: {
-                            width: "100%",
-                            display: "flex",
-                            alignItems: "center",
-                            flex: 1,
-                            minHeight: _size.height,
-                            "& textarea": {
-                                resize: "none"
-                            },
-                            "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                    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"
-                            }
-                        }, children: 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 && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.endIcon, flex: "0 0 auto", sxr: {
-                            height: "100%",
-                            alignItems: 'center',
-                            justifyContent: "center",
-                            display: 'flex',
-                            color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-end-icon", children: 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 }))] })));
+                            }, "& 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;

package/Input/index.js.map

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

@@ -3,11 +3,12 @@ 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.mjs';
 
 const Input = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
     var { value, refs } = _a, props = __rest(_a, ["value", "refs"]);
-    let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, 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", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
+    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;
@@ -73,12 +74,12 @@ const Input = React.forwardRef((_a, ref) => {
     }, [value]) || 1;
     const sizes = {
         small: {
-            height: 40,
+            height: 38,
             gap: .5,
             fontSize: 'button',
         },
         medium: {
-            height: 48,
+            height: 46,
             gap: 1,
             fontSize: "text"
         },
@@ -100,73 +101,41 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxs(Tag, Object.assign({ width: fullWidth ? "100%" : undefined }, rest, { ref: ref, baseClass: 'input-root', classNames: {
-            'input-full-width': fullWidth || false,
-            'input-focused': _focus,
-            'input-error': error || false,
-            [`input-variant-${variant}`]: true,
-            [`input-size-${size}`]: true,
-        }, 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: 'root-container', 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 && 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%",
-                    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,
-                    py: .5,
-                }, disabled: disabled || false }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.startIcon, flex: "0 0 auto", sxr: {
-                            height: "100%",
-                            alignItems: 'center',
-                            justifyContent: "center",
-                            display: "flex",
-                            color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-start-icon", children: startIcon })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.inputContainer, baseClass: 'input-container', flex: 1, sxr: {
-                            width: "100%",
-                            display: "flex",
-                            alignItems: "center",
-                            flex: 1,
-                            minHeight: _size.height,
-                            "& textarea": {
-                                resize: "none"
-                            },
-                            "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                    overflow: "hidden",
+                }, 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"
-                            }
-                        }, children: 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",
-                                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 && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.endIcon, flex: "0 0 auto", sxr: {
-                            height: "100%",
-                            alignItems: 'center',
-                            justifyContent: "center",
-                            display: 'flex',
-                            color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-end-icon", children: 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",
-                    fontWeight: 'text',
-                    pl: .5,
-                }, children: helperText }))] })));
+                            }, "& textarea": {
+                                resize: "none"
+                            } }), 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",
+                                    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 && 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",
+                            fontWeight: 'text',
+                            pl: .5,
+                        }, children: helperText }))] }))] })));
 });
 
 export { Input as default };