musae 0.2.9 → 0.2.10

package/dist/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BadgeProps } from "./types";
-declare const Badge: ({ className, style, children, content }: BadgeProps) => React.JSX.Element;
+declare const Badge: ({ className, style, children, content, invisible, placement }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/dist/components/badge/badge.js

@@ -4,6 +4,7 @@ import { ComponentToken, BadgeClassToken } from '../../utils/class-name.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 { typography } from '../theme/theme.js';
+import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { isVoid } from '@aiszlab/relax';
@@ -19,11 +20,6 @@ const styles = {
   tail: {
     default: props => [{
       position: "musae-10l6tqk",
-      top: "musae-13vifvy",
-      right: "musae-3m8u43",
-      insetInlineStart: null,
-      insetInlineEnd: null,
-      transform: "musae-rycbv3",
       borderRadius: "musae-iipnba",
       borderStartStartRadius: null,
       borderStartEndRadius: null,
@@ -35,15 +31,55 @@ const styles = {
       borderBottomRightRadius: null,
       minWidth: "musae-70jws7",
       textAlign: "musae-2b8uid",
+      boxShadow: "musae-igitpm",
       backgroundColor: "musae-q1mx2j",
       color: "musae-19dipnz",
       $$css: true
     }, {
+      "--boxShadow": `0 0 0 ${sizes.smallest} ${props.color}` != null ? `0 0 0 ${sizes.smallest} ${props.color}` : "initial",
       "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
       "--color": props.color != null ? props.color : "initial"
     }],
     dot: {
       minWidth: null,
+      width: "musae-2jq81",
+      height: "musae-1v3ox18",
+      $$css: true
+    },
+    invisible: {
+      display: "musae-1s85apg",
+      $$css: true
+    },
+    "top-right": {
+      top: "musae-13vifvy",
+      right: "musae-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-rycbv3",
+      $$css: true
+    },
+    "top-left": {
+      top: "musae-13vifvy",
+      left: "musae-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-1i3z1r0",
+      $$css: true
+    },
+    "bottom-right": {
+      bottom: "musae-1ey2m1c",
+      right: "musae-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-1vfo23u",
+      $$css: true
+    },
+    "bottom-left": {
+      bottom: "musae-1ey2m1c",
+      left: "musae-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-itovws",
       $$css: true
     }
   }
@@ -52,7 +88,9 @@ const Badge = ({
   className,
   style,
   children,
-  content
+  content,
+  invisible = false,
+  placement = "top-right"
 }) => {
   const classNames = useClassNames(ComponentToken.Badge);
   const theme = useTheme();
@@ -62,7 +100,7 @@ const Badge = ({
     tail: _stylex.props(styles.tail.default({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
-    }), isDot && styles.tail.dot, typography.label.small)
+    }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return React.createElement("span", {
     className: clsx(classNames[BadgeClassToken.Badge], className, styled.badge.className),

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

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+type Placement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 /**
  * @description
  * badge props
@@ -8,11 +9,26 @@ export type BadgeProps = ComponentProps & {
     /**
      * @description
      * children
+     * @requires
      */
     children: ReactNode;
     /**
      * @description
      * content
+     * @default void 0
      */
     content?: ReactNode;
+    /**
+     * @description
+     * invisible
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * @description
+     * placement
+     * @default "top-right"
+     */
+    placement?: Placement;
 };
+export {};

package/dist/components/clock/clock.js

@@ -31,7 +31,8 @@ const Clock = ({
         }));
       }
     }), index === columns.length - 1 ? null : React.createElement(Divider, {
-      type: "vertical"
+      type: "vertical",
+      key: `${unit}-divider`
     })];
   }));
 };

package/dist/components/dialog/dialog.js

@@ -13,7 +13,7 @@ const Dialog = ({ open, closable = true, ...props }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
-        React.createElement(Popup, { ...props, closable: true, open: open, onClosed: turnOff })));
+        React.createElement(Popup, { ...props, closable: closable, open: open, onClosed: turnOff })));
 };
 var Dialog$1 = Dialog;
 

package/dist/components/dialog/popup.js

@@ -9,7 +9,7 @@ import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import { useClosable } from '../../hooks/use-closable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.64_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   header: {

package/dist/components/drawer/popup.js

@@ -9,7 +9,7 @@ import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useClosable } from '../../hooks/use-closable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.64_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   popup: {

package/dist/components/highlight/highlight.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * @description
+ * highlight props
+ */
+export type HighlightProps = {
+    /**
+     * @description
+     * children
+     */
+    children: string;
+};

package/dist/components/notification/notification.js

@@ -174,10 +174,22 @@ const Notification = ({
   const classNames = useClassNames(ComponentToken.Notification);
   // after duration, `Notification` will auto destroy
   useTimeout(async () => {
-    await animate(scope.current, {
-      opacity: 0,
-      marginTop: scope.current.getBoundingClientRect().height * -1
-    });
+    switch (placement) {
+      case "bottom":
+      case "bottomLeft":
+      case "bottomRight":
+        await animate(scope.current, {
+          opacity: 0,
+          marginBottom: (scope.current.getBoundingClientRect().height + 12) * -1
+        });
+        break;
+      default:
+        await animate(scope.current, {
+          opacity: 0,
+          marginTop: (scope.current.getBoundingClientRect().height + 12) * -1
+        });
+        break;
+    }
     onClose?.();
   }, duration);
   const styled = {

package/dist/components/otp-input/otp-input.js

@@ -20,12 +20,12 @@ const OtpInput = ({
     length
   }).fill(null));
   const [focusedAt, setFocusedAt] = useState(0);
-  const refocus = useEvent(foucsAt => {
-    const _foucsAt = clamp(foucsAt, 0, length - 1);
-    // handle input
-    inputRefs.current[_foucsAt]?.focus?.();
-    inputRefs.current[_foucsAt]?.select?.();
-    setFocusedAt(_foucsAt);
+  const refocus = useEvent(_foucsAt => {
+    const foucsAt = clamp(_foucsAt, 0, length - 1);
+    // handle input, only select when prev input
+    inputRefs.current[foucsAt]?.focus?.();
+    _foucsAt < length && inputRefs.current[foucsAt]?.select?.();
+    setFocusedAt(foucsAt);
   });
   const changeValue = useEvent(value => {
     _change(focusedAt, value);

package/dist/components/picker/picker.js

@@ -1,7 +1,6 @@
 import React, { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
 import Popper from '../popper/popper.js';
-import { useBoolean, chain, useFocus } from '@aiszlab/relax';
-import { useEvents } from './hooks.js';
+import { useBoolean, useEvent, useFocus } from '@aiszlab/relax';
 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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -42,7 +41,6 @@ const Picker = forwardRef(({
   const classNames = useClassNames(ComponentToken.Picker);
   const theme = useTheme();
   const pickableRef = useRef(null);
-  const onDropdownClick = useCallback(e => e.preventDefault(), []);
   const getDropdownWidth = useCallback(() => {
     if (!popupWidth) return void 0;
     if (!trigger.current) return void 0;
@@ -51,17 +49,19 @@ const Picker = forwardRef(({
   useImperativeHandle(ref, () => ({
     close
   }));
-  /// events
-  const {
-    blur,
-    click
-  } = useEvents({
-    onBlur: close,
-    onClick: chain(onClick, toggle)
+  const click = useEvent(event => {
+    event.stopPropagation();
+    toggle();
+    onClick?.(event);
+  });
+  const onBlur = useEvent(e => {
+    e.stopPropagation();
+    close();
   });
   const [isFocused, focusProps] = useFocus({
-    onBlur: blur
+    onBlur
   });
+  const onDropdownClick = useCallback(e => e.preventDefault(), []);
   const styled = {
     picker: props(typography.body.medium, styles$1.wrapper({
       outlineColor: theme.colors[ColorToken.Outline]
@@ -94,11 +94,11 @@ const Picker = forwardRef(({
     trigger: trigger.current,
     open: isOpen,
     className: classNames[PickerClassToken.Dropdown],
-    // click on popper, keep select focused
-    onMouseDown: onDropdownClick,
     onEntered: onPopperEntered,
     onExit: onPopperExite,
-    onExited: onPopperExited
+    onExited: onPopperExited,
+    // click on popper, keep select focused
+    onMouseDown: onDropdownClick
   }, React.createElement("div", {
     ref: pickableRef,
     className: clsx(pickableClassName, styled.pickable.className),

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

@@ -35,7 +35,7 @@ export interface PickerProps extends ComponentProps {
      * @description
      * click handler
      */
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
      * @description
      * pickable

package/dist/components/popover/popover.js

@@ -1,4 +1,4 @@
-import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus } from '@aiszlab/relax';
+import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus, useClickAway } 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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -31,16 +31,19 @@ const Popover = ({
   const _ref = useRef(null);
   const [_isOpen, {
     toggle,
-    turnOn
+    turnOn,
+    turnOff
   }] = useBoolean(false);
   const triggerBy = useMemo(() => new Set(toArray(_triggerBy)), [_triggerBy]);
   const classNames = useClassNames(ComponentToken.Popover);
   const childRef = useRefs(_ref, _children.props.ref);
+  const popperRef = useRef(null);
   const onClick = useEvent(e => {
     e.stopPropagation();
     toggle();
   });
-  const onContextMenu = useEvent(() => {
+  const onContextMenu = useEvent(e => {
+    e.preventDefault();
     turnOn();
   });
   const [isHovered, hoverProps] = useHover({
@@ -77,6 +80,9 @@ const Popover = ({
   const leavePopper = useEvent(e => {
     hoverProps.onPointerLeave(e);
   });
+  useClickAway(() => {
+    turnOff();
+  }, popperRef);
   const styled = {
     popover: _stylex.props(styles.popover, typography.body.medium),
     title: _stylex.props(styles.title, typography.title.medium)
@@ -89,7 +95,8 @@ const Popover = ({
       onPointerEnter: enterPopper,
       onPointerLeave: leavePopper
     }),
-    placement: placement
+    placement: placement,
+    ref: popperRef
   }, React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Popover], className, styled.popover.className),
     style: {

package/dist/components/popper/dropdown.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
-import type { DropdownProps } from "./types";
-declare const Dropdown: ({ open, children, placement, style, className, onExit, onExited, onEntered, trigger: _trigger, offset: _offset, overlay, arrow: arrowable, ...props }: DropdownProps) => React.JSX.Element;
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("./types").PopperProps, "placement" | "portal"> & {
+    placement: import("@floating-ui/dom").Placement;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/components/popper/dropdown.js

@@ -1,9 +1,9 @@
-import React, { useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useLayoutEffect } 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.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
-import { isFunction } from '@aiszlab/relax';
+import { useRefs, isFunction } from '@aiszlab/relax';
 import { autoUpdate, computePosition, flip, offset, arrow } from '@floating-ui/dom';
 import { useOffsets } from './hooks.js';
 import { useTheme } from '../theme/hooks.js';
@@ -54,7 +54,7 @@ const styles = {
     }]
   }
 };
-const Dropdown = ({
+const Dropdown = forwardRef(({
   open,
   children,
   placement,
@@ -68,11 +68,12 @@ const Dropdown = ({
   overlay = false,
   arrow: arrowable = false,
   ...props$1
-}) => {
-  const [floatable, animate] = useAnimate();
+}, ref) => {
+  const [_floatable, animate] = useAnimate();
   const arrowRef = useRef(null);
   const classNames = useClassNames(ComponentToken.Popper);
   const theme = useTheme();
+  const floatable = useRefs(_floatable, ref);
   /// how to get trigger
   const trigger = useMemo(() => {
     if (!open) return null;
@@ -86,10 +87,10 @@ const Dropdown = ({
   });
   /// auto update: calc trigger dom to get position
   /// if trigger changed, re-relate
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!trigger) return;
-    const cleanup = autoUpdate(trigger, floatable.current, () => {
-      computePosition(trigger, floatable.current, {
+    const cleanup = autoUpdate(trigger, _floatable.current, () => {
+      computePosition(trigger, _floatable.current, {
         placement: placement,
         middleware: [flip(), offset(offsets), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
@@ -103,7 +104,7 @@ const Dropdown = ({
       }) => {
         const [side] = _placement.split("-");
         // set float element styles
-        floatable.current.style.translate = `${x}px ${y}px`;
+        _floatable.current.style.translate = `${x}px ${y}px`;
         // set arrwo styles
         if (middlewareData.arrow && !!arrowRef.current) {
           const offsetY = `${middlewareData.arrow.y ?? 0 - 8}px`;
@@ -119,19 +120,11 @@ const Dropdown = ({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [placement, trigger, offsets, arrowable]);
-  const styled = {
-    dropdown: props(styles.dropdown.default({
-      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
-    }), overlay && styles.dropdown.overlay),
-    arrow: props(styles.arrow.default({
-      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
-    }))
-  };
-  useEffect(() => {
+  useLayoutEffect(() => {
     (async () => {
       if (open) {
-        floatable.current.style.display = "";
-        await animate(floatable.current, {
+        _floatable.current.style.display = "";
+        await animate(_floatable.current, {
           opacity: 1,
           transform: "scale(1, 1)"
         }, {
@@ -141,19 +134,27 @@ const Dropdown = ({
         await onEntered?.();
         return;
       }
-      await Promise.all([onExit?.(), animate(floatable.current, {
+      await Promise.all([onExit?.(), animate(_floatable.current, {
         opacity: 0,
         transform: "scale(0, 0)"
       }, {
         delay: 0.1,
         duration: 0.2
       }).then(() => {
-        floatable.current.style.display = "none";
+        _floatable.current.style.display = "none";
       })]);
       onExited?.();
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
+  const styled = {
+    dropdown: props(styles.dropdown.default({
+      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
+    }), overlay && styles.dropdown.overlay),
+    arrow: props(styles.arrow.default({
+      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
+    }))
+  };
   return React.createElement("div", {
     ref: floatable,
     ...props$1,
@@ -167,6 +168,6 @@ const Dropdown = ({
     className: styled.arrow.className,
     style: styled.arrow.style
   }));
-};
+});
 
 export { Dropdown as default };

package/dist/components/popper/popper.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopperProps } from "./types";
-declare const Popper: ({ destroyable, placement, ...props }: PopperProps) => React.JSX.Element;
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/dist/components/popper/popper.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Portal from '../portal/portal.js';
 import Dropdown from './dropdown.js';
 
-const Popper = ({ destroyable, placement = "bottom-start", ...props }) => {
+const Popper = forwardRef(({ destroyable, placement = "bottom-start", ...props }, ref) => {
     return (React.createElement(Portal, { open: props.open, destroyable: destroyable },
-        React.createElement(Dropdown, { ...props, placement: placement })));
-};
+        React.createElement(Dropdown, { ...props, placement: placement, ref: ref })));
+});
 
 export { Popper as default };

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

@@ -4,7 +4,11 @@ import type { TreeProps } from "./types";
  * @description
  * expanded keys
  */
-export declare const useExpandedKeys: ([expandedKeys, onExpand]: [TreeProps["expandedKeys"], TreeProps["onExpand"]]) => {
+export declare const useExpandedKeys: ({ expandedKeys, onExpand, defaultExpandedKeys, }: {
+    expandedKeys?: Key[];
+    onExpand: TreeProps["onExpand"];
+    defaultExpandedKeys: Key[];
+}) => {
     expandedKeys: Set<Key>;
     toggle: (key: Key) => void;
 };
@@ -12,8 +16,10 @@ export declare const useExpandedKeys: ([expandedKeys, onExpand]: [TreeProps["exp
  * @description
  * selected keys
  */
-export declare const useSelectedKeys: ({ selectedKeys: _selectedKeys }: {
+export declare const useSelectedKeys: ({ selectedKeys: _selectedKeys, defaultSelectedKeys, onSelect, }: {
     selectedKeys?: Key[];
+    defaultSelectedKeys: Key[];
+    onSelect?: (key: Key) => void;
 }) => {
     selectedKeys: Set<Key>;
     toggle: (key: Key) => void;

package/dist/components/tree/hooks.js

@@ -5,14 +5,14 @@ import { useMemo, useCallback } from 'react';
  * @description
  * expanded keys
  */
-const useExpandedKeys = ([expandedKeys, onExpand]) => {
-    const [_expandedKeys, _setExpandedKeys] = useControlledState(expandedKeys);
+const useExpandedKeys = ({ expandedKeys, onExpand, defaultExpandedKeys, }) => {
+    const [_expandedKeys, _setExpandedKeys] = useControlledState(expandedKeys, { defaultState: defaultExpandedKeys });
     const readableExpandedKeys = useMemo(() => new Set(_expandedKeys), [_expandedKeys]);
     const toggle = useCallback((key) => {
         // deal expanding key
-        const readableExpandingKeys = new Set(_expandedKeys);
-        readableExpandingKeys.has(key) ? readableExpandingKeys.delete(key) : readableExpandingKeys.add(key);
-        const expandingKeys = Array.from(readableExpandingKeys);
+        const _keys = new Set(_expandedKeys);
+        _keys.has(key) ? _keys.delete(key) : _keys.add(key);
+        const expandingKeys = Array.from(_keys);
         // change inner state
         // emit change handler
         _setExpandedKeys(expandingKeys);
@@ -27,16 +27,15 @@ const useExpandedKeys = ([expandedKeys, onExpand]) => {
  * @description
  * selected keys
  */
-const useSelectedKeys = ({ selectedKeys: _selectedKeys }) => {
-    const [selectedKeys, setSelectedKeys] = useControlledState(_selectedKeys);
-    const __selectedKeys = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+const useSelectedKeys = ({ selectedKeys: _selectedKeys, defaultSelectedKeys, onSelect, }) => {
+    const [selectedKeys, setSelectedKeys] = useControlledState(_selectedKeys, { defaultState: defaultSelectedKeys });
+    const readableSelectedKeys = useMemo(() => new Set(selectedKeys), [selectedKeys]);
     const toggle = useEvent((key) => {
-        setSelectedKeys(() => {
-            return Array.from([key]);
-        });
+        setSelectedKeys(() => [key]);
+        onSelect?.(key);
     });
     return {
-        selectedKeys: __selectedKeys,
+        selectedKeys: readableSelectedKeys,
         toggle,
     };
 };

package/dist/components/tree/node.js

@@ -41,6 +41,7 @@ const styles = {
     transitionProperty: null,
     transitionTimingFunction: null,
     transform: "musae-1v0jg1i",
+    userSelect: "musae-87ps6o",
     $$css: true
   }, {
     "--transform": (props.isExpanded ? "rotate(90deg)" : null) != null ? props.isExpanded ? "rotate(90deg)" : null : "initial"
@@ -62,12 +63,17 @@ const styles = {
     borderBottomRightRadius: null,
     backgroundColor: "musae-8hsaj5 musae-rl4t6d",
     color: "musae-19dipnz",
+    cursor: "musae-t0e3qv",
     $$css: true
   }, {
     "--bcbnzo": (props.isSelected ? props.backgroundColor : null) != null ? props.isSelected ? props.backgroundColor : null : "initial",
     "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
     "--color": (props.isSelected ? props.color : null) != null ? props.isSelected ? props.color : null : "initial"
-  }]
+  }],
+  selectable: {
+    cursor: "musae-1ypdohk",
+    $$css: true
+  }
 };
 const Node = ({
   value,
@@ -98,7 +104,7 @@ const Node = ({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer],
       hoveredBackgroundColor: theme.colors[ColorToken.SurfaceContainer],
       color: theme.colors[ColorToken.Primary]
-    })),
+    }), selectable && styles.selectable),
     expander: props(styles.expander({
       isExpanded
     }))

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, nodes, selectable, selectedKeys: _selectedKeys, }: TreeProps) => React.JSX.Element;
+declare const Tree: ({ className, style, nodes, selectable, expandedKeys: _expandedKeys, selectedKeys: _selectedKeys, checkedKeys: _checkedKeys, defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, onExpand, onSelect, onCheck, }: TreeProps) => React.JSX.Element;
 export default Tree;

package/dist/components/tree/tree.js

@@ -4,10 +4,22 @@ import Context from './context.js';
 import { useTogglable } from '@aiszlab/relax';
 import { useExpandedKeys, useSelectedKeys } from './hooks.js';
 
-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 Tree = ({ className, style, nodes, selectable = true, expandedKeys: _expandedKeys, selectedKeys: _selectedKeys, checkedKeys: _checkedKeys, defaultExpandedKeys = [], defaultSelectedKeys = [], defaultCheckedKeys = [], onExpand, onSelect, onCheck, }) => {
+    const { toggledKeys: checkedKeys, toggle: check } = useTogglable(nodes, {
+        defaultToggledKeys: defaultCheckedKeys,
+        toggledKeys: _checkedKeys,
+        onToggle: onCheck,
+    });
+    const { expandedKeys, toggle: expand } = useExpandedKeys({
+        expandedKeys: _expandedKeys,
+        onExpand,
+        defaultExpandedKeys,
+    });
+    const { selectedKeys, toggle: select } = useSelectedKeys({
+        selectedKeys: _selectedKeys,
+        defaultSelectedKeys,
+        onSelect,
+    });
     const contextValue = useMemo(() => {
         return {
             checkedKeys,

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

@@ -38,6 +38,12 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     expandedKeys?: Key[];
+    /**
+     * @description
+     * default expanded keys
+     * @default []
+     */
+    defaultExpandedKeys?: Key[];
     /**
      * @description
      * expand handler
@@ -56,6 +62,36 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     selectedKeys?: Key[];
+    /**
+     * @description
+     * default selected keys
+     * @default []
+     */
+    defaultSelectedKeys?: Key[];
+    /**
+     * @description
+     * select handler
+     * @default void 0
+     */
+    onSelect?: (key: Key) => void;
+    /**
+     * @description
+     * checked keys
+     * @default void 0
+     */
+    checkedKeys?: Key[];
+    /**
+     * @description
+     * default checked keys
+     * @default []
+     */
+    defaultCheckedKeys?: Key[];
+    /**
+     * @description
+     * check handler
+     * @default void 0
+     */
+    onCheck?: (keys: Key[]) => void;
 };
 /**
  * @description

package/dist/stylex.css

@@ -120,6 +120,7 @@
 .musae-1om1yv4:not(#\#):not(#\#):not(#\#){column-gap:var(--musae-h30iw9)}
 .musae-1ef45qx:not(#\#):not(#\#):not(#\#){column-gap:var(--musae-qk2ac7)}
 .musae-18jba3g:not(#\#):not(#\#):not(#\#){column-gap:var(--musae-vk5id6)}
+.musae-t0e3qv:not(#\#):not(#\#):not(#\#){cursor:default}
 .musae-mper1u:not(#\#):not(#\#):not(#\#){cursor:inherit}
 .musae-1h6gzvc:not(#\#):not(#\#):not(#\#){cursor:not-allowed}
 .musae-1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
@@ -231,7 +232,10 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-1158fpu:not(#\#):not(#\#):not(#\#){transform:rotate(45deg)}
 .musae-1iffjtl:not(#\#):not(#\#):not(#\#){transform:rotate(90deg)}
 .musae-11lhmoz:not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}
+.musae-1i3z1r0:not(#\#):not(#\#):not(#\#){transform:translateX(-50%) translateY(-50%)}
+.musae-itovws:not(#\#):not(#\#):not(#\#){transform:translateX(-50%) translateY(50%)}
 .musae-rycbv3:not(#\#):not(#\#):not(#\#){transform:translateX(50%) translateY(-50%)}
+.musae-1vfo23u:not(#\#):not(#\#):not(#\#){transform:translateX(50%) translateY(50%)}
 .musae-1v0jg1i:not(#\#):not(#\#):not(#\#){transform:var(--transform,revert)}
 .musae-1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
 .musae-13dflua:not(#\#):not(#\#):not(#\#){transition-duration:.2s}
@@ -306,6 +310,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-1ajdkb8:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-2h23ia)}
 .musae-1cj5796:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-70uu0v)}
 .musae-7kkngq:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-cftog7)}
+.musae-1v3ox18:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-fwu7zn)}
 .musae-kzsoxx:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-jdzqnm)}
 .musae-was1v5:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-laggmb)}
 .musae-1gfonl1:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-oohzsl)}
@@ -372,6 +377,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-fx4e2q:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-2h23ia)}
 .musae-1gn8jaj:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-70uu0v)}
 .musae-1sgo4cp:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-cftog7)}
+.musae-2jq81:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-fwu7zn)}
 .musae-1wmt73o:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-laggmb)}
 .musae-r8isjd:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-oohzsl)}
 .musae-145rzd9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-rlgvtq)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.2.59",
+    "@aiszlab/relax": "^1.2.64",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@floating-ui/dom": "^1.6.5",

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

@@ -1,12 +0,0 @@
-import { type FocusEventHandler, type MouseEventHandler } from "react";
-/**
- * @description
- * use events for input
- */
-export declare const useEvents: ({ onBlur, onClick, }: {
-    onBlur: FocusEventHandler<HTMLDivElement>;
-    onClick: MouseEventHandler<HTMLDivElement>;
-}) => {
-    blur: FocusEventHandler<HTMLDivElement>;
-    click: MouseEventHandler<HTMLDivElement>;
-};

package/dist/components/picker/hooks.js

@@ -1,23 +0,0 @@
-import { useCallback } from 'react';
-
-/**
- * @description
- * use events for input
- */
-const useEvents = ({ onBlur, onClick, }) => {
-    const blur = useCallback((e) => {
-        onBlur?.(e);
-        e.stopPropagation();
-    }, [onBlur]);
-    /// click handler
-    const click = useCallback((e) => {
-        onClick?.(e);
-        e.stopPropagation();
-    }, [onClick]);
-    return {
-        blur,
-        click,
-    };
-};
-
-export { useEvents };