@xanui/ui 1.1.38 → 1.1.40

package/Datatable/Row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.cjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["'use client'\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n    rawRow: DataTableDefaultRow;\r\n    row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n    const selected = row.id ? state.selected.includes(row?.id) : false\r\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n    const [target, setTarget] = useState<any>()\r\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\r\n\r\n    return (\r\n        <TableRow >\r\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n                {\r\n                    !!row.id && <Checkbox\r\n                        size={compact ? \"small\" : \"medium\"}\r\n                        checked={selected}\r\n                        onChange={() => {\r\n                            if (isDisable || !row.id) return\r\n                            let ids = [...state.selected]\r\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n                            let selectedLength = 0\r\n                            rows.forEach(r => {\r\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\r\n                                if (!isDisable) selectedLength++\r\n                            })\r\n\r\n                            update({\r\n                                selectAll: selectedLength === ids.length,\r\n                                selected: ids\r\n                            })\r\n                        }}\r\n                    />\r\n                }\r\n\r\n            </TableCell>}\r\n            {\r\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n                    field = field || label\r\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\r\n                    return (\r\n                        <TableCell\r\n                            key={idx}\r\n                            textAlign=\"left\"\r\n                            {...rest}\r\n                            bgcolor={selectedColor}\r\n                        >\r\n                            {row[field]}\r\n                        </TableCell>\r\n                    )\r\n                })\r\n            }\r\n            {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n                <IconButton\r\n                    disabled={isDisable || selected}\r\n                    onClick={(e: any) => setTarget(e.currentTarget)}\r\n                    variant=\"text\"\r\n                    color=\"default\"\r\n                >\r\n                    <ActionIcon />\r\n                </IconButton>\r\n                <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n                    <List\r\n                        bgcolor=\"background.primary\"\r\n                        minWidth={160}\r\n                        sx={{\r\n                            '& > li': {\r\n                                borderBottom: 1,\r\n                                '&:last-child': {\r\n                                    borderBottom: 0\r\n                                }\r\n                            }\r\n                        }}\r\n                    >\r\n                        {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n                            return (\r\n                                <ListItem\r\n                                    key={label}\r\n                                    startIcon={icon}\r\n                                    onClick={(e: any) => {\r\n                                        onClick && onClick(e)\r\n                                        setTarget(null)\r\n                                    }}\r\n                                >{label}</ListItem>\r\n                            )\r\n                        })}\r\n                    </List>\r\n                </Menu>\r\n            </TableCell>\r\n            }\r\n        </TableRow>\r\n    )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}

package/Datatable/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n    rawRow: DataTableDefaultRow;\r\n    row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n    const selected = row.id ? state.selected.includes(row?.id) : false\r\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n    const [target, setTarget] = useState<any>()\r\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\r\n\r\n    return (\r\n        <TableRow >\r\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n                {\r\n                    !!row.id && <Checkbox\r\n                        size={compact ? \"small\" : \"medium\"}\r\n                        checked={selected}\r\n                        onChange={() => {\r\n                            if (isDisable || !row.id) return\r\n                            let ids = [...state.selected]\r\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n                            let selectedLength = 0\r\n                            rows.forEach(r => {\r\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\r\n                                if (!isDisable) selectedLength++\r\n                            })\r\n\r\n                            update({\r\n                                selectAll: selectedLength === ids.length,\r\n                                selected: ids\r\n                            })\r\n                        }}\r\n                    />\r\n                }\r\n\r\n            </TableCell>}\r\n            {\r\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n                    field = field || label\r\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\r\n                    return (\r\n                        <TableCell\r\n                            key={idx}\r\n                            textAlign=\"left\"\r\n                            {...rest}\r\n                            bgcolor={selectedColor}\r\n                        >\r\n                            {row[field]}\r\n                        </TableCell>\r\n                    )\r\n                })\r\n            }\r\n            {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n                <IconButton\r\n                    disabled={isDisable || selected}\r\n                    onClick={(e: any) => setTarget(e.currentTarget)}\r\n                    variant=\"text\"\r\n                    color=\"default\"\r\n                >\r\n                    <ActionIcon />\r\n                </IconButton>\r\n                <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n                    <List\r\n                        bgcolor=\"background.primary\"\r\n                        minWidth={160}\r\n                        sx={{\r\n                            '& > li': {\r\n                                borderBottom: 1,\r\n                                '&:last-child': {\r\n                                    borderBottom: 0\r\n                                }\r\n                            }\r\n                        }}\r\n                    >\r\n                        {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n                            return (\r\n                                <ListItem\r\n                                    key={label}\r\n                                    startIcon={icon}\r\n                                    onClick={(e: any) => {\r\n                                        onClick && onClick(e)\r\n                                        setTarget(null)\r\n                                    }}\r\n                                >{label}</ListItem>\r\n                            )\r\n                        })}\r\n                    </List>\r\n                </Menu>\r\n            </TableCell>\r\n            }\r\n        </TableRow>\r\n    )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}
+{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["'use client'\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n    rawRow: DataTableDefaultRow;\r\n    row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n    const selected = row.id ? state.selected.includes(row?.id) : false\r\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n    const [target, setTarget] = useState<any>()\r\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\r\n\r\n    return (\r\n        <TableRow >\r\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n                {\r\n                    !!row.id && <Checkbox\r\n                        size={compact ? \"small\" : \"medium\"}\r\n                        checked={selected}\r\n                        onChange={() => {\r\n                            if (isDisable || !row.id) return\r\n                            let ids = [...state.selected]\r\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n                            let selectedLength = 0\r\n                            rows.forEach(r => {\r\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\r\n                                if (!isDisable) selectedLength++\r\n                            })\r\n\r\n                            update({\r\n                                selectAll: selectedLength === ids.length,\r\n                                selected: ids\r\n                            })\r\n                        }}\r\n                    />\r\n                }\r\n\r\n            </TableCell>}\r\n            {\r\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n                    field = field || label\r\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\r\n                    return (\r\n                        <TableCell\r\n                            key={idx}\r\n                            textAlign=\"left\"\r\n                            {...rest}\r\n                            bgcolor={selectedColor}\r\n                        >\r\n                            {row[field]}\r\n                        </TableCell>\r\n                    )\r\n                })\r\n            }\r\n            {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n                <IconButton\r\n                    disabled={isDisable || selected}\r\n                    onClick={(e: any) => setTarget(e.currentTarget)}\r\n                    variant=\"text\"\r\n                    color=\"default\"\r\n                >\r\n                    <ActionIcon />\r\n                </IconButton>\r\n                <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n                    <List\r\n                        bgcolor=\"background.primary\"\r\n                        minWidth={160}\r\n                        sx={{\r\n                            '& > li': {\r\n                                borderBottom: 1,\r\n                                '&:last-child': {\r\n                                    borderBottom: 0\r\n                                }\r\n                            }\r\n                        }}\r\n                    >\r\n                        {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n                            return (\r\n                                <ListItem\r\n                                    key={label}\r\n                                    startIcon={icon}\r\n                                    onClick={(e: any) => {\r\n                                        onClick && onClick(e)\r\n                                        setTarget(null)\r\n                                    }}\r\n                                >{label}</ListItem>\r\n                            )\r\n                        })}\r\n                    </List>\r\n                </Menu>\r\n            </TableCell>\r\n            }\r\n        </TableRow>\r\n    )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}

package/Datatable/SelectedBox.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../IconButton/index.cjs');
+var index = require('../Stack/index.cjs');
+var index$1 = require('../Text/index.cjs');
+
+const SelectedBox = (props) => {
+    let { state, rowAction } = props;
+    let checked = state.selectAll || !!state.selected.length;
+    if (!checked)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return (jsxRuntime.jsxs(index, { bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxRuntime.jsxs(index$1, { fontWeight: 600, children: ["Selected: ", state.selected.length] }), jsxRuntime.jsx(index, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
+                    var { label, icon } = _a, bprops = tslib.__rest(_a, ["label", "icon"]);
+                    return (jsxRuntime.jsx(index$2, Object.assign({ variant: "soft", color: "brand" }, bprops, { children: icon }), label));
+                }) })] }));
+};
+
+module.exports = SelectedBox;
+//# sourceMappingURL=SelectedBox.cjs.map

package/Datatable/SelectedBox.cjs.map

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

package/Datatable/Table.cjs

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableHead = require('./TableHead.cjs');
+var index = require('../Table/index.cjs');
+var index$1 = require('../TableBody/index.cjs');
+var Row = require('./Row.cjs');
+
+const TableArea = (props) => {
+    let { rows, compact, renderRow, state, update, slotProps } = props;
+    return (jsxRuntime.jsxs(index, Object.assign({ width: "100%", size: compact ? "small" : "medium", 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, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), `dt-row-${row.id}-${idx}`);
+                }) })] })));
+};
+
+module.exports = TableArea;
+//# sourceMappingURL=Table.cjs.map

package/Datatable/Table.cjs.map

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

package/Datatable/Table.js.map

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

package/Datatable/TableHead.cjs

@@ -0,0 +1,61 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../TableHead/index.cjs');
+var index$1 = require('../TableRow/index.cjs');
+var index$2 = require('../TableCell/index.cjs');
+var index$3 = require('../Checkbox/index.cjs');
+var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+var index$4 = require('../Stack/index.cjs');
+var ArrowDropDown = require('@xanui/icons/ArrowDropDown');
+var ArrowDropUp = require('@xanui/icons/ArrowDropUp');
+var index$5 = require('../Text/index.cjs');
+
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }) => {
+    var _a;
+    if (!columns.length)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    let checked = state.selectAll || !!state.selected.length;
+    const sortables = state.sortable || {};
+    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, { size: compact ? "small" : "medium", 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++) {
+                                const row = rows[i];
+                                const isDisable = (disableRow ? disableRow(row, state) : false) || false;
+                                if (!isDisable && row.id) {
+                                    ids.push(row.id);
+                                }
+                                else {
+                                    undefinedCount += 1;
+                                }
+                            }
+                            if (undefinedCount) {
+                                update({
+                                    selected: state.selected.length ? [] : ids,
+                                    selectAll: !state.selected.length
+                                });
+                            }
+                            else {
+                                update({
+                                    selected: state.selectAll ? [] : ids,
+                                    selectAll: !state.selectAll
+                                });
+                            }
+                        } }) }), columns.map((_a, idx) => {
+                    var { label, field: _f, sortable } = _a, rest = tslib.__rest(_a, ["label", "field", "sortable"]);
+                    return jsxRuntime.jsx(index$2, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxRuntime.jsxs(index$4, { disabled: skeleton ? true : false, flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
+                                if (sortable) {
+                                    let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
+                                    update({
+                                        sortable: Object.assign(Object.assign({}, sortables), { [_f]: newSort })
+                                    });
+                                }
+                            }, children: [jsxRuntime.jsx(index$5, { color: "text.secondary", children: label }), sortable && jsxRuntime.jsx(jsxRuntime.Fragment, { children: sortables[_f] === 'asc' ? jsxRuntime.jsx(ArrowDropDown, {}) : jsxRuntime.jsx(ArrowDropUp, {}) })] }) }), idx);
+                }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsx(index$2, { th: true, width: 30 })] }) }));
+};
+
+module.exports = TableHeadRender;
+//# sourceMappingURL=TableHead.cjs.map

package/Datatable/TableHead.cjs.map

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

package/Datatable/TableHead.js.map

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

package/Datatable/index.cjs

@@ -0,0 +1,93 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$1 = require('../ViewBox/index.cjs');
+var core = require('@xanui/core');
+var SelectedBox = require('./SelectedBox.cjs');
+var Table = require('./Table.cjs');
+var FilterBox = require('./FilterBox.cjs');
+var index$3 = require('../TablePagination/index.cjs');
+var index$2 = require('../Stack/index.cjs');
+var index = require('../Skeleton/index.cjs');
+
+const DataTable = React.forwardRef((props, ref) => {
+    let [p] = core.useInterface("Datatable", props, {});
+    let _props = React.useMemo(() => {
+        let np = Object.assign({}, p);
+        if (typeof np.skeleton === 'number' || np.skeleton === true) {
+            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10;
+            let length = np.skeleton === true ? limit : np.skeleton;
+            if (!np.hideCheckbox) {
+                np.columns = [{
+                        label: '', field: "__checkbox", width: 34
+                    }, ...np.columns];
+            }
+            if (np.rowAction) {
+                np.columns = [...np.columns, { label: "", field: "__actions", width: 34 }];
+            }
+            let columns = np.columns || [];
+            np.rows = [];
+            for (let i = 0; i < length; i++) {
+                let r = { id: i };
+                for (let col of columns) {
+                    r[col.field] = "";
+                }
+                np.rows.push(r);
+            }
+            np.renderRow = (r) => {
+                for (let col of columns) {
+                    r[col.field] = jsxRuntime.jsx(index, { animation: "wave", height: 16, radius: .5, width: "100%" });
+                }
+                return r;
+            };
+            np.hideCheckbox = true;
+            np.rowAction = undefined;
+        }
+        return np;
+    }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows]);
+    let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, defaultState = {}, onStateChange, fixedHeader, hidePagination, slotProps, 
+    // skip props for ViewBox
+    skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "defaultState", "onStateChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
+    const [state, setState] = React.useState({
+        selected: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selected) || [],
+        selectAll: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selectAll) || false,
+        pagination: {
+            page: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.page) || 1,
+            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,
+            from: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.from) || 1,
+            to: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.to) || (perpages && perpages.length > 0 ? perpages[0] : 10),
+        },
+        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) || {},
+        filters: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.filter) || {}
+    });
+    const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
+    React.useEffect(() => {
+        if (onStateChange) {
+            onStateChange(state);
+        }
+    }, [state]);
+    return (jsxRuntime.jsxs(index$1, Object.assign({ height: "100%" }, viewBoxProps, { baseClass: 'datatable', ref: ref, sx: Object.assign(Object.assign({}, viewBoxProps === null || viewBoxProps === void 0 ? void 0 : viewBoxProps.sx), { '& thead': fixedHeader ? {
+                position: "sticky",
+                top: 0,
+                bgcolor: "background.primary",
+                zIndex: 1
+            } : {} }), startContent: (jsxRuntime.jsxs(core.Tag, { baseClass: 'datatable-header', sxr: {
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between"
+            }, 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$2, { p: 1, alignItems: "flex-end", children: !hidePagination && jsxRuntime.jsx(index$3, Object.assign({ disabled: _props.skeleton ? true : false }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: total || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, slotProps: {
+                        select: {
+                            size: "small",
+                        }
+                    }, onChange: (state) => {
+                        update({ pagination: state });
+                    } })) })] })));
+});
+
+module.exports = DataTable;
+//# sourceMappingURL=index.cjs.map

package/Datatable/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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/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.cjs

@@ -0,0 +1,31 @@
+'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 = {};
+    if (direction)
+        _p.direction = direction;
+    if (color)
+        _p.color = color;
+    if (size)
+        _p.size = size;
+    const p = core.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: {
+            width: isHori ? "100%" : size,
+            height: isHori ? size : "100%",
+            bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
+        }, ref: ref, children: children })));
+});
+
+module.exports = Divider;
+//# sourceMappingURL=index.cjs.map

package/Divider/index.cjs.map

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

package/Drawer/index.cjs

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var index = require('../Layer/index.cjs');
+var index$1 = require('../ClickOutside/index.cjs');
+
+const getVariant = (placement) => {
+    switch (placement) {
+        case "right":
+            return "fadeLeft";
+        case "top":
+            return "fadeDown";
+        case "bottom":
+            return "fadeUp";
+        default:
+            return "fadeRight";
+    }
+};
+const Drawer = (_a) => {
+    var _b;
+    var { children, placement, size, slotProps, onClickOutside } = _a, layerProps = tslib.__rest(_a, ["children", "placement", "size", "slotProps", "onClickOutside"]);
+    const _p = {};
+    if (placement)
+        _p.placement = placement;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    placement = (_b = p.placement) !== null && _b !== void 0 ? _b : 'left';
+    size = p.size || "medium";
+    let isSide = placement === 'left' || placement === 'right';
+    let sizes = {
+        small: 220,
+        medium: 330,
+        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: {
+                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: {
+                        width: isSide ? _size : "100%",
+                        height: isSide ? "100%" : _size,
+                        bgcolor: "background.primary",
+                        shadow: 20
+                    }, baseClass: 'drawer-content', children: children }) })) })) })));
+};
+Drawer.open = (children, props) => {
+    const d = core.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) {
+                props.onClickOutside();
+            }
+            else {
+                d.updateProps({ open: false });
+            }
+        } }));
+    return {
+        open: () => {
+            d.updateProps({ open: true });
+        },
+        close: () => {
+            d.updateProps({ open: false });
+        },
+    };
+};
+Drawer.close = () => {
+    core.Renderar.unrender(Drawer);
+};
+
+module.exports = Drawer;
+//# sourceMappingURL=index.cjs.map

package/Drawer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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/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.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Form = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let formRef = ref || React.useRef(null);
+    const cloneAllChildren = (childs) => {
+        return React.Children.map(childs, (child) => {
+            let c = child;
+            if (React.isValidElement(child) && c.props.name) {
+                const form = formRef.current;
+                const formData = new FormData(form);
+                return React.cloneElement(child, {
+                    onChange: () => {
+                        console.log(formData.get(c.props.name));
+                    },
+                    value: formData.get(c.props.name),
+                    children: cloneAllChildren(c.props.children),
+                });
+            }
+            return child;
+        });
+    };
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
+            e.preventDefault();
+            const form = formRef.current;
+            const formData = new FormData(form);
+            formData.forEach((value, key) => {
+                console.log(key + ": " + value);
+            });
+        }, sxr: {
+            bgcolor: "default",
+            p: 2,
+            maxWidth: 400,
+            radius: 1,
+        }, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
+});
+
+module.exports = Form;
+//# sourceMappingURL=index.cjs.map

package/Form/index.cjs.map

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