musae 0.2.5 → 0.2.7

package/dist/components/tabs/tabs.js

@@ -1,103 +1,33 @@
-import React, { useRef, useMemo, useCallback } from 'react';
-import { useControlledState, useMounted } from '@aiszlab/relax';
-import { useAnimate } from 'framer-motion';
+import React, { useMemo } from 'react';
 import Context from './context.js';
-import Item from './item.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { useTabs } from './hooks.js';
+import Panels from './panels.js';
+import Navigation from './navigation.js';
 
-const styles = {
-  tabs: props => [{
-    display: "musae-78zum5",
-    borderBottomColor: "musae-43481e",
-    borderBottomWidth: "musae-lntmim",
-    borderBottomStyle: "musae-1q0q8m5",
-    position: "musae-1n2onr6",
-    $$css: true
-  }, {
-    "--borderBottomColor": props.outline != null ? props.outline : "initial"
-  }],
-  indicator: props => [{
-    height: "musae-kzsoxx",
-    backgroundColor: "musae-q1mx2j",
-    position: "musae-10l6tqk",
-    bottom: "musae-8wmlod",
-    $$css: true
-  }, {
-    "--backgroundColor": props.color != null ? props.color : "initial"
-  }]
-};
-const Tabs = ({
-  items = [],
-  className,
-  style,
-  ...props$1
-}) => {
-  const [_activeKey, _setActiveKey] = useControlledState(props$1.activeKey, {
-    defaultState: items.at(0)?.key
-  });
-  const [indicatorScope, animateIndicatorScope] = useAnimate();
-  const tabItemRefs = useRef(new Map());
-  const theme = useTheme();
-  const classNames = useClassNames(ComponentToken.Tabs);
-  useMounted(() => {
-    animateIndicatorScope(indicatorScope.current, {
-      width: tabItemRefs.current.get(_activeKey)?.clientWidth
-    });
-  });
-  /// context value
-  const contextValue = useMemo(() => {
-    return {
-      activeKey: _activeKey,
-      setItem: (key, itemRef) => {
-        tabItemRefs.current.set(key, itemRef);
-      }
-    };
-  }, [_activeKey]);
-  const onItemClick = useCallback(key => {
-    const _activeTabItem = tabItemRefs.current.get(key);
-    // move indicator to active tab item
-    animateIndicatorScope(indicatorScope.current, {
-      left: _activeTabItem?.offsetLeft,
-      width: _activeTabItem?.clientWidth
-    });
-    _setActiveKey(key);
-  }, [_setActiveKey, animateIndicatorScope, indicatorScope]);
-  /// if there is not any item, return null
-  if (items.length === 0) return null;
-  const styled = {
-    tabs: props(styles.tabs({
-      outline: theme.colors[ColorToken.Outline]
-    })),
-    indicator: props(styles.indicator({
-      color: theme.colors[ColorToken.Primary]
-    }))
-  };
-  return React.createElement(Context.Provider, {
-    value: contextValue
-  }, React.createElement("div", {
-    role: "tablist",
-    className: clsx(classNames[TabsClassToken.Tabs], className, styled.tabs.className),
-    style: {
-      ...styled.tabs.style,
-      ...style
-    }
-  }, items.map(tabItem => {
-    return React.createElement(Item, {
-      key: tabItem.key,
-      value: tabItem.key,
-      label: tabItem.label,
-      onClick: onItemClick
+const Tabs = ({ items = [], className, style, activeKey: _activeKey, defaultActiveKey, forceRender = false, destroyable = false, }) => {
+    const { activeKey, activatedKeys, changeActiveKey } = useTabs({
+        items,
+        activeKey: _activeKey,
+        defaultActiveKey,
     });
-  }), React.createElement("div", {
-    ref: indicatorScope,
-    className: clsx(classNames[TabsClassToken.Indicator], styled.indicator.className),
-    style: styled.indicator.style
-  })));
+    const classNames = useClassNames(ComponentToken.Tabs);
+    /// context value
+    const contextValue = useMemo(() => {
+        return {
+            activeKey,
+            items,
+        };
+    }, [activeKey, items]);
+    // if there is not any item, return null
+    if (items.length === 0)
+        return null;
+    return (React.createElement(Context.Provider, { value: contextValue },
+        React.createElement("div", { className: clsx(classNames[TabsClassToken.Tabs], className), style: style },
+            React.createElement(Navigation, { onChange: changeActiveKey }),
+            React.createElement(Panels, { activatedKeys: activatedKeys, destroyable: destroyable, forceRender: forceRender }))));
 };
 var Tabs$1 = Tabs;
 

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

@@ -1,4 +1,5 @@
-import { ComponentProps } from "../../types/element";
+import type { Key, ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
 export interface TabsProps extends ComponentProps {
     /**
      * @description
@@ -11,7 +12,25 @@ export interface TabsProps extends ComponentProps {
      * activeKey
      * @default void 0
      */
-    activeKey?: string;
+    activeKey?: Key;
+    /**
+     * @description
+     * default active key
+     * @default void 0
+     */
+    defaultActiveKey?: Key;
+    /**
+     * @description
+     * forceRender
+     * @default false
+     */
+    forceRender?: boolean;
+    /**
+     * @description
+     * destroyable
+     * @default false
+     */
+    destroyable?: boolean;
 }
 export interface TabItemProps {
     /**
@@ -19,7 +38,7 @@ export interface TabItemProps {
      * value
      * @requires
      */
-    value: string;
+    value: Key;
     /**
      * @description
      * label
@@ -31,7 +50,7 @@ export interface TabItemProps {
      * on tab item click
      * @requires
      */
-    onClick: (key: string) => void;
+    onClick: (key: Key) => void;
 }
 export type TabItem = {
     /**
@@ -39,23 +58,45 @@ export type TabItem = {
      * key
      * @requires
      */
-    key: string;
+    key: Key;
     /**
      * @description
      * label
      * @requires
      */
     label: string;
+    /**
+     * @description
+     * children
+     * @default void 0
+     */
+    children?: ReactNode;
 };
 export interface ContextValue {
     /**
      * @description
-     * item ref setter
+     * active key
      */
-    setItem: (key: string, itemRef: HTMLButtonElement | null) => void;
+    activeKey?: Key;
     /**
      * @description
-     * active key
+     * items
      */
-    activeKey?: string;
+    items: TabItem[];
+}
+/**
+ * @description
+ * panels props
+ */
+export interface PanelsProps {
+    forceRender: boolean;
+    destroyable: boolean;
+    activatedKeys: Set<Key>;
+}
+/**
+ * @description
+ * navigation props
+ */
+export interface NavigationProps {
+    onChange: (key: Key) => void;
 }

package/dist/components/tag/tag.js

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TagClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { typography } from '../theme/theme.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/theme/hooks.js

@@ -137,10 +137,10 @@ const useSwitchable = ({
       className: "musae-ynce87 musae-15342hd musae-goest1 musae-1sgbmat"
     },
     light: {
-      className: "musae-9xs3e7 musae-c28cl8"
+      className: "musae-19aimcq musae-9xs3e7 musae-c28cl8"
     },
     dark: {
-      className: "musae-ktw8en musae-qotmtd"
+      className: "musae-ntwwlm musae-ktw8en musae-qotmtd"
     }
   };
   const _toggle = useCallback(() => {
@@ -150,7 +150,7 @@ const useSwitchable = ({
     const _isDark = _mode === "dark";
     document.documentElement.classList.remove(...toClassList((_isDark ? styled.light : styled.dark).className));
     document.documentElement.classList.add(...toClassList(styled[_mode].className));
-    document.documentElement.attributeStyleMap.set("background-color", _isDark ? theme.palette.neutral[0] : theme.palette.neutral[100]);
+    document.documentElement.style.backgroundColor = _isDark ? theme.palette.neutral[0] : theme.palette.neutral[100];
   });
   useMounted(() => {
     // set default class names

package/dist/components/theme/tokens.stylex.d.ts

@@ -77,6 +77,7 @@ export declare const positions: import("@stylexjs/stylex").VarGroup<Readonly<{
     min: string;
     header: string;
     popper: string;
+    floatable: string;
     dialog: string;
     drawer: string;
     tour: string;

package/dist/components/time-picker/panel.js

@@ -4,7 +4,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Button from '../button/button.js';
 import dayjs from 'dayjs';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/time-picker/time-picker.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Panel from './panel.js';
 import { useValue } from './hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 import { styles } from '../input/input.js';
 

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TimelineItemProps } from "./types";
-declare const Item: ({ description, label, value }: TimelineItemProps) => React.JSX.Element;
+declare const Item: ({ description, label, value, dot }: TimelineItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/timeline/item.js

@@ -1,6 +1,7 @@
-import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import React, { useContext, useMemo } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
+import { sizes } from '../theme/tokens.stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimelineClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
@@ -9,10 +10,9 @@ import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
   item: {
-    default: props => [{
+    default: {
       display: "musae-rvj5dj",
       justifyContent: "musae-1nhvcw1",
-      alignItems: "musae-6s0dn4",
       gap: "musae-ik99ff",
       rowGap: null,
       columnGap: null,
@@ -20,117 +20,76 @@ const styles = {
       overflowX: null,
       overflowY: null,
       paddingBottom: "musae-1244622",
-      backgroundColor: "musae-q1mx2j",
       $$css: true
-    }, {
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
-    }],
+    },
     right: {
-      grid: "musae-1pk7hnv",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+      gridTemplateColumns: "musae-1pmbctz",
+      gridTemplateAreas: "musae-znaemz",
       $$css: true
     },
     left: {
-      grid: "musae-u00h3a",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      $$css: true
-    },
-    alternate: {
-      grid: "musae-1pk7hnv",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      ":nth-of-type(2n)_grid": "musae-33een3",
-      ":nth-of-type(2n)_gridTemplate": null,
-      ":nth-of-type(2n)_gridTemplateAreas": null,
-      ":nth-of-type(2n)_gridTemplateColumns": null,
-      ":nth-of-type(2n)_gridTemplateRows": null,
-      ":nth-of-type(2n)_gridAutoRows": null,
-      ":nth-of-type(2n)_gridAutoColumns": null,
-      ":nth-of-type(2n)_gridAutoFlow": null,
+      gridTemplateColumns: "musae-52fmzj",
+      gridTemplateAreas: "musae-196jfb2",
       $$css: true
     }
   },
   labeled: {
-    right: {
-      grid: "musae-tbzffp",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+    default: {
+      gridTemplateColumns: "musae-134kloy",
       $$css: true
     },
-    left: {
-      grid: "musae-p00dg7",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
+    right: {
+      gridTemplateAreas: "musae-1y7mvjm",
       $$css: true
     },
-    alternate: {
-      grid: "musae-tbzffp",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
-      ":nth-of-type(2n)_grid": "musae-dv7uk4",
-      ":nth-of-type(2n)_gridTemplate": null,
-      ":nth-of-type(2n)_gridTemplateAreas": null,
-      ":nth-of-type(2n)_gridTemplateColumns": null,
-      ":nth-of-type(2n)_gridTemplateRows": null,
-      ":nth-of-type(2n)_gridAutoRows": null,
-      ":nth-of-type(2n)_gridAutoColumns": null,
-      ":nth-of-type(2n)_gridAutoFlow": null,
+    left: {
+      gridTemplateAreas: "musae-hurxv4",
       $$css: true
     }
   },
-  label: {
+  leading: {
     default: {
-      gridArea: "musae-xwd7sb",
+      gridArea: "musae-1kxrqrs",
       gridRow: null,
       gridRowStart: null,
       gridRowEnd: null,
       gridColumn: null,
       gridColumnStart: null,
       gridColumnEnd: null,
+      alignSelf: "musae-qcrz7y",
       $$css: true
-    }
+    },
+    tail: props => [{
+      position: "musae-1n2onr6",
+      "::after_content": "musae-1s928wv",
+      "::after_position": "musae-1j6awrg",
+      "::after_height": "musae-p59mhh",
+      "::after_width": "musae-etvar1",
+      "::after_backgroundColor": "musae-27d4w3",
+      "::after_top": "musae-1srwf7z",
+      "::after_insetInlineStart": "musae-xsadbs",
+      "::after_left": null,
+      "::after_right": null,
+      $$css: true
+    }, {
+      "--15iyedw": props.color != null ? props.color : "initial"
+    }]
   },
-  leading: {
+  sign: {
+    default: props => [{
+      display: "musae-78zum5",
+      justifyContent: "musae-l56j7k",
+      alignItems: "musae-6s0dn4",
+      width: "musae-17fnjtu",
+      height: "musae-1jwls1v",
+      $$css: true
+    }, {
+      "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall),
+      "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall)
+    }]
+  },
+  dot: {
     default: props => [{
-      gridArea: "musae-1kxrqrs",
-      gridRow: null,
-      gridRowStart: null,
-      gridRowEnd: null,
-      gridColumn: null,
-      gridColumnStart: null,
-      gridColumnEnd: null,
       width: "musae-jz7u3w",
       height: "musae-1k820er",
       borderRadius: "musae-iipnba",
@@ -146,24 +105,28 @@ const styles = {
       $$css: true
     }, {
       "--backgroundColor": props.color != null ? props.color : "initial"
-    }],
-    vertical: props => [{
-      position: "musae-1n2onr6",
-      "::after_content": "musae-1s928wv",
-      "::after_position": "musae-1j6awrg",
-      "::after_height": "musae-p59mhh",
-      "::after_width": "musae-etvar1",
-      "::after_backgroundColor": "musae-27d4w3",
-      "::after_marginTop": "musae-dulvvp",
-      "::after_top": "musae-1srwf7z",
-      "::after_insetInlineStart": "musae-xsadbs",
-      "::after_left": null,
-      "::after_right": null,
-      $$css: true
-    }, {
-      "--15iyedw": props.color != null ? props.color : "initial"
     }]
   },
+  label: {
+    default: {
+      gridArea: "musae-xwd7sb",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    },
+    right: {
+      justifySelf: "musae-15bdqvn",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musae-wldb3t",
+      $$css: true
+    }
+  },
   description: {
     default: {
       gridArea: "musae-19tbii3",
@@ -174,45 +137,70 @@ const styles = {
       gridColumnStart: null,
       gridColumnEnd: null,
       $$css: true
+    },
+    right: {
+      justifySelf: "musae-wldb3t",
+      $$css: true
+    },
+    left: {
+      justifySelf: "musae-15bdqvn",
+      $$css: true
     }
   }
 };
 const Item = ({
   description,
   label,
-  value
+  value,
+  dot
 }) => {
   const classNames = useClassNames(ComponentToken.Timeline);
   const {
-    mode,
-    max
+    mode: _mode,
+    max,
+    size
   } = useContext(Context);
   const theme = useTheme();
   const isLabeled = !!label;
   const isMax = max === value;
+  // convert alternate mode to normal mode
+  const mode = useMemo(() => {
+    if (_mode === "alternate") {
+      return value % 2 === 1 ? "right" : "left";
+    }
+    return _mode;
+  }, [_mode, value]);
   const styled = {
-    item: _stylex.props(styles.item.default({
-      backgroundColor: theme.colors[ColorToken.Surface]
-    }), styles.item[mode], isLabeled && styles.labeled[mode]),
-    label: _stylex.props(styles.label.default),
-    leading: _stylex.props(styles.leading.default({
+    item: _stylex.props(styles.item.default, styles.item[mode], isLabeled && styles.labeled.default, isLabeled && styles.labeled[mode]),
+    label: _stylex.props(styles.label.default, styles.label[mode]),
+    leading: _stylex.props(styles.leading.default, !isMax && styles.leading.tail({
       color: theme.colors[ColorToken.Primary]
-    }), !isMax && styles.leading.vertical({
+    })),
+    sign: _stylex.props(styles.sign.default({
+      size
+    })),
+    dot: _stylex.props(styles.dot.default({
       color: theme.colors[ColorToken.Primary]
     })),
-    description: _stylex.props(styles.description.default)
+    description: _stylex.props(styles.description.default, styles.description[mode])
   };
   return React.createElement("li", {
     className: clsx(classNames[TimelineClassToken.Item], styled.item.className),
     style: styled.item.style
   }, isLabeled && React.createElement("div", {
-    className: styled.label.className,
+    className: clsx(classNames[TimelineClassToken.Label], styled.label.className),
     style: styled.label.style
   }, label), React.createElement("div", {
-    className: styled.leading.className,
+    className: clsx(classNames[TimelineClassToken.Leading], styled.leading.className),
     style: styled.leading.style
-  }), React.createElement("div", {
-    className: styled.description.className,
+  }, React.createElement("div", {
+    className: clsx(classNames[TimelineClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
+  }, dot ?? React.createElement("span", {
+    className: clsx(classNames[TimelineClassToken.Dot], styled.dot.className),
+    style: styled.dot.style
+  }))), React.createElement("div", {
+    className: clsx(classNames[TimelineClassToken.Description], styled.description.className),
     style: styled.description.style
   }, description));
 };

package/dist/components/timeline/timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TimelineProps } from "./types";
-declare const Timeline: ({ items, mode }: TimelineProps) => React.JSX.Element;
+declare const Timeline: ({ items, mode, size }: TimelineProps) => React.JSX.Element;
 export default Timeline;

package/dist/components/timeline/timeline.js

@@ -7,16 +7,19 @@ import clsx from 'clsx';
 
 const Timeline = ({
   items,
-  mode = "right"
+  mode = "right",
+  size
 }) => {
   const styled = {
     className: "musae-78zum5 musae-dt5ytf"
   };
   const classNames = useClassNames(ComponentToken.Timeline);
+  const total = items.length;
   const contextValue = useMemo(() => ({
     mode,
-    max: items.length - 1
-  }), [mode, items.length]);
+    max: total - 1,
+    size
+  }), [mode, total, size]);
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("ol", {
@@ -27,7 +30,8 @@ const Timeline = ({
       key: index,
       value: index,
       label: item.label,
-      description: item.description
+      description: item.description,
+      dot: item.dot
     });
   })));
 };

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

@@ -17,6 +17,12 @@ export type TimelineItem = {
      * @requires
      */
     description: ReactNode;
+    /**
+     * @description
+     * dot render slot
+     * @default void 0
+     */
+    dot?: ReactNode;
 };
 /**
  * @description
@@ -35,6 +41,11 @@ export type TimelineProps = {
      * @default "right"
      */
     mode?: Mode;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -62,5 +73,10 @@ export type ContextValue = {
      * max
      */
     max: number;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 export {};