musae 0.2.5 → 0.2.6

package/dist/components/timeline/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 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 { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimelineClassToken } from '../../utils/class-name.js';
@@ -9,10 +9,9 @@ import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
   item: {
-    default: props => [{
+    default: {
       display: "musae-rvj5dj",
       justifyContent: "musae-1nhvcw1",
-      alignItems: "musae-6s0dn4",
       gap: "musae-ik99ff",
       rowGap: null,
       columnGap: null,
@@ -20,117 +19,68 @@ const styles = {
       overflowX: null,
       overflowY: null,
       paddingBottom: "musae-1244622",
-      backgroundColor: "musae-q1mx2j",
       $$css: true
-    }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
-    }],
+    },
     right: {
-      grid: "musae-1pk7hnv",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+      gridTemplateColumns: "musae-1pmbctz",
+      gridTemplateAreas: "musae-znaemz",
       $$css: true
     },
     left: {
-      grid: "musae-u00h3a",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      $$css: true
-    },
-    alternate: {
-      grid: "musae-1pk7hnv",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      ":nth-of-type(2n)_grid": "musae-33een3",
-      ":nth-of-type(2n)_gridTemplate": null,
-      ":nth-of-type(2n)_gridTemplateAreas": null,
-      ":nth-of-type(2n)_gridTemplateColumns": null,
-      ":nth-of-type(2n)_gridTemplateRows": null,
-      ":nth-of-type(2n)_gridAutoRows": null,
-      ":nth-of-type(2n)_gridAutoColumns": null,
-      ":nth-of-type(2n)_gridAutoFlow": null,
+      gridTemplateColumns: "musae-52fmzj",
+      gridTemplateAreas: "musae-196jfb2",
       $$css: true
     }
   },
   labeled: {
-    right: {
-      grid: "musae-tbzffp",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+    default: {
+      gridTemplateColumns: "musae-134kloy",
       $$css: true
     },
-    left: {
-      grid: "musae-p00dg7",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+    right: {
+      gridTemplateAreas: "musae-1y7mvjm",
       $$css: true
     },
-    alternate: {
-      grid: "musae-tbzffp",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      ":nth-of-type(2n)_grid": "musae-dv7uk4",
-      ":nth-of-type(2n)_gridTemplate": null,
-      ":nth-of-type(2n)_gridTemplateAreas": null,
-      ":nth-of-type(2n)_gridTemplateColumns": null,
-      ":nth-of-type(2n)_gridTemplateRows": null,
-      ":nth-of-type(2n)_gridAutoRows": null,
-      ":nth-of-type(2n)_gridAutoColumns": null,
-      ":nth-of-type(2n)_gridAutoFlow": null,
+    left: {
+      gridTemplateAreas: "musae-hurxv4",
       $$css: true
     }
   },
-  label: {
+  leading: {
     default: {
-      gridArea: "musae-xwd7sb",
+      alignSelf: "musae-qcrz7y",
+      gridArea: "musae-1kxrqrs",
       gridRow: null,
       gridRowStart: null,
       gridRowEnd: null,
       gridColumn: null,
       gridColumnStart: null,
       gridColumnEnd: null,
+      position: "musae-1n2onr6",
+      display: "musae-78zum5",
+      justifyContent: "musae-l56j7k",
+      alignItems: "musae-6s0dn4",
+      width: "musae-145rzd9",
+      height: "musae-lry4nc",
       $$css: true
-    }
+    },
+    tail: props => [{
+      "::after_content": "musae-1s928wv",
+      "::after_position": "musae-1j6awrg",
+      "::after_height": "musae-p59mhh",
+      "::after_width": "musae-etvar1",
+      "::after_backgroundColor": "musae-27d4w3",
+      "::after_top": "musae-1srwf7z",
+      "::after_insetInlineStart": "musae-xsadbs",
+      "::after_left": null,
+      "::after_right": null,
+      $$css: true
+    }, {
+      "--15iyedw": props.color != null ? props.color : "initial"
+    }]
   },
-  leading: {
+  dot: {
     default: props => [{
-      gridArea: "musae-1kxrqrs",
-      gridRow: null,
-      gridRowStart: null,
-      gridRowEnd: null,
-      gridColumn: null,
-      gridColumnStart: null,
-      gridColumnEnd: null,
       width: "musae-jz7u3w",
       height: "musae-1k820er",
       borderRadius: "musae-iipnba",
@@ -146,24 +96,28 @@ const styles = {
       $$css: true
     }, {
       "--backgroundColor": props.color != null ? props.color : "initial"
-    }],
-    vertical: 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-dulvvp",
-      "::after_top": "musae-1srwf7z",
-      "::after_insetInlineStart": "musae-xsadbs",
-      "::after_left": null,
-      "::after_right": null,
-      $$css: true
-    }, {
-      "--15iyedw": props.color != null ? props.color : "initial"
     }]
   },
+  label: {
+    default: {
+      gridArea: "musae-xwd7sb",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    },
+    right: {
+      justifySelf: "musae-15bdqvn",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musae-wldb3t",
+      $$css: true
+    }
+  },
   description: {
     default: {
       gridArea: "musae-19tbii3",
@@ -174,33 +128,48 @@ const styles = {
       gridColumnStart: null,
       gridColumnEnd: null,
       $$css: true
+    },
+    right: {
+      justifySelf: "musae-wldb3t",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musae-15bdqvn",
+      $$css: true
     }
   }
 };
 const Item = ({
   description,
   label,
-  value
+  value,
+  dot
 }) => {
   const classNames = useClassNames(ComponentToken.Timeline);
   const {
-    mode,
+    mode: _mode,
     max
   } = useContext(Context);
   const theme = useTheme();
   const isLabeled = !!label;
   const isMax = max === value;
+  // convert alternate mode to normal mode
+  const mode = useMemo(() => {
+    if (_mode === "alternate") {
+      return value % 2 === 1 ? "right" : "left";
+    }
+    return _mode;
+  }, [_mode, value]);
   const styled = {
-    item: _stylex.props(styles.item.default({
-      backgroundColor: theme.colors[ColorToken.Surface]
-    }), styles.item[mode], isLabeled && styles.labeled[mode]),
-    label: _stylex.props(styles.label.default),
-    leading: _stylex.props(styles.leading.default({
+    item: _stylex.props(styles.item.default, styles.item[mode], isLabeled && styles.labeled.default, isLabeled && styles.labeled[mode]),
+    label: _stylex.props(styles.label.default, styles.label[mode]),
+    leading: _stylex.props(styles.leading.default, !isMax && styles.leading.tail({
       color: theme.colors[ColorToken.Primary]
-    }), !isMax && styles.leading.vertical({
+    })),
+    dot: _stylex.props(styles.dot.default({
       color: theme.colors[ColorToken.Primary]
     })),
-    description: _stylex.props(styles.description.default)
+    description: _stylex.props(styles.description.default, styles.description[mode])
   };
   return React.createElement("li", {
     className: clsx(classNames[TimelineClassToken.Item], styled.item.className),
@@ -211,7 +180,10 @@ const Item = ({
   }, label), React.createElement("div", {
     className: styled.leading.className,
     style: styled.leading.style
-  }), React.createElement("div", {
+  }, dot ?? React.createElement("span", {
+    className: styled.dot.className,
+    style: styled.dot.style
+  })), React.createElement("div", {
     className: styled.description.className,
     style: styled.description.style
   }, description));

package/dist/components/timeline/timeline.js

@@ -13,10 +13,11 @@ const Timeline = ({
     className: "musae-78zum5 musae-dt5ytf"
   };
   const classNames = useClassNames(ComponentToken.Timeline);
+  const total = items.length;
   const contextValue = useMemo(() => ({
     mode,
-    max: items.length - 1
-  }), [mode, items.length]);
+    max: total - 1
+  }), [mode, total]);
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("ol", {
@@ -27,7 +28,8 @@ const Timeline = ({
       key: index,
       value: index,
       label: item.label,
-      description: item.description
+      description: item.description,
+      dot: item.dot
     });
   })));
 };

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

@@ -17,6 +17,12 @@ export type TimelineItem = {
      * @requires
      */
     description: ReactNode;
+    /**
+     * @description
+     * dot render slot
+     * @default void 0
+     */
+    dot?: ReactNode;
 };
 /**
  * @description

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.4/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,

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.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React, { useContext } from 'react';
 import Node from './node.js';
 import clsx from 'clsx';
@@ -30,7 +30,7 @@ const List = ({
   const [scope, animate] = useAnimate();
   const {
     expandedKeys,
-    toggle
+    onExpand
   } = useContext(Context);
   const classNames = useClassNames(ComponentToken.Tree);
   useExpandEffect({
@@ -57,7 +57,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.4/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;

package/dist/components/tree/tree.js

@@ -1,22 +1,26 @@
 import React, { useMemo } from 'react';
 import List from './list.js';
 import Context from './context.js';
-import { useToggleable } from '@aiszlab/relax';
-import { useExpandedKeys } from './hooks.js';
+import { useTogglable } from '@aiszlab/relax';
+import { useExpandedKeys, useSelectedKeys } from './hooks.js';
 
-const Tree = ({ expandedKeys: _expandedKeys, onExpand, className, style, ...props }) => {
-    const { toggledKeys: checkedKeys, toggle: check } = useToggleable(props.nodes);
-    const { toggle, expandedKeys } = useExpandedKeys([_expandedKeys, onExpand]);
+const Tree = ({ expandedKeys: _expandedKeys, onExpand, className, style, nodes, selectable = true, selectedKeys: _selectedKeys, }) => {
+    const { toggledKeys: checkedKeys, toggle: check } = useTogglable(nodes);
+    const { expandedKeys, toggle: expand } = useExpandedKeys([_expandedKeys, onExpand]);
+    const { selectedKeys, toggle: select } = useSelectedKeys({ selectedKeys: _selectedKeys });
     const contextValue = useMemo(() => {
         return {
             checkedKeys,
-            check,
+            onCheck: check,
             expandedKeys,
-            toggle,
+            onExpand: expand,
+            selectedKeys,
+            onSelect: select,
+            selectable,
         };
-    }, [check, checkedKeys, toggle, expandedKeys]);
+    }, [check, checkedKeys, expand, expandedKeys, select, selectedKeys, selectable]);
     return (React.createElement(Context.Provider, { value: contextValue },
-        React.createElement(List, { nodes: props.nodes, className: className, style: style })));
+        React.createElement(List, { nodes: nodes, className: className, style: style })));
 };
 var Tree$1 = Tree;
 

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

@@ -44,6 +44,18 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     onExpand?: (keys: Key[]) => void;
+    /**
+     * @description
+     * selectable
+     * @default true
+     */
+    selectable?: boolean;
+    /**
+     * @description
+     * selected keys
+     * @default void 0
+     */
+    selectedKeys?: Key[];
 };
 /**
  * @description
@@ -64,7 +76,7 @@ export type TreeNodeProps = WithLevel<Omit<TreeNode, "children" | "key">> & {
      * @description
      * expand handler
      */
-    onToggle?: (key: Key) => void;
+    onExpand?: (key: Key) => void;
 };
 /**
  * @description
@@ -87,31 +99,14 @@ export type TreeListProps = ComponentProps & {
      */
     level?: number;
 };
-/**
- * @description
- * context value
- */
 export type ContextValue = {
-    /**
-     * @description
-     * checked keys
-     */
     checkedKeys: Set<Key>;
-    /**
-     * @description
-     * check
-     */
-    check?: (key: Key) => void;
-    /**
-     * @description
-     * expandedKeys
-     */
+    onCheck?: (key: Key) => void;
     expandedKeys: Set<Key>;
-    /**
-     * @description
-     * toggle
-     */
-    toggle?: (key: Key) => void;
+    onExpand?: (key: Key) => void;
+    selectedKeys: Set<Key>;
+    onSelect?: (key: Key) => void;
+    selectable: boolean;
 };
 /**
  * @description

package/dist/components/waterfall/sequential.js

@@ -1,5 +1,5 @@
 import React, { useMemo } 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';
 
 const styles = {
   column: props => [{
@@ -10,6 +10,9 @@ const styles = {
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
     rowGap: "musae-m8a6f2",
+    overflow: "musae-ysyzu8",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   }, {
     "--rowGap": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.rowGap)