musae 0.1.48 → 0.2.1

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

@@ -1,4 +1,10 @@
 import React from "react";
 import type { AvatarProps } from "./types";
-declare const Avatar: ({ src, alt, ...props }: AvatarProps) => React.JSX.Element;
+/**
+ * @description
+ * `Avatar`
+ *
+ * component
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;

package/dist/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useTheme } from '../theme/hooks.js';
@@ -6,9 +6,10 @@ import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { typography } from '../theme/theme.js';
 
 const styles = {
-  avatar: {
+  avatar: props => [{
     borderWidth: "musae-1i8jmgv",
     borderInlineWidth: null,
     borderInlineStartWidth: null,
@@ -37,8 +38,17 @@ const styles = {
     borderTopColor: null,
     borderBottomColor: null,
     boxSizing: "musae-9f619",
+    display: "musae-3nfvp2",
+    backgroundColor: "musae-q1mx2j",
+    color: "musae-19dipnz",
+    alignItems: "musae-6s0dn4",
+    justifyContent: "musae-l56j7k",
+    userSelect: "musae-87ps6o",
     $$css: true
-  },
+  }, {
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--color": props.color != null ? props.color : "initial"
+  }],
   image: {
     width: "musae-wfgd1y",
     height: "musae-b27hse",
@@ -111,19 +121,31 @@ const styles = {
     $$css: true
   }
 };
-const Avatar = ({
+/**
+ * @description
+ * `Avatar`
+ *
+ * component
+ */
+const Avatar = forwardRef(({
   src,
   alt,
+  shape: _shape = "circular",
+  size: _size = "medium",
+  fallback,
   ...props$1
-}) => {
+}, ref) => {
   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({
+    avatar: props(typography.label[size], styles.avatar({
+      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
+      color: theme.colors[ColorToken.Primary]
+    }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
     })),
     image: {
@@ -131,13 +153,17 @@ const Avatar = ({
     }
   };
   return React.createElement("span", {
+    ...props$1,
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
-    style: styled.avatar.style
-  }, React.createElement("img", {
-    ...styled.image,
+    style: styled.avatar.style,
+    ref: ref
+  }, !!src ? React.createElement("img", {
+    draggable: false,
     src: src,
-    alt: alt
-  }));
-};
+    alt: alt,
+    className: styled.image.className,
+    style: styled.image.style
+  }) : fallback);
+});
 
 export { Avatar as default };

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: _children, shape, size, max }: AvatarGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/avatar/group.js

@@ -1,17 +1,47 @@
-import React from 'react';
+import React, { useMemo, Children, cloneElement } from 'react';
 import { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+import Popover from '../popover/popover.js';
+import Avatar from './avatar.js';
 
 const Group = ({
-  children,
+  children: _children,
   shape = "circular",
-  size = "medium"
+  size = "medium",
+  max = 3
 }) => {
   const styled = {
-    className: "musae-3nfvp2"
+    className: "musae-3nfvp2 musae-87ps6o"
   };
   const classNames = useClassNames(ComponentToken.Avatar);
+  const children = useMemo(() => {
+    const __children = Children.toArray(_children);
+    const [visible, hidden] = __children.reduce((prev, child, index) => {
+      // @ts-ignore
+      const element = cloneElement(child, {
+        key: `avatars-${index}`
+      });
+      // great than max, hide current node
+      if (index >= max) {
+        prev[1].push(element);
+      } else {
+        prev[0].push(element);
+      }
+      return prev;
+    }, [[], []]);
+    // got hidden nodes, show ellipse node
+    if (hidden.length > 0) {
+      visible.push(React.createElement(Popover, {
+        description: React.createElement(Group, null, hidden),
+        key: "avatars-hidden",
+        placement: "top"
+      }, React.createElement(Avatar, {
+        fallback: `+${hidden.length}`
+      })));
+    }
+    return visible;
+  }, [_children, max]);
   return React.createElement(Context.Provider, {
     value: {
       shape,

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefAttributes } from "react";
 type Size = "small" | "medium" | "large";
 type Shape = "circular" | "squared";
 /**
@@ -9,23 +9,35 @@ 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;
+    /**
+     * @description
+     * fallback node
+     * if user do not provide `src`, or `src` is invalid
+     * show `fallback`
+     * @default void 0
+     */
+    fallback?: ReactNode;
 };
 /**
  * @description
@@ -35,23 +47,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
@@ -62,7 +78,7 @@ export type TypedAvatar = {
      * @description
      * component self
      */
-    (props: AvatarProps): JSX.Element;
+    (props: AvatarProps & RefAttributes<HTMLSpanElement>): ReactNode;
     /**
      * @description
      * group

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/button.js

@@ -227,7 +227,9 @@ const Button = forwardRef(({
   onPointerEnter,
   onPointerLeave,
   type = "button",
-  ...props$1
+  onClick: _onClick,
+  prefix,
+  suffix
 }, ref) => {
   const classNames = useClassNames(ComponentToken.Button);
   const theme = useTheme();
@@ -236,7 +238,7 @@ const Button = forwardRef(({
     clear,
     ripples
   } = useButton({
-    onClick: props$1.onClick
+    onClick: _onClick
   });
   const styled = {
     button: props(styles.button, typography.label[size],
@@ -274,7 +276,7 @@ const Button = forwardRef(({
     onPointerEnter: onPointerEnter,
     onPointerLeave: onPointerLeave,
     type: type
-  }, props$1.prefix, children, props$1.suffix, ripple && React.createElement(Ripple, {
+  }, prefix, children, suffix, ripple && React.createElement(Ripple, {
     ripples: ripples,
     onClear: clear
   }));

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.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CalendarProps } from "./types";
-declare const Calendar: ({ className, style, ...props }: CalendarProps) => React.JSX.Element;
+declare const Calendar: ({ className, style, value, onClick: _onClick, focusedAt: _focusedAt }: CalendarProps) => React.JSX.Element;
 export default Calendar;

package/dist/components/calendar/calendar.js

@@ -32,24 +32,34 @@ const styles = {
 const Calendar = ({
   className,
   style,
-  ...props$1
+  value,
+  onClick: _onClick,
+  focusedAt: _focusedAt
 }) => {
   const {
     timespan,
     onClick
-  } = useValue([props$1.value, props$1.onClick]);
+  } = useValue({
+    onClick: _onClick,
+    value
+  });
   const {
     focusedAt,
     toPrevYear,
     toPrevMonth,
     toNextYear,
     toNextMonth
-  } = useFocusedAt([props$1.focusedAt]);
+  } = useFocusedAt({
+    focusedAt: _focusedAt
+  });
   const dateCells = useDateCells([timespan, focusedAt, onClick]);
   const headCells = useHeadCells();
   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 +68,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

@@ -16,7 +16,10 @@ export declare const useDateCells: ([timespan, focusedAt, click]: [Timespan, Day
  * @description
  * time span
  */
-export declare const useValue: ([value, _click]: [CalendarProps["value"], CalendarProps["onClick"]]) => {
+export declare const useValue: ({ onClick: _click, value, }: {
+    value: CalendarProps["value"];
+    onClick: CalendarProps["onClick"];
+}) => {
     timespan: Timespan;
     onClick: (_value: Dayjs) => void;
 };
@@ -24,7 +27,9 @@ export declare const useValue: ([value, _click]: [CalendarProps["value"], Calend
  * @description
  * point at
  */
-export declare const useFocusedAt: ([focusedAtInProps]: [CalendarProps["focusedAt"]]) => {
+export declare const useFocusedAt: ({ focusedAt: _focusedAt }: {
+    focusedAt: CalendarProps["focusedAt"];
+}) => {
     focusedAt: dayjs.Dayjs;
     toNextYear: () => void;
     toPrevYear: () => void;

package/dist/components/calendar/hooks.js

@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
-import { isArray, useControlledState } from '@aiszlab/relax';
+import { toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -147,14 +147,17 @@ const useDateCells = ([timespan, focusedAt, click]) => {
  * @description
  * time span
  */
-const useValue = ([value, _click]) => {
+const useValue = ({
+  onClick: _click,
+  value
+}) => {
   /// change handler
   const onClick = useCallback(_value => {
     _click?.(_value);
   }, [_click]);
   /// time span
   const timespan = useMemo(() => {
-    const [from, to] = isArray(value) ? value : [value, void 0];
+    const [from, to] = toArray(value);
     return new Timespan({
       from,
       to
@@ -169,25 +172,27 @@ const useValue = ([value, _click]) => {
  * @description
  * point at
  */
-const useFocusedAt = ([focusedAtInProps]) => {
-  const [focusedAt, setFocusedAt] = useControlledState(focusedAtInProps, {
+const useFocusedAt = ({
+  focusedAt: _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;