musae 0.2.5 → 0.2.6

package/dist/components/tabs/navigation.js

@@ -0,0 +1,159 @@
+import clsx from 'clsx';
+import React, { useRef, useEffect } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
+import Tab from './tab.js';
+import { useAnimate } from 'framer-motion';
+import { isUndefined } from '@aiszlab/relax';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { useTabsContext, useNavigation, useNavigatorScroll } from './hooks.js';
+
+const styles = {
+  navigation: {
+    default: props => [{
+      borderBottomColor: "musae-43481e",
+      borderBottomWidth: "musae-lntmim",
+      borderBottomStyle: "musae-1q0q8m5",
+      $$css: true
+    }, {
+      "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }]
+  },
+  navigator: {
+    default: {
+      position: "musae-1n2onr6",
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    leading: {
+      "::before_content": "musae-1cpjm7i",
+      "::before_position": "musae-1hmns74",
+      "::before_insetBlock": "musae-1nc033x",
+      "::before_top": null,
+      "::before_bottom": null,
+      "::before_insetInlineStart": "musae-1682cnc",
+      "::before_left": null,
+      "::before_right": null,
+      "::before_pointerEvents": "musae-kk1bqk",
+      "::before_width": "musae-bk3rzz",
+      "::before_boxShadow": "musae-91zhsk",
+      $$css: true
+    },
+    trailing: {
+      "::after_content": "musae-1s928wv",
+      "::after_position": "musae-1j6awrg",
+      "::after_insetBlock": "musae-d54j2p",
+      "::after_top": null,
+      "::after_bottom": null,
+      "::after_insetInlineEnd": "musae-1unh1gc",
+      "::after_left": null,
+      "::after_right": null,
+      "::after_pointerEvents": "musae-2q1x1w",
+      "::after_width": "musae-g1t9zo",
+      "::after_boxShadow": "musae-15cyge6",
+      $$css: true
+    }
+  },
+  list: {
+    default: props => [{
+      display: "musae-78zum5",
+      width: "musae-eq5yr9",
+      transform: "musae-1v0jg1i",
+      $$css: true
+    }, {
+      "--transform": `translateX(-${props.offset}px)` != null ? `translateX(-${props.offset}px)` : "initial"
+    }]
+  },
+  indicator: {
+    default: props => [{
+      height: "musae-kzsoxx",
+      backgroundColor: "musae-q1mx2j",
+      position: "musae-10l6tqk",
+      bottom: "musae-8wmlod",
+      $$css: true
+    }, {
+      "--backgroundColor": props.color != null ? props.color : "initial"
+    }]
+  }
+};
+const Navigation = ({
+  onChange
+}) => {
+  const {
+    activeKey,
+    items
+  } = useTabsContext();
+  const classNames = useClassNames(ComponentToken.Tabs);
+  const [indicatorRef, animateIndicator] = useAnimate();
+  const tabRefs = useRef(new Map());
+  const theme = useTheme();
+  const {
+    navigatorRef,
+    tabsRef,
+    scroll,
+    offset,
+    isLeadingOverflow,
+    isTrailingOverflow
+  } = useNavigation();
+  // control tabs scroll
+  useNavigatorScroll({
+    navigatorRef,
+    scroll
+  });
+  const styled = {
+    navigation: _stylex.props(styles.navigation.default({
+      outlineColor: theme.colors[ColorToken.Outline]
+    })),
+    navigator: _stylex.props(styles.navigator.default, isLeadingOverflow && styles.navigator.leading, isTrailingOverflow && styles.navigator.trailing),
+    list: _stylex.props(styles.list.default({
+      offset
+    })),
+    indicator: _stylex.props(styles.indicator.default({
+      color: theme.colors[ColorToken.Primary]
+    }))
+  };
+  // repaint indicator when activeKey changed
+  // animate indicator to correct position & width
+  useEffect(() => {
+    if (isUndefined(activeKey)) return;
+    const tab = tabRefs.current.get(activeKey);
+    animateIndicator(indicatorRef.current, {
+      left: tab?.offsetLeft,
+      width: tab?.clientWidth
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeKey]);
+  return React.createElement("div", {
+    role: "tablist",
+    className: clsx(classNames[TabsClassToken.TabsNavigation], styled.navigation.className),
+    style: styled.navigation.style
+  }, React.createElement("div", {
+    ref: navigatorRef,
+    className: clsx(classNames[TabsClassToken.TabsNavigator], styled.navigator.className),
+    style: styled.navigator.style
+  }, React.createElement("div", {
+    ref: tabsRef,
+    className: clsx(classNames[TabsClassToken.TabList], styled.list.className),
+    style: styled.list.style
+  }, items.map(item => {
+    return React.createElement(Tab, {
+      key: item.key,
+      value: item.key,
+      label: item.label,
+      onClick: onChange,
+      ref: _tab => {
+        tabRefs.current.set(item.key, _tab);
+      }
+    });
+  }), React.createElement("div", {
+    ref: indicatorRef,
+    className: clsx(classNames[TabsClassToken.Indicator], styled.indicator.className),
+    style: styled.indicator.style
+  }))), React.createElement("div", null));
+};
+
+export { Navigation as default };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type PanelsProps } from "./types";
+declare const Panels: ({ forceRender, destroyable, activatedKeys }: PanelsProps) => React.JSX.Element;
+export default Panels;

package/dist/components/tabs/panels.js

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { isUndefined, isVoid } from '@aiszlab/relax';
+import { useTabsContext } from './hooks.js';
+
+const styles = {
+  panels: {
+    default: {
+      marginTop: "musae-u5ntsc",
+      $$css: true
+    }
+  },
+  panel: {
+    default: {
+      $$css: true
+    },
+    active: {
+      display: null,
+      $$css: true
+    },
+    hidden: {
+      display: "musae-1s85apg",
+      $$css: true
+    }
+  }
+};
+const Panels = ({
+  forceRender,
+  destroyable,
+  activatedKeys
+}) => {
+  const {
+    items,
+    activeKey
+  } = useTabsContext();
+  const classNames = useClassNames(ComponentToken.Tabs);
+  const styled = {
+    panels: _stylex.props(styles.panels.default),
+    panel: {
+      active: _stylex.props(styles.panel.default, styles.panel.active),
+      hidden: _stylex.props(styles.panel.default, styles.panel.hidden)
+    }
+  };
+  const panels = useMemo(() => {
+    if (isUndefined(activeKey)) {
+      return [];
+    }
+    if (destroyable) {
+      return [[activeKey, items.find(item => item.key === activeKey)?.children]];
+    }
+    if (forceRender) {
+      return items.map(item => [item.key, item.children]);
+    }
+    return items.map(item => [item.key, activatedKeys.has(item.key) ? item.children : null]);
+  }, [destroyable, forceRender, items, activeKey, activatedKeys]);
+  return React.createElement("div", {
+    className: clsx(classNames[TabsClassToken.Panels], styled.panels.className),
+    style: styled.panels.style
+  }, panels.map(([key, children]) => {
+    const {
+      className,
+      style
+    } = key === activeKey ? styled.panel.active : styled.panel.hidden;
+    if (isVoid(children)) {
+      return null;
+    }
+    return React.createElement("div", {
+      key: key,
+      className: clsx(classNames[TabsClassToken.Panel], className),
+      style: style
+    }, children);
+  }));
+};
+
+export { Panels as default };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TabItemProps } from "./types";
+declare const Tab: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;

package/dist/components/tabs/tab.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, useContext, useCallback } from 'react';
+import Button from '../button/button.js';
+import Context from './context.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
+
+const Tab = forwardRef(({ value, onClick, label }, ref) => {
+    const { activeKey } = useContext(Context) ?? {};
+    const isActive = activeKey === value;
+    const classNames = useClassNames(ComponentToken.Tabs);
+    const click = useCallback(() => {
+        onClick(value);
+    }, [onClick, value]);
+    return (React.createElement(Button, { variant: "text", color: isActive ? "primary" : "secondary", ref: ref, onClick: click, className: classNames[TabsClassToken.Tab], ripple: false, style: {
+            borderRadius: "10% 10% 0 0",
+        } }, label));
+});
+
+export { Tab as default };

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TabsProps } from "./types";
-declare const Tabs: ({ items, className, style, ...props }: TabsProps) => React.JSX.Element | null;
+declare const Tabs: ({ items, className, style, activeKey: _activeKey, defaultActiveKey, forceRender, destroyable, }: TabsProps) => React.JSX.Element | null;
 export default Tabs;

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.4/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/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.4/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.4/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;