@xanui/ui 1.1.37 → 1.1.38

package/Datatable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useState } from 'react'\r\nimport ViewBox from '../ViewBox'\r\nimport { Tag, useInterface } from '@xanui/core';\r\nimport SelectedBox from './SelectedBox'\r\nimport TableArea from './Table'\r\nimport FilterBox from './FilterBox'\r\nimport TablePagination, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n    let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n    let _props = useMemo(() => {\r\n        let np = { ...p }\r\n\r\n        if (typeof np.skeleton === 'number' || np.skeleton === true) {\r\n            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n            let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n            if (!np.hideCheckbox) {\r\n                np.columns = [{\r\n                    label: '', field: \"__checkbox\", width: 34\r\n                }, ...np.columns]\r\n            }\r\n\r\n            if (np.rowAction) {\r\n                np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n            }\r\n\r\n            let columns = np.columns || []\r\n\r\n            np.rows = []\r\n            for (let i = 0; i < length; i++) {\r\n                let r: any = { id: i }\r\n                for (let col of columns) {\r\n                    r[col.field] = \"\"\r\n                }\r\n                np.rows.push(r)\r\n            }\r\n\r\n            np.renderRow = (r: any) => {\r\n                for (let col of columns) {\r\n                    r[col.field] = <Skeleton\r\n                        animation={\"wave\"}\r\n                        height={16}\r\n                        radius={.5}\r\n                        width={\"100%\"}\r\n                    />\r\n                }\r\n                return r\r\n            }\r\n            np.hideCheckbox = true\r\n            np.rowAction = undefined\r\n        }\r\n        return np\r\n    }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n    let {\r\n        rows,\r\n        tabs,\r\n\r\n        pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n        defaultState = {},\r\n        onStateChange,\r\n\r\n        fixedHeader,\r\n        hidePagination,\r\n        slotProps,\r\n\r\n\r\n        // skip props for ViewBox\r\n        skeleton,\r\n        rowAction,\r\n        disableRow,\r\n        renderRow,\r\n        filters,\r\n        hideCheckbox,\r\n        hideSearch,\r\n        columns,\r\n        compact,\r\n\r\n        ...viewBoxProps\r\n    } = _props\r\n\r\n    const [state, setState] = useState<DatatableState>({\r\n        selected: defaultState?.selected || [],\r\n        selectAll: defaultState?.selectAll || false,\r\n        pagination: {\r\n            page: defaultState?.page || 1,\r\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n            from: defaultState?.from || 1,\r\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n        },\r\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\r\n        search: defaultState?.search || \"\",\r\n        sortable: defaultState?.sortable || {},\r\n        filters: defaultState?.filter || {}\r\n    })\r\n\r\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n    useEffect(() => {\r\n        if (onStateChange) {\r\n            onStateChange(state)\r\n        }\r\n    }, [state])\r\n\r\n    return (\r\n        <ViewBox\r\n            height=\"100%\"\r\n            {...viewBoxProps}\r\n            baseClass='datatable'\r\n            ref={ref as any}\r\n            sx={{\r\n                ...viewBoxProps?.sx,\r\n                '& thead': fixedHeader ? {\r\n                    position: \"sticky\",\r\n                    top: 0,\r\n                    bgcolor: \"background.primary\",\r\n                    zIndex: 1\r\n                } : {},\r\n            }}\r\n            startContent={(\r\n                <Tag\r\n                    baseClass='datatable-header'\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        justifyContent: \"space-between\"\r\n                    }}\r\n                >\r\n                    <SelectedBox {..._props} update={update} state={state} />\r\n                    <FilterBox {..._props} update={update} state={state} />\r\n                </Tag>\r\n            )}\r\n        >\r\n            <TableArea\r\n                {..._props}\r\n                update={update}\r\n                state={state}\r\n            />\r\n            <Stack\r\n                p={1}\r\n                alignItems=\"flex-end\"\r\n            >\r\n                {!hidePagination && <TablePagination\r\n                    disabled={_props.skeleton ? true : false}\r\n                    {...slotProps?.pagination}\r\n                    total={total || rows.length}\r\n                    page={state.pagination.page}\r\n                    perpage={state.pagination.perpage}\r\n                    perpages={perpages}\r\n                    slotProps={{\r\n                        select: {\r\n                            size: \"small\",\r\n                        }\r\n                    }}\r\n                    onChange={(state: TablePaginationState) => {\r\n                        update({ pagination: state })\r\n                    }}\r\n                />}\r\n            </Stack>\r\n        </ViewBox>\r\n    )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useState } from 'react'\r\nimport ViewBox from '../ViewBox'\r\nimport { Tag, useInterface } from '@xanui/core';\r\nimport SelectedBox from './SelectedBox'\r\nimport TableArea from './Table'\r\nimport FilterBox from './FilterBox'\r\nimport TablePagination, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n    let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n    let _props = useMemo(() => {\r\n        let np = { ...p }\r\n\r\n        if (typeof np.skeleton === 'number' || np.skeleton === true) {\r\n            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n            let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n            if (!np.hideCheckbox) {\r\n                np.columns = [{\r\n                    label: '', field: \"__checkbox\", width: 34\r\n                }, ...np.columns]\r\n            }\r\n\r\n            if (np.rowAction) {\r\n                np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n            }\r\n\r\n            let columns = np.columns || []\r\n\r\n            np.rows = []\r\n            for (let i = 0; i < length; i++) {\r\n                let r: any = { id: i }\r\n                for (let col of columns) {\r\n                    r[col.field] = \"\"\r\n                }\r\n                np.rows.push(r)\r\n            }\r\n\r\n            np.renderRow = (r: any) => {\r\n                for (let col of columns) {\r\n                    r[col.field] = <Skeleton\r\n                        animation={\"wave\"}\r\n                        height={16}\r\n                        radius={.5}\r\n                        width={\"100%\"}\r\n                    />\r\n                }\r\n                return r\r\n            }\r\n            np.hideCheckbox = true\r\n            np.rowAction = undefined\r\n        }\r\n        return np\r\n    }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n    let {\r\n        rows,\r\n        tabs,\r\n\r\n        pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n        defaultState = {},\r\n        onStateChange,\r\n\r\n        fixedHeader,\r\n        hidePagination,\r\n        slotProps,\r\n\r\n\r\n        // skip props for ViewBox\r\n        skeleton,\r\n        rowAction,\r\n        disableRow,\r\n        renderRow,\r\n        filters,\r\n        hideCheckbox,\r\n        hideSearch,\r\n        columns,\r\n        compact,\r\n\r\n        ...viewBoxProps\r\n    } = _props\r\n\r\n    const [state, setState] = useState<DatatableState>({\r\n        selected: defaultState?.selected || [],\r\n        selectAll: defaultState?.selectAll || false,\r\n        pagination: {\r\n            page: defaultState?.page || 1,\r\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n            from: defaultState?.from || 1,\r\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n        },\r\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\r\n        search: defaultState?.search || \"\",\r\n        sortable: defaultState?.sortable || {},\r\n        filters: defaultState?.filter || {}\r\n    })\r\n\r\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n    useEffect(() => {\r\n        if (onStateChange) {\r\n            onStateChange(state)\r\n        }\r\n    }, [state])\r\n\r\n    return (\r\n        <ViewBox\r\n            height=\"100%\"\r\n            {...viewBoxProps}\r\n            baseClass='datatable'\r\n            ref={ref as any}\r\n            sx={{\r\n                ...viewBoxProps?.sx,\r\n                '& thead': fixedHeader ? {\r\n                    position: \"sticky\",\r\n                    top: 0,\r\n                    bgcolor: \"background.primary\",\r\n                    zIndex: 1\r\n                } : {},\r\n            }}\r\n            startContent={(\r\n                <Tag\r\n                    baseClass='datatable-header'\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        justifyContent: \"space-between\"\r\n                    }}\r\n                >\r\n                    <SelectedBox {..._props} update={update} state={state} />\r\n                    <FilterBox {..._props} update={update} state={state} />\r\n                </Tag>\r\n            )}\r\n        >\r\n            <TableArea\r\n                {..._props}\r\n                update={update}\r\n                state={state}\r\n            />\r\n            <Stack\r\n                p={1}\r\n                alignItems=\"flex-end\"\r\n            >\r\n                {!hidePagination && <TablePagination\r\n                    disabled={_props.skeleton ? true : false}\r\n                    {...slotProps?.pagination}\r\n                    total={total || rows.length}\r\n                    page={state.pagination.page}\r\n                    perpage={state.pagination.perpage}\r\n                    perpages={perpages}\r\n                    slotProps={{\r\n                        select: {\r\n                            size: \"small\",\r\n                        }\r\n                    }}\r\n                    onChange={(state: TablePaginationState) => {\r\n                        update({ pagination: state })\r\n                    }}\r\n                />}\r\n            </Stack>\r\n        </ViewBox>\r\n    )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}

package/Divider/index.js

@@ -1,13 +1,11 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useBreakpointProps, Tag } from '@xanui/core';
 
 const Divider = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { children, direction, color, size } = _a, rest = tslib.__rest(_a, ["children", "direction", "color", "size"]);
+    var { children, direction, color, size } = _a, rest = __rest(_a, ["children", "direction", "color", "size"]);
     const _p = {};
     if (direction)
         _p.direction = direction;
@@ -15,17 +13,17 @@ const Divider = React.forwardRef((_a, ref) => {
         _p.color = color;
     if (size)
         _p.size = size;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     direction = (_b = p.direction) !== null && _b !== void 0 ? _b : "horizental";
     color = (_c = p.color) !== null && _c !== void 0 ? _c : "default";
     size = (_d = p.size) !== null && _d !== void 0 ? _d : 1;
     let isHori = direction === 'horizental';
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'divider', sxr: {
+    return (jsx(Tag, Object.assign({}, rest, { baseClass: 'divider', sxr: {
             width: isHori ? "100%" : size,
             height: isHori ? size : "100%",
             bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
         }, ref: ref, children: children })));
 });
 
-module.exports = Divider;
+export { Divider as default };
 //# sourceMappingURL=index.js.map

package/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (direction) _p.direction = direction\r\n    if (color) _p.color = color\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    direction = p.direction ?? \"horizental\"\r\n    color = p.color ?? \"default\"\r\n    size = p.size ?? 1\r\n\r\n    let isHori = direction === 'horizental'\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='divider'\r\n            sxr={{\r\n                width: isHori ? \"100%\" : size,\r\n                height: isHori ? size : \"100%\",\r\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n            }}\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Divider\r\n\r\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.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (direction) _p.direction = direction\r\n    if (color) _p.color = color\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    direction = p.direction ?? \"horizental\"\r\n    color = p.color ?? \"default\"\r\n    size = p.size ?? 1\r\n\r\n    let isHori = direction === 'horizental'\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='divider'\r\n            sxr={{\r\n                width: isHori ? \"100%\" : size,\r\n                height: isHori ? size : \"100%\",\r\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n            }}\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Divider\r\n\r\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;;;;"}

package/Drawer/index.js

@@ -1,11 +1,9 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@xanui/core');
-var index = require('../Layer/index.js');
-var index$1 = require('../ClickOutside/index.js');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpointProps, Tag, Renderar } from '@xanui/core';
+import Layer from '../Layer/index.js';
+import ClickOutside from '../ClickOutside/index.js';
 
 const getVariant = (placement) => {
     switch (placement) {
@@ -21,13 +19,13 @@ const getVariant = (placement) => {
 };
 const Drawer = (_a) => {
     var _b;
-    var { children, placement, size, slotProps, onClickOutside } = _a, layerProps = tslib.__rest(_a, ["children", "placement", "size", "slotProps", "onClickOutside"]);
+    var { children, placement, size, slotProps, onClickOutside } = _a, layerProps = __rest(_a, ["children", "placement", "size", "slotProps", "onClickOutside"]);
     const _p = {};
     if (placement)
         _p.placement = placement;
     if (size)
         _p.size = size;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     placement = (_b = p.placement) !== null && _b !== void 0 ? _b : 'left';
     size = p.size || "medium";
     let isSide = placement === 'left' || placement === 'right';
@@ -37,13 +35,13 @@ const Drawer = (_a) => {
         large: 440
     };
     let _size = sizes[size] || size;
-    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
+    return (jsx(Layer, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
                 width: "100vw",
                 height: "100vh",
                 display: "flex",
                 direction: isSide ? "row" : "column",
                 justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
-            }, children: jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
+            }, children: jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Tag, { sxr: {
                         width: isSide ? _size : "100%",
                         height: isSide ? "100%" : _size,
                         bgcolor: "background.primary",
@@ -51,7 +49,7 @@ const Drawer = (_a) => {
                     }, baseClass: 'drawer-content', children: children }) })) })) })));
 };
 Drawer.open = (children, props) => {
-    const d = core.Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+    const d = Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
             d.unrender();
         }, onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
@@ -71,8 +69,8 @@ Drawer.open = (children, props) => {
     };
 };
 Drawer.close = () => {
-    core.Renderar.unrender(Drawer);
+    Renderar.unrender(Drawer);
 };
 
-module.exports = Drawer;
+export { Drawer as default };
 //# sourceMappingURL=index.js.map

package/Drawer/index.js.map

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

package/Form/index.js

@@ -1,14 +1,12 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef } from 'react';
+import { Tag } from '@xanui/core';
 
 const Form = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let formRef = ref || React.useRef(null);
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let formRef = ref || useRef(null);
     const cloneAllChildren = (childs) => {
         return React.Children.map(childs, (child) => {
             let c = child;
@@ -26,7 +24,7 @@ const Form = React.forwardRef((_a, ref) => {
             return child;
         });
     };
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
+    return (jsx(Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
             e.preventDefault();
             const form = formRef.current;
             const formData = new FormData(form);
@@ -41,5 +39,5 @@ const Form = React.forwardRef((_a, ref) => {
         }, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
 });
 
-module.exports = Form;
+export { Form as default };
 //# sourceMappingURL=index.js.map

package/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n    let formRef: any = ref || useRef(null)\r\n\r\n    const cloneAllChildren: any = (childs: any) => {\r\n        return React.Children.map(childs, (child: any) => {\r\n            let c: any = child;\r\n            if (React.isValidElement(child) && c.props.name) {\r\n                const form = formRef.current\r\n                const formData = new FormData(form);\r\n                return React.cloneElement(child, {\r\n                    onChange: () => {\r\n                        console.log(formData.get(c.props.name));\r\n                    },\r\n                    value: formData.get(c.props.name),\r\n                    children: cloneAllChildren(c.props.children),\r\n                } as any);\r\n            }\r\n            return child;\r\n        });\r\n    };\r\n\r\n    return (\r\n        <Tag\r\n            component=\"form\"\r\n            {...rest}\r\n            onSubmit={(e) => {\r\n                e.preventDefault()\r\n                const form = formRef.current\r\n\r\n                const formData = new FormData(form);\r\n\r\n                formData.forEach((value, key) => {\r\n                    console.log(key + \": \" + value);\r\n                });\r\n            }}\r\n            sxr={{\r\n                bgcolor: \"default\",\r\n                p: 2,\r\n                maxWidth: 400,\r\n                radius: 1,\r\n            }}\r\n            baseClass='form'\r\n            ref={formRef}\r\n        >\r\n            {cloneAllChildren(children)}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Form\r\n\r\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}
+{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n    let formRef: any = ref || useRef(null)\r\n\r\n    const cloneAllChildren: any = (childs: any) => {\r\n        return React.Children.map(childs, (child: any) => {\r\n            let c: any = child;\r\n            if (React.isValidElement(child) && c.props.name) {\r\n                const form = formRef.current\r\n                const formData = new FormData(form);\r\n                return React.cloneElement(child, {\r\n                    onChange: () => {\r\n                        console.log(formData.get(c.props.name));\r\n                    },\r\n                    value: formData.get(c.props.name),\r\n                    children: cloneAllChildren(c.props.children),\r\n                } as any);\r\n            }\r\n            return child;\r\n        });\r\n    };\r\n\r\n    return (\r\n        <Tag\r\n            component=\"form\"\r\n            {...rest}\r\n            onSubmit={(e) => {\r\n                e.preventDefault()\r\n                const form = formRef.current\r\n\r\n                const formData = new FormData(form);\r\n\r\n                formData.forEach((value, key) => {\r\n                    console.log(key + \": \" + value);\r\n                });\r\n            }}\r\n            sxr={{\r\n                bgcolor: \"default\",\r\n                p: 2,\r\n                maxWidth: 400,\r\n                radius: 1,\r\n            }}\r\n            baseClass='form'\r\n            ref={formRef}\r\n        >\r\n            {cloneAllChildren(children)}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Form\r\n\r\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}

package/GridContainer/index.js

@@ -1,13 +1,11 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const GridContainer = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({}, rest, { sxr: {
             display: "flex",
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -15,5 +13,5 @@ const GridContainer = React.forwardRef((_a, ref) => {
         }, baseClass: 'grid-container', ref: ref, children: children })));
 });
 
-module.exports = GridContainer;
+export { GridContainer as default };
 //# sourceMappingURL=index.js.map

package/GridContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: 'row',\r\n                flexWrap: 'wrap',\r\n                width: '100%',\r\n            }}\r\n            baseClass='grid-container'\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\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.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: 'row',\r\n                flexWrap: 'wrap',\r\n                width: '100%',\r\n            }}\r\n            baseClass='grid-container'\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\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;;;;"}

package/GridItem/index.js

@@ -1,20 +1,18 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const GridItem = React.forwardRef((_a, ref) => {
-    var { children, xs, sm, md, lg, xl } = _a, rest = tslib.__rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
+    var { children, xs, sm, md, lg, xl } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
     let w = {};
     xs && (w.xs = (100 / 12 * xs) + "%");
     sm && (w.sm = (100 / 12 * sm) + "%");
     md && (w.md = (100 / 12 * md) + "%");
     lg && (w.lg = (100 / 12 * lg) + "%");
     xl && (w.xl = (100 / 12 * xl) + "%");
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
+    return (jsx(Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
 });
 
-module.exports = GridItem;
+export { GridItem as default };
 //# sourceMappingURL=index.js.map

package/GridItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    xs?: number;\r\n    sm?: number;\r\n    md?: number;\r\n    lg?: number;\r\n    xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n    let w: any = {}\r\n\r\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n    md && (w.md = (100 / 12 * md) + \"%\")\r\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n    return (\r\n        <Tag\r\n            ref={ref}\r\n            {...rest}\r\n            maxWidth={w}\r\n            flexBasis={w}\r\n            flexGrow={0}\r\n            baseClass=\"grid-item\"\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\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.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    xs?: number;\r\n    sm?: number;\r\n    md?: number;\r\n    lg?: number;\r\n    xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n    let w: any = {}\r\n\r\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n    md && (w.md = (100 / 12 * md) + \"%\")\r\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n    return (\r\n        <Tag\r\n            ref={ref}\r\n            {...rest}\r\n            maxWidth={w}\r\n            flexBasis={w}\r\n            flexGrow={0}\r\n            baseClass=\"grid-item\"\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\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;;;;"}

package/IconButton/index.js

@@ -1,17 +1,15 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index = require('../useCorner/index.js');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import useCorner from '../useCorner/index.js';
 
 const IconButton = React.forwardRef((_a, ref) => {
     var _b, _c;
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    var { children } = _a, rest = __rest(_a, ["children"]);
     rest.sx = rest.sx || {};
-    let [_d] = core.useInterface("IconButton", rest, {}), { variant, corner, color, size } = _d, _props = tslib.__rest(_d, ["variant", "corner", "color", "size"]);
+    let [_d] = useInterface("IconButton", rest, {}), { variant, corner, color, size } = _d, _props = __rest(_d, ["variant", "corner", "color", "size"]);
     const _p = {};
     if (size)
         _p.size = size;
@@ -21,13 +19,13 @@ const IconButton = React.forwardRef((_a, ref) => {
         _p.variant = variant;
     if (corner)
         _p.corner = corner;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
     color = p.color;
     variant = p.variant;
     corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
-    let template = core.useColorTemplate(color || "brand", variant || "fill");
-    const cornerCss = index(corner);
+    let template = useColorTemplate(color || "brand", variant || "fill");
+    const cornerCss = useCorner(corner);
     if (size === 'small') {
         size = 28;
     }
@@ -37,7 +35,7 @@ const IconButton = React.forwardRef((_a, ref) => {
     else if (size === 'large') {
         size = 52;
     }
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: 'button', ref: ref }, cornerCss, _props, template.primary, { baseClass: 'icon-button', sxr: {
+    return (jsx(Tag, Object.assign({ component: 'button', ref: ref }, cornerCss, _props, template.primary, { baseClass: 'icon-button', sxr: {
             border: 0,
             radius: size,
             height: size,
@@ -60,5 +58,5 @@ const IconButton = React.forwardRef((_a, ref) => {
         }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
 });
 
-module.exports = IconButton;
+export { IconButton as default };
 //# sourceMappingURL=index.js.map

package/IconButton/index.js.map

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

package/Image/index.js

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

package/Image/index.js.map

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

package/Input/index.js

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