musae 0.2.26 → 0.3.1

package/dist/components/switch/{switch.js → switch.mjs}

@@ -2,15 +2,15 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { SwitchClassToken } from '../../utils/class-name.js';
-import { layer } from '../../utils/layer.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import Check from '../icon/icons/navigation/check.js';
-import Close from '../icon/icons/navigation/close.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { SwitchClassToken } from '../../utils/class-name.mjs';
+import { layer } from '../../utils/layer.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import Check from '../icon/icons/navigation/check.mjs';
+import Close from '../icon/icons/navigation/close.mjs';
 
 var styles = {
   "switch": {
@@ -251,7 +251,7 @@ var Switch = function Switch(_ref) {
     onChange === null || onChange === void 0 || onChange(_isChecked);
   });
   var styled = {
-    "switch": props(styles["switch"]["default"](_objectSpread({
+    "switch": _stylex.props(styles["switch"]["default"](_objectSpread({
       borderColor: theme.colors[ColorToken.Outline],
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest],
       color: theme.colors[ColorToken.OnSurfaceVariant]
@@ -266,7 +266,7 @@ var Switch = function Switch(_ref) {
       backgroundColor: layer(theme.colors[ColorToken.OnSurface], "medium"),
       color: theme.colors[ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
-    slider: props(styles.slider.normal(_objectSpread({
+    slider: _stylex.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnSurfaceVariant],
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }, disabled && {
@@ -279,9 +279,9 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[ColorToken.Surface],
       color: layer(theme.colors[ColorToken.OnSurface], "thicker")
     }))),
-    supporting: props(styles.supporting["default"], isChecked && styles.supporting.checked),
-    leading: props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),
-    trailing: props(styles.supporting.child, styles.trailing["default"], isChecked && styles.trailing.checked)
+    supporting: _stylex.props(styles.supporting["default"], isChecked && styles.supporting.checked),
+    leading: _stylex.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),
+    trailing: _stylex.props(styles.supporting.child, styles.trailing["default"], isChecked && styles.trailing.checked)
   };
   return /*#__PURE__*/React.createElement("button", {
     role: "switch",
@@ -305,6 +305,5 @@ var Switch = function Switch(_ref) {
     style: styled.trailing.style
   }, uncheckedChildren)));
 };
-var Switch$1 = Switch;
 
-export { Switch$1 as default };
+export { Switch as default };

package/dist/components/switch/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 /**
  * @author murukal
  *

package/dist/components/table/body.cjs

@@ -0,0 +1,92 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('./context.cjs');
+var reactTable = require('@tanstack/react-table');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var theme = require('../theme/theme.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var empty = require('../empty/empty.cjs');
+
+var styles = {
+  cell: function cell(props) {
+    return [{
+      paddingInline: "musaex-n18ftv",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musaex-qhkzqn",
+      paddingTop: null,
+      paddingBottom: null,
+      borderColor: "musaex-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      borderStyle: "musaex-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderBottomWidth: "musaex-cql0v9",
+      $$css: true
+    }, {
+      "--borderColor": props.borderColor != null ? props.borderColor : "initial"
+    }];
+  },
+  bordered: {
+    borderInline: "musaex-1om8rk0",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    $$css: true
+  }
+};
+var Body = function Body() {
+  var _useTable = context.useTable(),
+    table = _useTable.table,
+    bordered = _useTable.bordered;
+  var theme$1 = hooks.useTheme();
+  if (!table) return null;
+  var styled = stylex.default.props(bordered && styles.bordered, theme.typography.body.small, styles.cell({
+    borderColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+  }));
+  var rows = table.getRowModel().rows;
+  var _isEmpty = relax.isEmpty(rows);
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: row.id
+    }, row.getVisibleCells().map(function (cell) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: cell.id,
+        className: relax.clsx(styled.className),
+        style: styled.style
+      }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  }));
+};
+
+exports.default = Body;

package/dist/components/table/{body.js → body.mjs}

@@ -1,12 +1,12 @@
 import React from 'react';
-import { useTable } from './context.js';
+import { useTable } from './context.mjs';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { isEmpty, clsx } from '@aiszlab/relax';
-import { typography } from '../theme/theme.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import Empty from '../empty/empty.js';
+import { typography } from '../theme/theme.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import Empty from '../empty/empty.mjs';
 
 var styles = {
   cell: function cell(props) {
@@ -69,7 +69,7 @@ var Body = function Body() {
     bordered = _useTable.bordered;
   var theme = useTheme();
   if (!table) return null;
-  var styled = props(bordered && styles.bordered, typography.body.small, styles.cell({
+  var styled = _stylex.props(bordered && styles.bordered, typography.body.small, styles.cell({
     borderColor: theme.colors[ColorToken.OutlineVariant]
   }));
   var rows = table.getRowModel().rows;

package/dist/components/table/context.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext({
+  bordered: false
+});
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+var useTable = function useTable() {
+  return React.useContext(Context);
+};
+
+exports.default = Context;
+exports.useTable = useTable;

package/dist/components/table/context.d.ts

@@ -1,4 +1,4 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/table";
 declare const Context: import("react").Context<ContextValue<unknown>>;
 export default Context;
 /**

package/dist/components/table/header/cell.cjs

@@ -0,0 +1,134 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../../theme/hooks.cjs');
+var colors = require('../../../utils/colors.cjs');
+var context = require('../context.cjs');
+var unfoldMore = require('../../icon/icons/navigation/unfold-more.cjs');
+
+var styles = {
+  cell: {
+    "default": {
+      display: "musaex-78zum5",
+      justifyContent: "musaex-1qughib",
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    },
+    handlers: function handlers(props) {
+      return [{
+        display: "musaex-3nfvp2",
+        flexDirection: "musaex-1q0g3np",
+        gap: "musaex-90xh4w",
+        rowGap: null,
+        columnGap: null,
+        color: "musaex-19dipnz",
+        userSelect: "musaex-87ps6o",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  sort: {
+    "default": {
+      position: "musaex-1n2onr6",
+      cursor: "musaex-1ypdohk",
+      $$css: true
+    },
+    half: {
+      position: "musaex-10l6tqk",
+      top: "musaex-13vifvy",
+      insetInlineStart: "musaex-1o0tod",
+      left: null,
+      right: null,
+      height: "musaex-r8va6l",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    checked: function checked(props) {
+      return [{
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  }
+};
+var Cell = function Cell(_ref) {
+  var _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? false : _ref$sortable,
+    _children = _ref.children,
+    value = _ref.value,
+    _sortDirections = _ref.sortDirections;
+  var _useContext = React.useContext(context.default),
+    sortDescriptor = _useContext.sortDescriptor,
+    onSortChange = _useContext.onSortChange;
+  var children = relax.toFunction(_children)();
+  var theme = hooks.useTheme();
+  // convert sort directions to usable
+  var sortDirections = React.useMemo(function () {
+    return _sortDirections.reduce(function (prev, item, index) {
+      var _sortDirections2;
+      return prev.set(item, (_sortDirections2 = _sortDirections[index + 1]) !== null && _sortDirections2 !== void 0 ? _sortDirections2 : null);
+    }, new Map());
+  }, [_sortDirections]);
+  var sort = React.useMemo(function () {
+    if (!sortDescriptor) return null;
+    if (sortDescriptor.key !== value) return null;
+    return sortDescriptor.direction;
+  }, [sortDescriptor, value]);
+  // sort handler
+  var onSort = relax.useEvent(function () {
+    var _sortDirections$get;
+    if (!value) return;
+    onSortChange === null || onSortChange === void 0 || onSortChange({
+      key: value,
+      direction: (_sortDirections$get = sortDirections.get(sort)) !== null && _sortDirections$get !== void 0 ? _sortDirections$get : "ascending"
+    });
+  });
+  // only children, render directly
+  if (!sortable) {
+    return children;
+  }
+  var styled = {
+    cell: stylex.default.props(styles.cell["default"]),
+    handlers: stylex.default.props(styles.cell.handlers({
+      color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
+    })),
+    sort: stylex.default.props(styles.sort["default"]),
+    fullSort: stylex.default.props(sort === "descending" && styles.sort.checked({
+      color: theme.colors[colors.ColorToken.Primary]
+    })),
+    halfSort: stylex.default.props(styles.sort.half, sort === "ascending" && styles.sort.checked({
+      color: theme.colors[colors.ColorToken.Primary]
+    }))
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.cell.className,
+    style: styled.cell.style
+  }, children, /*#__PURE__*/React.createElement("span", {
+    className: styled.handlers.className,
+    style: styled.handlers.style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styled.sort.className,
+    style: styled.sort.style,
+    onClick: onSort
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.fullSort.className,
+    style: styled.fullSort.style
+  }, /*#__PURE__*/React.createElement(unfoldMore.default, {
+    size: "medium"
+  })), !!sort && (/*#__PURE__*/React.createElement("div", {
+    className: styled.halfSort.className,
+    style: styled.halfSort.style
+  }, /*#__PURE__*/React.createElement(unfoldMore.default, {
+    size: "medium"
+  }))))));
+};
+
+exports.default = Cell;

package/dist/components/table/header/cell.d.ts

@@ -1,3 +1,3 @@
-import type { HeaderCellProps } from "../types";
-declare const Cell: ({ sortable, children: _children, value, sortDirections: _sortDirections }: HeaderCellProps) => any;
+import type { HeaderCellProps } from "musae/types/table";
+declare const Cell: ({ sortable, children: _children, value, sortDirections: _sortDirections, }: HeaderCellProps) => any;
 export default Cell;

package/dist/components/table/header/{cell.js → cell.mjs}

@@ -1,10 +1,10 @@
 import React, { useContext, useMemo } from 'react';
-import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../../theme/hooks.js';
-import { ColorToken } from '../../../utils/colors.js';
-import Context from '../context.js';
-import UnfoldMore from '../../icon/icons/navigation/unfold-more.js';
+import { toFunction, useEvent } from '@aiszlab/relax';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
+import Context from '../context.mjs';
+import UnfoldMore from '../../icon/icons/navigation/unfold-more.mjs';
 
 var styles = {
   cell: {
@@ -76,18 +76,17 @@ var Cell = function Cell(_ref) {
     }, new Map());
   }, [_sortDirections]);
   var sort = useMemo(function () {
-    if ((sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.key) === value) {
-      return sortDescriptor.direction;
-    }
-    return null;
+    if (!sortDescriptor) return null;
+    if (sortDescriptor.key !== value) return null;
+    return sortDescriptor.direction;
   }, [sortDescriptor, value]);
   // sort handler
   var onSort = useEvent(function () {
-    var _direction = sortDirections.get(sort);
-    var __direction = isUndefined(_direction) ? "ascending" : _direction;
+    var _sortDirections$get;
+    if (!value) return;
     onSortChange === null || onSortChange === void 0 || onSortChange({
       key: value,
-      direction: __direction
+      direction: (_sortDirections$get = sortDirections.get(sort)) !== null && _sortDirections$get !== void 0 ? _sortDirections$get : "ascending"
     });
   });
   // only children, render directly

package/dist/components/table/header/header.cjs

@@ -0,0 +1,109 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('../context.cjs');
+var reactTable = require('@tanstack/react-table');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../../theme/hooks.cjs');
+var relax = require('@aiszlab/relax');
+var colors = require('../../../utils/colors.cjs');
+var theme = require('../../theme/theme.cjs');
+
+var styles = {
+  cell: function cell(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      textAlign: "musaex-1yc453h",
+      position: "musaex-1n2onr6",
+      paddingInline: "musaex-n18ftv",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musaex-qhkzqn",
+      paddingTop: null,
+      paddingBottom: null,
+      borderColor: "musaex-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      borderStyle: "musaex-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderBottomWidth: "musaex-cql0v9",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--borderColor": props.borderColor != null ? props.borderColor : "initial"
+    }];
+  },
+  unbordered: function unbordered(props) {
+    return [{
+      ":not(:last-of-type)::after_content": "musaex-x7gz8e",
+      ":not(:last-of-type)::after_position": "musaex-no41pc",
+      ":not(:last-of-type)::after_top": "musaex-1o8gf8",
+      ":not(:last-of-type)::after_width": "musaex-16qvlb0",
+      ":not(:last-of-type)::after_height": "musaex-jsduqj",
+      ":not(:last-of-type)::after_backgroundColor": "musaex-9cqmhv",
+      ":not(:last-of-type)::after_transform": "musaex-1kmnipp",
+      ":not(:last-of-type)::after_insetInlineEnd": "musaex-192i3sz",
+      ":not(:last-of-type)::after_left": null,
+      ":not(:last-of-type)::after_right": null,
+      $$css: true
+    }, {
+      "--1sg3dqs": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  bordered: {
+    borderWidth: "musaex-bupo1m",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    $$css: true
+  }
+};
+var Header = function Header(props) {
+  var _useTable = context.useTable(),
+    table = _useTable.table,
+    bordered = _useTable.bordered;
+  var theme$1 = hooks.useTheme();
+  if (!table) return null;
+  var headerGroups = table.getHeaderGroups();
+  var styled = stylex.default.props(styles.cell({
+    backgroundColor: theme$1.colors[colors.ColorToken.Surface],
+    borderColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+  }), theme.typography.label.small, bordered && styles.bordered, !bordered && styles.unbordered({
+    backgroundColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+  }));
+  return /*#__PURE__*/React.createElement("thead", {
+    className: props.className
+  }, headerGroups.map(function (headerGroup) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: headerGroup.id
+    }, headerGroup.headers.map(function (header) {
+      return /*#__PURE__*/React.createElement("th", {
+        key: header.id,
+        className: relax.clsx(styled.className),
+        style: styled.style
+      }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()));
+    }));
+  }));
+};
+
+exports.default = Header;

package/dist/components/table/header/header.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { HeaderProps } from "../types";
+import type { HeaderProps } from "musae/types/table";
 declare const Header: <T>(props: HeaderProps) => React.JSX.Element | null;
 export default Header;

package/dist/components/table/header/{header.js → header.mjs}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useTable } from '../context.js';
+import { useTable } from '../context.mjs';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../../theme/hooks.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ColorToken } from '../../../utils/colors.js';
-import { typography } from '../../theme/theme.js';
+import { ColorToken } from '../../../utils/colors.mjs';
+import { typography } from '../../theme/theme.mjs';
 
 var styles = {
   cell: function cell(props) {
@@ -76,21 +76,21 @@ var styles = {
     $$css: true
   }
 };
-var Header = function Header(props$1) {
+var Header = function Header(props) {
   var _useTable = useTable(),
     table = _useTable.table,
     bordered = _useTable.bordered;
   var theme = useTheme();
   if (!table) return null;
   var headerGroups = table.getHeaderGroups();
-  var styled = props(styles.cell({
+  var styled = _stylex.props(styles.cell({
     backgroundColor: theme.colors[ColorToken.Surface],
     borderColor: theme.colors[ColorToken.OutlineVariant]
   }), typography.label.small, bordered && styles.bordered, !bordered && styles.unbordered({
     backgroundColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return /*#__PURE__*/React.createElement("thead", {
-    className: props$1.className
+    className: props.className
   }, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/React.createElement("tr", {
       key: headerGroup.id

package/dist/components/table/hooks.cjs

@@ -0,0 +1,75 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var cell = require('./header/cell.cjs');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * use columns
+ */
+var useColumns = function useColumns(_ref) {
+  var columns = _ref.columns;
+  var helper = React.useRef(reactTable.createColumnHelper());
+  return React.useMemo(function () {
+    return columns.map(function (_ref2) {
+      var key = _ref2.key,
+        render = _ref2.render,
+        title = _ref2.title,
+        _ref2$sortable = _ref2.sortable,
+        sortable = _ref2$sortable === void 0 ? false : _ref2$sortable,
+        _ref2$sortDirections = _ref2.sortDirections,
+        sortDirections = _ref2$sortDirections === void 0 ? ["ascending", "descending"] : _ref2$sortDirections,
+        valueAt = _ref2.valueAt;
+      // @ts-ignore
+      return helper.current.accessor(valueAt !== null && valueAt !== void 0 ? valueAt : key, {
+        header: /*#__PURE__*/React.createElement(cell.default, {
+          children: title,
+          sortable: sortable,
+          value: key,
+          sortDirections: sortDirections
+        }),
+        cell: function cell(_context) {
+          var value = _context.getValue();
+          if (!render) {
+            return value;
+          }
+          return render(value, _context.row.original, _context.row.index);
+        }
+      });
+    });
+  }, [columns]);
+};
+/**
+ * @author murukal
+ * @description
+ * for context value
+ */
+var useContextValue = function useContextValue(_ref3) {
+  var _table = _ref3.table,
+    bordered = _ref3.bordered,
+    _sortDescriptor = _ref3.sortDescriptor,
+    _onSortChange = _ref3.onSortChange;
+  var _useControlledState = relax.useControlledState(_sortDescriptor),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    sortDescriptor = _useControlledState2[0],
+    setSortDescriptor = _useControlledState2[1];
+  // sort change handler
+  var onSortChange = relax.useEvent(function (sortDescriptor) {
+    setSortDescriptor(sortDescriptor);
+    _onSortChange === null || _onSortChange === void 0 || _onSortChange(sortDescriptor);
+  });
+  return React.useMemo(function () {
+    return {
+      // @ts-ignore
+      table: _table,
+      bordered: bordered,
+      // sort descriptor
+      sortDescriptor: sortDescriptor,
+      onSortChange: onSortChange
+    };
+  }, [_table, bordered, sortDescriptor, onSortChange]);
+};
+
+exports.useColumns = useColumns;
+exports.useContextValue = useContextValue;

package/dist/components/table/hooks.d.ts

@@ -1,12 +1,12 @@
-import { type ColumnDef } from "@tanstack/react-table";
-import type { Column, ContextValue, SortDescriptor } from "./types";
+import { type ColumnDef, DeepValue, DeepKeys } from "@tanstack/react-table";
+import type { Column, ContextValue, SortDescriptor } from "musae/types/table";
 /**
  * @description
  * use columns
  */
 export declare const useColumns: <T>({ columns }: {
     columns: Column<T>[];
-}) => ColumnDef<T, any>[];
+}) => ColumnDef<T, DeepValue<T, DeepKeys<T>>>[];
 /**
  * @author murukal
  * @description