musae 0.2.1 → 0.2.3

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

@@ -3,8 +3,6 @@ import type { AvatarProps } from "./types";
 /**
  * @description
  * `Avatar`
- *
- * component
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/components/avatar/avatar.js

@@ -7,6 +7,7 @@ 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: props => [{
@@ -124,15 +125,12 @@ const styles = {
 /**
  * @description
  * `Avatar`
- *
- * component
  */
 const Avatar = forwardRef(({
   src,
   alt,
   shape: _shape = "circular",
   size: _size = "medium",
-  fallback,
   ...props$1
 }, ref) => {
   const theme = useTheme();
@@ -141,6 +139,9 @@ const Avatar = forwardRef(({
   const size = group?.size ?? _size;
   const shape = group?.shape ?? _shape;
   const classNames = useClassNames(ComponentToken.Avatar);
+  const isLoaded = useImage({
+    src
+  });
   const styled = {
     avatar: props(typography.label[size], styles.avatar({
       backgroundColor: theme.colors[ColorToken.PrimaryContainer],
@@ -157,13 +158,13 @@ const Avatar = forwardRef(({
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
     style: styled.avatar.style,
     ref: ref
-  }, !!src ? React.createElement("img", {
+  }, isLoaded === "loaded" ? React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  }) : fallback);
+  }) : alt?.slice(0, 2).toUpperCase());
 });
 
 export { Avatar as default };

package/dist/components/avatar/group.js

@@ -37,7 +37,7 @@ const Group = ({
         key: "avatars-hidden",
         placement: "top"
       }, React.createElement(Avatar, {
-        fallback: `+${hidden.length}`
+        alt: `+${hidden.length}`
       })));
     }
     return visible;

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

@@ -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;
@@ -30,14 +32,6 @@ 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

package/dist/components/calendar/hooks.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",

package/dist/components/checkbox/checkbox.js

@@ -24,6 +24,7 @@ const styles = {
     cursor: "musae-mper1u",
     width: "musae-r8isjd",
     height: "musae-1gfonl1",
+    position: "musae-1n2onr6",
     "::before_content": "musae-1cpjm7i",
     "::before_visibility": "musae-11srvyv",
     "::before_display": "musae-1fgarty",
@@ -94,7 +95,7 @@ const styles = {
     "::after_display": "musae-hkezso",
     "::after_width": "musae-11yodxc",
     "::after_height": "musae-ec44on",
-    "::after_transform": "musae-1db1611",
+    "::after_transform": "musae-q1m6zb",
     "::after_borderWidth": "musae-15z8w9c",
     "::after_borderInlineWidth": null,
     "::after_borderInlineStartWidth": null,
@@ -163,7 +164,7 @@ const Checkbox = ({
   }, [_setIsChecked, contextValue, value]);
   const styled = {
     checkbox: {
-      className: "musae-78zum5 musae-6s0dn4 musae-1ypdohk"
+      className: "musae-3nfvp2 musae-6s0dn4 musae-1ypdohk"
     },
     trigger: props(styles.trigger({
       borderColor: theme.colors[ColorToken.Outline]

package/dist/components/collapse/collapse.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CollapseProps } from "./types";
+declare const Collapse: ({ items, className, defaultActiveKey, activeKey, onChange, style, accordion, }: CollapseProps) => React.JSX.Element | null;
+export default Collapse;

package/dist/components/collapse/collapse.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import CollapseItem from './item.js';
+import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import clsx from 'clsx';
+import { useActiveKeys } from './hooks.js';
+import { Context } from './context.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+
+const styles = {
+  collapse: props => [{
+    borderWidth: "musae-1i8jmgv",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderRadius: "musae-1h268bu",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  }, {
+    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }]
+};
+const Collapse = ({
+  items,
+  className,
+  defaultActiveKey,
+  activeKey,
+  onChange,
+  style,
+  accordion = false
+}) => {
+  const classNames = useClassNames(ComponentToken.Collapse);
+  const [activeKeys, toggle] = useActiveKeys({
+    defaultActiveKey,
+    activeKey,
+    onChange,
+    accordion
+  });
+  const theme = useTheme();
+  // no need to render when items is empty
+  if (items.length === 0) return null;
+  const styled = _stylex.props(styles.collapse({
+    outlineColor: theme.colors[ColorToken.OutlineVariant]
+  }));
+  return React.createElement(Context.Provider, {
+    value: {
+      activeKeys,
+      toggle
+    }
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Collapse], className, styled.className),
+    style: {
+      ...styled.style,
+      ...style
+    }
+  }, items.map(item => {
+    return React.createElement(CollapseItem, {
+      ...item,
+      value: item.key
+    });
+  })));
+};
+var Collapse$1 = Collapse;
+
+export { Collapse$1 as default };

package/dist/components/collapse/context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ContextValue } from "./types";
+/**
+ * @description
+ * `Collapse` Context
+ */
+export declare const Context: import("react").Context<ContextValue>;

package/dist/components/collapse/context.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * @description
+ * `Collapse` Context
+ */
+const Context = createContext({
+    activeKeys: new Set(),
+    toggle: () => { },
+});
+
+export { Context };

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

@@ -0,0 +1,12 @@
+import { type Key } from "react";
+import type { Value } from "./types";
+/**
+ * @description
+ * `Collapse` active key hook
+ */
+export declare const useActiveKeys: ({ defaultActiveKey, activeKey: _activeKey, onChange: _onChange, accordion, }: {
+    defaultActiveKey?: Value;
+    activeKey?: Value;
+    onChange?: (value: Key[]) => void;
+    accordion: boolean;
+}) => [Set<Key>, (key: Key) => void];

package/dist/components/collapse/hooks.js

@@ -0,0 +1,43 @@
+import { useControlledState, exclude, toArray, useEvent } from '@aiszlab/relax';
+import { useMemo } from 'react';
+
+/**
+ * @description
+ * `Collapse` active key hook
+ */
+const useActiveKeys = ({ defaultActiveKey, activeKey: _activeKey, onChange: _onChange, accordion, }) => {
+    const [_activeKeys, _setActiveKeys] = useControlledState(_activeKey, { defaultState: defaultActiveKey });
+    const activeKeys = useMemo(() => {
+        const keys = exclude(toArray(_activeKeys), [void 0]);
+        if (accordion) {
+            return new Set(keys.slice(0, 1));
+        }
+        return new Set(keys);
+    }, [_activeKeys, accordion]);
+    const toggle = useEvent((key) => {
+        const expandedKeys = new Set(activeKeys);
+        const isExpanded = expandedKeys.has(key);
+        // `accordion` mode, just toggle `key`
+        // otherwise, normally toggle `key`
+        if (accordion) {
+            expandedKeys.clear();
+            if (!isExpanded) {
+                expandedKeys.add(key);
+            }
+        }
+        else {
+            if (isExpanded) {
+                expandedKeys.delete(key);
+            }
+            else {
+                expandedKeys.add(key);
+            }
+        }
+        const _expandedKeys = Array.from(expandedKeys);
+        _setActiveKeys(_expandedKeys);
+        _onChange?.(_expandedKeys);
+    });
+    return [activeKeys, toggle];
+};
+
+export { useActiveKeys };

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

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

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

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

package/dist/components/collapse/item.js

@@ -0,0 +1,144 @@
+import React, { useContext } from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, CollapseClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useEvent } from '@aiszlab/relax';
+import { useAnimate } from 'framer-motion';
+import clsx from 'clsx';
+import { Context } from './context.js';
+import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
+
+const styles = {
+  item: {
+    default: props => [{
+      borderBottomWidth: "musae-lntmim",
+      borderBottomStyle: "musae-1q0q8m5",
+      borderBottomColor: "musae-43481e",
+      ":last-of-type_borderBottomWidth": "musae-zm6erk",
+      $$css: true
+    }, {
+      "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }]
+  },
+  header: {
+    default: {
+      paddingInline: "musae-1xkwav8",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musae-avjae4",
+      paddingTop: null,
+      paddingBottom: null,
+      display: "musae-78zum5",
+      flexDirection: "musae-1q0g3np",
+      alignItems: "musae-6s0dn4",
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      cursor: "musae-1ypdohk",
+      $$css: true
+    }
+  },
+  panel: {
+    default: {
+      height: "musae-t7dq6l",
+      $$css: true
+    },
+    hidden: {
+      display: "musae-1s85apg",
+      $$css: true
+    }
+  },
+  content: {
+    default: props => [{
+      borderTopWidth: "musae-1yeim8r",
+      borderTopStyle: "musae-13fuv20",
+      borderTopColor: "musae-is9nib",
+      padding: "musae-12ldsqu",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      $$css: true
+    }, {
+      "--borderTopColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }]
+  },
+  collapser: {
+    default: {
+      willChange: "musae-1so62im",
+      transitionProperty: "musae-11xpdln",
+      transitionDuration: "musae-13dflua",
+      $$css: true
+    },
+    expanded: {
+      transform: "musae-1iffjtl",
+      $$css: true
+    }
+  }
+};
+const CollapseItem = ({
+  children,
+  label,
+  value
+}) => {
+  const classNames = useClassNames(ComponentToken.Collapse);
+  const {
+    activeKeys,
+    toggle
+  } = useContext(Context);
+  const isExpanded = activeKeys.has(value);
+  const [collapser, animate] = useAnimate();
+  const theme = useTheme();
+  useExpandEffect({
+    animate,
+    expanded: isExpanded,
+    target: collapser
+  });
+  const styled = {
+    item: _stylex.props(styles.item.default({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    header: _stylex.props(styles.header.default),
+    panel: _stylex.props(styles.panel.default, !isExpanded && styles.panel.hidden),
+    content: _stylex.props(styles.content.default({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    collapser: _stylex.props(styles.collapser.default, isExpanded && styles.collapser.expanded)
+  };
+  const onClick = useEvent(() => {
+    toggle(value);
+  });
+  return React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Item], {
+      [classNames[CollapseClassToken.ItemActive]]: isExpanded
+    }, styled.item.className),
+    style: styled.item.style
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Header], styled.header.className),
+    style: styled.header.style,
+    onClick: onClick
+  }, React.createElement(KeyboardArrowRight, {
+    className: clsx(classNames[CollapseClassToken.Collapser], styled.collapser.className),
+    style: styled.collapser.style
+  }), label), React.createElement("div", {
+    ref: collapser,
+    className: clsx(classNames[CollapseClassToken.Panel], {
+      [classNames[CollapseClassToken.PanelActive]]: isExpanded
+    }, styled.panel.className),
+    style: styled.panel.style
+  }, React.createElement("div", {
+    className: clsx(classNames[CollapseClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children)));
+};
+
+export { CollapseItem as default };

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

@@ -0,0 +1,87 @@
+import type { Key, ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+export type Value = Key | Key[];
+/**
+ * @description
+ * `Collapse` item
+ */
+interface CollapseItem {
+    /**
+     * @description
+     * key
+     */
+    key: Key;
+    /**
+     * @description
+     * label
+     */
+    label: string;
+    /**
+     * @description
+     * children
+     */
+    children: ReactNode;
+}
+/**
+ * @description
+ * `Collapse` props
+ */
+export interface CollapseProps extends ComponentProps {
+    /**
+     * @description
+     * default active key
+     * @default void 0
+     */
+    defaultActiveKey?: Value;
+    /**
+     * @description
+     * active key
+     * @default void 0
+     */
+    activeKey?: Value;
+    /**
+     * @description
+     * items
+     */
+    items: CollapseItem[];
+    /**
+     * @description
+     * change handler
+     * @default void 0
+     */
+    onChange?: (value: Key[]) => void;
+    /**
+     * @description
+     * accordion mode
+     * @default false
+     */
+    accordion?: boolean;
+}
+/**
+ * @description
+ * `Collapse` item props
+ */
+export interface CollapseItemProps extends Omit<CollapseItem, "key"> {
+    /**
+     * @description
+     * value
+     */
+    value: Key;
+}
+/**
+ * @description
+ * context value
+ */
+export interface ContextValue {
+    /**
+     * @description
+     * active keys
+     */
+    activeKeys: Set<Key>;
+    /**
+     * @description
+     * key toggle
+     */
+    toggle: (key: Key) => void;
+}
+export {};

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/icon/icon.js

@@ -31,7 +31,7 @@ const Icon = ({
   const classNames = useClassNames(ComponentToken.Icon);
   const asProps = useMemo(() => {
     return {
-      size: size === "small" ? 12 : size === "large" ? 20 : size ?? 16
+      size: size === "small" ? 12 : size === "large" ? 20 : size === "medium" ? 16 : size ?? 16
     };
   }, [size]);
   const children = useMemo(() => {