musae 0.2.7 → 0.2.9

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BadgeProps } from "./types";
+declare const Badge: ({ className, style, children, content }: BadgeProps) => React.JSX.Element;
+export default Badge;

package/dist/components/badge/badge.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, BadgeClassToken } from '../../utils/class-name.js';
+import _stylex 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';
+import { ColorToken } from '../../utils/colors.js';
+import { isVoid } from '@aiszlab/relax';
+
+const styles = {
+  badge: {
+    default: {
+      position: "musae-1n2onr6",
+      display: "musae-3nfvp2",
+      $$css: true
+    }
+  },
+  tail: {
+    default: props => [{
+      position: "musae-10l6tqk",
+      top: "musae-13vifvy",
+      right: "musae-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-rycbv3",
+      borderRadius: "musae-iipnba",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      minWidth: "musae-70jws7",
+      textAlign: "musae-2b8uid",
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    dot: {
+      minWidth: null,
+      $$css: true
+    }
+  }
+};
+const Badge = ({
+  className,
+  style,
+  children,
+  content
+}) => {
+  const classNames = useClassNames(ComponentToken.Badge);
+  const theme = useTheme();
+  const isDot = isVoid(content);
+  const styled = {
+    badge: _stylex.props(styles.badge.default),
+    tail: _stylex.props(styles.tail.default({
+      backgroundColor: theme.colors[ColorToken.Primary],
+      color: theme.colors[ColorToken.OnPrimary]
+    }), isDot && styles.tail.dot, typography.label.small)
+  };
+  return React.createElement("span", {
+    className: clsx(classNames[BadgeClassToken.Badge], className, styled.badge.className),
+    style: {
+      ...styled.badge.style,
+      ...style
+    }
+  }, children, React.createElement("span", {
+    className: clsx(classNames[BadgeClassToken.Tail], styled.tail.className),
+    style: styled.tail.style
+  }, content));
+};
+var Badge$1 = Badge;
+
+export { Badge$1 as default };

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

@@ -0,0 +1,2 @@
+import Badge from "./badge";
+export { Badge };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { ComponentProps } from "../../types/element";
+/**
+ * @description
+ * badge props
+ */
+export type BadgeProps = ComponentProps & {
+    /**
+     * @description
+     * children
+     */
+    children: ReactNode;
+    /**
+     * @description
+     * content
+     */
+    content?: ReactNode;
+};

package/dist/components/checkbox/group.js

@@ -19,7 +19,7 @@ const Group = ({ value: controlledValue, children, onChange, disabled = false })
         const _checkedKeys = Array.from(checkedKeys);
         onChange?.(_checkedKeys);
         setValue(_checkedKeys);
-    }, [setValue, value]);
+    }, [onChange, setValue, value]);
     // context value
     const contextValue = useMemo(() => {
         return {

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

@@ -49,6 +49,7 @@ export interface CheckboxGroupProps {
     /**
      * @description
      * change handler
+     * @default void 0
      */
     onChange?: (value: Key[]) => void;
     /**
@@ -92,6 +93,7 @@ export interface CheckboxProps extends ComponentProps {
     /**
      * @description
      * disabled
+     * @default false
      */
     disabled?: boolean;
 }

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DialogProps } from "./types";
-declare const Dialog: ({ open, dismissable, ...props }: DialogProps) => React.JSX.Element;
+declare const Dialog: ({ open, closable, ...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, dismissable = true, ...props }) => {
+const Dialog = ({ open, closable = true, ...props }) => {
     /// `Portal` should disappear after `Dialog` disappear completely
     const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
     useEffect(() => {
@@ -13,7 +13,7 @@ const Dialog = ({ open, dismissable = true, ...props }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
-        React.createElement(Popup, { ...props, dismissable: true, open: open, onClosed: turnOff })));
+        React.createElement(Popup, { ...props, closable: true, open: open, onClosed: turnOff })));
 };
 var Dialog$1 = Dialog;
 

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

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

package/dist/components/dialog/popup.js

@@ -8,7 +8,7 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
-import { useDismissable } from '../../hooks/use-dismissable.js';
+import { useClosable } from '../../hooks/use-closable.js';
 import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
@@ -88,7 +88,7 @@ const styles = {
 const Popup = ({
   onClose,
   open,
-  dismissable,
+  closable,
   onClosed,
   ...props$1
 }) => {
@@ -103,8 +103,8 @@ const Popup = ({
     closer,
     onKeyDown,
     onOverlayClick
-  } = useDismissable({
-    dismissable,
+  } = useClosable({
+    closable,
     onClose
   });
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { Dismissable } from "../../hooks/use-dismissable";
+import type { Closable } from "../../hooks/use-closable";
 import { RequiredIn } from "@aiszlab/relax/types";
 /**
  * @description
@@ -29,7 +29,7 @@ export interface DialogProps {
      * Whether the dialog can be closed by clicking on the overlay or pressing the Esc key.
      * @default true
      */
-    dismissable?: boolean | Dismissable[];
+    closable?: boolean | Closable[];
     /**
      * @description
      * title
@@ -67,7 +67,7 @@ export interface DialogProps {
  * @description
  * popup
  */
-export type PopupProps = RequiredIn<DialogProps, "dismissable"> & {
+export type PopupProps = RequiredIn<DialogProps, "closable"> & {
     /**
      * @description
      * callback will be toggled after close animation end

package/dist/components/drawer/drawer.d.ts

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

package/dist/components/drawer/drawer.js

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

package/dist/components/drawer/popup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopupProps } from "./types";
-declare const Popup: ({ open, onClose, placement, dismissable, onClosed, size, ...props }: PopupProps) => React.JSX.Element;
+declare const Popup: ({ open, onClose, placement, closable, onClosed, size, ...props }: PopupProps) => React.JSX.Element;
 export default Popup;

package/dist/components/drawer/popup.js

@@ -8,7 +8,7 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
-import { useDismissable } from '../../hooks/use-dismissable.js';
+import { useClosable } from '../../hooks/use-closable.js';
 import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
@@ -137,7 +137,7 @@ const Popup = ({
   open,
   onClose,
   placement,
-  dismissable,
+  closable,
   onClosed,
   size,
   ...props$1
@@ -153,8 +153,8 @@ const Popup = ({
     closer,
     onKeyDown,
     onOverlayClick
-  } = useDismissable({
-    dismissable,
+  } = useClosable({
+    closable,
     onClose
   });
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { Dismissable } from "../../hooks/use-dismissable";
+import type { Closable } from "../../hooks/use-closable";
 export type Placement = "right" | "left" | "top" | "bottom";
 /**
  * @description
@@ -35,7 +35,7 @@ export interface DrawerProps {
      * Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.
      * @default true
      */
-    dismissable?: boolean | Dismissable[];
+    closable?: boolean | Closable[];
     /**
      * @description
      * size
@@ -58,7 +58,7 @@ export interface DrawerProps {
  */
 export type PopupProps = DrawerProps & {
     size: number;
-    dismissable: boolean | Dismissable[];
+    closable: boolean | Closable[];
     placement: Placement;
     /**
      * @description

package/dist/components/image/preview/preview.js

@@ -73,7 +73,7 @@ const Preview = forwardRef(({
     open: true,
     onClose: onClose,
     footer: false,
-    dismissable: ["esc"],
+    closable: ["esc"],
     styles: {
       panel: {
         backgroundColor: "transparent",

package/dist/components/popconfirm/popconfirm.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PopconfirmProps, ChildProps } from "./types";
+declare const Popconfirm: <P extends ChildProps<T>, T extends HTMLElement>({ description, ...props }: PopconfirmProps<P, T>) => React.JSX.Element;
+export default Popconfirm;

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

@@ -0,0 +1,9 @@
+import type { DOMAttributes, RefAttributes } from "react";
+import type { PopoverProps } from "../popover";
+import { ComponentProps } from "../../types/element";
+export type ChildProps<T> = Pick<DOMAttributes<T>, "onClick"> & RefAttributes<T>;
+/**
+ * @description
+ * popconfirm props
+ */
+export type PopconfirmProps<P extends ChildProps<T>, T extends HTMLElement> = Pick<PopoverProps<P, T>, "children" | "placement" | "title" | "description"> & ComponentProps;

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

@@ -1,2 +1,4 @@
 import Popover from "./popover";
+import type { PopoverProps } from "./types";
 export { Popover };
+export type { PopoverProps };

package/dist/components/popover/popover.js

@@ -36,16 +36,16 @@ const Popover = ({
   const triggerBy = useMemo(() => new Set(toArray(_triggerBy)), [_triggerBy]);
   const classNames = useClassNames(ComponentToken.Popover);
   const childRef = useRefs(_ref, _children.props.ref);
-  const click = useEvent(e => {
-    toggle();
+  const onClick = useEvent(e => {
     e.stopPropagation();
+    toggle();
   });
-  const contextMenu = useEvent(() => {
+  const onContextMenu = useEvent(() => {
     turnOn();
   });
   const [isHovered, hoverProps] = useHover({
-    onEnter: () => chain(_children.props.onMouseOver, _children.props.onMouseEnter, _children.props.onPointerEnter),
-    onLeave: () => chain(_children.props.onMouseLeave, _children.props.onPointerLeave)
+    onEnter: event => chain(_children.props.onMouseOver, _children.props.onMouseEnter, _children.props.onPointerEnter)(event),
+    onLeave: event => chain(_children.props.onMouseLeave, _children.props.onPointerLeave)(event)
   });
   const [isFocused, focusProps] = useFocus({
     onFocus: _children.props.onFocus,
@@ -64,8 +64,12 @@ const Popover = ({
     ref: childRef,
     ...hoverProps,
     ...focusProps,
-    onClick: triggerBy.has("click") ? click : void 0,
-    onContextMenu: triggerBy.has("contextMenu") ? contextMenu : void 0
+    ...(triggerBy.has("click") && {
+      onClick
+    }),
+    ...(triggerBy.has("contextMenu") && {
+      onContextMenu
+    })
   });
   const enterPopper = useEvent(e => {
     hoverProps.onPointerEnter(e);

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

@@ -5,13 +5,13 @@ import type { Option } from "../../types/option";
  * @description
  * use value
  */
-export declare const useValue: ({ mode, close, isComplex, ...props }: {
+export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, isComplex, ...props }: {
     value: ValueOrValues | undefined;
     readableOptions: ReadableOptions;
     mode: Mode | undefined;
     close: () => void;
     reset: () => void;
-    onChange?: (value: ValueOrValues) => void;
+    onChange?: (value: T) => void;
     isComplex: boolean;
 }) => {
     value: ValueOrValues | undefined;

package/dist/components/select/hooks.js

@@ -33,7 +33,7 @@ const useValue = ({ mode, close, isComplex, ...props }) => {
             if (readableValues.has(key))
                 return;
             if (isControlled) {
-                props.onChange?.(isComplex ? _value : key);
+                props.onChange?.((isComplex ? _value : key));
                 return;
             }
             setValue(_value);
@@ -46,12 +46,12 @@ const useValue = ({ mode, close, isComplex, ...props }) => {
         const isRemoved = prev.has(key) && prev.delete(key);
         const next = isRemoved ? prev : prev.set(key, _value.label);
         if (isControlled) {
-            props.onChange?.(isComplex
+            props.onChange?.((isComplex
                 ? Array.from(next.entries()).map(([value, label]) => ({
                     value,
                     label,
                 }))
-                : Array.from(next.keys()));
+                : Array.from(next.keys())));
             return;
         }
         setValue(Array.from(next.entries()).map(([value, label]) => ({

package/dist/components/select/select.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { SelectProps } from "./types";
-declare const Select: ({ mode, searchable, onSearch, className, style, options, onFilter, complex, value, onChange: _onChange, }: SelectProps) => React.JSX.Element;
+import type { SelectProps, ValueOrValues } from "./types";
+declare const Select: <T extends ValueOrValues = ValueOrValues>({ mode, searchable, onSearch, className, style, options, onFilter, complex, value, onChange: _onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/dist/components/select/select.js

@@ -43,7 +43,6 @@ const Select = ({
     mode,
     close,
     reset,
-    // @ts-ignore
     onChange: _onChange,
     isComplex: complex
   });

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

@@ -6,14 +6,13 @@ import type { RequiredIn } from "@aiszlab/relax/types";
 export type Mode = "multiple";
 export type Value = Key | Pick<Option, "value" | "label">;
 export type ValueOrValues = Value[] | Value;
-type ChangeHandler = ((value: string) => void) | ((value: number) => void) | ((value: bigint) => void) | ((values: Value[]) => void);
 /**
  * @author murukal
  *
  * @description
  * select props
  */
-export type SelectProps = ComponentProps & {
+export type SelectProps<T extends ValueOrValues = ValueOrValues> = ComponentProps & {
     /**
      * @description
      * options
@@ -61,7 +60,7 @@ export type SelectProps = ComponentProps & {
      * on value change, toggle
      * @default void 0
      */
-    onChange?: ChangeHandler;
+    onChange?: (value: T) => void;
 };
 /**
  * @description
@@ -122,4 +121,3 @@ export type SelectionsProps = {
      */
     selectedKeys: MenuProps["selectedKeys"];
 };
-export {};

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

@@ -0,0 +1,2 @@
+import Skeleton from "./skeleton";
+export { Skeleton };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,4 @@
+import type { SkeletonProps } from "./types";
+import React from "react";
+declare const Skeleton: ({ animation, variant, className, style }: SkeletonProps) => React.JSX.Element;
+export default Skeleton;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,37 @@
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, SkeletonClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+
+const styles = {
+  skeleton: {
+    $$css: true
+  },
+  animation: {
+    animationName: "musae-9q1e4u",
+    animationDuration: "musae-mg6eyc",
+    animationTimingFunction: "musae-1debuo4",
+    animationIterationCount: "musae-a4qsjk",
+    $$css: true
+  }
+};
+const Skeleton = ({
+  animation = false,
+  variant,
+  className,
+  style
+}) => {
+  const classNames = useClassNames(ComponentToken.Skeleton);
+  const styled = _stylex.props(styles.skeleton, animation && styles.animation);
+  return React.createElement("div", {
+    className: clsx(classNames[SkeletonClassToken.Skeleton], className, styled.className),
+    style: {
+      ...styled.style,
+      ...style
+    }
+  });
+};
+var Skeleton$1 = Skeleton;
+
+export { Skeleton$1 as default };

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

@@ -0,0 +1,19 @@
+import { ComponentProps } from "../../types/element";
+type Variant = "circular" | "rectangular" | "rounded";
+/**
+ * @description
+ * skeleton props
+ */
+export type SkeletonProps = ComponentProps & {
+    /**
+     * @description
+     * animation
+     */
+    animation?: boolean;
+    /**
+     * @description
+     * variant
+     */
+    variant?: Variant;
+};
+export {};

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

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 import type { Palette, ContextValue, Theme, Mode } from "./types";
 export declare const PALETTE: Readonly<Palette>;
 /**
@@ -27,6 +28,6 @@ export declare const useSwitchable: ({ theme }: {
     theme: Theme;
 }) => {
     mode: Mode;
-    toggle: (event: import("react").MouseEvent) => void;
+    toggle: (event?: MouseEvent) => void;
     colors: Record<import("../../utils/colors").ColorToken, string>;
 };

package/dist/components/theme/hooks.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { toColors } from '../../utils/colors.js';
 import { useEvent, useMounted, isFunction } from '@aiszlab/relax';
 import { toClassList } from '../../utils/styles.js';
@@ -143,9 +143,6 @@ const useSwitchable = ({
       className: "musae-ntwwlm musae-ktw8en musae-qotmtd"
     }
   };
-  const _toggle = useCallback(() => {
-    setMode(_mode => _mode === "light" ? "dark" : "light");
-  }, []);
   const repaint = useEvent(_mode => {
     const _isDark = _mode === "dark";
     document.documentElement.classList.remove(...toClassList((_isDark ? styled.light : styled.dark).className));
@@ -159,25 +156,24 @@ const useSwitchable = ({
       trigger.current = subscriber;
     }).pipe(distinctUntilChanged()).subscribe(_mode => {
       repaint(_mode);
+      setMode(_mode);
     });
   });
-  useEffect(() => {
-    trigger.current?.next(mode);
-  }, [mode]);
-  /// dark, light mode switch
+  // dark, light mode switch
   const toggle = useEvent(event => {
-    if (!(event && isFunction(document.startViewTransition))) {
-      _toggle();
+    const modeSwitchTo = isDark ? "light" : "dark";
+    // dom not support animation
+    if (!isFunction(document.startViewTransition)) {
+      trigger.current?.next(modeSwitchTo);
       return;
     }
-    const x = event.clientX;
-    const y = event.clientY;
-    const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
     const animation = document.startViewTransition(() => {
-      trigger.current?.next(isDark ? "light" : "dark");
+      trigger.current?.next(modeSwitchTo);
     });
     animation.ready.then(() => {
-      _toggle();
+      const x = event?.clientX ?? 0;
+      const y = event?.clientY ?? 0;
+      const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
       const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`];
       document.documentElement.animate({
         clipPath: isDark ? [...clipPath].reverse() : clipPath
@@ -191,7 +187,7 @@ const useSwitchable = ({
   return {
     mode,
     toggle,
-    colors: colors
+    colors
   };
 };
 

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

@@ -64,6 +64,6 @@ export interface ContextValue {
      * @description
      * toggle theme mode, if dark, change to light
      */
-    toggle: (event: MouseEvent) => void;
+    toggle: (event?: MouseEvent) => void;
 }
 export {};

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

@@ -10,21 +10,25 @@ export type TransferProps = ComponentProps & {
     /**
      * @description
      * options
+     * @requires
      */
     options: TransferOption[];
     /**
      * @description
      * value
+     * @default void 0
      */
     value?: Key[];
     /**
      * @description
      * titles
+     * @default [null, null]
      */
     titles?: [ReactNode, ReactNode];
     /**
      * @description
      * disabled
+     * @default false
      */
     disabled?: boolean;
 };

package/dist/components/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+import VisuallyHidden from "./visually-hidden";
+export { VisuallyHidden };

package/dist/components/visually-hidden/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/**
+ * @description
+ * visually hidden props
+ */
+export type VisuallyHiddenProps = {
+    /**
+     * @description
+     * children
+     */
+    children: ReactNode;
+};

package/dist/components/visually-hidden/visually-hidden.d.ts

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

package/dist/hooks/use-class-names.d.ts

@@ -233,4 +233,15 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         2: string;
         4: string;
     };
+    40: {
+        0: string;
+        1: string;
+    };
+    41: {
+        0: string;
+        1: string;
+    };
+    42: {
+        0: string;
+    };
 }[T];

package/dist/hooks/use-closable.d.ts

@@ -0,0 +1,18 @@
+import React, { KeyboardEvent } from "react";
+export type Closable = "esc" | "overlay" | "close";
+/**
+ * @description
+ * for dialog, close means some events or some elements
+ * in musae, we use a hook to handle this
+ *
+ * by default, closable may be different type, like `false` | ['esc'] | undefined
+ * resolve these types, we convert to `Set<Closable>`
+ */
+export declare const useClosable: ({ onClose, closable }: {
+    onClose?: VoidFunction;
+    closable: boolean | Closable[];
+}) => {
+    closer: React.JSX.Element | null;
+    onOverlayClick: () => void;
+    onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/hooks/{use-dismissable.js → use-closable.js}

@@ -6,22 +6,26 @@ import Close from '../components/icon/icons/navigation/close.js';
 
 /**
  * @description
- * for dialog, dismiss means some events or some elements
+ * for dialog, close means some events or some elements
  * in musae, we use a hook to handle this
  *
- * by default, dismissable may be different type, like `false` | ['esc'] | undefined
- * resolve these types, we convert to `Set<Dismissable>`
+ * by default, closable may be different type, like `false` | ['esc'] | undefined
+ * resolve these types, we convert to `Set<Closable>`
  */
-const useDismissable = props => {
-  const dismissable = useMemo(() => {
-    if (isUndefined(props.dismissable) || props.dismissable === true) {
+const useClosable = ({
+  onClose,
+  closable
+}) => {
+  // convert closable to enum sets
+  const triggers = useMemo(() => {
+    if (isUndefined(closable) || closable === true) {
       return new Set(["close", "esc", "overlay"]);
     }
-    return new Set(props.dismissable || []);
-  }, [props.dismissable]);
-  /// closer for dialog
+    return new Set(closable || []);
+  }, [closable]);
+  // closer react element for dialog
   const closer = useMemo(() => {
-    if (!dismissable.has("close")) return null;
+    if (!triggers.has("close")) return null;
     const styled = {
       className: "musae-9c655z musae-6al1c1"
     };
@@ -29,7 +33,7 @@ const useDismissable = props => {
       shape: "circular",
       variant: "text",
       prefix: React.createElement(Close, null),
-      onClick: props.onClose,
+      onClick: onClose,
       className: styled.className,
       style: {
         ...styled.style,
@@ -37,16 +41,16 @@ const useDismissable = props => {
       },
       size: "small"
     });
-  }, [dismissable, props.onClose]);
+  }, [triggers, onClose]);
   /// overlay click callback
   const onOverlayClick = useEvent(() => {
-    if (!dismissable.has("overlay")) return;
-    props.onClose?.();
+    if (!triggers.has("overlay")) return;
+    onClose?.();
   });
   /// esc key press callback
   const onKeyDown = useEvent(e => {
     if (e.key !== Keyboard.Escape) return;
-    props.onClose?.();
+    onClose?.();
   });
   return {
     closer,
@@ -55,4 +59,4 @@ const useDismissable = props => {
   };
 };
 
-export { useDismissable };
+export { useClosable };

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export { Watermark } from "./components/watermark";
 export { Collapse } from "./components/collapse";
 export { FloatingActionButton } from "./components/floating-action-button";
 export { Transfer } from "./components/transfer";
+export { Badge } from "./components/badge";
+export { Skeleton } from "./components/skeleton";
 /**
  * @description
  * hooks

package/dist/index.js

@@ -47,6 +47,8 @@ export { default as Watermark } from './components/watermark/watermark.js';
 export { default as Collapse } from './components/collapse/collapse.js';
 export { default as FloatingActionButton } from './components/floating-action-button/floating-action-button.js';
 export { default as Transfer } from './components/transfer/transfer.js';
+export { default as Badge } from './components/badge/badge.js';
+export { default as Skeleton } from './components/skeleton/skeleton.js';
 export { useMessage } from './components/message/hooks.js';
 export { useNotification } from './components/notification/hooks.js';
 export { useTheme } from './components/theme/hooks.js';

package/dist/stylex.css

@@ -4,6 +4,7 @@
 :root{--musae-1vh8wei:1;--musae-11upij1:50;--musae-oqacdq:60;--musae-if0yew:990;--musae-9gpkaf:1080;--musae-80rspi:1080;--musae-ah5ngi:1080;--musae-ymrixl:1080;--musae-1tyqau6:1090;--musae-7fr0d6:1200;--musae-dlxqgz:9999;}
 :root{--musae-1wblvyz:0px;--musae-dojqt2:1px;--musae-1h5s2h0:2px;--musae-qk2ac7:4px;--musae-h30iw9:6px;--musae-vk5id6:8px;--musae-1ncxh3n:12px;--musae-oohzsl:16px;--musae-1tzp6vk:24px;--musae-15cw4i4:32px;--musae-1n7xs5j:48px;--musae-68a8pz:auto;}
 :root{--musae-gmufu8:none;--musae-15zostt:0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);--musae-1trg6py:0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);--musae-4poz8g:0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);--musae-1vq77kn:0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);--musae-1yt3x0a:0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);}
+@keyframes musae-1928g5l-B{from{background-position:100% 50%;}100%{background-position:0 50%;}}
 @keyframes musae-r5zuwi-B{from{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-110;}12%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-110;}20%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-115;}40%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-195;}48%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-220;}62%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-220;}70%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-225;}90%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-305;}98%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-330;}to{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-330;}}
 @keyframes musae-f6d5zf-B{from{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:0;}8%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-5;}28%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-175;}36%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}58%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}66%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-225;}86%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-395;}94%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}to{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}}
 @keyframes musae-60a50w-B{from{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:0;}8%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:0;}16%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-5;}36%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-175;}44%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}50%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}58%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-225;}78%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-395;}86%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}to{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}}
@@ -91,12 +92,15 @@
 .musae-1bdtpbn:not(#\#):not(#\#):not(#\#){align-items:var(--alignItems,revert)}
 .musae-amitd3:not(#\#):not(#\#):not(#\#){align-self:center}
 .musae-qcrz7y:not(#\#):not(#\#):not(#\#){align-self:flex-start}
+.musae-mg6eyc:not(#\#):not(#\#):not(#\#){animation-duration:1.5s}
 .musae-1c74tu6:not(#\#):not(#\#):not(#\#){animation-duration:2s}
 .musae-a4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
+.musae-9q1e4u:not(#\#):not(#\#):not(#\#){animation-name:musae-1928g5l-B}
 .musae-17fodkt:not(#\#):not(#\#):not(#\#){animation-name:musae-60a50w-B}
 .musae-wowzen:not(#\#):not(#\#):not(#\#){animation-name:musae-f6d5zf-B}
 .musae-1rxx6we:not(#\#):not(#\#):not(#\#){animation-name:musae-r5zuwi-B}
 .musae-1fnjvy4:not(#\#):not(#\#):not(#\#){animation-name:musae-rw80zm-B}
+.musae-1debuo4:not(#\#):not(#\#):not(#\#){animation-timing-function:ease}
 .musae-1esw782:not(#\#):not(#\#):not(#\#){animation-timing-function:linear}
 .musae-1plog1:not(#\#):not(#\#):not(#\#){aspect-ratio:1}
 .musae-1u5qhrl:not(#\#):not(#\#):not(#\#){background-color:#808080}
@@ -227,6 +231,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-1158fpu:not(#\#):not(#\#):not(#\#){transform:rotate(45deg)}
 .musae-1iffjtl:not(#\#):not(#\#):not(#\#){transform:rotate(90deg)}
 .musae-11lhmoz:not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}
+.musae-rycbv3:not(#\#):not(#\#):not(#\#){transform:translateX(50%) translateY(-50%)}
 .musae-1v0jg1i:not(#\#):not(#\#):not(#\#){transform:var(--transform,revert)}
 .musae-1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
 .musae-13dflua:not(#\#):not(#\#):not(#\#){transition-duration:.2s}
@@ -329,6 +334,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-13to73x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--minWidth,revert)}
 .musae-1fpxtso:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-11uhodo)}
 .musae-yumy05:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1aj7t22)}
+.musae-70jws7:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1l9c3uf)}
 .musae-h2iun8:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-1spnrok)}
 .musae-ba7gwn:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-cftog7)}
 .musae-1049mhy:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--musae-laggmb)}

package/dist/utils/class-name.d.ts

@@ -48,7 +48,10 @@ export declare enum ComponentToken {
     Loading = 36,
     Collapse = 37,
     Waterfall = 38,
-    Transfer = 39
+    Transfer = 39,
+    Badge = 40,
+    Skeleton = 41,
+    VisuallyHidden = 42
 }
 /**
  * @description
@@ -285,6 +288,17 @@ export declare enum TransferClassToken {
     Item = 5,
     Operation = 6
 }
+export declare enum BadgeClassToken {
+    Badge = 0,
+    Tail = 1
+}
+export declare enum SkeletonClassToken {
+    Skeleton = 0,
+    Circular = 1
+}
+export declare enum VisuallyHiddenClassToken {
+    VisuallyHidden = 0
+}
 /**
  * @description
  * class name collection
@@ -522,6 +536,17 @@ export declare const CLASS_NAMES: {
         2: string;
         4: string;
     };
+    40: {
+        0: string;
+        1: string;
+    };
+    41: {
+        0: string;
+        1: string;
+    };
+    42: {
+        0: string;
+    };
 };
 /**
  * @description
@@ -762,4 +787,15 @@ export declare const DEFAULT_CLASS_NAMES: {
         2: string;
         4: string;
     };
+    40: {
+        0: string;
+        1: string;
+    };
+    41: {
+        0: string;
+        1: string;
+    };
+    42: {
+        0: string;
+    };
 };

package/dist/utils/class-name.js

@@ -58,6 +58,9 @@ var ComponentToken;
     ComponentToken[ComponentToken["Collapse"] = 37] = "Collapse";
     ComponentToken[ComponentToken["Waterfall"] = 38] = "Waterfall";
     ComponentToken[ComponentToken["Transfer"] = 39] = "Transfer";
+    ComponentToken[ComponentToken["Badge"] = 40] = "Badge";
+    ComponentToken[ComponentToken["Skeleton"] = 41] = "Skeleton";
+    ComponentToken[ComponentToken["VisuallyHidden"] = 42] = "VisuallyHidden";
 })(ComponentToken || (ComponentToken = {}));
 /**
  * @description
@@ -334,6 +337,20 @@ var TransferClassToken;
     TransferClassToken[TransferClassToken["Item"] = 5] = "Item";
     TransferClassToken[TransferClassToken["Operation"] = 6] = "Operation";
 })(TransferClassToken || (TransferClassToken = {}));
+var BadgeClassToken;
+(function (BadgeClassToken) {
+    BadgeClassToken[BadgeClassToken["Badge"] = 0] = "Badge";
+    BadgeClassToken[BadgeClassToken["Tail"] = 1] = "Tail";
+})(BadgeClassToken || (BadgeClassToken = {}));
+var SkeletonClassToken;
+(function (SkeletonClassToken) {
+    SkeletonClassToken[SkeletonClassToken["Skeleton"] = 0] = "Skeleton";
+    SkeletonClassToken[SkeletonClassToken["Circular"] = 1] = "Circular";
+})(SkeletonClassToken || (SkeletonClassToken = {}));
+var VisuallyHiddenClassToken;
+(function (VisuallyHiddenClassToken) {
+    VisuallyHiddenClassToken[VisuallyHiddenClassToken["VisuallyHidden"] = 0] = "VisuallyHidden";
+})(VisuallyHiddenClassToken || (VisuallyHiddenClassToken = {}));
 /**
  * @description
  * class name collection
@@ -571,6 +588,17 @@ const CLASS_NAMES = {
         [TransferClassToken.Header]: "transfer__list-header",
         [TransferClassToken.Body]: "transfer__list-body",
     },
+    [ComponentToken.Badge]: {
+        [BadgeClassToken.Badge]: "badge",
+        [BadgeClassToken.Tail]: "badge__tail",
+    },
+    [ComponentToken.Skeleton]: {
+        [SkeletonClassToken.Skeleton]: "skeleton",
+        [SkeletonClassToken.Circular]: "skeleton--circular",
+    },
+    [ComponentToken.VisuallyHidden]: {
+        [VisuallyHiddenClassToken.VisuallyHidden]: "visually-hidden",
+    },
 };
 /**
  * @description
@@ -589,4 +617,4 @@ const addPrefix = (classNames, prefix) => {
  */
 const DEFAULT_CLASS_NAMES = addPrefix(CLASS_NAMES, Token.Prefix);
 
-export { AvatarClassToken, BreadcrumbClassToken, ButtonClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, CheckboxClassToken, ClockClassToken, CollapseClassToken, ComponentToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FormClassToken, GridClassToken, IconClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, RadioClassToken, RateClassToken, SelectClassToken, StepsClassToken, SwitchClassToken, TabsClassToken, TagClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TourClassToken, TransferClassToken, TreeClassToken, WaterfallClassToken, addPrefix, withPrefix };
+export { AvatarClassToken, BadgeClassToken, BreadcrumbClassToken, ButtonClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, CheckboxClassToken, ClockClassToken, CollapseClassToken, ComponentToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FormClassToken, GridClassToken, IconClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, RadioClassToken, RateClassToken, SelectClassToken, SkeletonClassToken, StepsClassToken, SwitchClassToken, TabsClassToken, TagClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TourClassToken, TransferClassToken, TreeClassToken, VisuallyHiddenClassToken, WaterfallClassToken, addPrefix, withPrefix };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -37,7 +37,6 @@
     "deepmerge": "^4.3.1",
     "framer-motion": "^11.2.11",
     "react-hook-form": "^7.47.0",
-    "rrweb": "2.0.0-alpha.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {

package/dist/hooks/use-dismissable.d.ts

@@ -1,18 +0,0 @@
-import React, { KeyboardEvent } from "react";
-export type Dismissable = "esc" | "overlay" | "close";
-/**
- * @description
- * for dialog, dismiss means some events or some elements
- * in musae, we use a hook to handle this
- *
- * by default, dismissable may be different type, like `false` | ['esc'] | undefined
- * resolve these types, we convert to `Set<Dismissable>`
- */
-export declare const useDismissable: (props: {
-    onClose?: VoidFunction;
-    dismissable: boolean | Dismissable[];
-}) => {
-    closer: React.JSX.Element | null;
-    onOverlayClick: () => void;
-    onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
-};