musae 0.2.6 → 0.2.7

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

@@ -6,6 +6,7 @@ import type { RequiredIn } from "@aiszlab/relax/types";
 export type Mode = "multiple";
 export type Value = Key | Pick<Option, "value" | "label">;
 export type ValueOrValues = Value[] | Value;
+type ChangeHandler = ((value: string) => void) | ((value: number) => void) | ((value: bigint) => void) | ((values: Value[]) => void);
 /**
  * @author murukal
  *
@@ -60,7 +61,7 @@ export type SelectProps = ComponentProps & {
      * on value change, toggle
      * @default void 0
      */
-    onChange?: (value: ValueOrValues) => void;
+    onChange?: ChangeHandler;
 };
 /**
  * @description
@@ -121,3 +122,4 @@ export type SelectionsProps = {
      */
     selectedKeys: MenuProps["selectedKeys"];
 };
+export {};

package/dist/components/space/space.js

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

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { StepItemProps } from "./types";
-declare const Item: ({ leading, title, description, value }: StepItemProps) => React.JSX.Element;
+declare const Item: ({ leading, title, description, value, size }: StepItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/steps/item.js

@@ -1,8 +1,9 @@
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, StepsClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useEvent } from '@aiszlab/relax';
@@ -18,19 +19,13 @@ const styles = {
       flexShrink: null,
       flexBasis: null,
       display: "musae-rvj5dj",
-      grid: "musae-1l2suiq",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
       alignItems: "musae-6s0dn4",
       columnGap: "musae-1om1yv4",
       overflow: "musae-b3r6kr",
       overflowX: null,
       overflowY: null,
+      gridTemplateAreas: "musae-1tdxyq7",
+      gridTemplateColumns: "musae-1pmbctz",
       $$css: true
     },
     clickable: {
@@ -47,35 +42,48 @@ 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 => [{
+    tail: props => [{
       position: "musae-1n2onr6",
       "::after_content": "musae-1s928wv",
       "::after_position": "musae-1j6awrg",
       "::after_height": "musae-p59mhh",
       "::after_width": "musae-etvar1",
       "::after_backgroundColor": "musae-27d4w3",
-      "::after_marginTop": "musae-4ys0c4",
       "::after_top": "musae-1srwf7z",
       "::after_insetInlineStart": "musae-xsadbs",
       "::after_left": null,
       "::after_right": null,
+      "::after_marginTop": "musae-4ys0c4",
       $$css: true
     }, {
       "--15iyedw": props.color != null ? props.color : "initial"
+    }]
+  },
+  sign: {
+    default: props => [{
+      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,
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      width: "musae-17fnjtu",
+      height: "musae-1jwls1v",
+      $$css: true
+    }, {
+      "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall),
+      "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall)
     }],
     doing: props => [{
       backgroundColor: "musae-q1mx2j",
@@ -114,7 +122,7 @@ const styles = {
       alignItems: "musae-6s0dn4",
       $$css: true
     },
-    horizontal: props => [{
+    tail: props => [{
       position: "musae-1n2onr6",
       "::after_content": "musae-1s928wv",
       "::after_position": "musae-1j6awrg",
@@ -147,7 +155,8 @@ const Item = ({
   leading,
   title,
   description,
-  value
+  value,
+  size
 }) => {
   const classNames = useClassNames(ComponentToken.Steps);
   const theme = useTheme();
@@ -164,19 +173,22 @@ const Item = ({
   const isMax = value === max;
   const styled = {
     step: _stylex.props(styles.step.default, isClickable && styles.step.clickable),
-    leading: _stylex.props(styles.leading.default, isVertical && !isMax && styles.leading.vertical({
+    leading: _stylex.props(styles.leading.default, isVertical && !isMax && styles.leading.tail({
       color: theme.colors[ColorToken.Primary]
-    }), status === "doing" && styles.leading.doing({
+    })),
+    sign: _stylex.props(styles.sign.default({
+      size
+    }), status === "doing" && styles.sign.doing({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
-    }), status === "done" && styles.leading.done({
+    }), status === "done" && styles.sign.done({
       backgroundColor: theme.colors[ColorToken.PrimaryContainer],
       color: theme.colors[ColorToken.OnPrimaryContainer]
-    }), status === "todo" && styles.leading.todo({
+    }), status === "todo" && styles.sign.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({
+    title: _stylex.props(typography.title.medium, styles.title.default, isHorizontal && !isMax && styles.title.tail({
       color: theme.colors[ColorToken.Primary]
     })),
     description: _stylex.props(typography.body.medium, styles.description.default)
@@ -196,7 +208,10 @@ const Item = ({
   }, React.createElement("div", {
     className: clsx(classNames[StepsClassToken.Leading], styled.leading.className),
     style: styled.leading.style
-  }, leading ?? (status === "done" ? React.createElement(Done, null) : value)), React.createElement("div", {
+  }, React.createElement("div", {
+    className: clsx(classNames[StepsClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
+  }, 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.d.ts

@@ -8,5 +8,5 @@ import type { StepsProps } from "./types";
  * 1. `Steps` only be controlled
  * 2. render by `items` prop
  */
-declare const Steps: ({ items, value, className, style, type, onChange }: StepsProps) => React.JSX.Element;
+declare const Steps: ({ items, value, className, style, type, onChange, size }: StepsProps) => React.JSX.Element;
 export default Steps;

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.7.4/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.js';
 import clsx from 'clsx';
 import { Context } from './context.js';
 
@@ -38,7 +38,8 @@ const Steps = ({
   className,
   style,
   type = "horizontal",
-  onChange
+  onChange,
+  size
 }) => {
   const classNames = useClassNames(ComponentToken.Steps);
   const styled = {
@@ -48,8 +49,9 @@ const Steps = ({
     type,
     onChange,
     max: items.length - 1,
-    value
-  }), [type, onChange, items.length, value]);
+    value,
+    size
+  }), [type, onChange, items.length, value, size]);
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("ol", {

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

@@ -54,6 +54,11 @@ export type StepsProps = ComponentProps & {
      * @default horizontal
      */
     type?: Type;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -65,6 +70,11 @@ export type StepItemProps = StepItem & {
      * current item value
      */
     value: number;
+    /**
+     * @description
+     * leading size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -91,5 +101,10 @@ export type ContextValue = {
      * value
      */
     value: number;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 export {};

package/dist/components/switch/switch.js

@@ -1,6 +1,6 @@
 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 { 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 clsx from 'clsx';

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.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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.7.4/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.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
 import Context from '../context.js';

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.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+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 clsx from 'clsx';
 import { ColorToken } from '../../../utils/colors.js';

package/dist/components/tabs/hooks.js

@@ -62,7 +62,7 @@ const useNavigation = () => {
     }, [minOffset, maxOffset, offset]);
     const scroll = useEvent((delta) => {
         setOffset((prev) => {
-            return clamp(minOffset, maxOffset, prev + delta);
+            return clamp(prev + delta, minOffset, maxOffset);
         });
     });
     return {
@@ -80,16 +80,16 @@ const useNavigation = () => {
  */
 const useNavigatorScroll = ({ navigatorRef, scroll, }) => {
     // mouse wheel
-    const wheel = useEvent((event) => {
-        event.stopPropagation();
+    const onWheel = useEvent((event) => {
+        event.preventDefault();
         const { deltaY } = event;
         scroll(deltaY);
     });
     useEffect(() => {
         const navigator = navigatorRef.current;
-        navigator?.addEventListener("wheel", wheel);
+        navigator?.addEventListener("wheel", onWheel);
         return () => {
-            navigator?.removeEventListener("wheel", wheel);
+            navigator?.removeEventListener("wheel", onWheel);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/dist/components/tabs/navigation.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useRef, useEffect } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
 import Tab from './tab.js';

package/dist/components/tabs/panels.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/tag/tag.js

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TagClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+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 { typography } from '../theme/theme.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/theme/tokens.stylex.d.ts

@@ -77,6 +77,7 @@ export declare const positions: import("@stylexjs/stylex").VarGroup<Readonly<{
     min: string;
     header: string;
     popper: string;
+    floatable: string;
     dialog: string;
     drawer: string;
     tour: string;

package/dist/components/time-picker/panel.js

@@ -4,7 +4,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Button from '../button/button.js';
 import dayjs from 'dayjs';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+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 clsx from 'clsx';

package/dist/components/time-picker/time-picker.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Panel from './panel.js';
 import { useValue } from './hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 import { styles } from '../input/input.js';
 

package/dist/components/timeline/item.js

@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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.js';
 import { Context } from './context.js';
+import { sizes } from '../theme/tokens.stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimelineClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
@@ -48,7 +49,6 @@ const styles = {
   },
   leading: {
     default: {
-      alignSelf: "musae-qcrz7y",
       gridArea: "musae-1kxrqrs",
       gridRow: null,
       gridRowStart: null,
@@ -56,15 +56,11 @@ const styles = {
       gridColumn: null,
       gridColumnStart: null,
       gridColumnEnd: null,
-      position: "musae-1n2onr6",
-      display: "musae-78zum5",
-      justifyContent: "musae-l56j7k",
-      alignItems: "musae-6s0dn4",
-      width: "musae-145rzd9",
-      height: "musae-lry4nc",
+      alignSelf: "musae-qcrz7y",
       $$css: true
     },
     tail: props => [{
+      position: "musae-1n2onr6",
       "::after_content": "musae-1s928wv",
       "::after_position": "musae-1j6awrg",
       "::after_height": "musae-p59mhh",
@@ -79,6 +75,19 @@ const styles = {
       "--15iyedw": props.color != null ? props.color : "initial"
     }]
   },
+  sign: {
+    default: props => [{
+      display: "musae-78zum5",
+      justifyContent: "musae-l56j7k",
+      alignItems: "musae-6s0dn4",
+      width: "musae-17fnjtu",
+      height: "musae-1jwls1v",
+      $$css: true
+    }, {
+      "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall),
+      "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall)
+    }]
+  },
   dot: {
     default: props => [{
       width: "musae-jz7u3w",
@@ -148,7 +157,8 @@ const Item = ({
   const classNames = useClassNames(ComponentToken.Timeline);
   const {
     mode: _mode,
-    max
+    max,
+    size
   } = useContext(Context);
   const theme = useTheme();
   const isLabeled = !!label;
@@ -166,6 +176,9 @@ const Item = ({
     leading: _stylex.props(styles.leading.default, !isMax && styles.leading.tail({
       color: theme.colors[ColorToken.Primary]
     })),
+    sign: _stylex.props(styles.sign.default({
+      size
+    })),
     dot: _stylex.props(styles.dot.default({
       color: theme.colors[ColorToken.Primary]
     })),
@@ -175,16 +188,19 @@ const Item = ({
     className: clsx(classNames[TimelineClassToken.Item], styled.item.className),
     style: styled.item.style
   }, isLabeled && React.createElement("div", {
-    className: styled.label.className,
+    className: clsx(classNames[TimelineClassToken.Label], styled.label.className),
     style: styled.label.style
   }, label), React.createElement("div", {
-    className: styled.leading.className,
+    className: clsx(classNames[TimelineClassToken.Leading], styled.leading.className),
     style: styled.leading.style
+  }, React.createElement("div", {
+    className: clsx(classNames[TimelineClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
   }, dot ?? React.createElement("span", {
-    className: styled.dot.className,
+    className: clsx(classNames[TimelineClassToken.Dot], styled.dot.className),
     style: styled.dot.style
-  })), React.createElement("div", {
-    className: styled.description.className,
+  }))), React.createElement("div", {
+    className: clsx(classNames[TimelineClassToken.Description], styled.description.className),
     style: styled.description.style
   }, description));
 };

package/dist/components/timeline/timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TimelineProps } from "./types";
-declare const Timeline: ({ items, mode }: TimelineProps) => React.JSX.Element;
+declare const Timeline: ({ items, mode, size }: TimelineProps) => React.JSX.Element;
 export default Timeline;

package/dist/components/timeline/timeline.js

@@ -7,7 +7,8 @@ import clsx from 'clsx';
 
 const Timeline = ({
   items,
-  mode = "right"
+  mode = "right",
+  size
 }) => {
   const styled = {
     className: "musae-78zum5 musae-dt5ytf"
@@ -16,8 +17,9 @@ const Timeline = ({
   const total = items.length;
   const contextValue = useMemo(() => ({
     mode,
-    max: total - 1
-  }), [mode, total]);
+    max: total - 1,
+    size
+  }), [mode, total, size]);
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("ol", {

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

@@ -41,6 +41,11 @@ export type TimelineProps = {
      * @default "right"
      */
     mode?: Mode;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -68,5 +73,10 @@ export type ContextValue = {
      * max
      */
     max: number;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 export {};

package/dist/components/tour/tour.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Portal from '../portal/portal.js';
 import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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.js';
 import Button from '../button/button.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -107,7 +107,8 @@ const Tour = ({
   };
   return React.createElement(React.Fragment, null, React.createElement(Portal, {
     open: overlay && open,
-    destroyable: true
+    destroyable: true,
+    lockable: true
   }, React.createElement("div", {
     className: clsx(classNames[TourClassToken.Overlay], styled.overlay.className),
     style: styled.overlay.style

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

@@ -0,0 +1,6 @@
+import { ContextValue } from "./types";
+/**
+ * @description
+ * transfer context
+ */
+export declare const Context: import("react").Context<ContextValue>;

package/dist/components/transfer/context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+/**
+ * @description
+ * transfer context
+ */
+const Context = createContext({
+    disabled: false,
+});
+
+export { Context };

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

@@ -0,0 +1,19 @@
+import { type Key } from "react";
+import type { TransferOption } from "./types";
+/**
+ * @description
+ * options
+ */
+export declare const useTransfer: (props: {
+    options: TransferOption[];
+    value?: Key[];
+}) => {
+    transferred: Map<Key, TransferOption>;
+    untransferred: Map<Key, TransferOption>;
+    transfer: () => void;
+    untransfer: () => void;
+    transferKeys: Key[];
+    untransferKeys: Key[];
+    setTransferKeys: import("react").Dispatch<import("react").SetStateAction<Key[]>>;
+    setUntransferKeys: import("react").Dispatch<import("react").SetStateAction<Key[]>>;
+};

package/dist/components/transfer/hooks.js

@@ -0,0 +1,49 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useControlledState } from '@aiszlab/relax';
+
+/**
+ * @description
+ * options
+ */
+const useTransfer = (props) => {
+    const [value, setValue] = useControlledState(props.value);
+    const [transferKeys, setTransferKeys] = useState([]);
+    const [untransferKeys, setUntransferKeys] = useState([]);
+    const options = useMemo(() => {
+        return props.options.reduce((prev, item) => prev.set(item.value, item), new Map());
+    }, [props.options]);
+    const [transferred, untransferred] = useMemo(() => {
+        return (value ?? []).reduce(([transferred, untransferred], key) => {
+            if (untransferred.has(key)) {
+                transferred.set(key, untransferred.get(key));
+                untransferred.delete(key);
+            }
+            return [transferred, untransferred];
+        }, [new Map(), new Map(options)]);
+    }, [options, value]);
+    const transfer = useCallback(() => {
+        setValue((prev = []) => [...prev, ...transferKeys]);
+        setTransferKeys([]);
+    }, [transferKeys]);
+    const untransfer = useCallback(() => {
+        setValue((prev = []) => {
+            return Array.from(untransferKeys.reduce((checkedKeys, unchecked) => {
+                checkedKeys.delete(unchecked);
+                return checkedKeys;
+            }, new Set(prev)));
+        });
+        setUntransferKeys([]);
+    }, [untransferKeys]);
+    return {
+        transferred,
+        untransferred,
+        transfer,
+        untransfer,
+        transferKeys,
+        untransferKeys,
+        setTransferKeys,
+        setUntransferKeys,
+    };
+};
+
+export { useTransfer };

package/dist/components/transfer/index.d.ts

@@ -0,0 +1,2 @@
+import Transfer from "./transfer";
+export { Transfer };