@xanui/ui 1.1.17 → 1.1.19

package/Datatable/Table.js

@@ -1,11 +1,23 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),TableHead=require('./TableHead.js'),index=require('../Table/index.js'),index$1=require('../TableBody/index.js'),Row=require('./Row.js');const TableArea = (props) => {
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableHead = require('./TableHead.js');
+var index = require('../Table/index.js');
+var index$1 = require('../TableBody/index.js');
+var Row = require('./Row.js');
+
+const TableArea = (props) => {
     let { rows, renderRow, state, update, slotProps } = props;
-    return (jsxRuntime.jsxs(index.default, Object.assign({ width: "100%", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsxRuntime.jsx(TableHead.default, Object.assign({}, props, { update: update, state: state })), jsxRuntime.jsx(index$1.default, { sx: {
+    return (jsxRuntime.jsxs(index, Object.assign({ width: "100%", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsxRuntime.jsx(TableHead, Object.assign({}, props, { update: update, state: state })), jsxRuntime.jsx(index$1, { sx: {
                     '& tr:last-child td': {
                         borderBottom: 0
                     }
                 }, children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
                     let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
-                    return jsxRuntime.jsx(Row.default, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
+                    return jsxRuntime.jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
                 }) })] })));
-};exports.default=TableArea;//# sourceMappingURL=Table.js.map
+};
+
+module.exports = TableArea;
+//# sourceMappingURL=Table.js.map

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      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" 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({ ...row }, state) : row\n                  return <Row\n                     key={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":["_jsxs","Table","_jsx","TableHead","TableBody","Row"],"mappings":"0PAQA,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAI;AAClD,IAAA,IAAI,EACD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACX,GAAG,KAAK;AAET,IAAA,QACGA,eAAA,CAACC,aAAK,kBAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,IAAK,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,eAC9EC,cAAA,CAACC,iBAAS,oBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAA,CAAA,CAAI,EACtDD,eAACE,eAAS,EAAA,EACP,EAAE,EAAE;AACD,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,YAAY,EAAE;AAChB;AACH,iBAAA,EAAA,QAAA,EAGE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAQ,EAAE,GAAG,KAAI;AACzB,oBAAA,IAAI,IAAI,GAAG,SAAS,GAAG,SAAS,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAI,KAAK,CAAC,GAAG,GAAG;oBACzD,OAAOF,cAAA,CAACG,WAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAER,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,EAAA,EACL,KAAK,EAAA,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EAAA,CAAA,EALP,GAAG,CAAC,EAAE,GAAG,GAAG,CAMlB;AACL,gBAAA,CAAC,CAAC,EAAA,CAEI,CAAA,EAAA,CAAA,CACP;AAEd"}
+{"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      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" 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({ ...row }, state) : row\n                  return <Row\n                     key={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;AAQA;AAKY;AACG;AACF;AACH;AAIK;;AASH;AAKf;;"}

package/Datatable/Table.mjs

@@ -1,4 +1,11 @@
-import {jsxs,jsx}from'react/jsx-runtime';import TableHeadRender from'./TableHead.mjs';import Table from'../Table/index.mjs';import TableBody from'../TableBody/index.mjs';import Row from'./Row.mjs';const TableArea = (props) => {
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import TableHeadRender from './TableHead.mjs';
+import Table from '../Table/index.mjs';
+import TableBody from '../TableBody/index.mjs';
+import Row from './Row.mjs';
+
+const TableArea = (props) => {
     let { rows, renderRow, state, update, slotProps } = props;
     return (jsxs(Table, Object.assign({ width: "100%", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, { sx: {
                     '& tr:last-child td': {
@@ -8,4 +15,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import TableHeadRender from'./TableHead
                     let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
                     return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
                 }) })] })));
-};export{TableArea as default};//# sourceMappingURL=Table.mjs.map
+};
+
+export { TableArea as default };
+//# sourceMappingURL=Table.mjs.map

package/Datatable/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","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      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" 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({ ...row }, state) : row\n                  return <Row\n                     key={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":["_jsxs","_jsx","TableHead"],"mappings":"qMAQA,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAI;AAClD,IAAA,IAAI,EACD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACX,GAAG,KAAK;AAET,IAAA,QACGA,IAAA,CAAC,KAAK,kBAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,IAAK,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,eAC9EC,GAAA,CAACC,eAAS,oBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAA,CAAA,CAAI,EACtDD,IAAC,SAAS,EAAA,EACP,EAAE,EAAE;AACD,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,YAAY,EAAE;AAChB;AACH,iBAAA,EAAA,QAAA,EAGE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAQ,EAAE,GAAG,KAAI;AACzB,oBAAA,IAAI,IAAI,GAAG,SAAS,GAAG,SAAS,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAI,KAAK,CAAC,GAAG,GAAG;oBACzD,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAER,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,EAAA,EACL,KAAK,EAAA,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EAAA,CAAA,EALP,GAAG,CAAC,EAAE,GAAG,GAAG,CAMlB;AACL,gBAAA,CAAC,CAAC,EAAA,CAEI,CAAA,EAAA,CAAA,CACP;AAEd"}
+{"version":3,"file":"Table.mjs","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      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" 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({ ...row }, state) : row\n                  return <Row\n                     key={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;AAQA;AAKY;AACG;AACF;AACH;AAIK;;AASH;AAKf;;"}

package/Datatable/TableHead.js

@@ -1,9 +1,23 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../TableHead/index.js'),index$1=require('../TableRow/index.js'),index$2=require('../TableCell/index.js'),index$3=require('../Checkbox/index.js'),IndeterminateCheckBoxIcon=require('@xanui/icons/IndeterminateCheckBox'),index$4=require('../Stack/index.js'),ArrowDropDown=require('@xanui/icons/ArrowDropDown'),icons=require('@xanui/icons');const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../TableHead/index.js');
+var index$1 = require('../TableRow/index.js');
+var index$2 = require('../TableCell/index.js');
+var index$3 = require('../Checkbox/index.js');
+var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+var index$4 = require('../Stack/index.js');
+var ArrowDropDown = require('@xanui/icons/ArrowDropDown');
+var icons = require('@xanui/icons');
+
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
     if (!columns.length)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
     const sortables = state.sortable || {};
-    return (jsxRuntime.jsx(index.default, { position: "relative", children: jsxRuntime.jsxs(index$1.default, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsxRuntime.jsx(index$2.default, { th: true, width: 40, children: jsxRuntime.jsx(index$3.default, { checkIcon: state.selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    return (jsxRuntime.jsx(index, { position: "relative", children: jsxRuntime.jsxs(index$1, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsxRuntime.jsx(index$2, { th: true, width: 40, children: jsxRuntime.jsx(index$3, { checkIcon: state.selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -30,7 +44,7 @@
                             }
                         } }) }), columns.map((_a, idx) => {
                     var { label, field: _f, sortable } = _a, rest = tslib.__rest(_a, ["label", "field", "sortable"]);
-                    return jsxRuntime.jsx(index$2.default, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxRuntime.jsxs(index$4.default, { flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
+                    return jsxRuntime.jsx(index$2, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxRuntime.jsxs(index$4, { flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
                                 if (sortable) {
                                     let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
                                     update({
@@ -38,5 +52,8 @@
                                     });
                                 }
                             }, children: [label, sortable && jsxRuntime.jsx(jsxRuntime.Fragment, { children: sortables[_f] === 'asc' ? jsxRuntime.jsx(ArrowDropDown, {}) : jsxRuntime.jsx(icons.ArrowDropUp, {}) })] }) }), idx);
-                }), rowAction && jsxRuntime.jsx(index$2.default, { th: true, width: 30 })] }) }));
-};exports.default=TableHeadRender;//# sourceMappingURL=TableHead.js.map
+                }), rowAction && jsxRuntime.jsx(index$2, { th: true, width: 30 })] }) }));
+};
+
+module.exports = TableHeadRender;
+//# sourceMappingURL=TableHead.js.map

package/Datatable/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":["_jsx","TableHead","_jsxs","TableRow","TableCell","Checkbox","IntermidiatIcon","__rest","Stack","_Fragment","ArrowDropUp"],"mappings":"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"}
+{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA;;AACyB;AACrB;AACA;AACA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;AAAiD;;AAS9C;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/TableHead.mjs

@@ -1,4 +1,16 @@
-import {__rest}from'tslib';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import TableHead from'../TableHead/index.mjs';import TableRow from'../TableRow/index.mjs';import TableCell from'../TableCell/index.mjs';import Checkbox from'../Checkbox/index.mjs';import IndeterminateCheckBoxIcon from'@xanui/icons/IndeterminateCheckBox';import Stack from'../Stack/index.mjs';import ArrowDropDown from'@xanui/icons/ArrowDropDown';import {ArrowDropUp}from'@xanui/icons';const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
+"use client";
+import { __rest } from 'tslib';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import TableHead from '../TableHead/index.mjs';
+import TableRow from '../TableRow/index.mjs';
+import TableCell from '../TableCell/index.mjs';
+import Checkbox from '../Checkbox/index.mjs';
+import IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';
+import Stack from '../Stack/index.mjs';
+import ArrowDropDown from '@xanui/icons/ArrowDropDown';
+import { ArrowDropUp } from '@xanui/icons';
+
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
     if (!columns.length)
         return jsx(Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
@@ -39,4 +51,7 @@ import {__rest}from'tslib';import {jsx,Fragment,jsxs}from'react/jsx-runtime';imp
                                 }
                             }, children: [label, sortable && jsx(Fragment, { children: sortables[_f] === 'asc' ? jsx(ArrowDropDown, {}) : jsx(ArrowDropUp, {}) })] }) }), idx);
                 }), rowAction && jsx(TableCell, { th: true, width: 30 })] }) }));
-};export{TableHeadRender as default};//# sourceMappingURL=TableHead.mjs.map
+};
+
+export { TableHeadRender as default };
+//# sourceMappingURL=TableHead.mjs.map

package/Datatable/TableHead.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.mjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":["_jsx","_jsxs","IntermidiatIcon","_Fragment"],"mappings":"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"}
+{"version":3,"file":"TableHead.mjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;;AACyB;AACrB;AACA;AACA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;AAAiD;;AAS9C;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/index.js

@@ -1,4 +1,17 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../ViewBox/index.js'),core=require('@xanui/core'),SelectedBox=require('./SelectedBox.js'),Table=require('./Table.js'),FilterBox=require('./FilterBox.js'),index$2=require('../TablePagination/index.js'),index$1=require('../Stack/index.js');const DataTable = React.forwardRef((props, ref) => {
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../ViewBox/index.js');
+var core = require('@xanui/core');
+var SelectedBox = require('./SelectedBox.js');
+var Table = require('./Table.js');
+var FilterBox = require('./FilterBox.js');
+var index$2 = require('../TablePagination/index.js');
+var index$1 = require('../Stack/index.js');
+
+const DataTable = React.forwardRef((props, ref) => {
     let [_props] = core.useInterface("Datatable", props, {});
     let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
     const [state, setState] = React.useState({
@@ -12,6 +25,7 @@
         },
         tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
         search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
+        sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
     });
     const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
     React.useEffect(() => {
@@ -19,7 +33,7 @@
             onStateChange(state);
         }
     }, [state]);
-    return (jsxRuntime.jsxs(index.default, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
+    return (jsxRuntime.jsxs(index, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
             '& thead': fixedHeader ? {
                 position: "sticky",
                 top: 0,
@@ -30,7 +44,10 @@
                 display: "flex",
                 flexDirection: "row",
                 justifyContent: "space-between"
-            }, children: [jsxRuntime.jsx(SelectedBox.default, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(FilterBox.default, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsxRuntime.jsx(Table.default, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(index$1.default, { p: 1, alignItems: "flex-end", children: !disablePagination && jsxRuntime.jsx(index$2.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, onChange: (state) => {
+            }, children: [jsxRuntime.jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsxRuntime.jsx(Table, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(index$1, { p: 1, alignItems: "flex-end", children: !disablePagination && jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, onChange: (state) => {
                         update({ pagination: state });
                     } })) })] }));
-});exports.default=DataTable;//# sourceMappingURL=index.js.map
+});
+
+module.exports = DataTable;
+//# sourceMappingURL=index.js.map

package/Datatable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":["useInterface","useState","useEffect","_jsxs","ViewBox","Tag","_jsx","SelectedBox","FilterBox","TableArea","Stack","TablePagination"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}

package/Datatable/index.mjs

@@ -1,4 +1,15 @@
-import {jsxs,jsx}from'react/jsx-runtime';import React,{useState,useEffect}from'react';import ViewBox from'../ViewBox/index.mjs';import {useInterface,Tag}from'@xanui/core';import SelectedBox from'./SelectedBox.mjs';import TableArea from'./Table.mjs';import FilterBox from'./FilterBox.mjs';import TablePagination from'../TablePagination/index.mjs';import Stack from'../Stack/index.mjs';const DataTable = React.forwardRef((props, ref) => {
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import ViewBox from '../ViewBox/index.mjs';
+import { useInterface, Tag } from '@xanui/core';
+import SelectedBox from './SelectedBox.mjs';
+import TableArea from './Table.mjs';
+import FilterBox from './FilterBox.mjs';
+import TablePagination from '../TablePagination/index.mjs';
+import Stack from '../Stack/index.mjs';
+
+const DataTable = React.forwardRef((props, ref) => {
     let [_props] = useInterface("Datatable", props, {});
     let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
     const [state, setState] = useState({
@@ -12,6 +23,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import React,{useState,useEffect}from'r
         },
         tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
         search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
+        sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
     });
     const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
     useEffect(() => {
@@ -33,4 +45,7 @@ import {jsxs,jsx}from'react/jsx-runtime';import React,{useState,useEffect}from'r
             }, children: [jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsx(TableArea, Object.assign({}, _props, { update: update, state: state })), jsx(Stack, { p: 1, alignItems: "flex-end", children: !disablePagination && jsx(TablePagination, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, onChange: (state) => {
                         update({ pagination: state });
                     } })) })] }));
-});export{DataTable as default};//# sourceMappingURL=index.mjs.map
+});
+
+export { DataTable as default };
+//# sourceMappingURL=index.mjs.map

package/Datatable/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}

package/Datatable/types.d.ts

@@ -40,7 +40,7 @@ type DatatableProps = {
         total?: number;
         perpages?: number[];
     };
-    defaultState?: Partial<DatatableState>;
+    defaultState?: DatatableStatePartial;
     onStateChange?: (state: DatatableState) => void;
     filters?: {
         [key: string]: DatatableFilter[];
@@ -61,9 +61,19 @@ type DatatableState = {
     pagination: TablePaginationState;
     tab: string;
     search: string;
+    sortable: {
+        [field: string]: 'asc' | 'desc';
+    };
+};
+type DatatableStatePartial = {
+    selected?: number[];
+    selectAll?: boolean;
+    pagination?: Partial<TablePaginationState>;
+    tab?: string;
+    search?: string;
     sortable?: {
         [field: string]: 'asc' | 'desc';
     };
 };
 
-export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, RowActionType, TabsProps };
+export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, DatatableStatePartial, RowActionType, TabsProps };

package/Divider/index.js

@@ -1,4 +1,11 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Divider = React.forwardRef((_a, ref) => {
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@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"]);
     const _p = {};
@@ -18,4 +25,7 @@
             height: isHori ? size : "100%",
             bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
         }, ref: ref, children: children })));
-});exports.default=Divider;//# sourceMappingURL=index.js.map
+});
+
+module.exports = Divider;
+//# 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';\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":"4LAUA,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';\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;;;;"}

package/Divider/index.mjs

@@ -1,4 +1,9 @@
-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) => {
+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 = __rest(_a, ["children", "direction", "color", "size"]);
     const _p = {};
@@ -18,4 +23,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
             height: isHori ? size : "100%",
             bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
         }, ref: ref, children: children })));
-});export{Divider as default};//# sourceMappingURL=index.mjs.map
+});
+
+export { Divider as default };
+//# sourceMappingURL=index.mjs.map

package/Divider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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":"yIAUA,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.mjs","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;;;;"}

package/Drawer/index.js

@@ -1,4 +1,13 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index=require('../Layer/index.js'),index$1=require('../ClickOutside/index.js');const getVariant = (placement) => {
+"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');
+
+const getVariant = (placement) => {
     switch (placement) {
         case "right":
             return "fadeLeft";
@@ -28,13 +37,13 @@ const Drawer = (_a) => {
         large: 400
     };
     let _size = sizes[size] || size;
-    return (jsxRuntime.jsx(index.default, 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 (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: {
                 width: "100vw",
                 height: "100vh",
                 display: "flex",
                 direction: isSide ? "row" : "column",
                 justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
-            }, children: jsxRuntime.jsx(index$1.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
+            }, children: jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
                         width: isSide ? _size : "100%",
                         height: isSide ? "100%" : _size,
                         bgcolor: "background.primary",
@@ -63,4 +72,7 @@ Drawer.open = (children, props) => {
 };
 Drawer.close = () => {
     core.Renderar.unrender(Drawer);
-};exports.default=Drawer;//# sourceMappingURL=index.js.map
+};
+
+module.exports = Drawer;
+//# sourceMappingURL=index.js.map

package/Drawer/index.js.map

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

package/Drawer/index.mjs

@@ -1,4 +1,11 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useBreakpointProps,Tag,Renderar}from'@xanui/core';import Layer from'../Layer/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const getVariant = (placement) => {
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpointProps, Tag, Renderar } from '@xanui/core';
+import Layer from '../Layer/index.mjs';
+import ClickOutside from '../ClickOutside/index.mjs';
+
+const getVariant = (placement) => {
     switch (placement) {
         case "right":
             return "fadeLeft";
@@ -63,4 +70,7 @@ Drawer.open = (children, props) => {
 };
 Drawer.close = () => {
     Renderar.unrender(Drawer);
-};export{Drawer as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { Drawer as default };
+//# sourceMappingURL=index.mjs.map

package/Drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"mNAkBA,MAAM,UAAU,GAAG,CAAC,SAAe,KAAI;IACnC,QAAQ,SAAS;AACb,QAAA,KAAK,OAAO;AACR,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,QAAQ;AACnB,QAAA;AACI,YAAA,OAAO,WAAW;;AAE9B,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,EAAoF,KAAI;;AAAxF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAA,GAAA,EAA8B,EAAzB,UAAU,GAAA,MAAA,CAAA,EAAA,EAArE,gEAAuE,CAAF;IACjF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AACjC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;IAEzB,IAAI,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO;AAC1D,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,KAAK,EAAE;KACV;IAED,IAAI,KAAK,GAAG,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI;AAEtC,IAAA,QACIA,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,UAAU,EACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAA,EACpB,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,YAEjCA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EACnB,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,MAAM,EAAE,OAAO;AACf,gBAAA,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,QAAe;AAC3C,gBAAA,cAAc,EAAE,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,GAAG,YAAY,GAAG;aAChF,EAAA,QAAA,EAEDA,GAAA,CAAC,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,YAAY,EAAA,EAC3B,cAAc,EAAE,cAAc,KAAK,MAAK,EAAG,CAAC,CAAC,EAAA,QAAA,EAE7CA,GAAA,CAAC,GAAG,EAAA,EACA,GAAG,EAAE;wBACD,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM;wBAC9B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK;AAC/B,wBAAA,OAAO,EAAE,oBAAoB;AAC7B,wBAAA,MAAM,EAAE;qBACX,EACD,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAEzB,QAAQ,GACP,EAAA,CAAA,CACK,EAAA,CAAA,CACb,EAAA,CAAA,CACF;AAEhB;AAGA,MAAM,CAAC,IAAI,GAAG,CAAC,QAAiC,EAAE,KAA8C,KAAI;AAChG,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAa,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACnC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACX,CAAC,CAAC,QAAQ,EAAE;AAChB,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YACjB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;YAC1B;iBAAO;gBACH,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;YAClC;AACJ,QAAA,CAAC,IACH;IAEF,OAAO;QACH,IAAI,EAAE,MAAK;YACP,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACjC,CAAC;QACD,KAAK,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QAClC,CAAC;KACJ;AACL,CAAC;AAED,MAAM,CAAC,KAAK,GAAG,MAAK;AAChB,IAAA,QAAQ,CAAC,QAAQ,CAAC,MAAa,CAAC;AACpC,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}