musae 0.2.2 → 0.2.4

package/dist/components/progress/circular.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { sizes } from '../theme/tokens.stylex.js';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @description
  * count circle path

package/dist/components/progress/linear.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ProgressClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

package/dist/components/radio/radio.js

@@ -3,7 +3,7 @@ import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RadioClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
@@ -104,15 +104,24 @@ const styles = {
       "--joftei": props.borderColor != null ? props.borderColor : "initial"
     }],
     disabled: props => [{
-      borderColor: "musae-eqt46j",
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
+      "::after_borderWidth": "musae-1jxe9zw",
+      "::after_borderInlineWidth": null,
+      "::after_borderInlineStartWidth": null,
+      "::after_borderLeftWidth": null,
+      "::after_borderInlineEndWidth": null,
+      "::after_borderRightWidth": null,
+      "::after_borderBlockWidth": null,
+      "::after_borderTopWidth": null,
+      "::after_borderBottomWidth": null,
+      "::after_borderColor": "musae-3yd8hb",
+      "::after_borderInlineColor": null,
+      "::after_borderInlineStartColor": null,
+      "::after_borderLeftColor": null,
+      "::after_borderInlineEndColor": null,
+      "::after_borderRightColor": null,
+      "::after_borderBlockColor": null,
+      "::after_borderTopColor": null,
+      "::after_borderBottomColor": null,
       "::before_content": "musae-1cpjm7i",
       "::before_position": "musae-1hmns74",
       "::before_visibility": "musae-11srvyv",
@@ -130,11 +139,11 @@ const styles = {
       "::before_borderBottomRightRadius": null,
       $$css: true
     }, {
-      "--borderColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--joftei": props.backgroundColor != null ? props.backgroundColor : "initial",
       "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial"
     }],
     unckecked: {
-      "::before": null,
+      "::before_display": "musae-15ozc13",
       $$css: true
     }
   },
@@ -197,7 +206,7 @@ const Radio = ({
     label: props(typography.body.medium, styles.label.default)
   };
   return React.createElement("label", {
-    className: clsx(styled.radio.className, classNames[RadioClassToken.Radio], props$1.className)
+    className: clsx(classNames[RadioClassToken.Radio], props$1.className, styled.radio.className)
   }, React.createElement("input", {
     type: "radio",
     "aria-checked": isChecked,

package/dist/components/rate/rate.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RateClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/rate/star.js

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 import { useEvent, useHover } from '@aiszlab/relax';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RateClassToken } from '../../utils/class-name.js';
@@ -31,8 +31,8 @@ const styles = {
       $$css: true
     }
   },
-  leading: {
-    default: props => [{
+  half: {
+    default: {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
@@ -46,7 +46,7 @@ const styles = {
       overflowX: null,
       overflowY: null,
       $$css: true
-    }, {}],
+    },
     checked: props => [{
       opacity: "musae-1hc1fzr",
       color: "musae-19dipnz",
@@ -55,12 +55,12 @@ const styles = {
       "--color": props.color != null ? props.color : "initial"
     }]
   },
-  trailing: {
+  full: {
     default: {
       userSelect: "musae-87ps6o",
       $$css: true
     },
-    checkd: props => [{
+    checked: props => [{
       color: "musae-19dipnz",
       $$css: true
     }, {
@@ -104,12 +104,10 @@ const Star = ({
     star: _stylex.props(styles.star.default({
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }), disabled && styles.star.disabled),
-    leading: _stylex.props(styles.leading.default({
-      hoveredColor: theme.colors[ColorToken.Primary]
-    }), isHalf && styles.leading.checked({
+    half: _stylex.props(styles.half.default, isHalf && styles.half.checked({
       color: theme.colors[ColorToken.Primary]
     })),
-    trailing: _stylex.props(styles.trailing.default, isFull && styles.trailing.checkd({
+    full: _stylex.props(styles.full.default, isFull && styles.full.checked({
       color: theme.colors[ColorToken.Primary]
     }))
   };
@@ -117,8 +115,8 @@ const Star = ({
     className: clsx(classNames[RateClassToken.Star], styled.star.className),
     style: styled.star.style
   }, React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Leading], styled.leading.className),
-    style: styled.leading.style,
+    className: clsx(classNames[RateClassToken.Half], styled.half.className),
+    style: styled.half.style,
     ...(!disabled && {
       ...halfHoverProps,
       onClick: half
@@ -126,8 +124,8 @@ const Star = ({
   }, createElement(_Star, {
     size: "large"
   })), React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Trailing], styled.trailing.className),
-    style: styled.trailing.style,
+    className: clsx(classNames[RateClassToken.Full], styled.full.className),
+    style: styled.full.style,
     ...(!disabled && {
       ...fullHoverProps,
       onClick: full

package/dist/components/ripple/hooks.js

@@ -1,18 +1,21 @@
 import { useState, useCallback, useMemo } from 'react';
+import { useIdentity } from '@aiszlab/relax';
 
 function useRipple() {
     const [_ripples, _setRipples] = useState(new Map());
+    const [, unique] = useIdentity();
     const add = useCallback((event) => {
         const trigger = event.currentTarget;
         const size = Math.max(trigger.clientWidth, trigger.clientHeight);
         const { x, y } = trigger.getBoundingClientRect();
         _setRipples((prev) => {
-            return new Map(prev).set(crypto.randomUUID(), {
+            return new Map(prev).set(unique(), {
                 size,
                 x: event.clientX - x - size / 2,
                 y: event.clientY - y - size / 2,
             });
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const clear = useCallback((key) => {
         _setRipples((prev) => {

package/dist/components/ripple/ripple.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   ripple: {

package/dist/components/select/selector.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
 import Tag from '../tag/tag.js';
 import { styles as styles$1 } from '../input/input.js';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from '../picker/context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/select/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "./types";
 import type { Option } from "../../types/option";
 import type { MenuItem } from "../menu";

package/dist/components/space/space.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 import clsx from 'clsx';
 

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/steps/item.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, StepsClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/steps/steps.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import Item from './item.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, StepsClassToken } from '../../utils/class-name.js';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { Context } from './context.js';
 

package/dist/components/switch/switch.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/table/body.js

@@ -1,13 +1,45 @@
 import React from 'react';
-import { useTable, styles as styles$1 } from './hooks.js';
+import { useTable } from './context.js';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
+  cell: props => [{
+    paddingInline: "musae-iujutg",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musae-avjae4",
+    paddingTop: null,
+    paddingBottom: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderBottomWidth: "musae-lntmim",
+    $$css: true
+  }, {
+    "--borderColor": props.borderColor != null ? props.borderColor : "initial"
+  }],
   bordered: {
     borderInline: "musae-10htjfm",
     $$css: true
@@ -20,8 +52,8 @@ const Body = props$1 => {
   } = useTable();
   const theme = useTheme();
   if (!table) return null;
-  const styled = props(bordered && styles.bordered, typography.body.small, styles$1.cell({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
+  const styled = props(bordered && styles.bordered, typography.body.small, styles.cell({
+    borderColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return React.createElement("tbody", null, table.getRowModel().rows.map(row => React.createElement("tr", {
     key: row.id

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

@@ -1,4 +1,9 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue<unknown>>;
 export default Context;
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+export declare const useTable: <T>() => ContextValue<T>;

package/dist/components/table/context.js

@@ -1,7 +1,15 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const Context = createContext({
     bordered: false,
 });
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+const useTable = () => {
+    return useContext(Context);
+};
 
-export { Context as default };
+export { Context as default, useTable };

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

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

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

@@ -0,0 +1,129 @@
+import React, { useContext, useMemo } from 'react';
+import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/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';
+
+const styles = {
+  cell: {
+    default: {
+      display: "musae-78zum5",
+      justifyContent: "musae-1qughib",
+      alignItems: "musae-6s0dn4",
+      $$css: true
+    },
+    handlers: props => [{
+      display: "musae-3nfvp2",
+      flexDirection: "musae-1q0g3np",
+      gap: "musae-29tp26",
+      rowGap: null,
+      columnGap: null,
+      color: "musae-19dipnz",
+      userSelect: "musae-87ps6o",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  },
+  sort: {
+    default: {
+      position: "musae-1n2onr6",
+      cursor: "musae-1ypdohk",
+      $$css: true
+    },
+    half: {
+      position: "musae-10l6tqk",
+      top: "musae-9oc6z4",
+      insetInlineStart: "musae-1at4hj2",
+      left: null,
+      right: null,
+      height: "musae-1cj5796",
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    checked: props => [{
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  }
+};
+const Cell = ({
+  sortable = false,
+  children: _children,
+  value,
+  sortDirections: _sortDirections
+}) => {
+  const {
+    sortDescriptor,
+    onSortChange
+  } = useContext(Context);
+  const children = toFunction(_children)();
+  const theme = useTheme();
+  // convert sort directions to usable
+  const sortDirections = useMemo(() => {
+    return _sortDirections.reduce((prev, item, index) => {
+      return prev.set(item, _sortDirections[index + 1] ?? null);
+    }, new Map());
+  }, [_sortDirections]);
+  const sort = useMemo(() => {
+    if (sortDescriptor?.key === value) {
+      return sortDescriptor.direction;
+    }
+    return null;
+  }, [sortDescriptor, value]);
+  // sort handler
+  const onSort = useEvent(() => {
+    const _direction = sortDirections.get(sort);
+    const __direction = isUndefined(_direction) ? "ascending" : _direction;
+    onSortChange?.({
+      key: value,
+      direction: __direction
+    });
+  });
+  // only children, render directly
+  if (!sortable) {
+    return children;
+  }
+  const styled = {
+    cell: _stylex.props(styles.cell.default),
+    handlers: _stylex.props(styles.cell.handlers({
+      color: theme.colors[ColorToken.SurfaceContainerHighest]
+    })),
+    sort: _stylex.props(styles.sort.default),
+    fullSort: _stylex.props(sort === "descending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    })),
+    halfSort: _stylex.props(styles.sort.half, sort === "ascending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    }))
+  };
+  return React.createElement("div", {
+    className: styled.cell.className,
+    style: styled.cell.style
+  }, children, React.createElement("span", {
+    className: styled.handlers.className,
+    style: styled.handlers.style
+  }, React.createElement("span", {
+    className: styled.sort.className,
+    style: styled.sort.style,
+    onClick: onSort
+  }, React.createElement("div", {
+    className: styled.fullSort.className,
+    style: styled.fullSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })), !!sort && React.createElement("div", {
+    className: styled.halfSort.className,
+    style: styled.halfSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })))));
+};
+
+export { Cell as default };

package/dist/components/table/{header.d.ts → header/header.d.ts}

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

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

@@ -1,20 +1,48 @@
 import React from 'react';
-import { useTable, styles as styles$1 } from './hooks.js';
+import { useTable } from '../context.js';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../../theme/hooks.js';
 import clsx from 'clsx';
-import { ColorToken } from '../../utils/colors.js';
-import { typography } from '../theme/theme.js';
+import { ColorToken } from '../../../utils/colors.js';
+import { typography } from '../../theme/theme.js';
 
 const styles = {
   cell: props => [{
     backgroundColor: "musae-q1mx2j",
     textAlign: "musae-1yc453h",
     position: "musae-1n2onr6",
+    paddingInline: "musae-iujutg",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musae-avjae4",
+    paddingTop: null,
+    paddingBottom: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderBottomWidth: "musae-lntmim",
     $$css: true
   }, {
-    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--borderColor": props.borderColor != null ? props.borderColor : "initial"
   }],
   unbordered: props => [{
     ":not(:last-of-type)::after_content": "musae-x7gz8e",
@@ -53,11 +81,10 @@ const Header = props$1 => {
   if (!table) return null;
   const headerGroups = table.getHeaderGroups();
   const styled = props(styles.cell({
-    backgroundColor: theme.colors[ColorToken.Surface]
-  }), typography.label.small, bordered ? styles.bordered : styles.unbordered({
+    backgroundColor: theme.colors[ColorToken.Surface],
+    borderColor: theme.colors[ColorToken.OutlineVariant]
+  }), typography.label.small, bordered && styles.bordered, !bordered && styles.unbordered({
     backgroundColor: theme.colors[ColorToken.OutlineVariant]
-  }), styles$1.cell({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return React.createElement("thead", {
     className: props$1.className

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

@@ -1,33 +1,20 @@
-import { type CSSProperties } from "react";
-import type { ContextValue, TableProps } from "./types";
-export declare const styles: Readonly<{
-    readonly cell: (props: {
-        outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
-        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
-        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", import("csstype").Property.BorderColor | undefined>;
-        borderStyle: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderStyle", "solid">;
-        borderBottomWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderBottomWidth", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
-}>;
+import { type ColumnDef } from "@tanstack/react-table";
+import type { Column, ContextValue, SortDescriptor } from "./types";
 /**
  * @description
  * use columns
  */
-export declare const useColumns: <T>([columns]: [TableProps<T>["columns"]]) => import("@tanstack/react-table").ColumnDef<T, any>[];
-/**
- * @author murukal
- * @description
- * use table context hook
- */
-export declare const useTable: <T>() => ContextValue<T>;
+export declare const useColumns: <T>({ columns }: {
+    columns: Column<T>[];
+}) => ColumnDef<T, any>[];
 /**
  * @author murukal
  * @description
  * for context value
  */
-export declare const useContextValue: <T>({ table: _table, bordered, }: {
+export declare const useContextValue: <T>({ table: _table, bordered, sortDescriptor: _sortDescriptor, onSortChange: _onSortChange, }: {
     table: ContextValue<T>["table"];
     bordered: boolean;
+    sortDescriptor?: SortDescriptor;
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
 }) => ContextValue<unknown>;