@xanui/ui 1.1.68 → 1.2.0

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}

package/Chip/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');
@@ -7,7 +8,7 @@ var core = require('@xanui/core');
 var index = require('../useCorner/index.cjs');
 
 const Chip = React.forwardRef((props, ref) => {
-    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size, slotProps } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size", "slotProps"]);
     const _p = {};
     if (label)
         _p.label = label;
@@ -23,6 +24,8 @@ const Chip = React.forwardRef((props, ref) => {
         _p.corner = corner;
     if (size)
         _p.size = size;
+    if (slotProps)
+        _p.slotProps = slotProps;
     const p = core.useBreakpointProps(_p);
     label = p.label;
     startIcon = p.startIcon;
@@ -31,6 +34,7 @@ const Chip = React.forwardRef((props, ref) => {
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
+    slotProps = p.slotProps;
     rest.sx = rest.sx || {};
     const cornerCss = index(corner);
     const template = core.useColorTemplate(color, variant);
@@ -66,10 +70,11 @@ const Chip = React.forwardRef((props, ref) => {
                 whiteSpace: "nowrap",
                 overflow: "hidden",
             },
-        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, { sxr: {
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
-                    flexBox: true
-                }, children: label }), endIcon] })));
+                    flexBox: true,
+                    color: template.primary.color + "!important"
+                }, children: label })), endIcon] })));
 });
 
 module.exports = Chip;

package/Chip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.primary.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}

package/Chip/index.d.ts

@@ -10,6 +10,9 @@ type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, "color" |
     variant?: useBreakpointPropsType<UseColorTemplateType>;
     corner?: useBreakpointPropsType<UseCornerTypes>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    slotProps?: {
+        label?: Omit<TagProps<"div">, "children">;
+    };
 };
 declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
 

package/Chip/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
@@ -5,7 +6,7 @@ import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/
 import useCorner from '../useCorner/index.js';
 
 const Chip = React.forwardRef((props, ref) => {
-    let [_a] = useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = __rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    let [_a] = useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size, slotProps } = _a, rest = __rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size", "slotProps"]);
     const _p = {};
     if (label)
         _p.label = label;
@@ -21,6 +22,8 @@ const Chip = React.forwardRef((props, ref) => {
         _p.corner = corner;
     if (size)
         _p.size = size;
+    if (slotProps)
+        _p.slotProps = slotProps;
     const p = useBreakpointProps(_p);
     label = p.label;
     startIcon = p.startIcon;
@@ -29,6 +32,7 @@ const Chip = React.forwardRef((props, ref) => {
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
+    slotProps = p.slotProps;
     rest.sx = rest.sx || {};
     const cornerCss = useCorner(corner);
     const template = useColorTemplate(color, variant);
@@ -64,10 +68,11 @@ const Chip = React.forwardRef((props, ref) => {
                 whiteSpace: "nowrap",
                 overflow: "hidden",
             },
-        }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, { sxr: {
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
-                    flexBox: true
-                }, children: label }), endIcon] })));
+                    flexBox: true,
+                    color: template.primary.color + "!important"
+                }, children: label })), endIcon] })));
 });
 
 export { Chip as default };

package/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAiBA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,KAAmB,EAAE,GAAmB,KAAI;AAC3G,IAAA,IAAI,CAAA,EAAA,CAAA,GAAyE,YAAY,CAAM,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,EAA5G,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAAlE,CAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAoE,CAAwC;IACjH,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,MAAM;AAC7B,IAAA,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,QAAQ;AAC7B,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;IACzB,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;AAEhC,IAAA,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;AAEjD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,EAAE;YACP,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,CAAC;AACjC,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACnC,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACtC;KACJ;IAED,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,EACT,QAAQ,CAAC,OAAO,GACf,KAAK,CAAC,IAAW,CAAC,IAAI,EAAE,GACzB,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,QAAQ,EAAE,QAAQ;AAElB,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;AACJ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,EACVC,GAAA,CAAC,GAAG,EAAA,EACA,GAAG,EAAE;AACD,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,OAAO,EAAE;AACZ,iBAAA,EAAA,QAAA,EACH,KAAK,EAAA,CAAO,EACb,OAAO,CAAA,EAAA,CAAA,CACN;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.primary.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}

package/Collaps/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Collaps/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":";;;;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAahB;;"}

package/Collaps/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Collaps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIA,GAAA,CAAC,UAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAahB;;"}

package/Container/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":[],"mappings":";;;;;;;;AASA;;;AAEI;AAAc;AACd;AACA;AAEA;AACA;AACA;AAIY;AACA;AACI;AACA;AACH;AACD;AACA;;AAMhB;;"}

package/Container/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Container/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":[],"mappings":";;;;;;AASA;;;AAEI;AAAc;AACd;AACA;AAEA;AACA;AACA;AAIY;AACA;AACI;AACA;AACH;AACD;AACA;;AAMhB;;"}

package/Datatable/SelectedBox.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Datatable/SelectedBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.cjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs","Stack","Text","__rest","IconButton"],"mappings":";;;;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,uCAAK;AAE1B,IAAA,QACGC,eAAA,CAACC,KAAK,IACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,EAAA,QAAA,EAAA,CAEPD,gBAACE,OAAI,EAAA,EAAC,UAAU,EAAE,GAAG,2BAAa,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC/DH,eAACE,KAAK,EAAA,EACH,OAAO,EAAA,IAAA,EACP,GAAG,EAAE,CAAC,YAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAE,YAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGJ,cAAA,CAACK,OAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}
+{"version":3,"file":"SelectedBox.cjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}

package/Datatable/SelectedBox.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import IconButton from '../IconButton/index.js';

package/Datatable/SelectedBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,iBAAK;AAE1B,IAAA,QACGC,IAAA,CAAC,KAAK,IACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,EAAA,QAAA,EAAA,CAEPA,KAAC,IAAI,EAAA,EAAC,UAAU,EAAE,GAAG,2BAAa,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC/DD,IAAC,KAAK,EAAA,EACH,OAAO,EAAA,IAAA,EACP,GAAG,EAAE,CAAC,YAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAA,MAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGA,GAAA,CAAC,UAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}
+{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}

package/Datatable/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow(structuredClone(row), state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
+{"version":3,"file":"Table.cjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow(structuredClone(row), state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAOA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Datatable/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow(structuredClone(row), state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
+{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow(structuredClone(row), state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAOA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Divider/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Divider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? \"default\"\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AAUA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? \"default\"\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}

package/Divider/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? \"default\"\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":["_jsx"],"mappings":";;;;;AAUA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? \"default\"\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}

package/GridContainer/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/GridContainer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":[],"mappings":";;;;;;;;AAKA;AAA4E;AACxE;AAIY;AACA;AACA;AACA;;AAQhB;;"}

package/GridContainer/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/GridContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":[],"mappings":";;;;;;AAKA;AAA4E;AACxE;AAIY;AACA;AACA;AACA;;AAQhB;;"}

package/GridItem/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/GridItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":[],"mappings":";;;;;;;;AAYA;AAAuE;;AAInE;AACA;AACA;AACA;AACA;AAEA;AAYJ;;"}

package/GridItem/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/GridItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":";;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":[],"mappings":";;;;;;AAYA;AAAuE;;AAInE;AACA;AACA;AACA;AACA;AAEA;AAYJ;;"}

package/Image/index.cjs.map

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

package/Image/index.js.map

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

package/Input/index.cjs

@@ -117,7 +117,7 @@ const Input = React.forwardRef((_a, ref) => {
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child": {
+                            "& :first-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",
@@ -126,7 +126,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
-                            "& :last-child": {
+                            "& :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",

package/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAiDG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.cjs","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:not(.xui-input)\": {\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:not(.xui-input)\": {\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}\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}\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;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/Input/index.js

@@ -115,7 +115,7 @@ const Input = React.forwardRef((_a, ref) => {
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child": {
+                            "& :first-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",
@@ -124,7 +124,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
-                            "& :last-child": {
+                            "& :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",