musae 0.2.0 → 0.2.2

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import type { AvatarProps } from "./types";
-declare const Avatar: ({ src, alt, shape: _shape, size: _size }: AvatarProps) => React.JSX.Element;
+/**
+ * @description
+ * `Avatar`
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
@@ -6,9 +6,11 @@ import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { typography } from '../theme/theme.js';
+import { useImage } from '../../hooks/use-image.js';
 
 const styles = {
-  avatar: {
+  avatar: props => [{
     borderWidth: "musae-1i8jmgv",
     borderInlineWidth: null,
     borderInlineStartWidth: null,
@@ -38,8 +40,16 @@ const styles = {
     borderBottomColor: null,
     boxSizing: "musae-9f619",
     display: "musae-3nfvp2",
+    backgroundColor: "musae-q1mx2j",
+    color: "musae-19dipnz",
+    alignItems: "musae-6s0dn4",
+    justifyContent: "musae-l56j7k",
+    userSelect: "musae-87ps6o",
     $$css: true
-  },
+  }, {
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--color": props.color != null ? props.color : "initial"
+  }],
   image: {
     width: "musae-wfgd1y",
     height: "musae-b27hse",
@@ -112,20 +122,31 @@ const styles = {
     $$css: true
   }
 };
-const Avatar = ({
+/**
+ * @description
+ * `Avatar`
+ */
+const Avatar = forwardRef(({
   src,
   alt,
   shape: _shape = "circular",
-  size: _size = "medium"
-}) => {
+  size: _size = "medium",
+  ...props$1
+}, ref) => {
   const theme = useTheme();
   const group = useContext(Context);
   const isInGroup = !!group;
   const size = group?.size ?? _size;
   const shape = group?.shape ?? _shape;
   const classNames = useClassNames(ComponentToken.Avatar);
+  const isLoaded = useImage({
+    src
+  });
   const styled = {
-    avatar: props(styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping({
+    avatar: props(typography.label[size], styles.avatar({
+      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
+      color: theme.colors[ColorToken.Primary]
+    }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
     })),
     image: {
@@ -133,14 +154,17 @@ const Avatar = ({
     }
   };
   return React.createElement("span", {
+    ...props$1,
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
-    style: styled.avatar.style
-  }, React.createElement("img", {
+    style: styled.avatar.style,
+    ref: ref
+  }, isLoaded === "loaded" ? React.createElement("img", {
+    draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  }));
-};
+  }) : alt?.slice(0, 2).toUpperCase());
+});
 
 export { Avatar as default };

package/dist/components/avatar/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { type AvatarGroupProps } from "./types";
-declare const Group: ({ children, shape, size, max }: AvatarGroupProps) => React.JSX.Element;
+declare const Group: ({ children: _children, shape, size, max }: AvatarGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/avatar/group.js

@@ -1,18 +1,47 @@
-import React from 'react';
+import React, { useMemo, Children, cloneElement } from 'react';
 import { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+import Popover from '../popover/popover.js';
+import Avatar from './avatar.js';
 
 const Group = ({
-  children,
+  children: _children,
   shape = "circular",
   size = "medium",
   max = 3
 }) => {
   const styled = {
-    className: "musae-3nfvp2"
+    className: "musae-3nfvp2 musae-87ps6o"
   };
   const classNames = useClassNames(ComponentToken.Avatar);
+  const children = useMemo(() => {
+    const __children = Children.toArray(_children);
+    const [visible, hidden] = __children.reduce((prev, child, index) => {
+      // @ts-ignore
+      const element = cloneElement(child, {
+        key: `avatars-${index}`
+      });
+      // great than max, hide current node
+      if (index >= max) {
+        prev[1].push(element);
+      } else {
+        prev[0].push(element);
+      }
+      return prev;
+    }, [[], []]);
+    // got hidden nodes, show ellipse node
+    if (hidden.length > 0) {
+      visible.push(React.createElement(Popover, {
+        description: React.createElement(Group, null, hidden),
+        key: "avatars-hidden",
+        placement: "top"
+      }, React.createElement(Avatar, {
+        alt: `+${hidden.length}`
+      })));
+    }
+    return visible;
+  }, [_children, max]);
   return React.createElement(Context.Provider, {
     value: {
       shape,

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefAttributes } from "react";
 type Size = "small" | "medium" | "large";
 type Shape = "circular" | "squared";
 /**
@@ -14,7 +14,9 @@ export type AvatarProps = {
     src?: string;
     /**
      * @description
-     * alt
+     * alt, (fallback usage)
+     * if user do not provide `src`, or `src` is invalid
+     * show `alt`
      * @default void 0
      */
     alt?: string;
@@ -70,7 +72,7 @@ export type TypedAvatar = {
      * @description
      * component self
      */
-    (props: AvatarProps): JSX.Element;
+    (props: AvatarProps & RefAttributes<HTMLSpanElement>): ReactNode;
     /**
      * @description
      * group

package/dist/components/button/button.js

@@ -227,7 +227,9 @@ const Button = forwardRef(({
   onPointerEnter,
   onPointerLeave,
   type = "button",
-  ...props$1
+  onClick: _onClick,
+  prefix,
+  suffix
 }, ref) => {
   const classNames = useClassNames(ComponentToken.Button);
   const theme = useTheme();
@@ -236,7 +238,7 @@ const Button = forwardRef(({
     clear,
     ripples
   } = useButton({
-    onClick: props$1.onClick
+    onClick: _onClick
   });
   const styled = {
     button: props(styles.button, typography.label[size],
@@ -274,7 +276,7 @@ const Button = forwardRef(({
     onPointerEnter: onPointerEnter,
     onPointerLeave: onPointerLeave,
     type: type
-  }, props$1.prefix, children, props$1.suffix, ripple && React.createElement(Ripple, {
+  }, prefix, children, suffix, ripple && React.createElement(Ripple, {
     ripples: ripples,
     onClear: clear
   }));

package/dist/components/calendar/calendar.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CalendarProps } from "./types";
-declare const Calendar: ({ className, style, ...props }: CalendarProps) => React.JSX.Element;
+declare const Calendar: ({ className, style, value, onClick: _onClick, focusedAt: _focusedAt }: CalendarProps) => React.JSX.Element;
 export default Calendar;

package/dist/components/calendar/calendar.js

@@ -32,19 +32,26 @@ const styles = {
 const Calendar = ({
   className,
   style,
-  ...props$1
+  value,
+  onClick: _onClick,
+  focusedAt: _focusedAt
 }) => {
   const {
     timespan,
     onClick
-  } = useValue([props$1.value, props$1.onClick]);
+  } = useValue({
+    onClick: _onClick,
+    value
+  });
   const {
     focusedAt,
     toPrevYear,
     toPrevMonth,
     toNextYear,
     toNextMonth
-  } = useFocusedAt([props$1.focusedAt]);
+  } = useFocusedAt({
+    focusedAt: _focusedAt
+  });
   const dateCells = useDateCells([timespan, focusedAt, onClick]);
   const headCells = useHeadCells();
   const classNames = useClassNames(ComponentToken.Calendar);

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

@@ -16,7 +16,10 @@ export declare const useDateCells: ([timespan, focusedAt, click]: [Timespan, Day
  * @description
  * time span
  */
-export declare const useValue: ([value, _click]: [CalendarProps["value"], CalendarProps["onClick"]]) => {
+export declare const useValue: ({ onClick: _click, value, }: {
+    value: CalendarProps["value"];
+    onClick: CalendarProps["onClick"];
+}) => {
     timespan: Timespan;
     onClick: (_value: Dayjs) => void;
 };
@@ -24,7 +27,9 @@ export declare const useValue: ([value, _click]: [CalendarProps["value"], Calend
  * @description
  * point at
  */
-export declare const useFocusedAt: ([_focusedAt]: [CalendarProps["focusedAt"]]) => {
+export declare const useFocusedAt: ({ focusedAt: _focusedAt }: {
+    focusedAt: CalendarProps["focusedAt"];
+}) => {
     focusedAt: dayjs.Dayjs;
     toNextYear: () => void;
     toPrevYear: () => void;

package/dist/components/calendar/hooks.js

@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
-import { isArray, useControlledState } from '@aiszlab/relax';
+import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -41,21 +41,21 @@ const styles = {
     $$css: true
   },
   range: {
-    "::before_insetInlineStart": "musae-1682cnc",
+    "::before_insetInlineStart": "musae-1kfboi8",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-typ5od",
+    "::before_insetInlineEnd": "musae-1x8jx26",
     $$css: true
   },
   from: {
     "::before_insetInlineStart": "musae-fbisj7",
     "::before_left": null,
     "::before_right": null,
-    "::before_insetInlineEnd": "musae-typ5od",
+    "::before_insetInlineEnd": "musae-1x8jx26",
     $$css: true
   },
   to: {
-    "::before_insetInlineStart": "musae-1682cnc",
+    "::before_insetInlineStart": "musae-1kfboi8",
     "::before_left": null,
     "::before_right": null,
     "::before_insetInlineEnd": "musae-1gkks1t",
@@ -147,14 +147,17 @@ const useDateCells = ([timespan, focusedAt, click]) => {
  * @description
  * time span
  */
-const useValue = ([value, _click]) => {
+const useValue = ({
+  onClick: _click,
+  value
+}) => {
   /// change handler
   const onClick = useCallback(_value => {
     _click?.(_value);
   }, [_click]);
   /// time span
   const timespan = useMemo(() => {
-    const [from, to] = isArray(value) ? value : [value, void 0];
+    const [from, to] = toArray(value);
     return new Timespan({
       from,
       to
@@ -169,7 +172,9 @@ const useValue = ([value, _click]) => {
  * @description
  * point at
  */
-const useFocusedAt = ([_focusedAt]) => {
+const useFocusedAt = ({
+  focusedAt: _focusedAt
+}) => {
   const [focusedAt, setFocusedAt] = useControlledState(_focusedAt, {
     defaultState: dayjs()
   });

package/dist/components/dialog/popup.js

@@ -19,8 +19,8 @@ const styles = {
   },
   overlay: props => [{
     position: "musae-10l6tqk",
-    top: "musae-13vifvy",
-    left: "musae-u96u03",
+    top: "musae-9oc6z4",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
     width: "musae-n9wirt",
@@ -137,7 +137,7 @@ const Popup = ({
   }, [open]);
   const styled = {
     popup: {
-      className: "musae-ixxii4 musae-13vifvy musae-u96u03 musae-n9wirt musae-1dr59a3 musae-47corl musae-1tv1kli musae-78zum5 musae-l56j7k musae-6s0dn4"
+      className: "musae-ixxii4 musae-9oc6z4 musae-1tjciyl musae-n9wirt musae-1dr59a3 musae-47corl musae-1tv1kli musae-78zum5 musae-l56j7k musae-6s0dn4"
     },
     overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]

package/dist/components/drawer/popup.js

@@ -14,7 +14,7 @@ import { contains } from '../../node_modules/@aiszlab/relax/dist/dom/contains.js
 const styles = {
   popup: {
     position: "musae-ixxii4",
-    inset: "musae-10a8y8t",
+    inset: "musae-ezip7x",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
@@ -29,7 +29,7 @@ const styles = {
   },
   overlay: props => [{
     position: "musae-10l6tqk",
-    inset: "musae-10a8y8t",
+    inset: "musae-ezip7x",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,
@@ -61,44 +61,44 @@ const styles = {
     "--transform": props.transform != null ? props.transform : "initial"
   }],
   right: props => [{
-    right: "musae-3m8u43",
+    right: "musae-15gpytn",
     insetInlineStart: null,
     insetInlineEnd: null,
-    top: "musae-13vifvy",
-    bottom: "musae-1ey2m1c",
+    top: "musae-9oc6z4",
+    bottom: "musae-1sh2tzk",
     width: "musae-17fnjtu",
     $$css: true
   }, {
     "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   left: props => [{
-    left: "musae-u96u03",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
-    top: "musae-13vifvy",
-    bottom: "musae-1ey2m1c",
+    top: "musae-9oc6z4",
+    bottom: "musae-1sh2tzk",
     width: "musae-17fnjtu",
     $$css: true
   }, {
     "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   bottom: props => [{
-    bottom: "musae-1ey2m1c",
-    left: "musae-u96u03",
+    bottom: "musae-1sh2tzk",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-3m8u43",
+    right: "musae-15gpytn",
     height: "musae-1jwls1v",
     $$css: true
   }, {
     "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size)
   }],
   top: props => [{
-    top: "musae-13vifvy",
-    left: "musae-u96u03",
+    top: "musae-9oc6z4",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-3m8u43",
+    right: "musae-15gpytn",
     height: "musae-1jwls1v",
     $$css: true
   }, {
@@ -187,7 +187,7 @@ const Popup = ({
   }, [open]);
   const styled = {
     popup: {
-      className: "musae-ixxii4 musae-10a8y8t musae-47corl musae-mn8nw1"
+      className: "musae-ixxii4 musae-ezip7x musae-47corl musae-mn8nw1"
     },
     overlay: props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]

package/dist/components/image/preview/operations.js

@@ -13,10 +13,10 @@ import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.j
 const styles = {
   footer: props => [{
     position: "musae-ixxii4",
-    left: "musae-u96u03",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-3m8u43",
+    right: "musae-15gpytn",
     bottom: "musae-1ii70tt",
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
@@ -74,7 +74,7 @@ const Operations = ({
       className: "musae-1qtgrog musae-14l26ut"
     },
     navigations: {
-      className: "musae-ixxii4 musae-u96u03 musae-3m8u43 musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
+      className: "musae-ixxii4 musae-1tjciyl musae-15gpytn musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
     },
     footer: _stylex.props(styles.footer({
       color: theme.colors[ColorToken.OnSurface]

package/dist/components/layout/header.js

@@ -14,7 +14,7 @@ const styles = {
     paddingRight: null,
     marginBottom: "musae-hq7bbv",
     position: "musae-7wzq59",
-    top: "musae-13vifvy",
+    top: "musae-9oc6z4",
     zIndex: "musae-1ac462h",
     display: "musae-78zum5",
     alignItems: "musae-6s0dn4",

package/dist/components/menu/item.js

@@ -17,13 +17,10 @@ const styles = {
       display: "musae-78zum5",
       alignItems: "musae-6s0dn4",
       cursor: "musae-1ypdohk",
-      transition: "musae-2zkx75",
-      transitionBehavior: null,
-      transitionDelay: null,
-      transitionDuration: null,
-      transitionProperty: null,
-      transitionTimingFunction: null,
+      userSelect: "musae-87ps6o",
       willChange: "musae-1aaibe2",
+      transitionProperty: "musae-xy01e9",
+      transitionDuration: "musae-1g2r6go",
       $$css: true
     }
   },
@@ -265,8 +262,8 @@ const Item = forwardRef(({
     ...styled.menuItem
   }, React.createElement("div", {
     ref: itemRef,
-    style: styled.item.style,
     className: clsx(classNames[MenuClassToken.Item], className, styled.item.className),
+    style: styled.item.style,
     onClick: click,
     ...hoverProps
   }, _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && React.createElement(Popper, {

package/dist/components/notification/holder.js

@@ -25,8 +25,8 @@ const styles = {
     $$css: true
   },
   top: {
-    top: "musae-13vifvy",
-    insetInline: "musae-17y0mx6",
+    top: "musae-9oc6z4",
+    insetInline: "musae-l33w4x",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -35,22 +35,22 @@ const styles = {
     $$css: true
   },
   topRight: {
-    top: "musae-13vifvy",
-    insetInlineEnd: "musae-tijo5x",
+    top: "musae-9oc6z4",
+    insetInlineEnd: "musae-hw0b42",
     left: null,
     right: null,
     $$css: true
   },
   topLeft: {
-    top: "musae-13vifvy",
-    insetInlineStart: "musae-1o0tod",
+    top: "musae-9oc6z4",
+    insetInlineStart: "musae-1at4hj2",
     left: null,
     right: null,
     $$css: true
   },
   bottom: {
-    bottom: "musae-1ey2m1c",
-    insetInline: "musae-17y0mx6",
+    bottom: "musae-1sh2tzk",
+    insetInline: "musae-l33w4x",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -59,15 +59,15 @@ const styles = {
     $$css: true
   },
   bottomLeft: {
-    bottom: "musae-1ey2m1c",
-    insetInlineStart: "musae-1o0tod",
+    bottom: "musae-1sh2tzk",
+    insetInlineStart: "musae-1at4hj2",
     left: null,
     right: null,
     $$css: true
   },
   bottomRight: {
-    bottom: "musae-1ey2m1c",
-    insetInlineEnd: "musae-tijo5x",
+    bottom: "musae-1sh2tzk",
+    insetInlineEnd: "musae-hw0b42",
     left: null,
     right: null,
     $$css: true

package/dist/components/notification/notification.js

@@ -52,7 +52,7 @@ const styles = {
       transitionDuration: "musae-13dflua",
       transform: "musae-1v0jg1i",
       opacity: "musae-g01cxk",
-      marginTop: "musae-dj266r",
+      marginTop: "musae-1q12cbh",
       display: "musae-rvj5dj",
       gap: "musae-vbka3v",
       rowGap: null,

package/dist/components/popover/popover.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ChildProps, PopoverProps } from "./types";
-declare const Popover: <P extends ChildProps<T>, T extends HTMLElement>({ triggerBy: _triggerBy, title, description, ...props }: PopoverProps<P, T>) => React.JSX.Element;
+declare const Popover: <P extends ChildProps<T>, T extends HTMLElement>({ triggerBy: _triggerBy, title, description, placement, className, style, children: _children, }: PopoverProps<P, T>) => React.JSX.Element;
 export default Popover;

package/dist/components/popover/popover.js

@@ -23,7 +23,10 @@ const Popover = ({
   triggerBy: _triggerBy = "hover",
   title,
   description,
-  ...props
+  placement = "bottom",
+  className,
+  style,
+  children: _children
 }) => {
   const _ref = useRef(null);
   const [_isOpen, {
@@ -32,7 +35,7 @@ const Popover = ({
   }] = useBoolean(false);
   const triggerBy = useMemo(() => new Set(toArray(_triggerBy)), [_triggerBy]);
   const classNames = useClassNames(ComponentToken.Popover);
-  const childRef = useRefs(_ref, props.children.props.ref);
+  const childRef = useRefs(_ref, _children.props.ref);
   const click = useEvent(e => {
     toggle();
     e.stopPropagation();
@@ -41,12 +44,12 @@ const Popover = ({
     turnOn();
   });
   const [isHovered, hoverProps] = useHover({
-    onEnter: () => chain(props.children.props.onMouseOver, props.children.props.onMouseEnter, props.children.props.onPointerEnter),
-    onLeave: () => chain(props.children.props.onMouseLeave, props.children.props.onPointerLeave)
+    onEnter: () => chain(_children.props.onMouseOver, _children.props.onMouseEnter, _children.props.onPointerEnter),
+    onLeave: () => chain(_children.props.onMouseLeave, _children.props.onPointerLeave)
   });
   const [isFocused, focusProps] = useFocus({
-    onFocus: props.children.props.onFocus,
-    onBlur: props.children.props.onBlur
+    onFocus: _children.props.onFocus,
+    onBlur: _children.props.onBlur
   });
   const isOpen = useMemo(() => {
     // allow hover
@@ -57,7 +60,7 @@ const Popover = ({
     return _isOpen;
   }, [triggerBy, isHovered, _isOpen, isFocused]);
   // @ts-ignore
-  const children = cloneElement(props.children, {
+  const children = cloneElement(_children, {
     ref: childRef,
     ...hoverProps,
     ...focusProps,
@@ -81,10 +84,14 @@ const Popover = ({
     ...(triggerBy.has("hover") && {
       onPointerEnter: enterPopper,
       onPointerLeave: leavePopper
-    })
+    }),
+    placement: placement
   }, React.createElement("div", {
-    className: clsx(classNames[PopoverClassToken.Popover], styled.popover.className),
-    style: styled.popover.style
+    className: clsx(classNames[PopoverClassToken.Popover], className, styled.popover.className),
+    style: {
+      ...styled.popover.style,
+      ...style
+    }
   }, !!title && React.createElement(React.Fragment, null, React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Title], styled.title.className),
     style: styled.title.style

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

@@ -1,6 +1,7 @@
 import type { DOMAttributes, ReactElement, ReactNode, RefAttributes } from "react";
 import type { ComponentProps } from "../../types/element";
-export type ChildProps<T> = Pick<DOMAttributes<T>, "onPointerEnter" | "onMouseEnter" | "onMouseOver" | "onMouseLeave" | "onPointerLeave" | "onClick" | "onContextMenu" | "onFocus" | "onBlur"> & RefAttributes<T>;
+import type { Placement } from "@floating-ui/dom";
+export type ChildProps<T> = Pick<DOMAttributes<T>, "onMouseEnter" | "onMouseOver" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onClick" | "onContextMenu" | "onFocus" | "onBlur"> & RefAttributes<T>;
 type TriggerBy = "hover" | "focus" | "click" | "contextMenu";
 /**
  * @description
@@ -10,22 +11,32 @@ export type PopoverProps<P extends ChildProps<T>, T extends HTMLElement> = Compo
     /**
      * @description
      * a trigger element.
+     * @requires
      */
     children: ReactElement<P>;
     /**
      * @description
      * title
+     * @default void 0
      */
     title?: ReactNode;
     /**
      * @description
      * description
+     * @requires
      */
     description: ReactNode;
     /**
      * @description
      * trigger by
+     * @default "hover"
      */
     triggerBy?: TriggerBy | TriggerBy[];
+    /**
+     * @description
+     * popover placement
+     * @default "bottom"
+     */
+    placement?: Placement;
 };
 export {};

package/dist/components/popper/dropdown.js

@@ -3,7 +3,7 @@ import { ComponentToken, PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
-import { isFunction, isVoid } from '@aiszlab/relax';
+import { 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';
@@ -16,8 +16,8 @@ const styles = {
       zIndex: "musae-1axsr4t",
       position: "musae-10l6tqk",
       backgroundColor: "musae-q1mx2j",
-      top: "musae-13vifvy",
-      insetInlineStart: "musae-1o0tod",
+      top: "musae-9oc6z4",
+      insetInlineStart: "musae-1at4hj2",
       left: null,
       right: null,
       boxShadow: "musae-ezd0au",
@@ -47,7 +47,6 @@ const styles = {
       width: "musae-103s5vv",
       height: "musae-jazk0b",
       backgroundColor: "musae-q1mx2j",
-      top: "musae-1vwp36r",
       transform: "musae-1158fpu",
       $$css: true
     }, {
@@ -58,7 +57,7 @@ const styles = {
 const Dropdown = ({
   open,
   children,
-  placement = "bottom-start",
+  placement,
   style,
   className,
   onExit,
@@ -99,14 +98,19 @@ const Dropdown = ({
       }).then(({
         x,
         y,
-        middlewareData
+        middlewareData,
+        placement: _placement
       }) => {
+        const [side] = _placement.split("-");
         // set float element styles
         floatable.current.style.translate = `${x}px ${y}px`;
         // set arrwo styles
         if (middlewareData.arrow && !!arrowRef.current) {
-          arrowRef.current.style.insetInlineStart = isVoid(middlewareData.arrow.x) ? "" : `${middlewareData.arrow.x}px`;
-          arrowRef.current.style.insetBlockStart = `${middlewareData.arrow.y ?? 0 - 8}px`;
+          const offsetY = `${middlewareData.arrow.y ?? 0 - 8}px`;
+          const offsetX = `${middlewareData.arrow.x ?? 0}px`;
+          arrowRef.current.style.insetInlineStart = offsetX;
+          side === "top" && (arrowRef.current.style.insetBlockEnd = offsetY);
+          side === "bottom" && (arrowRef.current.style.insetBlockStart = offsetY);
         }
       }).catch(() => null);
     });
@@ -127,8 +131,6 @@ const Dropdown = ({
     (async () => {
       if (open) {
         floatable.current.style.display = "";
-        floatable.current.style.opacity = "0";
-        floatable.current.style.opacity = "scale(0, 0)";
         await animate(floatable.current, {
           opacity: 1,
           transform: "scale(1, 1)"
@@ -147,8 +149,6 @@ const Dropdown = ({
         duration: 0.2
       }).then(() => {
         floatable.current.style.display = "none";
-        floatable.current.style.opacity = "";
-        floatable.current.style.transform = "";
       })]);
       onExited?.();
     })();

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

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

package/dist/components/popper/popper.js

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

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

@@ -61,4 +61,9 @@ export interface PopperProps extends Pick<DOMAttributes<HTMLDivElement>, "onMous
      */
     arrow?: boolean;
 }
-export type DropdownProps = Omit<PopperProps, "portal">;
+export type DropdownProps = Omit<PopperProps, "portal" | "placement"> & {
+    /**
+     * {@link} `PopperProps`.`placement`
+     */
+    placement: Placement;
+};

package/dist/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { RadioProps } from "./types";
+import type { RadioProps } from "./types";
 declare const Radio: ({ children, value, checked, disabled, ...props }: RadioProps) => React.JSX.Element;
 export default Radio;

package/dist/components/radio/radio.js

@@ -22,7 +22,7 @@ const styles = {
       $$css: true
     }
   },
-  toggler: {
+  trigger: {
     default: props => [{
       visibility: "musae-lshs6z",
       height: "musae-jazk0b",
@@ -73,12 +73,9 @@ const styles = {
       "::after_borderTopRightRadius": null,
       "::after_borderBottomLeftRadius": null,
       "::after_borderBottomRightRadius": null,
-      "::after_transition": "musae-w0vqy",
-      "::after_transitionBehavior": null,
-      "::after_transitionDelay": null,
-      "::after_transitionDuration": null,
-      "::after_transitionProperty": null,
-      "::after_transitionTimingFunction": null,
+      "::after_willChange": "musae-yttlx6",
+      "::after_transitionProperty": "musae-6orayw",
+      "::after_transitionDuration": "musae-t0fc71",
       $$css: true
     }, {
       "--joftei": props.borderColor != null ? props.borderColor : "initial"
@@ -107,6 +104,15 @@ const styles = {
       "--joftei": props.borderColor != null ? props.borderColor : "initial"
     }],
     disabled: props => [{
+      borderColor: "musae-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
       "::before_content": "musae-1cpjm7i",
       "::before_position": "musae-1hmns74",
       "::before_visibility": "musae-11srvyv",
@@ -124,8 +130,13 @@ const styles = {
       "::before_borderBottomRightRadius": null,
       $$css: true
     }, {
+      "--borderColor": props.backgroundColor != null ? props.backgroundColor : "initial",
       "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial"
-    }]
+    }],
+    unckecked: {
+      "::before": null,
+      $$css: true
+    }
   },
   label: {
     default: {
@@ -176,13 +187,13 @@ const Radio = ({
   }, [isChecked, contextValue, value, isDisabled]);
   const styled = {
     radio: props(styles.radio.default, isDisabled && styles.radio.disabled),
-    trigger: props(styles.toggler.default({
+    trigger: props(styles.trigger.default({
       borderColor: theme.colors[ColorToken.Outline]
-    }), isChecked && (isDisabled ? styles.toggler.disabled({
-      backgroundColor: theme.colors[ColorToken.InversePrimary]
-    }) : styles.toggler.default({
+    }), isChecked && styles.trigger.checked({
       borderColor: theme.colors[ColorToken.Primary]
-    }))),
+    }), isDisabled && styles.trigger.disabled({
+      backgroundColor: theme.colors[ColorToken.InversePrimary]
+    }), !isChecked && styles.trigger.unckecked),
     label: props(typography.body.medium, styles.label.default)
   };
   return React.createElement("label", {

package/dist/components/rate/star.js

@@ -36,10 +36,10 @@ const styles = {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
-      insetInlineStart: "musae-1o0tod",
+      insetInlineStart: "musae-1at4hj2",
       left: null,
       right: null,
-      top: "musae-13vifvy",
+      top: "musae-9oc6z4",
       opacity: "musae-g01cxk",
       userSelect: "musae-87ps6o",
       overflow: "musae-b3r6kr",

package/dist/components/space/space.d.ts

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

package/dist/components/space/space.js

@@ -6,21 +6,30 @@ import clsx from 'clsx';
 const styles = {
   space: props => [{
     display: "musae-78zum5",
-    flexDirection: "musae-1q0g3np",
     columnGap: "musae-4rvf3u",
     rowGap: "musae-m8a6f2",
-    alignItems: "musae-6s0dn4",
     $$css: true
   }, {
     "--columnGap": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.columnGap),
     "--rowGap": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.rowGap)
-  }]
+  }],
+  horizontal: {
+    flexDirection: "musae-1q0g3np",
+    alignItems: "musae-6s0dn4",
+    $$css: true
+  },
+  vertical: {
+    flexDirection: "musae-dt5ytf",
+    justifyContent: "musae-l56j7k",
+    $$css: true
+  }
 };
 const Space = ({
   gutter = 4,
   children,
   className,
-  style
+  style,
+  type = "horizontal"
 }) => {
   const [columnGap, rowGap] = useGutters({
     gutter
@@ -28,7 +37,7 @@ const Space = ({
   const styled = props(styles.space({
     columnGap,
     rowGap
-  }));
+  }), styles[type]);
   return React.createElement("div", {
     className: clsx(className, styled.className),
     style: {

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import { Gutter } from "../../hooks/use-gutters";
-import { ComponentProps } from "../../types/element";
+import type { Gutter } from "../../hooks/use-gutters";
+import type { ComponentProps } from "../../types/element";
+type Type = "horizontal" | "vertical";
 /**
  * @description
  * space props
@@ -18,4 +19,11 @@ export type SpaceProps = ComponentProps & {
      * @default 4
      */
     gutter?: Gutter;
+    /**
+     * @description
+     * direction
+     * @default "horizontal"
+     */
+    type?: Type;
 };
+export {};

package/dist/components/switch/switch.js

@@ -192,20 +192,20 @@ const styles = {
       $$css: true
     },
     checked: {
-      marginInlineStart: "musae-1lziwak",
+      marginInlineStart: "musae-1tt3wx9",
       marginLeft: null,
       marginRight: null,
-      marginInlineEnd: "musae-14z9mp",
+      marginInlineEnd: "musae-fbia9g",
       $$css: true
     }
   },
   trailing: {
     default: {
       marginTop: "musae-ncydc0",
-      marginInlineEnd: "musae-14z9mp",
+      marginInlineEnd: "musae-fbia9g",
       marginLeft: null,
       marginRight: null,
-      marginInlineStart: "musae-1lziwak",
+      marginInlineStart: "musae-1tt3wx9",
       $$css: true
     },
     checked: {

package/dist/components/table/header.js

@@ -24,7 +24,7 @@ const styles = {
     ":not(:last-of-type)::after_height": "musae-1su0kt9",
     ":not(:last-of-type)::after_backgroundColor": "musae-9cqmhv",
     ":not(:last-of-type)::after_transform": "musae-1kmnipp",
-    ":not(:last-of-type)::after_insetInlineEnd": "musae-192i3sz",
+    ":not(:last-of-type)::after_insetInlineEnd": "musae-1sd0t5p",
     ":not(:last-of-type)::after_left": null,
     ":not(:last-of-type)::after_right": null,
     $$css: true

package/dist/components/tour/tour.js

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

package/dist/hooks/use-image.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributeReferrerPolicy } from "react";
+/**
+ * @description
+ * prefetch image
+ * if image load failed, get fail status
+ */
+export declare const useImage: ({ src, crossOrigin, referrerPolicy, }: {
+    src?: string;
+    crossOrigin?: string;
+    referrerPolicy?: HTMLAttributeReferrerPolicy;
+}) => false | "error" | "loaded";

package/dist/hooks/use-image.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * @description
+ * prefetch image
+ * if image load failed, get fail status
+ */
+const useImage = ({ src, crossOrigin, referrerPolicy = "no-referrer", }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    useEffect(() => {
+        if (!src) {
+            return;
+        }
+        setIsLoaded(false);
+        const image = new Image();
+        image.onload = () => {
+            setIsLoaded("loaded");
+        };
+        image.onerror = () => {
+            setIsLoaded("error");
+        };
+        image.crossOrigin = crossOrigin ?? null;
+        image.referrerPolicy = referrerPolicy;
+        image.src = src;
+        return () => {
+            image.onload = null;
+            image.onerror = null;
+            image.remove();
+        };
+    }, [src, crossOrigin, referrerPolicy]);
+    return isLoaded;
+};
+
+export { useImage };

package/dist/stylex.css

@@ -25,7 +25,7 @@
 .musae-1pk7hnv:not(#\#){grid:'leading description'}
 .musae-1js343y:not(#\#){grid:'leading title closer' 'leading description description'}
 .musae-1l2suiq:not(#\#){grid:'leading title' '. description'}
-.musae-10a8y8t:not(#\#){inset:0}
+.musae-ezip7x:not(#\#){inset:0px}
 .musae-1ug7cio:not(#\#){margin:var(--musae-15cw4i4)}
 .musae-ieb5ut:not(#\#){margin:var(--musae-1wblvyz)}
 .musae-1eddoca:not(#\#){margin:var(--musae-68a8pz)}
@@ -60,7 +60,7 @@
 .musae-1vkuzbb:not(#\#):not(#\#){gap:var(--musae-oohzsl)}
 .musae-29tp26:not(#\#):not(#\#){gap:var(--musae-qk2ac7)}
 .musae-vbka3v:not(#\#):not(#\#){gap:var(--musae-vk5id6)}
-.musae-17y0mx6:not(#\#):not(#\#){inset-inline:0}
+.musae-l33w4x:not(#\#):not(#\#){inset-inline:0px}
 .musae-e8uvvx:not(#\#):not(#\#){list-style:none}
 .musae-nweklb:not(#\#):not(#\#){margin-block:var(--musae-15cw4i4)}
 .musae-dbe9a9:not(#\#):not(#\#){margin-block:var(--musae-qk2ac7)}
@@ -83,7 +83,6 @@
 .musae-1xkwav8:not(#\#):not(#\#){padding-inline:var(--musae-oohzsl)}
 .musae-381k9q:not(#\#):not(#\#){padding-inline:var(--musae-qk2ac7)}
 .musae-iujutg:not(#\#):not(#\#){padding-inline:var(--musae-vk5id6)}
-.musae-2zkx75:not(#\#):not(#\#){transition:all .1s}
 .musae-1ng1d19:not(#\#):not(#\#){transition:all .2s}
 .musae-nz68lp:not(#\#):not(#\#){transition:box-shadow .2s}
 .musae-1trvaba:not(#\#):not(#\#){transition:transform .2s}
@@ -151,8 +150,8 @@
 .musae-4qzwkw:not(#\#):not(#\#):not(#\#){grid-column-end:var(--gridColumnEnd,revert)}
 .musae-8a1x49:not(#\#):not(#\#):not(#\#){grid-column-start:auto}
 .musae-1aeqsfb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(24,minmax(0,1fr))}
-.musae-tijo5x:not(#\#):not(#\#):not(#\#){inset-inline-end:0}
-.musae-1o0tod:not(#\#):not(#\#):not(#\#){inset-inline-start:0}
+.musae-hw0b42:not(#\#):not(#\#):not(#\#){inset-inline-end:0px}
+.musae-1at4hj2:not(#\#):not(#\#):not(#\#){inset-inline-start:0px}
 .musae-ncxdh4:not(#\#):not(#\#):not(#\#){inset-inline-start:calc(100% - var(--musae-rlgvtq) - var(--musae-1h5s2h0))}
 .musae-1auf0oo:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--musae-1h5s2h0)}
 .musae-hf0782:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--musae-h30iw9)}
@@ -178,10 +177,10 @@
 .musae-5agonf:not(#\#):not(#\#):not(#\#){line-height:52px}
 .musae-1kke7aa:not(#\#):not(#\#):not(#\#){line-height:64px}
 .musae-3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
-.musae-14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
+.musae-fbia9g:not(#\#):not(#\#):not(#\#){margin-inline-end:0px}
 .musae-10qwhln:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-100% - var(--musae-rlgvtq) - var(--musae-jdzqnm) * 4 - var(--musae-jdzqnm))}
 .musae-16ph6eo:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(100% + var(--musae-rlgvtq) + var(--musae-jdzqnm) * 4 + var(--musae-jdzqnm))}
-.musae-1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
+.musae-1tt3wx9:not(#\#):not(#\#):not(#\#){margin-inline-start:0px}
 .musae-1fns2s7:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-100% - var(--musae-rlgvtq) - var(--musae-jdzqnm) * 4 - var(--musae-jdzqnm))}
 .musae-5bta6d:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(100% + var(--musae-rlgvtq) + var(--musae-jdzqnm) * 4 + var(--musae-jdzqnm))}
 .musae-1tmxnmp:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--musae-68a8pz)}
@@ -221,9 +220,11 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-9tu13d:not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
 .musae-1158fpu:not(#\#):not(#\#):not(#\#){transform:rotate(45deg)}
 .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}
 .musae-1d8287x:not(#\#):not(#\#):not(#\#){transition-duration:.3s}
 .musae-fagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
+.musae-xy01e9:not(#\#):not(#\#):not(#\#){transition-property:background-color,border,color}
 .musae-1ve1rmq:not(#\#):not(#\#):not(#\#){transition-property:margin-inline-start,margin-inline-end}
 .musae-1c9o64o:not(#\#):not(#\#):not(#\#){transition-property:margin-top,transform}
 .musae-bjh9w0:not(#\#):not(#\#):not(#\#){transition-property:padding-inline-start,padding-inline-end}
@@ -250,7 +251,7 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-x7gz8e:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{content:""}
 .musae-13amitz:hover > span:last-child:not(#\#):not(#\#):not(#\#){display:inline-flex}
 .musae-1pqvcko:hover > span:first-child:not(#\#):not(#\#):not(#\#){display:none}
-.musae-192i3sz:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
+.musae-1sd0t5p:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0px}
 .musae-1i5rff9:not(:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--musae-vk5id6) * -1)}
 .musae-no41pc:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{position:absolute}
 .musae-1kmnipp:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{transform:translateY(-50%)}
@@ -262,7 +263,7 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-43481e:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--borderBottomColor,revert)}
 .musae-1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
 .musae-lntmim:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--musae-1ax7z96)}
-.musae-1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.musae-1sh2tzk:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0px}
 .musae-1ii70tt:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--musae-15cw4i4)}
 .musae-8wmlod:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--musae-1wblvyz)}
 .musae-1dr59a3:not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}
@@ -284,14 +285,14 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1gfonl1:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-oohzsl)}
 .musae-lry4nc:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-rlgvtq)}
 .musae-b4kbli:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-xrqq76)}
-.musae-u96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.musae-1tjciyl:not(#\#):not(#\#):not(#\#):not(#\#){left:0px}
 .musae-101gtxs:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--left,revert)}
 .musae-hq7bbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-15cw4i4)}
 .musae-a4cli4:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-1tzp6vk)}
 .musae-rsi211:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-qk2ac7)}
 .musae-1vc729f:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--musae-qk2ac7)}
 .musae-ncydc0:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:-100%}
-.musae-dj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
+.musae-1q12cbh:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0px}
 .musae-3yben5:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-1wblvyz)}
 .musae-1lpmo0s:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-vk5id6)}
 .musae-edbcy2:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100% - var(--musae-15cw4i4) * 2)}
@@ -322,12 +323,11 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-522f2k:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-oohzsl)}
 .musae-1p848mt:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-qk2ac7)}
 .musae-utp9vd:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-vk5id6)}
-.musae-3m8u43:not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.musae-15gpytn:not(#\#):not(#\#):not(#\#):not(#\#){right:0px}
 .musae-14l26ut:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-15cw4i4)}
 .musae-6al1c1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-oohzsl)}
-.musae-13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.musae-9oc6z4:not(#\#):not(#\#):not(#\#):not(#\#){top:0px}
 .musae-wa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
-.musae-1vwp36r:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--musae-1l9c3uf) * -1)}
 .musae-kwake1:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--musae-xrqq76) + var(--musae-15cw4i4))}
 .musae-1qtgrog:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--musae-15cw4i4)}
 .musae-9c655z:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--musae-oohzsl)}
@@ -367,7 +367,6 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1lou4sy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-width:var(--musae-1ax7z96)}
 .musae-15z8w9c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-width:var(--musae-1h5s2h0)}
 .musae-ilzmfn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-width:var(--musae-1hydgie)}
-.musae-w0vqy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:all .2s}
 .musae-t448kv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition:all .2s}
 .musae-1uowca5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar{background-color:transparent}
 .musae-27d4w3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--15iyedw,revert)}
@@ -383,9 +382,9 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-ilz4u6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:"*"}
 .musae-hkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
 .musae-1fgarty:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{display:block}
-.musae-typ5od:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0}
+.musae-1x8jx26:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0px}
 .musae-1gkks1t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:50%}
-.musae-1682cnc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0}
+.musae-1kfboi8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0px}
 .musae-fbisj7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:50%}
 .musae-xsadbs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:calc((100% - var(--musae-1ax7z96)) / 2)}
 .musae-2utku0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{margin-inline-start:var(--musae-vk5id6)}
@@ -394,8 +393,11 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
 .musae-1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
 .musae-1db1611:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translate(100%,-150%) rotate(45deg)}
+.musae-t0fc71:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-duration:.2s}
+.musae-6orayw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-property:border-color,border-width}
 .musae-170pinb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{visibility:visible}
 .musae-11srvyv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{visibility:visible}
+.musae-yttlx6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{will-change:border-color,border-width}
 .musae-c28cl8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){z-index:var(--musae-1vh8wei)}
 .musae-ktw8en:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){z-index:var(--musae-1vh8wei)}
 .musae-1ly6cpr:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:var(--musae-1vh8wei)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "@floating-ui/dom": "^1.6.5",
     "@tanstack/react-table": "^8.16.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "deepmerge": "^4.3.1",
     "framer-motion": "^11.2.10",
     "react-hook-form": "^7.47.0",
@@ -42,7 +42,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stylexjs/babel-plugin": "^0.6.1",
-    "@stylexjs/rollup-plugin": "^0.5.1",
+    "@stylexjs/rollup-plugin": "^0.6.1",
     "@stylexjs/stylex": "^0.5.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",