@xanui/ui 1.2.8 → 1.2.11

package/Datatable/FilterBox.js

@@ -24,9 +24,9 @@ const FilterBox = (props) => {
                         update({ tab: value });
                     }, value: state.tab, children: tabs.map(t => jsx(Tab, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxs(Stack, { flexRow: true, gap: 2, className: 'datatable-header-right-area', alignItems: "center", children: [!hideSearch && jsx(Input, Object.assign({ disabled: skeleton ? true : false, endIcon: jsx(IconSearch, {}), placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
                             update({ search: e.target.value });
-                        } })), filters && jsxs(Stack, { children: [jsx(IconButton, { color: "surface", variant: "text", onClick: () => {
+                        } })), filters && jsxs(Stack, { children: [jsx(IconButton, { color: "default", variant: "text", onClick: () => {
                                     setOpenFilter(true);
-                                }, children: jsx(FilterListOutlined, {}) }), jsx(Drawer, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsx(ViewBox, { height: "100%", p: 1, startContent: jsxs(Stack, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsx(Text, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsx(IconButton, { size: "small", color: "surface", variant: "text", onClick: () => {
+                                }, children: jsx(FilterListOutlined, {}) }), jsx(Drawer, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsx(ViewBox, { height: "100%", p: 1, startContent: jsxs(Stack, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsx(Text, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsx(IconButton, { size: "small", color: "default", variant: "text", onClick: () => {
                                                     setOpenFilter(false);
                                                 }, children: jsx(CloseOutlined, {}) })] }), children: jsx(Stack, { gap: 2, children: jsx(DataFilter, { options: filters, value: state.filters, onChange: (s) => {
                                                 update({ filters: s });

package/Datatable/FilterBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"surface\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"surface\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}
+{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"default\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"default\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/Row.cjs

@@ -40,7 +40,7 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns,
                 if (!row[field])
                     return jsxRuntime.jsx(index$1, {}, idx);
                 return (jsxRuntime.jsx(index$1, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor, children: row[field] }), idx));
-            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsxs(index$1, { width: 30, bgcolor: selectedColor, borderColor: "surface.divider", children: [jsxRuntime.jsx(index$3, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "surface", children: jsxRuntime.jsx(ActionIcon, {}) }), jsxRuntime.jsx(index$4, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, { bgcolor: "surface.main", minWidth: 160, sx: {
+            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsxs(index$1, { width: 30, bgcolor: selectedColor, borderColor: "default.divider", children: [jsxRuntime.jsx(index$3, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsxRuntime.jsx(ActionIcon, {}) }), jsxRuntime.jsx(index$4, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, { bgcolor: "default.base", minWidth: 160, sx: {
                                 '& > li': {
                                     borderBottom: 1,
                                     '&:last-child': {

package/Datatable/Row.cjs.map

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

@@ -38,7 +38,7 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns,
                 if (!row[field])
                     return jsx(TableCell, {}, idx);
                 return (jsx(TableCell, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor, children: row[field] }), idx));
-            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxs(TableCell, { width: 30, bgcolor: selectedColor, borderColor: "surface.divider", children: [jsx(IconButton, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "surface", children: jsx(ActionIcon, {}) }), jsx(Menu, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsx(List, { bgcolor: "surface.main", minWidth: 160, sx: {
+            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxs(TableCell, { width: 30, bgcolor: selectedColor, borderColor: "default.divider", children: [jsx(IconButton, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsx(ActionIcon, {}) }), jsx(Menu, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsx(List, { bgcolor: "default.base", minWidth: 160, sx: {
                                 '& > li': {
                                     borderBottom: 1,
                                     '&:last-child': {

package/Datatable/Row.js.map

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

@@ -12,7 +12,7 @@ const SelectedBox = (props) => {
     let checked = state.selectAll || !!state.selected.length;
     if (!checked)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(index, { bgcolor: "surface.light", 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) => {
+    return (jsxRuntime.jsxs(index, { bgcolor: "default.base", 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: "ghost", color: "primary" }, bprops, { children: icon }), label));
                 }) })] }));

package/Datatable/SelectedBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.cjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"surface.light\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"ghost\"\n                     color=\"primary\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}
+{"version":3,"file":"SelectedBox.cjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"default.base\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"ghost\"\n                     color=\"primary\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}

package/Datatable/SelectedBox.js

@@ -10,7 +10,7 @@ const SelectedBox = (props) => {
     let checked = state.selectAll || !!state.selected.length;
     if (!checked)
         return jsx(Fragment, {});
-    return (jsxs(Stack, { bgcolor: "surface.light", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxs(Text, { fontWeight: 600, children: ["Selected: ", state.selected.length] }), jsx(Stack, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
+    return (jsxs(Stack, { bgcolor: "default.base", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxs(Text, { fontWeight: 600, children: ["Selected: ", state.selected.length] }), jsx(Stack, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
                     var { label, icon } = _a, bprops = __rest(_a, ["label", "icon"]);
                     return (jsx(IconButton, Object.assign({ variant: "ghost", color: "primary" }, bprops, { children: icon }), label));
                 }) })] }));

package/Datatable/SelectedBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"surface.light\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"ghost\"\n                     color=\"primary\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}
+{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["\"use client\"\nimport IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"default.base\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"ghost\"\n                     color=\"primary\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":[],"mappings":";;;;;;;AAMA;AACG;AAKA;AACA;AAAc;AAEd;;AAmBY;AAUH;AAIZ;;"}

package/Datatable/Table.cjs

@@ -9,7 +9,7 @@ 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: "surface.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: {
+    return (jsxRuntime.jsxs(index, Object.assign({ width: "100%", size: compact ? "small" : "medium", border: "1px solid", borderColor: "default.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
                     }

package/Datatable/Table.cjs.map

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

package/Datatable/Table.js

@@ -7,7 +7,7 @@ import Row from './Row.js';
 
 const TableArea = (props) => {
     let { rows, compact, renderRow, state, update, slotProps } = props;
-    return (jsxs(Table, Object.assign({ width: "100%", size: compact ? "small" : "medium", border: "1px solid", borderColor: "surface.divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, { sx: {
+    return (jsxs(Table, Object.assign({ width: "100%", size: compact ? "small" : "medium", border: "1px solid", borderColor: "default.divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, { sx: {
                     '& tr:last-child td': {
                         borderBottom: 0
                     }

package/Datatable/Table.js.map

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

package/Datatable/TableHead.cjs

@@ -18,7 +18,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
     let sortables = state.sortable || {};
-    return (jsxRuntime.jsx(index, { position: "relative", children: jsxRuntime.jsxs(index$1, { bgcolor: "surface", 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: () => {
+    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++) {
@@ -45,7 +45,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
                             }
                         } }) }), 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" : 'surface', userSelect: "none", gap: .5, onClick: () => {
+                    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", gap: .5, onClick: () => {
                                 if (sortable) {
                                     let v = sortables[_f];
                                     if (!v) {
@@ -61,7 +61,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
                                         sortable: sortables
                                     });
                                 }
-                            }, children: [jsxRuntime.jsx(index$5, { color: "surface.muted", fontWeight: 600, children: label }), sortable && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(SwitchRight, { opacity: sortables[_f] ? 1 : .3, color: sortables[_f] ? 'primary' : 'surface.muted', sx: {
+                            }, children: [jsxRuntime.jsx(index$5, { color: "default.muted", fontWeight: 600, children: label }), sortable && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(SwitchRight, { opacity: sortables[_f] ? 1 : .3, color: sortables[_f] ? 'primary' : 'default.muted', sx: {
                                             fontSize: 23,
                                             transform: sortables[_f] === 'desc' ? 'rotate(-90deg)' : 'rotate(90deg)',
                                         } }) })] }) }), idx);

package/Datatable/TableHead.cjs.map

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

package/Datatable/TableHead.js

@@ -16,7 +16,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
         return jsx(Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
     let sortables = state.sortable || {};
-    return (jsx(TableHead, { position: "relative", children: jsxs(TableRow, { bgcolor: "surface", borderBottom: 1, children: [!hideCheckbox && jsx(TableCell, { th: true, width: 40, children: jsx(Checkbox, { size: compact ? "small" : "medium", checkIcon: state.selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    return (jsx(TableHead, { position: "relative", children: jsxs(TableRow, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsx(TableCell, { th: true, width: 40, children: jsx(Checkbox, { size: compact ? "small" : "medium", checkIcon: state.selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -43,7 +43,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
                             }
                         } }) }), columns.map((_a, idx) => {
                     var { label, field: _f, sortable } = _a, rest = __rest(_a, ["label", "field", "sortable"]);
-                    return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxs(Stack, { disabled: skeleton ? true : false, flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : 'surface', userSelect: "none", gap: .5, onClick: () => {
+                    return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxs(Stack, { disabled: skeleton ? true : false, flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : 'default', userSelect: "none", gap: .5, onClick: () => {
                                 if (sortable) {
                                     let v = sortables[_f];
                                     if (!v) {
@@ -59,7 +59,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, c
                                         sortable: sortables
                                     });
                                 }
-                            }, children: [jsx(Text, { color: "surface.muted", fontWeight: 600, children: label }), sortable && jsx(Fragment, { children: jsx(SwitchRight, { opacity: sortables[_f] ? 1 : .3, color: sortables[_f] ? 'primary' : 'surface.muted', sx: {
+                            }, children: [jsx(Text, { color: "default.muted", fontWeight: 600, children: label }), sortable && jsx(Fragment, { children: jsx(SwitchRight, { opacity: sortables[_f] ? 1 : .3, color: sortables[_f] ? 'primary' : 'default.muted', sx: {
                                             fontSize: 23,
                                             transform: sortables[_f] === 'desc' ? 'rotate(-90deg)' : 'rotate(90deg)',
                                         } }) })] }) }), idx);

package/Datatable/TableHead.js.map

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

package/Datatable/index.cjs

@@ -75,7 +75,7 @@ const DataTable = React.forwardRef((props, ref) => {
     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: "surface.main",
+                bgcolor: "default.base",
                 zIndex: 1
             } : {} }), startContent: (jsxRuntime.jsxs(core.Tag, { baseClass: 'datatable-header', sxr: {
                 display: "flex",

package/Datatable/index.cjs.map

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

package/Datatable/index.js

@@ -73,7 +73,7 @@ const DataTable = React.forwardRef((props, ref) => {
     return (jsxs(ViewBox, 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: "surface.main",
+                bgcolor: "default.base",
                 zIndex: 1
             } : {} }), startContent: (jsxs(Tag, { baseClass: 'datatable-header', sxr: {
                 display: "flex",

package/Datatable/index.js.map

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

package/Divider/index.cjs

@@ -18,13 +18,13 @@ const Divider = React.forwardRef((_a, ref) => {
         _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 : 'surface';
+    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: 'surface.divider', sxr: {
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'default.divider', sxr: {
             width: isHori ? "100%" : size,
             height: isHori ? size : "100%",
-            bgcolor: color === 'surface' ? `surface.light` : `${color}.light`,
+            bgcolor: color === 'default' ? `default.divider` : `${color}.divider`,
         }, ref: ref, children: children })));
 });
 

package/Divider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? 'surface'\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='surface.divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'surface' ? `surface.light` : `${color}.light`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? 'default'\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='default.divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `default.divider` : `${color}.divider`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}

package/Divider/index.js

@@ -16,13 +16,13 @@ const Divider = React.forwardRef((_a, ref) => {
         _p.size = size;
     const p = useBreakpointProps(_p);
     direction = (_b = p.direction) !== null && _b !== void 0 ? _b : "horizental";
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'surface';
+    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 (jsx(Tag, Object.assign({}, rest, { baseClass: 'surface.divider', sxr: {
+    return (jsx(Tag, Object.assign({}, rest, { baseClass: 'default.divider', sxr: {
             width: isHori ? "100%" : size,
             height: isHori ? size : "100%",
-            bgcolor: color === 'surface' ? `surface.light` : `${color}.light`,
+            bgcolor: color === 'default' ? `default.divider` : `${color}.divider`,
         }, ref: ref, children: children })));
 });
 

package/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? 'surface'\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='surface.divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'surface' ? `surface.light` : `${color}.light`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}
+{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? 'default'\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='default.divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `default.divider` : `${color}.divider`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}

package/Drawer/index.cjs

@@ -46,7 +46,7 @@ const Drawer = (_a) => {
             }, 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: "surface.main",
+                        bgcolor: "default.base",
                         shadow: 20
                     }, baseClass: 'drawer-content', children: children }) })) })) })));
 };

package/Drawer/index.cjs.map

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

package/Drawer/index.js

@@ -44,7 +44,7 @@ const Drawer = (_a) => {
             }, children: jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Tag, { sxr: {
                         width: isSide ? _size : "100%",
                         height: isSide ? "100%" : _size,
-                        bgcolor: "surface.main",
+                        bgcolor: "default.base",
                         shadow: 20
                     }, baseClass: 'drawer-content', children: children }) })) })) })));
 };

package/Drawer/index.js.map

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