musae 0.2.5 → 0.2.7

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.6.1/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';
@@ -17,7 +17,7 @@ import { useGutters } from '../../hooks/use-gutters.js';
 const styles = {
   overlay: props => [{
     position: "musae-10l6tqk",
-    inset: "musae-ezip7x",
+    inset: "musae-10a8y8t",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
@@ -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 };

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

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

package/dist/components/transfer/item.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox } from '../checkbox/index.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+
+const Item = ({
+  value,
+  label
+}) => {
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    item: {
+      className: "musae-78zum5 musae-6s0dn4 musae-gj1dgu musae-ovjknk musae-vbka3v"
+    }
+  };
+  return React.createElement("li", {
+    className: clsx(classNames[TransferClassToken.Item], styled.item.className),
+    style: styled.item.style
+  }, React.createElement(Checkbox, {
+    value: value
+  }), label);
+};
+
+export { Item as default };

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

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

package/dist/components/transfer/list.js

@@ -0,0 +1,122 @@
+import React, { useContext } from 'react';
+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 Item from './item.js';
+import { Checkbox } from '../checkbox/index.js';
+import { Context } from './context.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { typography } from '../theme/theme.js';
+
+const styles = {
+  list: props => [{
+    width: "musae-fx4e2q",
+    height: "musae-1ajdkb8",
+    borderWidth: "musae-1i8jmgv",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: 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,
+    borderRadius: "musae-1h268bu",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  }, {
+    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }],
+  header: props => [{
+    display: "musae-78zum5",
+    alignItems: "musae-6s0dn4",
+    paddingBlock: "musae-mcngwa",
+    paddingTop: null,
+    paddingBottom: null,
+    paddingInline: "musae-gj1dgu",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    borderBottomWidth: "musae-lntmim",
+    borderBottomColor: "musae-43481e",
+    borderBottomStyle: "musae-1q0q8m5",
+    $$css: true
+  }, {
+    "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }]
+};
+const List = ({
+  options,
+  title,
+  onChange,
+  value
+}) => {
+  const theme = useTheme();
+  const {
+    disabled
+  } = useContext(Context);
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    list: _stylex.props(styles.list({
+      outlineColor: theme.colors[ColorToken.Outline]
+    })),
+    header: _stylex.props(styles.header({
+      outlineColor: theme.colors[ColorToken.Outline]
+    }), typography.body.medium),
+    title: {
+      className: "musae-b3r6kr musae-p4054r musae-1isitws"
+    }
+  };
+  return React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.List], styled.list.className),
+    style: styled.list.style
+  }, React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Header], styled.header.className),
+    style: styled.header.style
+  }, React.createElement("span", null, options.length, "\u9879"), React.createElement("span", {
+    className: clsx(classNames[TransferClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title)), React.createElement(Checkbox.Group, {
+    value: value,
+    onChange: onChange,
+    disabled: disabled
+  }, React.createElement("ul", {
+    className: classNames[TransferClassToken.Body]
+  }, options.map(option => {
+    return React.createElement(Item, {
+      key: option.value,
+      label: option.label,
+      value: option.value
+    });
+  }))));
+};
+
+export { List as default };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransferProps } from "./types";
+declare const Transfer: ({ options, value, titles, disabled, className, style }: TransferProps) => React.JSX.Element;
+export default Transfer;

package/dist/components/transfer/transfer.js

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { useTransfer } from './hooks.js';
+import List from './list.js';
+import Button from '../button/button.js';
+import { Context } from './context.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
+import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';
+
+const Transfer = ({
+  options,
+  value,
+  titles = [null, null],
+  disabled = false,
+  className,
+  style
+}) => {
+  const {
+    transferred,
+    untransferred,
+    transfer,
+    untransfer,
+    transferKeys,
+    untransferKeys,
+    setTransferKeys,
+    setUntransferKeys
+  } = useTransfer({
+    options,
+    value
+  });
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    transfer: {
+      className: "musae-78zum5 musae-1q0g3np musae-6s0dn4 musae-vbka3v"
+    },
+    operation: {
+      className: "musae-78zum5 musae-dt5ytf musae-vbka3v"
+    }
+  };
+  const contextValue = useMemo(() => {
+    return {
+      disabled
+    };
+  }, [disabled]);
+  return React.createElement(Context.Provider, {
+    value: contextValue
+  }, React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Transfer], className, styled.transfer.className),
+    style: {
+      ...styled.transfer.style,
+      ...style
+    }
+  }, React.createElement(List, {
+    options: Array.from(untransferred.values()),
+    title: titles[0],
+    value: transferKeys,
+    onChange: setTransferKeys
+  }), React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Operation], styled.operation.className),
+    style: styled.operation.style
+  }, React.createElement(Button, {
+    shape: "circular",
+    size: "small",
+    onClick: transfer,
+    disabled: disabled || transferKeys.length === 0
+  }, React.createElement(KeyboardArrowRight, null)), React.createElement(Button, {
+    shape: "circular",
+    size: "small",
+    onClick: untransfer,
+    disabled: disabled || untransferKeys.length === 0
+  }, React.createElement(KeyboardArrowLeft, null))), React.createElement(List, {
+    options: Array.from(transferred.values()),
+    title: titles[1],
+    value: untransferKeys,
+    onChange: setUntransferKeys
+  })));
+};
+var Transfer$1 = Transfer;
+
+export { Transfer$1 as default };

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

@@ -0,0 +1,83 @@
+import type { Key, ReactNode } from "react";
+import type { Option } from "../../types/option";
+import { ComponentProps } from "../../types/element";
+export type TransferOption = Omit<Option, "children">;
+/**
+ * @description
+ * transfer props
+ */
+export type TransferProps = ComponentProps & {
+    /**
+     * @description
+     * options
+     */
+    options: TransferOption[];
+    /**
+     * @description
+     * value
+     */
+    value?: Key[];
+    /**
+     * @description
+     * titles
+     */
+    titles?: [ReactNode, ReactNode];
+    /**
+     * @description
+     * disabled
+     */
+    disabled?: boolean;
+};
+/**
+ * @description
+ * transfer list props
+ */
+export type TransferListProps = {
+    /**
+     * @description
+     * value
+     */
+    value: Key[];
+    /**
+     * @description
+     * options
+     */
+    options: TransferOption[];
+    /**
+     * @description
+     * title
+     */
+    title?: ReactNode;
+    /**
+     * @description
+     * change handler
+     */
+    onChange: (keys: Key[]) => void;
+};
+/**
+ * @description
+ * transfer item props
+ */
+export type TransferItemProps = {
+    /**
+     * @description
+     * value
+     */
+    value: Key;
+    /**
+     * @description
+     * label
+     */
+    label: ReactNode;
+};
+/**
+ * @description
+ * context value
+ */
+export type ContextValue = {
+    /**
+     * @description
+     * disabled
+     */
+    disabled: boolean;
+};

package/dist/components/tree/context.js

@@ -3,6 +3,8 @@ import { createContext } from 'react';
 const Context = createContext({
     checkedKeys: new Set(),
     expandedKeys: new Set(),
+    selectedKeys: new Set(),
+    selectable: true,
 });
 
 export { Context as default };

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

@@ -1,9 +1,20 @@
+import { Key } from "react";
 import type { TreeProps } from "./types";
 /**
  * @description
  * expanded keys
  */
 export declare const useExpandedKeys: ([expandedKeys, onExpand]: [TreeProps["expandedKeys"], TreeProps["onExpand"]]) => {
-    expandedKeys: Set<import("react").Key>;
-    toggle: (key: import("react").Key) => void;
+    expandedKeys: Set<Key>;
+    toggle: (key: Key) => void;
+};
+/**
+ * @description
+ * selected keys
+ */
+export declare const useSelectedKeys: ({ selectedKeys: _selectedKeys }: {
+    selectedKeys?: Key[];
+}) => {
+    selectedKeys: Set<Key>;
+    toggle: (key: Key) => void;
 };

package/dist/components/tree/hooks.js

@@ -1,4 +1,4 @@
-import { useControlledState } from '@aiszlab/relax';
+import { useControlledState, useEvent } from '@aiszlab/relax';
 import { useMemo, useCallback } from 'react';
 
 /**
@@ -23,5 +23,22 @@ const useExpandedKeys = ([expandedKeys, onExpand]) => {
         toggle,
     };
 };
+/**
+ * @description
+ * selected keys
+ */
+const useSelectedKeys = ({ selectedKeys: _selectedKeys }) => {
+    const [selectedKeys, setSelectedKeys] = useControlledState(_selectedKeys);
+    const __selectedKeys = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+    const toggle = useEvent((key) => {
+        setSelectedKeys(() => {
+            return Array.from([key]);
+        });
+    });
+    return {
+        selectedKeys: __selectedKeys,
+        toggle,
+    };
+};
 
-export { useExpandedKeys };
+export { useExpandedKeys, useSelectedKeys };

package/dist/components/tree/list.js

@@ -1,4 +1,4 @@
-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.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React, { useContext } from 'react';
 import Node from './node.js';
 import clsx from 'clsx';
@@ -6,7 +6,8 @@ import { useAnimate } from 'framer-motion';
 import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TreeClassToken } from '../../utils/class-name.js';
-import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useExpandable } from '../../hooks/use-expandable.js';
+import { useUpdateEffect } from '@aiszlab/relax';
 
 const styles = {
   list: {
@@ -30,14 +31,20 @@ const List = ({
   const [scope, animate] = useAnimate();
   const {
     expandedKeys,
-    toggle
+    onExpand
   } = useContext(Context);
   const classNames = useClassNames(ComponentToken.Tree);
-  useExpandEffect({
-    animate,
-    target: scope,
-    expanded
-  });
+  const {
+    expand,
+    collapse
+  } = useExpandable();
+  useUpdateEffect(async () => {
+    if (expanded) {
+      await expand([scope, animate]);
+      return;
+    }
+    await collapse([scope, animate]);
+  }, [expanded]);
   const styled = props(styles.list, !expanded && styles.hidden);
   return React.createElement("ul", {
     className: clsx({
@@ -57,7 +64,7 @@ const List = ({
     return React.createElement(Node, {
       key: node.key,
       value: node.key,
-      onToggle: toggle,
+      onExpand: onExpand,
       title: node.title,
       level: level
     }, children.length > 0 && React.createElement(List, {

package/dist/components/tree/node.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TreeNodeProps } from "./types";
-declare const Node: ({ value, children, level, onToggle, ...props }: TreeNodeProps) => React.JSX.Element;
+declare const Node: ({ value, children, level, onExpand, ...props }: TreeNodeProps) => React.JSX.Element;
 export default Node;

package/dist/components/tree/node.js

@@ -3,10 +3,11 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TreeClassToken } from '../../utils/class-name.js';
 import Context from './context.js';
 import { Checkbox } from '../checkbox/index.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.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
+import { useEvent } from '@aiszlab/relax';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
 
 const styles = {
@@ -72,27 +73,28 @@ const Node = ({
   value,
   children,
   level,
-  onToggle,
+  onExpand,
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Tree);
   const {
     checkedKeys,
-    check: _check,
-    expandedKeys
+    onCheck,
+    expandedKeys,
+    onSelect,
+    selectedKeys,
+    selectable
   } = useContext(Context);
   const isChecked = checkedKeys.has(value);
   const isExpanded = expandedKeys.has(value);
+  const isSelected = selectedKeys.has(value);
   const theme = useTheme();
-  const check = () => {
-    _check?.(value);
-  };
   const styled = {
     node: props(styles.node({
       level
     })),
     title: props(styles.title({
-      isSelected: false,
+      isSelected,
       backgroundColor: theme.colors[ColorToken.SurfaceContainer],
       hoveredBackgroundColor: theme.colors[ColorToken.SurfaceContainer],
       color: theme.colors[ColorToken.Primary]
@@ -101,9 +103,17 @@ const Node = ({
       isExpanded
     }))
   };
-  const toggle = () => {
-    onToggle?.(value);
-  };
+  const check = useEvent(() => {
+    onCheck?.(value);
+  });
+  const expand = useEvent(() => {
+    onExpand?.(value);
+  });
+  const select = useEvent(() => {
+    // no action when `selectable` is false
+    if (!selectable) return;
+    onSelect?.(value);
+  });
   return React.createElement("li", {
     className: classNames[TreeClassToken.Holder]
   }, React.createElement("div", {
@@ -112,15 +122,15 @@ const Node = ({
   }, React.createElement("span", {
     className: clsx(classNames[TreeClassToken.Expander], styled.expander.className),
     style: styled.expander.style,
-    onClick: toggle
+    onClick: expand
   }, !!children && React.createElement(KeyboardArrowRight, null)), React.createElement(Checkbox, {
     className: clsx(classNames[TreeClassToken.Checkbox]),
     checked: isChecked,
-    value: ""
+    onChange: check
   }), React.createElement("span", {
     className: clsx(classNames[TreeClassToken.Title], styled.title.className),
     style: styled.title.style,
-    onClick: check
+    onClick: select
   }, props$1.title)), children);
 };
 

package/dist/components/tree/tree.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TreeProps } from "./types";
-declare const Tree: ({ expandedKeys: _expandedKeys, onExpand, className, style, ...props }: TreeProps) => React.JSX.Element;
+declare const Tree: ({ expandedKeys: _expandedKeys, onExpand, className, style, nodes, selectable, selectedKeys: _selectedKeys, }: TreeProps) => React.JSX.Element;
 export default Tree;