musae 0.2.5 → 0.2.6

package/dist/components/menu/item.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes, spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/menu/menu.js

@@ -60,7 +60,9 @@ const Menu = forwardRef(({
     ref: targetRef,
     items: items,
     mode: mode,
-    className: clsx(classNames[MenuClassToken.Menu], className, styled.className),
+    className: clsx(classNames[MenuClassToken.Menu], {
+      [classNames[MenuClassToken.MenuHorizontal]]: mode === "horizontal"
+    }, className, styled.className),
     style: {
       ...styled.style,
       ...style

package/dist/components/notification/holder.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.js';
 import { AnimatePresence } from 'framer-motion';
 import Notification from './notification.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 
 const styles = {
@@ -25,8 +25,8 @@ const styles = {
     $$css: true
   },
   top: {
-    top: "musae-9oc6z4",
-    insetInline: "musae-l33w4x",
+    top: "musae-13vifvy",
+    insetInline: "musae-17y0mx6",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -35,22 +35,22 @@ const styles = {
     $$css: true
   },
   topRight: {
-    top: "musae-9oc6z4",
-    insetInlineEnd: "musae-hw0b42",
+    top: "musae-13vifvy",
+    insetInlineEnd: "musae-tijo5x",
     left: null,
     right: null,
     $$css: true
   },
   topLeft: {
-    top: "musae-9oc6z4",
-    insetInlineStart: "musae-1at4hj2",
+    top: "musae-13vifvy",
+    insetInlineStart: "musae-1o0tod",
     left: null,
     right: null,
     $$css: true
   },
   bottom: {
-    bottom: "musae-1sh2tzk",
-    insetInline: "musae-l33w4x",
+    bottom: "musae-1ey2m1c",
+    insetInline: "musae-17y0mx6",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -59,15 +59,15 @@ const styles = {
     $$css: true
   },
   bottomLeft: {
-    bottom: "musae-1sh2tzk",
-    insetInlineStart: "musae-1at4hj2",
+    bottom: "musae-1ey2m1c",
+    insetInlineStart: "musae-1o0tod",
     left: null,
     right: null,
     $$css: true
   },
   bottomRight: {
-    bottom: "musae-1sh2tzk",
-    insetInlineEnd: "musae-hw0b42",
+    bottom: "musae-1ey2m1c",
+    insetInlineEnd: "musae-tijo5x",
     left: null,
     right: null,
     $$css: true

package/dist/components/notification/notification.js

@@ -1,4 +1,4 @@
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React, { useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.js';
@@ -52,7 +52,7 @@ const styles = {
       transitionDuration: "musae-13dflua",
       transform: "musae-1v0jg1i",
       opacity: "musae-g01cxk",
-      marginTop: "musae-1q12cbh",
+      marginTop: "musae-dj266r",
       display: "musae-rvj5dj",
       gap: "musae-vbka3v",
       rowGap: null,
@@ -172,7 +172,7 @@ const Notification = ({
   const [scope, animate] = useAnimate();
   const _placement = PLACEMENTS[direction];
   const classNames = useClassNames(ComponentToken.Notification);
-  // after duration, `Notification` will auto destory
+  // after duration, `Notification` will auto destroy
   useTimeout(async () => {
     await animate(scope.current, {
       opacity: 0,

package/dist/components/picker/picker.js

@@ -4,7 +4,7 @@ import { useBoolean, chain, useFocus } from '@aiszlab/relax';
 import { useEvents } from './hooks.js';
 import { ComponentToken, PickerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/popover/popover.js

@@ -1,7 +1,7 @@
 import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus } from '@aiszlab/relax';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, PopoverClassToken } from '../../utils/class-name.js';

package/dist/components/popper/dropdown.js

@@ -1,7 +1,7 @@
 import React, { useRef, useMemo, useEffect } from 'react';
 import { ComponentToken, PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { isFunction } from '@aiszlab/relax';
 import { autoUpdate, computePosition, flip, offset, arrow } from '@floating-ui/dom';
@@ -16,8 +16,8 @@ const styles = {
       zIndex: "musae-1axsr4t",
       position: "musae-10l6tqk",
       backgroundColor: "musae-q1mx2j",
-      top: "musae-9oc6z4",
-      insetInlineStart: "musae-1at4hj2",
+      top: "musae-13vifvy",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
       boxShadow: "musae-ezd0au",

package/dist/components/progress/circular.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/linear.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';

package/dist/components/rate/rate.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';
@@ -36,10 +36,10 @@ const styles = {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
-      insetInlineStart: "musae-1at4hj2",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
-      top: "musae-9oc6z4",
+      top: "musae-13vifvy",
       opacity: "musae-g01cxk",
       userSelect: "musae-87ps6o",
       overflow: "musae-b3r6kr",

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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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/space/space.js

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

package/dist/components/steps/item.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';
@@ -8,6 +8,7 @@ import { ColorToken } from '../../utils/colors.js';
 import { useEvent } from '@aiszlab/relax';
 import { Context } from './context.js';
 import { typography } from '../theme/theme.js';
+import Done from '../icon/icons/action/done.js';
 
 const styles = {
   step: {
@@ -46,6 +47,18 @@ const styles = {
       gridColumn: null,
       gridColumnStart: null,
       gridColumnEnd: null,
+      display: "musae-78zum5",
+      justifyContent: "musae-l56j7k",
+      alignItems: "musae-6s0dn4",
+      borderRadius: "musae-iipnba",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
       $$css: true
     },
     vertical: props => [{
@@ -63,6 +76,30 @@ const styles = {
       $$css: true
     }, {
       "--15iyedw": props.color != null ? props.color : "initial"
+    }],
+    doing: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    done: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    todo: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
     }]
   },
   title: {
@@ -129,6 +166,15 @@ const Item = ({
     step: _stylex.props(styles.step.default, isClickable && styles.step.clickable),
     leading: _stylex.props(styles.leading.default, isVertical && !isMax && styles.leading.vertical({
       color: theme.colors[ColorToken.Primary]
+    }), status === "doing" && styles.leading.doing({
+      backgroundColor: theme.colors[ColorToken.Primary],
+      color: theme.colors[ColorToken.OnPrimary]
+    }), status === "done" && styles.leading.done({
+      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
+      color: theme.colors[ColorToken.OnPrimaryContainer]
+    }), status === "todo" && styles.leading.todo({
+      backgroundColor: theme.colors[ColorToken.Secondary],
+      color: theme.colors[ColorToken.OnSecondary]
     })),
     title: _stylex.props(typography.title.medium, styles.title.default, isHorizontal && !isMax && styles.title.horizontal({
       color: theme.colors[ColorToken.Primary]
@@ -150,7 +196,7 @@ const Item = ({
   }, React.createElement("div", {
     className: clsx(classNames[StepsClassToken.Leading], styled.leading.className),
     style: styled.leading.style
-  }, leading), React.createElement("div", {
+  }, leading ?? (status === "done" ? React.createElement(Done, null) : value)), React.createElement("div", {
     className: clsx(classNames[StepsClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title), React.createElement("div", {

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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { Context } from './context.js';
 

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SwitchProps } from "./types";
-declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, }: SwitchProps) => React.JSX.Element;
+declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, onChange, }: SwitchProps) => React.JSX.Element;
 export default Switch;

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/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import React from 'react';
+import { useControlledState, useEvent } from '@aiszlab/relax';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
@@ -14,16 +14,13 @@ const styles = {
   switch: {
     default: props => [{
       minWidth: "musae-1049mhy",
+      width: "musae-eq5yr9",
       height: "musae-hfcj97",
       display: "musae-78zum5",
       alignItems: "musae-6s0dn4",
       position: "musae-1n2onr6",
-      transition: "musae-1ng1d19",
-      transitionBehavior: null,
-      transitionDelay: null,
-      transitionDuration: null,
-      transitionProperty: null,
-      transitionTimingFunction: null,
+      transitionProperty: "musae-fagghw",
+      transitionDuration: "musae-13dflua",
       borderRadius: "musae-iipnba",
       borderStartStartRadius: null,
       borderStartEndRadius: null,
@@ -173,7 +170,7 @@ const styles = {
       $$css: true
     },
     child: {
-      minHeight: "musae-jk1msx",
+      height: "musae-b27hse",
       display: "musae-78zum5",
       flexDirection: "musae-1q0g3np",
       alignItems: "musae-6s0dn4",
@@ -192,20 +189,20 @@ const styles = {
       $$css: true
     },
     checked: {
-      marginInlineStart: "musae-1tt3wx9",
+      marginInlineStart: "musae-1lziwak",
       marginLeft: null,
       marginRight: null,
-      marginInlineEnd: "musae-fbia9g",
+      marginInlineEnd: "musae-14z9mp",
       $$css: true
     }
   },
   trailing: {
     default: {
-      marginTop: "musae-ncydc0",
-      marginInlineEnd: "musae-fbia9g",
+      marginTop: "musae-lpx92y",
+      marginInlineEnd: "musae-14z9mp",
       marginLeft: null,
       marginRight: null,
-      marginInlineStart: "musae-1tt3wx9",
+      marginInlineStart: "musae-1lziwak",
       $$css: true
     },
     checked: {
@@ -224,14 +221,17 @@ const Switch = ({
   icon = false,
   checkedChildren,
   uncheckedChildren,
-  disabled = false
+  disabled = false,
+  onChange
 }) => {
   const classNames = useClassNames(ComponentToken.Switch);
   const [isChecked, setIsChecked] = useControlledState(value);
   const theme = useTheme();
-  const toggle = useCallback(() => {
-    setIsChecked(_isChecked => !_isChecked);
-  }, [setIsChecked]);
+  const toggle = useEvent(() => {
+    const _isChecked = !isChecked;
+    setIsChecked(_isChecked);
+    onChange?.(_isChecked);
+  });
   const styled = {
     switch: props(styles.switch.default({
       borderColor: theme.colors[ColorToken.Outline],
@@ -284,13 +284,13 @@ const Switch = ({
     className: clsx(classNames[SwitchClassToken.Slider], styled.slider.className),
     style: styled.slider.style
   }, icon && (isChecked ? React.createElement(Check, null) : React.createElement(Close, null))), React.createElement("span", {
-    className: styled.supporting.className,
+    className: clsx(classNames[SwitchClassToken.Supporting], styled.supporting.className),
     style: styled.supporting.style
   }, React.createElement("span", {
-    className: styled.leading.className,
+    className: clsx(classNames[SwitchClassToken.Leading], styled.leading.className),
     style: styled.leading.style
   }, checkedChildren), React.createElement("span", {
-    className: styled.trailing.className,
+    className: clsx(classNames[SwitchClassToken.Trailing], styled.trailing.className),
     style: styled.trailing.style
   }, uncheckedChildren)));
 };

package/dist/components/table/body.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTable } from './context.js';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';

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

@@ -1,6 +1,6 @@
 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 _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';
@@ -35,8 +35,8 @@ const styles = {
     },
     half: {
       position: "musae-10l6tqk",
-      top: "musae-9oc6z4",
-      insetInlineStart: "musae-1at4hj2",
+      top: "musae-13vifvy",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
       height: "musae-1cj5796",

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTable } from '../context.js';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../../theme/hooks.js';
 import clsx from 'clsx';
 import { ColorToken } from '../../../utils/colors.js';
@@ -52,7 +52,7 @@ const styles = {
     ":not(:last-of-type)::after_height": "musae-1su0kt9",
     ":not(:last-of-type)::after_backgroundColor": "musae-9cqmhv",
     ":not(:last-of-type)::after_transform": "musae-1kmnipp",
-    ":not(:last-of-type)::after_insetInlineEnd": "musae-1sd0t5p",
+    ":not(:last-of-type)::after_insetInlineEnd": "musae-192i3sz",
     ":not(:last-of-type)::after_left": null,
     ":not(:last-of-type)::after_right": null,
     $$css: true

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

@@ -0,0 +1,40 @@
+import { type Key, type RefObject } from "react";
+import type { TabItem } from "./types";
+/**
+ * @description
+ * use tab context
+ */
+export declare const useTabsContext: () => import("./types").ContextValue;
+/**
+ * @description
+ * tabs
+ */
+export declare const useTabs: ({ activeKey: _activeKey, items, defaultActiveKey, }: {
+    activeKey?: Key;
+    items: TabItem[];
+    defaultActiveKey?: Key;
+}) => {
+    activeKey: string | number | bigint | undefined;
+    activatedKeys: Set<Key>;
+    changeActiveKey: (key: Key) => void;
+};
+/**
+ * @description
+ * count dom ele size
+ */
+export declare const useNavigation: () => {
+    navigatorRef: RefObject<HTMLDivElement>;
+    tabsRef: RefObject<HTMLDivElement>;
+    scroll: (delta: number) => void;
+    offset: number;
+    isLeadingOverflow: boolean;
+    isTrailingOverflow: boolean;
+};
+/**
+ * @description
+ * use navigator scroll
+ */
+export declare const useNavigatorScroll: ({ navigatorRef, scroll, }: {
+    navigatorRef: RefObject<HTMLDivElement>;
+    scroll: (delta: number) => void;
+}) => void;

package/dist/components/tabs/hooks.js

@@ -0,0 +1,98 @@
+import { useControlledState, isUndefined, useEvent, clamp } from '@aiszlab/relax';
+import { useState, useContext, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import Context from './context.js';
+
+/**
+ * @description
+ * use tab context
+ */
+const useTabsContext = () => {
+    return useContext(Context) ?? { items: [], activeKey: void 0 };
+};
+/**
+ * @description
+ * tabs
+ */
+const useTabs = ({ activeKey: _activeKey, items, defaultActiveKey, }) => {
+    const [activeKey, setActiveKey] = useControlledState(_activeKey, {
+        defaultState: defaultActiveKey ?? items.at(0)?.key,
+    });
+    const [activatedKeys, setActivatedKeys] = useState(() => {
+        return new Set(isUndefined(activeKey) ? [] : [activeKey]);
+    });
+    const changeActiveKey = useEvent((key) => {
+        setActiveKey(key);
+        setActivatedKeys((prev) => new Set(prev).add(key));
+    });
+    return {
+        activeKey,
+        activatedKeys,
+        changeActiveKey,
+    };
+};
+/**
+ * @description
+ * count dom ele size
+ */
+const useNavigation = () => {
+    const navigatorRef = useRef(null);
+    const tabsRef = useRef(null);
+    const [offset, setOffset] = useState(0);
+    // navigator size
+    const [navigatorSize, setNavigatorSize] = useState(0);
+    // tabs size
+    const [tabsSize, setTabsSize] = useState(0);
+    useLayoutEffect(() => {
+        const _navigatorSize = navigatorRef.current?.getBoundingClientRect().width ?? 0;
+        const _tabsSize = tabsRef.current?.getBoundingClientRect().width ?? 0;
+        setNavigatorSize(_navigatorSize);
+        setTabsSize(_tabsSize);
+    }, []);
+    const { maxOffset, minOffset } = useMemo(() => {
+        return {
+            maxOffset: Math.max(0, tabsSize - navigatorSize),
+            minOffset: 0,
+        };
+    }, [navigatorSize, tabsSize]);
+    const { isLeadingOverflow, isTrailingOverflow } = useMemo(() => {
+        return {
+            isLeadingOverflow: offset > minOffset,
+            isTrailingOverflow: offset < maxOffset,
+        };
+    }, [minOffset, maxOffset, offset]);
+    const scroll = useEvent((delta) => {
+        setOffset((prev) => {
+            return clamp(minOffset, maxOffset, prev + delta);
+        });
+    });
+    return {
+        navigatorRef,
+        tabsRef,
+        scroll,
+        offset,
+        isLeadingOverflow,
+        isTrailingOverflow,
+    };
+};
+/**
+ * @description
+ * use navigator scroll
+ */
+const useNavigatorScroll = ({ navigatorRef, scroll, }) => {
+    // mouse wheel
+    const wheel = useEvent((event) => {
+        event.stopPropagation();
+        const { deltaY } = event;
+        scroll(deltaY);
+    });
+    useEffect(() => {
+        const navigator = navigatorRef.current;
+        navigator?.addEventListener("wheel", wheel);
+        return () => {
+            navigator?.removeEventListener("wheel", wheel);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+
+export { useNavigation, useNavigatorScroll, useTabs, useTabsContext };

package/dist/components/tabs/navigation.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type NavigationProps } from "./types";
+declare const Navigation: ({ onChange }: NavigationProps) => React.JSX.Element;
+export default Navigation;