musae 0.1.44 → 0.1.46

package/dist/components/avatar/avatar.js

@@ -3,7 +3,7 @@ import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 
@@ -84,7 +84,7 @@ const styles = {
     $$css: true
   },
   squared: {
-    borderRadius: "musae-1gg5qfe",
+    borderRadius: "musae-7bdoj",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -96,8 +96,8 @@ const styles = {
     $$css: true
   },
   small: {
-    width: "musae-1lxaayn",
-    height: "musae-v8wr9m",
+    width: "musae-145rzd9",
+    height: "musae-lry4nc",
     $$css: true
   },
   medium: {
@@ -106,8 +106,8 @@ const styles = {
     $$css: true
   },
   large: {
-    width: "musae-1fy0r53",
-    height: "musae-12cinw4",
+    width: "musae-1sgo4cp",
+    height: "musae-7kkngq",
     $$css: true
   }
 };

package/dist/components/avatar/group.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Context } from './context.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 
 const Group = ({

package/dist/components/breadcrumb/breadcrumb.js

@@ -3,7 +3,7 @@ import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import Item from './item.js';

package/dist/components/breadcrumb/item.js

@@ -2,7 +2,7 @@ import React from 'react';
 import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 
@@ -20,7 +20,7 @@ const styles = {
       paddingLeft: null,
       paddingEnd: null,
       paddingRight: null,
-      borderRadius: "musae-1gg5qfe",
+      borderRadius: "musae-7bdoj",
       borderStartStartRadius: null,
       borderStartEndRadius: null,
       borderEndStartRadius: null,

package/dist/components/button/button.js

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import { useClassNames } from '../config/hooks.js';
 import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -9,6 +8,7 @@ import Ripple from '../ripple/ripple.js';
 import { typography } from '../theme/theme.js';
 import { ColorToken } from '../../utils/colors.js';
 import { layer } from '../../utils/layer.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {
   button: {
@@ -37,8 +37,8 @@ const styles = {
     paddingBlock: null,
     paddingTop: null,
     paddingBottom: null,
-    minHeight: "musae-jbwyga",
-    minWidth: "musae-dsbmi5",
+    minHeight: "musae-1sal0kv",
+    minWidth: "musae-trrjuf",
     $$css: true
   },
   medium: {
@@ -51,8 +51,8 @@ const styles = {
     paddingBlock: null,
     paddingTop: null,
     paddingBottom: null,
-    minHeight: "musae-1oxjezn",
-    minWidth: "musae-kw4qbi",
+    minHeight: "musae-1infgec",
+    minWidth: "musae-ba7gwn",
     $$css: true
   },
   large: {
@@ -65,8 +65,8 @@ const styles = {
     paddingBlock: null,
     paddingTop: null,
     paddingBottom: null,
-    minHeight: "musae-1infgec",
-    minWidth: "musae-ba7gwn",
+    minHeight: "musae-1ee7i9g",
+    minWidth: "musae-1049mhy",
     $$css: true
   },
   circular: {

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

@@ -14,17 +14,22 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
     /**
      * @description
      * variant
-     * @example filled
+     *
+     * @default "filled"
      */
     variant?: Variant;
     /**
      * @description
      * color: only support preset colors
+     *
+     * @default "primary"
      */
     color?: Color;
     /**
      * @description
      * shape
+     *
+     * @default "rounded"
      */
     shape?: Shape;
     /**
@@ -40,16 +45,21 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
     /**
      * @description
      * size
+     *
+     * @default "medium"
      */
     size?: Size;
     /**
      * @description
      * disabled
+     *
+     * @default false
      */
     disabled?: boolean;
     /**
      * @description
      * prefix react node
+     *
      * @template
      * icon or prefix signal
      */
@@ -64,6 +74,8 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
     /**
      * @description
      * if false, without a ripple
+     *
+     * @default true
      */
     ripple?: boolean;
 }

package/dist/components/button-toggle/button-toggle.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ButtonToggle: () => React.JSX.Element;
+export default ButtonToggle;

package/dist/components/button-toggle/context.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Context: import("react").Context<{}>;

package/dist/components/button-toggle/index.d.ts

@@ -0,0 +1,2 @@
+import ButtonToggle from "./button-toggle";
+export { ButtonToggle };

package/dist/components/button-toggle/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description
+ * button toggle props
+ */
+export type ButtonToggleProps = {};
+/**
+ * @description
+ * context value
+ */
+export type ContextValue = {
+    selected: unknown;
+};

package/dist/components/calendar/calendar.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
 import Button from '../button/button.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
 import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.js';
 import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.js';
 import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';
 import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
 
 const styles = {
-  header: {
+  header: props => [{
     display: "musae-78zum5",
     alignItems: "musae-6s0dn4",
     columnGap: "musae-18jba3g",
@@ -21,8 +23,11 @@ const styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
+    color: "musae-19dipnz",
     $$css: true
-  }
+  }, {
+    "--color": props.color != null ? props.color : "initial"
+  }]
 };
 const Calendar = ({
   className,
@@ -43,8 +48,11 @@ const Calendar = ({
   const dateCells = useDateCells([timespan, focusedAt, onClick]);
   const headCells = useHeadCells();
   const classNames = useClassNames(ComponentToken.Calendar);
+  const theme = useTheme();
   const styled = {
-    header: props(typography.label.large, styles.header),
+    header: props(typography.label.large, styles.header({
+      color: theme.colors[ColorToken.OnSurfaceVariant]
+    })),
     heading: {
       className: "musae-98rzlu musae-78zum5 musae-l56j7k"
     }

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

@@ -1,4 +1,4 @@
-import dayjs, { Dayjs } from "dayjs";
+import dayjs, { type Dayjs } from "dayjs";
 import React from "react";
 import { Timespan } from "../../utils/timespan";
 import type { CalendarProps } from "./types";

package/dist/components/calendar/hooks.js

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { isArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
@@ -13,22 +13,25 @@ import Button from '../button/button.js';
 
 const styles = {
   cell: {
-    height: "musae-7kkngq",
-    width: "musae-1sgo4cp",
+    height: "musae-was1v5",
+    width: "musae-1wmt73o",
     padding: "musae-1jb30j6",
-    $$css: true
-  },
-  header: {
     textAlign: "musae-2b8uid",
     $$css: true
   },
+  header: props => [{
+    color: "musae-19dipnz",
+    $$css: true
+  }, {
+    "--color": props.color != null ? props.color : "initial"
+  }],
   date: props => [{
     position: "musae-1n2onr6",
     "::before_content": "musae-1cpjm7i",
     "::before_position": "musae-1hmns74",
     "::before_backgroundColor": "musae-rr6jkh",
     "::before_zIndex": "musae-1ly6cpr",
-    "::before_height": "musae-58076a",
+    "::before_height": "musae-2wrall",
     $$css: true
   }, {
     "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial"
@@ -65,14 +68,17 @@ const styles = {
  */
 const useHeadCells = () => {
   const classNames = useClassNames(ComponentToken.Calendar);
+  const theme = useTheme();
   return useMemo(() => {
-    const styled = props(styles.cell, styles.header, typography.body.large);
+    const styled = props(styles.cell, styles.header({
+      color: theme.colors[ColorToken.OnSurfaceVariant]
+    }), typography.body.large);
     return dayjs.Ls[dayjs.locale()].weekdays?.map((weekday, index) => React.createElement("th", {
       key: index,
       className: clsx(classNames[CalendarClassToken.HeadCell], styled.className),
       style: styled.style
     }, weekday.charAt(0)));
-  }, [classNames]);
+  }, [classNames, theme]);
 };
 /**
  * @description

package/dist/components/cascader/cascader.js

@@ -3,7 +3,7 @@ import Picker from '../picker/picker.js';
 import Tag from '../tag/tag.js';
 import { useOptions, useValue } from './hooks.js';
 import Menu from '../menu/menu.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CascaderClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 

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

@@ -5,7 +5,14 @@ import type { CascaderProps, ReadableOptions, ReadablePaths } from "./types";
  * @description
  * cascader value
  */
-export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [import("./types").ValueOrValues | undefined, ReadableOptions, ReadablePaths, "multiple" | undefined, close: VoidFunction, Dispatch<SetStateAction<MenuItem[][]>>]) => {
+export declare const useValue: ([valueInProps, readableOptions, readablePaths, mode, close, setAdditionalMenusItems]: [
+    CascaderProps["value"],
+    ReadableOptions,
+    ReadablePaths,
+    CascaderProps["mode"],
+    close: VoidFunction,
+    Dispatch<SetStateAction<MenuItem[][]>>
+]) => {
     values: Map<number, Required<Pick<import("../..").Option, "value" | "label">>[]>;
     onChange: (id: number) => void;
 };
@@ -13,7 +20,7 @@ export declare const useValue: ([valueInProps, readableOptions, readablePaths, m
  * @description
  * options
  */
-export declare const useOptions: ([options]: [options: import("../..").Option[] | undefined]) => {
+export declare const useOptions: ([options]: [options: CascaderProps["options"]]) => {
     presetedMenuItems: MenuItem[];
     additionalMenusItems: MenuItem[][];
     readableOptions: ReadableOptions;

package/dist/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo, useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
 import Context from './context.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -28,8 +28,8 @@ const styles = {
     "::before_visibility": "musae-11srvyv",
     "::before_display": "musae-1fgarty",
     "::before_boxSizing": "musae-tql2tq",
-    "::before_width": "musae-1am8x4t",
-    "::before_height": "musae-1pb6zuh",
+    "::before_width": "musae-1el3b87",
+    "::before_height": "musae-1prtdg5",
     "::before_borderRadius": "musae-10eoie5",
     "::before_borderStartStartRadius": null,
     "::before_borderStartEndRadius": null,
@@ -92,8 +92,8 @@ const styles = {
     "::after_boxSizing": "musae-x38sju",
     "::after_position": "musae-1j6awrg",
     "::after_display": "musae-hkezso",
-    "::after_width": "musae-15y61te",
-    "::after_height": "musae-h6wov",
+    "::after_width": "musae-11yodxc",
+    "::after_height": "musae-ec44on",
     "::after_transform": "musae-1db1611",
     "::after_borderWidth": "musae-15z8w9c",
     "::after_borderInlineWidth": null,

package/dist/components/clock/clock.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
 import { TimeUnit } from './types.js';
 import Column from './column.js';

package/dist/components/clock/column.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useCallback, useImperativeHandle, useEffect, useMemo } from 'react';
 import { useTimeUnit } from './hooks.js';
 import Menu from '../menu/menu.js';
-import { useClassNames } from '../config/hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
 import { isVoid } from '@aiszlab/relax';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -13,7 +13,7 @@ const styles = {
   menu: props => [{
     overflowX: "musae-6ikm8r",
     overflowY: "musae-10wlt62 musae-r8ctv5",
-    width: "musae-1sgo4cp",
+    width: "musae-1wmt73o",
     marginBlock: "musae-dbe9a9",
     marginTop: null,
     marginBottom: null,
@@ -62,7 +62,7 @@ const Column = forwardRef(({
       outlineColor: theme.colors[ColorToken.OutlineVariant]
     })),
     item: {
-      className: "musae-1sgo4cp musae-78zum5 musae-l56j7k"
+      className: "musae-1wmt73o musae-78zum5 musae-l56j7k"
     }
   };
   return React.createElement(Menu, {

package/dist/components/config/context.js

@@ -2,7 +2,7 @@ import { createContext } from 'react';
 import { DEFAULT_CLASS_NAMES } from '../../utils/class-name.js';
 
 const Context = createContext({
-    messager: null,
+    notifier: null,
     classNames: DEFAULT_CLASS_NAMES,
 });
 

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

@@ -1,180 +1,3 @@
-import { ComponentToken } from "../../utils/class-name";
-/**
- * @description
- * the component class names
- */
-export declare const useClassNames: <T extends ComponentToken>(token: T) => {
-    0: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-    };
-    1: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-    };
-    2: {
-        0: string;
-    };
-    3: {
-        0: string;
-    };
-    4: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-    };
-    5: {
-        0: string;
-        1: string;
-    };
-    6: {
-        0: string;
-    };
-    7: {
-        0: string;
-        1: string;
-    };
-    8: {
-        0: string;
-        1: string;
-    };
-    9: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-    };
-    10: {
-        0: string;
-        1: string;
-    };
-    11: {
-        0: string;
-    };
-    12: {
-        0: string;
-        1: string;
-    };
-    13: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-    };
-    14: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-    };
-    15: {
-        0: string;
-    };
-    16: {
-        0: string;
-        1: string;
-    };
-    17: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-    };
-    18: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    19: {
-        0: string;
-        1: string;
-    };
-    20: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-    };
-    21: {
-        0: string;
-    };
-    22: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-    };
-    23: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    24: {
-        0: string;
-    };
-    25: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-    };
-    26: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-    };
-    27: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-    };
-    28: {
-        0: string;
-        1: string;
-        5: string;
-        6: string;
-        7: string;
-        2: string;
-        3: string;
-        4: string;
-    };
-    29: {
-        0: string;
-        1: string;
-    };
-    30: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    31: {
-        0: string;
-        1: string;
-    };
-}[T];
 /**
  * @description
  * configuration

package/dist/components/config/hooks.js

@@ -1,13 +1,6 @@
 import { useContext } from 'react';
 import Context from './context.js';
 
-/**
- * @description
- * the component class names
- */
-const useClassNames = (token) => {
-    return useContext(Context).classNames[token];
-};
 /**
  * @description
  * configuration
@@ -16,4 +9,4 @@ const useConfiguration = () => {
     return useContext(Context);
 };
 
-export { useClassNames, useConfiguration };
+export { useConfiguration };

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

@@ -1,3 +1,3 @@
 import ConfigProvider from "./provider";
-import { useClassNames, useConfiguration } from "./hooks";
-export { ConfigProvider, useClassNames, useConfiguration };
+import { useConfiguration } from "./hooks";
+export { ConfigProvider, useConfiguration };

package/dist/components/config/provider.js

@@ -1,21 +1,21 @@
 import React, { useRef, useMemo } from 'react';
 import Context from './context.js';
-import Holder from '../message/holder.js';
+import Holder from '../notification/holder.js';
 import { DEFAULT_CLASS_NAMES, addPrefix, CLASS_NAMES } from '../../utils/class-name.js';
 
 const ConfigProvider = (props) => {
-    const messageRef = useRef(null);
+    const notifierRef = useRef(null);
     const classNames = useMemo(() => {
         if (!props.prefix)
             return DEFAULT_CLASS_NAMES;
         return addPrefix(CLASS_NAMES, props.prefix);
     }, [props.prefix]);
     return (React.createElement(Context.Provider, { value: {
-            messager: messageRef,
+            notifier: notifierRef,
             classNames,
         } },
         props.children,
-        React.createElement(Holder, { ref: messageRef })));
+        React.createElement(Holder, { ref: notifierRef })));
 };
 var ConfigProvider$1 = ConfigProvider;