musae 0.1.48 → 0.2.0

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { AvatarProps } from "./types";
-declare const Avatar: ({ src, alt, ...props }: AvatarProps) => React.JSX.Element;
+declare const Avatar: ({ src, alt, shape: _shape, size: _size }: AvatarProps) => React.JSX.Element;
 export default Avatar;

package/dist/components/avatar/avatar.js

@@ -37,6 +37,7 @@ const styles = {
     borderTopColor: null,
     borderBottomColor: null,
     boxSizing: "musae-9f619",
+    display: "musae-3nfvp2",
     $$css: true
   },
   image: {
@@ -114,13 +115,14 @@ const styles = {
 const Avatar = ({
   src,
   alt,
-  ...props$1
+  shape: _shape = "circular",
+  size: _size = "medium"
 }) => {
   const theme = useTheme();
   const group = useContext(Context);
   const isInGroup = !!group;
-  const size = group?.size ?? props$1.size ?? "medium";
-  const shape = group?.shape ?? props$1.shape ?? "circular";
+  const size = group?.size ?? _size;
+  const shape = group?.shape ?? _shape;
   const classNames = useClassNames(ComponentToken.Avatar);
   const styled = {
     avatar: props(styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping({
@@ -134,9 +136,10 @@ const Avatar = ({
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
     style: styled.avatar.style
   }, React.createElement("img", {
-    ...styled.image,
     src: src,
-    alt: alt
+    alt: alt,
+    className: styled.image.className,
+    style: styled.image.style
   }));
 };
 

package/dist/components/avatar/group.d.ts

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

package/dist/components/avatar/group.js

@@ -6,7 +6,8 @@ import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 const Group = ({
   children,
   shape = "circular",
-  size = "medium"
+  size = "medium",
+  max = 3
 }) => {
   const styled = {
     className: "musae-3nfvp2"

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

@@ -9,21 +9,25 @@ export type AvatarProps = {
     /**
      * @description
      * src
+     * @default void 0
      */
     src?: string;
     /**
      * @description
      * alt
+     * @default void 0
      */
     alt?: string;
     /**
      * @description
      * size
+     * @default "medium"
      */
     size?: Size;
     /**
      * @description
      * shape
+     * @default "circular"
      */
     shape?: Shape;
 };
@@ -35,23 +39,27 @@ export type AvatarGroupProps = {
     /**
      * @description
      * children
+     * @requires
      */
     children: ReactNode;
     /**
      * @description
      * max
+     * @default 3
      */
     max?: number;
     /**
      * @description
-     * shape
+     * size
+     * @default "circular"
      */
-    shape?: Shape;
+    size?: Size;
     /**
      * @description
-     * size
+     * shape
+     * @default "circular"
      */
-    size?: Size;
+    shape?: Shape;
 };
 /**
  * @description

package/dist/components/breadcrumb/breadcrumb.js

@@ -19,7 +19,7 @@ const styles = {
 const Breadcrumb = ({
   items = [],
   className,
-  separator,
+  separator = "/",
   style
 }) => {
   const theme = useTheme();

package/dist/components/breadcrumb/item.js

@@ -76,7 +76,7 @@ const Item = ({
     role: "separator",
     className: clsx(classNames[BreadcrumbClassToken.Separator], styled.separator.className),
     style: styled.separator.style
-  }, separator ?? "/"));
+  }, separator));
 };
 
 export { Item as default };

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

@@ -8,12 +8,14 @@ export type BreadcrumbItem = {
     /**
      * @description
      * item display label
+     * @requires
      */
     label: ReactNode;
     /**
      * @description
      * item href link
      * if link is not provided, item will display as a label
+     * @default void 0
      */
     href?: string;
 };
@@ -25,13 +27,15 @@ export type BreadcrumbProps = ComponentProps & {
     /**
      * @description
      * breadcrumb items
+     * @default []
      */
-    items: BreadcrumbItem[];
+    items?: BreadcrumbItem[];
     /**
      * @description
      * separator
+     * @default "/"
      */
-    separator?: ReactNode;
+    separator?: Exclude<ReactNode, undefined | null>;
 };
 /**
  * @description
@@ -41,11 +45,13 @@ export type BreadcrumbItemProps = BreadcrumbItem & {
     /**
      * @description
      * max
+     * @requires
      */
     max: boolean;
     /**
      * @description
      * separator
+     * @requires
      */
-    separator?: ReactNode;
+    separator: Exclude<ReactNode, undefined | null>;
 };

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

@@ -14,54 +14,45 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
     /**
      * @description
      * variant
-     *
      * @default "filled"
      */
     variant?: Variant;
     /**
      * @description
      * color: only support preset colors
-     *
      * @default "primary"
      */
     color?: Color;
     /**
      * @description
      * shape
-     *
      * @default "rounded"
      */
     shape?: Shape;
     /**
      * @description
-     * click handler
+     * size
+     * @default "medium"
      */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
+    size?: Size;
     /**
      * @description
      * children
+     * @default void 0
      */
     children?: ReactNode;
-    /**
-     * @description
-     * size
-     *
-     * @default "medium"
-     */
-    size?: Size;
     /**
      * @description
      * disabled
-     *
      * @default false
      */
     disabled?: boolean;
     /**
      * @description
      * prefix react node
-     *
      * @template
      * icon or prefix signal
+     * @default void 0
      */
     prefix?: ReactNode;
     /**
@@ -69,14 +60,20 @@ export interface ButtonProps extends Partial<Pick<ButtonHTMLAttributes<HTMLButto
      * suffix react node
      * @template
      * icon or suffix signal
+     * @default void 0
      */
     suffix?: ReactNode;
     /**
      * @description
      * if false, without a ripple
-     *
      * @default true
      */
     ripple?: boolean;
+    /**
+     * @description
+     * click handler
+     * @default void 0
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 export {};

package/dist/components/calendar/calendar.js

@@ -50,6 +50,9 @@ const Calendar = ({
   const classNames = useClassNames(ComponentToken.Calendar);
   const theme = useTheme();
   const styled = {
+    calendar: {
+      className: "musae-eq5yr9"
+    },
     header: props(typography.label.large, styles.header({
       color: theme.colors[ColorToken.OnSurfaceVariant]
     })),
@@ -58,8 +61,11 @@ const Calendar = ({
     }
   };
   return React.createElement("div", {
-    className: className,
-    style: style
+    className: clsx(styled.calendar.className, className),
+    style: {
+      ...styled.calendar.style,
+      ...style
+    }
   }, React.createElement("header", {
     className: clsx(classNames[CalendarClassToken.Header], styled.header.className),
     style: styled.header.style

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

@@ -24,7 +24,7 @@ export declare const useValue: ([value, _click]: [CalendarProps["value"], Calend
  * @description
  * point at
  */
-export declare const useFocusedAt: ([focusedAtInProps]: [CalendarProps["focusedAt"]]) => {
+export declare const useFocusedAt: ([_focusedAt]: [CalendarProps["focusedAt"]]) => {
     focusedAt: dayjs.Dayjs;
     toNextYear: () => void;
     toPrevYear: () => void;

package/dist/components/calendar/hooks.js

@@ -169,25 +169,25 @@ const useValue = ([value, _click]) => {
  * @description
  * point at
  */
-const useFocusedAt = ([focusedAtInProps]) => {
-  const [focusedAt, setFocusedAt] = useControlledState(focusedAtInProps, {
+const useFocusedAt = ([_focusedAt]) => {
+  const [focusedAt, setFocusedAt] = useControlledState(_focusedAt, {
     defaultState: dayjs()
   });
   /// next year
   const toNextYear = useCallback(() => {
-    setFocusedAt(_focusedAt => _focusedAt.add(1, "year"));
+    setFocusedAt(__focusedAt => __focusedAt.add(1, "year"));
   }, [setFocusedAt]);
   /// prev year
   const toPrevYear = useCallback(() => {
-    setFocusedAt(_focusedAt => _focusedAt.subtract(1, "year"));
+    setFocusedAt(__focusedAt => __focusedAt.subtract(1, "year"));
   }, [setFocusedAt]);
   /// next month
   const toNextMonth = useCallback(() => {
-    setFocusedAt(_focusedAt => _focusedAt.add(1, "month"));
+    setFocusedAt(__focusedAt => __focusedAt.add(1, "month"));
   }, [setFocusedAt]);
   /// prev month
   const toPrevMonth = useCallback(() => {
-    setFocusedAt(_focusedAt => _focusedAt.subtract(1, "month"));
+    setFocusedAt(__focusedAt => __focusedAt.subtract(1, "month"));
   }, [setFocusedAt]);
   return {
     focusedAt,

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

@@ -9,16 +9,19 @@ export type CalendarProps = ComponentProps & {
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: Dayjs | [Partialable<Dayjs>, Partialable<Dayjs>];
     /**
      * @description
      * focused at
+     * @default void 0
      */
     focusedAt?: Dayjs;
     /**
      * @description
      * click date handler
+     * @default void 0
      */
     onClick?: (value: Dayjs) => void;
 };

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CascaderProps } from "./types";
-declare const Cascader: ({ mode, separator, ...props }: CascaderProps) => React.JSX.Element;
+declare const Cascader: ({ mode, separator, options, complex, ...props }: CascaderProps) => React.JSX.Element;
 export default Cascader;

package/dist/components/cascader/cascader.js

@@ -10,6 +10,8 @@ import clsx from 'clsx';
 const Cascader = ({
   mode,
   separator = "/",
+  options = [],
+  complex = false,
   ...props
 }) => {
   const ref = useRef(null);
@@ -21,7 +23,7 @@ const Cascader = ({
     additionalMenusItems,
     presetedMenuItems,
     setAdditionalMenusItems
-  } = useOptions([props.options]);
+  } = useOptions([options]);
   const {
     values,
     onChange

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

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

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

@@ -20,26 +20,31 @@ export interface CascaderProps {
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: ValueOrValues;
     /**
      * @description
      * options
+     * @default []
      */
     options?: Option[];
     /**
      * @description
      * mode
+     * @default void 0
      */
     mode?: Mode;
     /**
      * @description
      * complex
+     * @default false
      */
     complex?: boolean;
     /**
      * @description
      * separator
+     * @default "/"
      */
     separator?: ReactNode;
 }
@@ -52,7 +57,7 @@ export interface ReadBy {
      * @description
      * options
      */
-    options?: Option[];
+    options: Option[];
     /**
      * @description
      * from

package/dist/components/cascader/utils.js

@@ -4,7 +4,7 @@ import { isVoid, isArray } from '@aiszlab/relax';
  * @description
  * read options
  */
-const readOptions = ({ options = [], from = 1, paths = [] }) => {
+const readOptions = ({ options, from = 1, paths = [] }) => {
     return options.reduce((prev, option) => {
         const [collectedOptions, collectedPaths, next] = prev;
         const currentPaths = [
@@ -16,7 +16,7 @@ const readOptions = ({ options = [], from = 1, paths = [] }) => {
         ];
         // read deeply
         const [children, readPaths, readId] = readOptions({
-            options: option.children,
+            options: option.children ?? [],
             from: next,
             paths: currentPaths,
         });

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

@@ -30,6 +30,7 @@ export interface CheckboxGroupProps {
      * checked values
      * @example
      * ["A"]
+     * @default void 0
      */
     value?: Key[];
     /**
@@ -37,6 +38,7 @@ export interface CheckboxGroupProps {
      * children
      * @example
      * <Checkbox value="A" />
+     * @requires
      */
     children: ReactNode;
 }
@@ -50,16 +52,19 @@ export interface CheckboxProps extends ComponentProps {
     /**
      * @description
      * if is checked
+     * @default void 0
      */
     checked?: boolean;
     /**
      * @description
      * value
+     * @requires
      */
     value: Key;
     /**
      * @description
      * children
+     * @default void 0
      */
     children?: ReactNode;
 }

package/dist/components/clock/clock.d.ts

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

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

@@ -13,11 +13,13 @@ export type ClockProps = ComponentProps & {
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: Value;
     /**
      * @description
      * change handler
+     * @default void 0
      */
     onChange?: (value: Value) => void;
 };

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

@@ -8,14 +8,12 @@ export type CountableProps = Pick<ButtonProps, "children" | "disabled" | "varian
     /**
      * @description
      * count total after every trigger
-     *
      * @default 60
      */
     count?: number;
     /**
      * @description
      * interval, unit(ms)
-     *
      * @default 1000
      */
     interval?: number;

package/dist/components/date-picker/types.d.ts

@@ -7,11 +7,13 @@ export interface DatePickerProps {
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: Dayjs;
     /**
      * @description
      * change handler
+     * @default void 0
      */
     onChange?: (value: Dayjs) => void;
 }

package/dist/components/date-range-picker/types.d.ts

@@ -8,11 +8,13 @@ export interface DateRangePickerProps {
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: [Partialable<Dayjs>, Partialable<Dayjs>];
     /**
      * @description
      * change handler
+     * @default void 0
      */
     onChange?: (value: [Dayjs, Dayjs]) => void;
 }

package/dist/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DialogProps } from "./types";
-declare const Dialog: ({ open, ...props }: DialogProps) => React.JSX.Element;
+declare const Dialog: ({ open, dismissable, ...props }: DialogProps) => React.JSX.Element;
 export default Dialog;

package/dist/components/dialog/dialog.js

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import Popup from './popup.js';
 import { useBoolean } from '@aiszlab/relax';
 
-const Dialog = ({ open, ...props }) => {
+const Dialog = ({ open, dismissable = true, ...props }) => {
     /// `Portal` should disappear after `Dialog` disappear completely
     const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
     useEffect(() => {
@@ -13,7 +13,7 @@ const Dialog = ({ open, ...props }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement(Portal, { open: open || _isVisible },
-        React.createElement(Popup, { open: open, onClosed: turnOff, ...props })));
+        React.createElement(Popup, { ...props, dismissable: true, open: open, onClosed: turnOff })));
 };
 var Dialog$1 = Dialog;
 

package/dist/components/dialog/popup.js

@@ -88,7 +88,7 @@ const styles = {
 const Popup = ({
   onClose,
   open,
-  dismissable = true,
+  dismissable,
   onClosed,
   ...props$1
 }) => {