musae 0.2.5 → 0.2.7

package/dist/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SwitchProps } from "./types";
-declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, }: SwitchProps) => React.JSX.Element;
+declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, onChange, }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/dist/components/switch/switch.js

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
-import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import React from 'react';
+import { useControlledState, useEvent } from '@aiszlab/relax';
+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';
@@ -14,16 +14,13 @@ const styles = {
   switch: {
     default: props => [{
       minWidth: "musae-1049mhy",
+      width: "musae-eq5yr9",
       height: "musae-hfcj97",
       display: "musae-78zum5",
       alignItems: "musae-6s0dn4",
       position: "musae-1n2onr6",
-      transition: "musae-1ng1d19",
-      transitionBehavior: null,
-      transitionDelay: null,
-      transitionDuration: null,
-      transitionProperty: null,
-      transitionTimingFunction: null,
+      transitionProperty: "musae-fagghw",
+      transitionDuration: "musae-13dflua",
       borderRadius: "musae-iipnba",
       borderStartStartRadius: null,
       borderStartEndRadius: null,
@@ -173,7 +170,7 @@ const styles = {
       $$css: true
     },
     child: {
-      minHeight: "musae-jk1msx",
+      height: "musae-b27hse",
       display: "musae-78zum5",
       flexDirection: "musae-1q0g3np",
       alignItems: "musae-6s0dn4",
@@ -192,20 +189,20 @@ const styles = {
       $$css: true
     },
     checked: {
-      marginInlineStart: "musae-1tt3wx9",
+      marginInlineStart: "musae-1lziwak",
       marginLeft: null,
       marginRight: null,
-      marginInlineEnd: "musae-fbia9g",
+      marginInlineEnd: "musae-14z9mp",
       $$css: true
     }
   },
   trailing: {
     default: {
-      marginTop: "musae-ncydc0",
-      marginInlineEnd: "musae-fbia9g",
+      marginTop: "musae-lpx92y",
+      marginInlineEnd: "musae-14z9mp",
       marginLeft: null,
       marginRight: null,
-      marginInlineStart: "musae-1tt3wx9",
+      marginInlineStart: "musae-1lziwak",
       $$css: true
     },
     checked: {
@@ -224,14 +221,17 @@ const Switch = ({
   icon = false,
   checkedChildren,
   uncheckedChildren,
-  disabled = false
+  disabled = false,
+  onChange
 }) => {
   const classNames = useClassNames(ComponentToken.Switch);
   const [isChecked, setIsChecked] = useControlledState(value);
   const theme = useTheme();
-  const toggle = useCallback(() => {
-    setIsChecked(_isChecked => !_isChecked);
-  }, [setIsChecked]);
+  const toggle = useEvent(() => {
+    const _isChecked = !isChecked;
+    setIsChecked(_isChecked);
+    onChange?.(_isChecked);
+  });
   const styled = {
     switch: props(styles.switch.default({
       borderColor: theme.colors[ColorToken.Outline],
@@ -284,13 +284,13 @@ const Switch = ({
     className: clsx(classNames[SwitchClassToken.Slider], styled.slider.className),
     style: styled.slider.style
   }, icon && (isChecked ? React.createElement(Check, null) : React.createElement(Close, null))), React.createElement("span", {
-    className: styled.supporting.className,
+    className: clsx(classNames[SwitchClassToken.Supporting], styled.supporting.className),
     style: styled.supporting.style
   }, React.createElement("span", {
-    className: styled.leading.className,
+    className: clsx(classNames[SwitchClassToken.Leading], styled.leading.className),
     style: styled.leading.style
   }, checkedChildren), React.createElement("span", {
-    className: styled.trailing.className,
+    className: clsx(classNames[SwitchClassToken.Trailing], styled.trailing.className),
     style: styled.trailing.style
   }, uncheckedChildren)));
 };

package/dist/components/table/body.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTable } from './context.js';
 import { flexRender } from '@tanstack/react-table';
-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 clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';

package/dist/components/table/header/cell.js

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
-import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex 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 Context from '../context.js';
@@ -35,8 +35,8 @@ const styles = {
     },
     half: {
       position: "musae-10l6tqk",
-      top: "musae-9oc6z4",
-      insetInlineStart: "musae-1at4hj2",
+      top: "musae-13vifvy",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
       height: "musae-1cj5796",

package/dist/components/table/header/header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTable } from '../context.js';
 import { flexRender } from '@tanstack/react-table';
-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 clsx from 'clsx';
 import { ColorToken } from '../../../utils/colors.js';
@@ -52,7 +52,7 @@ const styles = {
     ":not(:last-of-type)::after_height": "musae-1su0kt9",
     ":not(:last-of-type)::after_backgroundColor": "musae-9cqmhv",
     ":not(:last-of-type)::after_transform": "musae-1kmnipp",
-    ":not(:last-of-type)::after_insetInlineEnd": "musae-1sd0t5p",
+    ":not(:last-of-type)::after_insetInlineEnd": "musae-192i3sz",
     ":not(:last-of-type)::after_left": null,
     ":not(:last-of-type)::after_right": null,
     $$css: true

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

@@ -0,0 +1,40 @@
+import { type Key, type RefObject } from "react";
+import type { TabItem } from "./types";
+/**
+ * @description
+ * use tab context
+ */
+export declare const useTabsContext: () => import("./types").ContextValue;
+/**
+ * @description
+ * tabs
+ */
+export declare const useTabs: ({ activeKey: _activeKey, items, defaultActiveKey, }: {
+    activeKey?: Key;
+    items: TabItem[];
+    defaultActiveKey?: Key;
+}) => {
+    activeKey: string | number | bigint | undefined;
+    activatedKeys: Set<Key>;
+    changeActiveKey: (key: Key) => void;
+};
+/**
+ * @description
+ * count dom ele size
+ */
+export declare const useNavigation: () => {
+    navigatorRef: RefObject<HTMLDivElement>;
+    tabsRef: RefObject<HTMLDivElement>;
+    scroll: (delta: number) => void;
+    offset: number;
+    isLeadingOverflow: boolean;
+    isTrailingOverflow: boolean;
+};
+/**
+ * @description
+ * use navigator scroll
+ */
+export declare const useNavigatorScroll: ({ navigatorRef, scroll, }: {
+    navigatorRef: RefObject<HTMLDivElement>;
+    scroll: (delta: number) => void;
+}) => void;

package/dist/components/tabs/hooks.js

@@ -0,0 +1,98 @@
+import { useControlledState, isUndefined, useEvent, clamp } from '@aiszlab/relax';
+import { useState, useContext, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import Context from './context.js';
+
+/**
+ * @description
+ * use tab context
+ */
+const useTabsContext = () => {
+    return useContext(Context) ?? { items: [], activeKey: void 0 };
+};
+/**
+ * @description
+ * tabs
+ */
+const useTabs = ({ activeKey: _activeKey, items, defaultActiveKey, }) => {
+    const [activeKey, setActiveKey] = useControlledState(_activeKey, {
+        defaultState: defaultActiveKey ?? items.at(0)?.key,
+    });
+    const [activatedKeys, setActivatedKeys] = useState(() => {
+        return new Set(isUndefined(activeKey) ? [] : [activeKey]);
+    });
+    const changeActiveKey = useEvent((key) => {
+        setActiveKey(key);
+        setActivatedKeys((prev) => new Set(prev).add(key));
+    });
+    return {
+        activeKey,
+        activatedKeys,
+        changeActiveKey,
+    };
+};
+/**
+ * @description
+ * count dom ele size
+ */
+const useNavigation = () => {
+    const navigatorRef = useRef(null);
+    const tabsRef = useRef(null);
+    const [offset, setOffset] = useState(0);
+    // navigator size
+    const [navigatorSize, setNavigatorSize] = useState(0);
+    // tabs size
+    const [tabsSize, setTabsSize] = useState(0);
+    useLayoutEffect(() => {
+        const _navigatorSize = navigatorRef.current?.getBoundingClientRect().width ?? 0;
+        const _tabsSize = tabsRef.current?.getBoundingClientRect().width ?? 0;
+        setNavigatorSize(_navigatorSize);
+        setTabsSize(_tabsSize);
+    }, []);
+    const { maxOffset, minOffset } = useMemo(() => {
+        return {
+            maxOffset: Math.max(0, tabsSize - navigatorSize),
+            minOffset: 0,
+        };
+    }, [navigatorSize, tabsSize]);
+    const { isLeadingOverflow, isTrailingOverflow } = useMemo(() => {
+        return {
+            isLeadingOverflow: offset > minOffset,
+            isTrailingOverflow: offset < maxOffset,
+        };
+    }, [minOffset, maxOffset, offset]);
+    const scroll = useEvent((delta) => {
+        setOffset((prev) => {
+            return clamp(prev + delta, minOffset, maxOffset);
+        });
+    });
+    return {
+        navigatorRef,
+        tabsRef,
+        scroll,
+        offset,
+        isLeadingOverflow,
+        isTrailingOverflow,
+    };
+};
+/**
+ * @description
+ * use navigator scroll
+ */
+const useNavigatorScroll = ({ navigatorRef, scroll, }) => {
+    // mouse wheel
+    const onWheel = useEvent((event) => {
+        event.preventDefault();
+        const { deltaY } = event;
+        scroll(deltaY);
+    });
+    useEffect(() => {
+        const navigator = navigatorRef.current;
+        navigator?.addEventListener("wheel", onWheel);
+        return () => {
+            navigator?.removeEventListener("wheel", onWheel);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+
+export { useNavigation, useNavigatorScroll, useTabs, useTabsContext };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type NavigationProps } from "./types";
+declare const Navigation: ({ onChange }: NavigationProps) => React.JSX.Element;
+export default Navigation;

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