musae 0.2.2 → 0.2.3

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/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(() => {

package/dist/components/icon/icons/index.js

@@ -36,6 +36,7 @@ export { default as Cancel } from './navigation/cancel.js';
 export { default as Close } from './navigation/close.js';
 export { default as MoreHoriz } from './navigation/more-horiz.js';
 export { default as Check } from './navigation/check.js';
+export { default as UnfoldMore } from './navigation/unfold-more.js';
 export { default as Bedtime } from './image/bedtime.js';
 export { default as RotateLeft } from './image/rotate-left.js';
 export { default as RotateRight } from './image/rotate-right.js';

package/dist/components/icon/icons/navigation/index.d.ts

@@ -2,4 +2,5 @@ import Cancel from "./cancel";
 import MoreHoriz from "./more-horiz";
 import Close from "./close";
 import Check from "./check";
-export { Cancel, Close, MoreHoriz, Check };
+import UnfoldMore from "./unfold-more";
+export { Cancel, Close, MoreHoriz, Check, UnfoldMore };

package/dist/components/icon/icons/navigation/index.js

@@ -2,3 +2,4 @@ export { default as Cancel } from './cancel.js';
 export { default as MoreHoriz } from './more-horiz.js';
 export { default as Close } from './close.js';
 export { default as Check } from './check.js';
+export { default as UnfoldMore } from './unfold-more.js';

package/dist/components/icon/icons/navigation/unfold-more.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const UnfoldMore: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default UnfoldMore;

package/dist/components/icon/icons/navigation/unfold-more.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.js';
+
+const UnfoldMore = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M12 5.83L15.17 9L16.58 7.59L12 3L7.41003 7.59L8.83003 9L12 5.83ZM12 18.17L8.83003 15L7.42003 16.41L12 21L16.59 16.41L15.17 15L12 18.17Z", fill: "currentColor" })));
+});
+var UnfoldMore$1 = UnfoldMore;
+
+export { UnfoldMore$1 as default };

package/dist/components/loading/loading.d.ts

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

package/dist/components/loading/loading.js

@@ -1,5 +1,10 @@
 import React from 'react';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
   circle: {
@@ -44,11 +49,55 @@ const styles = {
     width: "musae-1ha45ep",
     height: "musae-b4kbli",
     $$css: true
+  },
+  loading: {
+    position: "musae-1n2onr6",
+    minWidth: "musae-h2iun8",
+    minHeight: "musae-oexrxm",
+    $$css: true
+  },
+  content: props => [{
+    opacity: "musae-byyjgo",
+    userSelect: "musae-87ps6o",
+    pointerEvents: "musae-47corl",
+    transitionProperty: "musae-19991ni",
+    transitionDuration: "musae-1d8287x",
+    zIndex: "musae-1ja2u2z",
+    "::after_content": "musae-1s928wv",
+    "::after_display": "musae-hkezso",
+    "::after_position": "musae-1j6awrg",
+    "::after_inset": "musae-1799ia1",
+    "::after_insetInline": null,
+    "::after_insetInlineStart": null,
+    "::after_insetInlineEnd": null,
+    "::after_left": null,
+    "::after_right": null,
+    "::after_insetBlock": null,
+    "::after_top": null,
+    "::after_bottom": null,
+    "::after_backgroundColor": "musae-27d4w3",
+    $$css: true
+  }, {
+    "--15iyedw": props.backgroundColor != null ? props.backgroundColor : "initial"
+  }],
+  spin: {
+    position: "musae-10l6tqk",
+    top: "musae-wa60dl",
+    insetInlineStart: "musae-budbmw",
+    left: null,
+    right: null,
+    transform: "musae-11lhmoz",
+    zIndex: "musae-1vjfegm",
+    $$css: true
   }
 };
 const Loading = ({
-  size = "medium"
+  size = "medium",
+  overlay = true,
+  children
 }) => {
+  const classNames = useClassNames(ComponentToken.Loading);
+  const theme = useTheme();
   const circles = {
     top: {
       ...{
@@ -83,15 +132,31 @@ const Loading = ({
       r: "70"
     }
   };
-  return React.createElement("svg", {
+  const styled = {
+    loading: {
+      className: "musae-1n2onr6 musae-h2iun8 musae-oexrxm"
+    },
+    spin: props(styles.spin, styles[size]),
+    content: props(overlay && styles.content({
+      backgroundColor: theme.colors[ColorToken.SurfaceDim]
+    }))
+  };
+  return React.createElement("div", {
+    className: clsx(classNames[LoadingClassToken.Loading], styled.loading.className),
+    style: styled.loading.style
+  }, React.createElement("svg", {
     viewBox: "0 0 240 240",
-    ...props(styles[size])
+    className: clsx(classNames[LoadingClassToken.Spin], styled.spin.className),
+    style: styled.spin.style
   }, Array.from(Object.entries(circles)).map(([key, props]) => {
     return React.createElement("circle", {
       ...props,
       key: key
     });
-  }));
+  })), React.createElement("div", {
+    className: (classNames[LoadingClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children));
 };
 var Loading$1 = Loading;
 

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 type Size = "small" | "medium" | "large";
 /**
  * @author murukal
@@ -12,5 +13,17 @@ export interface LoadingProps {
      * @default "medium"
      */
     size?: Size;
+    /**
+     * @description
+     * overlay shown
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * @description
+     * children
+     * @default void 0
+     */
+    children?: ReactNode;
 }
 export {};