musae 0.2.0 → 0.2.1

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

@@ -1,4 +1,10 @@
 import React from "react";
 import type { AvatarProps } from "./types";
-declare const Avatar: ({ src, alt, shape: _shape, size: _size }: AvatarProps) => React.JSX.Element;
+/**
+ * @description
+ * `Avatar`
+ *
+ * component
+ */
+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,10 @@ 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';
 
 const styles = {
-  avatar: {
+  avatar: props => [{
     borderWidth: "musae-1i8jmgv",
     borderInlineWidth: null,
     borderInlineStartWidth: null,
@@ -38,8 +39,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,12 +121,20 @@ const styles = {
     $$css: true
   }
 };
-const Avatar = ({
+/**
+ * @description
+ * `Avatar`
+ *
+ * component
+ */
+const Avatar = forwardRef(({
   src,
   alt,
   shape: _shape = "circular",
-  size: _size = "medium"
-}) => {
+  size: _size = "medium",
+  fallback,
+  ...props$1
+}, ref) => {
   const theme = useTheme();
   const group = useContext(Context);
   const isInGroup = !!group;
@@ -125,7 +142,10 @@ const Avatar = ({
   const shape = group?.shape ?? _shape;
   const classNames = useClassNames(ComponentToken.Avatar);
   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 +153,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
+  }, !!src ? React.createElement("img", {
+    draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  }));
-};
+  }) : fallback);
+});
 
 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, {
+        fallback: `+${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";
 /**
@@ -30,6 +30,14 @@ export type AvatarProps = {
      * @default "circular"
      */
     shape?: Shape;
+    /**
+     * @description
+     * fallback node
+     * if user do not provide `src`, or `src` is invalid
+     * show `fallback`
+     * @default void 0
+     */
+    fallback?: ReactNode;
 };
 /**
  * @description
@@ -70,7 +78,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';
@@ -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/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/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';
@@ -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/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/stylex.css

@@ -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}
@@ -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}
@@ -327,7 +328,6 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-6al1c1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-oohzsl)}
 .musae-13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
 .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)}
@@ -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.1",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",