musae 0.2.8 → 0.2.10

package/dist/components/popper/dropdown.js

@@ -1,9 +1,9 @@
-import React, { useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useLayoutEffect } from 'react';
 import { ComponentToken, PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
-import { isFunction } from '@aiszlab/relax';
+import { useRefs, isFunction } from '@aiszlab/relax';
 import { autoUpdate, computePosition, flip, offset, arrow } from '@floating-ui/dom';
 import { useOffsets } from './hooks.js';
 import { useTheme } from '../theme/hooks.js';
@@ -54,7 +54,7 @@ const styles = {
     }]
   }
 };
-const Dropdown = ({
+const Dropdown = forwardRef(({
   open,
   children,
   placement,
@@ -68,11 +68,12 @@ const Dropdown = ({
   overlay = false,
   arrow: arrowable = false,
   ...props$1
-}) => {
-  const [floatable, animate] = useAnimate();
+}, ref) => {
+  const [_floatable, animate] = useAnimate();
   const arrowRef = useRef(null);
   const classNames = useClassNames(ComponentToken.Popper);
   const theme = useTheme();
+  const floatable = useRefs(_floatable, ref);
   /// how to get trigger
   const trigger = useMemo(() => {
     if (!open) return null;
@@ -86,10 +87,10 @@ const Dropdown = ({
   });
   /// auto update: calc trigger dom to get position
   /// if trigger changed, re-relate
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!trigger) return;
-    const cleanup = autoUpdate(trigger, floatable.current, () => {
-      computePosition(trigger, floatable.current, {
+    const cleanup = autoUpdate(trigger, _floatable.current, () => {
+      computePosition(trigger, _floatable.current, {
         placement: placement,
         middleware: [flip(), offset(offsets), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
@@ -103,7 +104,7 @@ const Dropdown = ({
       }) => {
         const [side] = _placement.split("-");
         // set float element styles
-        floatable.current.style.translate = `${x}px ${y}px`;
+        _floatable.current.style.translate = `${x}px ${y}px`;
         // set arrwo styles
         if (middlewareData.arrow && !!arrowRef.current) {
           const offsetY = `${middlewareData.arrow.y ?? 0 - 8}px`;
@@ -119,19 +120,11 @@ const Dropdown = ({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [placement, trigger, offsets, arrowable]);
-  const styled = {
-    dropdown: props(styles.dropdown.default({
-      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
-    }), overlay && styles.dropdown.overlay),
-    arrow: props(styles.arrow.default({
-      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
-    }))
-  };
-  useEffect(() => {
+  useLayoutEffect(() => {
     (async () => {
       if (open) {
-        floatable.current.style.display = "";
-        await animate(floatable.current, {
+        _floatable.current.style.display = "";
+        await animate(_floatable.current, {
           opacity: 1,
           transform: "scale(1, 1)"
         }, {
@@ -141,19 +134,27 @@ const Dropdown = ({
         await onEntered?.();
         return;
       }
-      await Promise.all([onExit?.(), animate(floatable.current, {
+      await Promise.all([onExit?.(), animate(_floatable.current, {
         opacity: 0,
         transform: "scale(0, 0)"
       }, {
         delay: 0.1,
         duration: 0.2
       }).then(() => {
-        floatable.current.style.display = "none";
+        _floatable.current.style.display = "none";
       })]);
       onExited?.();
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
+  const styled = {
+    dropdown: props(styles.dropdown.default({
+      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
+    }), overlay && styles.dropdown.overlay),
+    arrow: props(styles.arrow.default({
+      backgroundColor: theme.colors[ColorToken.SurfaceContainer]
+    }))
+  };
   return React.createElement("div", {
     ref: floatable,
     ...props$1,
@@ -167,6 +168,6 @@ const Dropdown = ({
     className: styled.arrow.className,
     style: styled.arrow.style
   }));
-};
+});
 
 export { Dropdown as default };

package/dist/components/popper/popper.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopperProps } from "./types";
-declare const Popper: ({ destroyable, placement, ...props }: PopperProps) => React.JSX.Element;
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/dist/components/popper/popper.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Portal from '../portal/portal.js';
 import Dropdown from './dropdown.js';
 
-const Popper = ({ destroyable, placement = "bottom-start", ...props }) => {
+const Popper = forwardRef(({ destroyable, placement = "bottom-start", ...props }, ref) => {
     return (React.createElement(Portal, { open: props.open, destroyable: destroyable },
-        React.createElement(Dropdown, { ...props, placement: placement })));
-};
+        React.createElement(Dropdown, { ...props, placement: placement, ref: ref })));
+});
 
 export { Popper as default };

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/tree/hooks.d.ts

@@ -4,7 +4,11 @@ import type { TreeProps } from "./types";
  * @description
  * expanded keys
  */
-export declare const useExpandedKeys: ([expandedKeys, onExpand]: [TreeProps["expandedKeys"], TreeProps["onExpand"]]) => {
+export declare const useExpandedKeys: ({ expandedKeys, onExpand, defaultExpandedKeys, }: {
+    expandedKeys?: Key[];
+    onExpand: TreeProps["onExpand"];
+    defaultExpandedKeys: Key[];
+}) => {
     expandedKeys: Set<Key>;
     toggle: (key: Key) => void;
 };
@@ -12,8 +16,10 @@ export declare const useExpandedKeys: ([expandedKeys, onExpand]: [TreeProps["exp
  * @description
  * selected keys
  */
-export declare const useSelectedKeys: ({ selectedKeys: _selectedKeys }: {
+export declare const useSelectedKeys: ({ selectedKeys: _selectedKeys, defaultSelectedKeys, onSelect, }: {
     selectedKeys?: Key[];
+    defaultSelectedKeys: Key[];
+    onSelect?: (key: Key) => void;
 }) => {
     selectedKeys: Set<Key>;
     toggle: (key: Key) => void;

package/dist/components/tree/hooks.js

@@ -5,14 +5,14 @@ import { useMemo, useCallback } from 'react';
  * @description
  * expanded keys
  */
-const useExpandedKeys = ([expandedKeys, onExpand]) => {
-    const [_expandedKeys, _setExpandedKeys] = useControlledState(expandedKeys);
+const useExpandedKeys = ({ expandedKeys, onExpand, defaultExpandedKeys, }) => {
+    const [_expandedKeys, _setExpandedKeys] = useControlledState(expandedKeys, { defaultState: defaultExpandedKeys });
     const readableExpandedKeys = useMemo(() => new Set(_expandedKeys), [_expandedKeys]);
     const toggle = useCallback((key) => {
         // deal expanding key
-        const readableExpandingKeys = new Set(_expandedKeys);
-        readableExpandingKeys.has(key) ? readableExpandingKeys.delete(key) : readableExpandingKeys.add(key);
-        const expandingKeys = Array.from(readableExpandingKeys);
+        const _keys = new Set(_expandedKeys);
+        _keys.has(key) ? _keys.delete(key) : _keys.add(key);
+        const expandingKeys = Array.from(_keys);
         // change inner state
         // emit change handler
         _setExpandedKeys(expandingKeys);
@@ -27,16 +27,15 @@ const useExpandedKeys = ([expandedKeys, onExpand]) => {
  * @description
  * selected keys
  */
-const useSelectedKeys = ({ selectedKeys: _selectedKeys }) => {
-    const [selectedKeys, setSelectedKeys] = useControlledState(_selectedKeys);
-    const __selectedKeys = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+const useSelectedKeys = ({ selectedKeys: _selectedKeys, defaultSelectedKeys, onSelect, }) => {
+    const [selectedKeys, setSelectedKeys] = useControlledState(_selectedKeys, { defaultState: defaultSelectedKeys });
+    const readableSelectedKeys = useMemo(() => new Set(selectedKeys), [selectedKeys]);
     const toggle = useEvent((key) => {
-        setSelectedKeys(() => {
-            return Array.from([key]);
-        });
+        setSelectedKeys(() => [key]);
+        onSelect?.(key);
     });
     return {
-        selectedKeys: __selectedKeys,
+        selectedKeys: readableSelectedKeys,
         toggle,
     };
 };

package/dist/components/tree/node.js

@@ -41,6 +41,7 @@ const styles = {
     transitionProperty: null,
     transitionTimingFunction: null,
     transform: "musae-1v0jg1i",
+    userSelect: "musae-87ps6o",
     $$css: true
   }, {
     "--transform": (props.isExpanded ? "rotate(90deg)" : null) != null ? props.isExpanded ? "rotate(90deg)" : null : "initial"
@@ -62,12 +63,17 @@ const styles = {
     borderBottomRightRadius: null,
     backgroundColor: "musae-8hsaj5 musae-rl4t6d",
     color: "musae-19dipnz",
+    cursor: "musae-t0e3qv",
     $$css: true
   }, {
     "--bcbnzo": (props.isSelected ? props.backgroundColor : null) != null ? props.isSelected ? props.backgroundColor : null : "initial",
     "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
     "--color": (props.isSelected ? props.color : null) != null ? props.isSelected ? props.color : null : "initial"
-  }]
+  }],
+  selectable: {
+    cursor: "musae-1ypdohk",
+    $$css: true
+  }
 };
 const Node = ({
   value,
@@ -98,7 +104,7 @@ const Node = ({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer],
       hoveredBackgroundColor: theme.colors[ColorToken.SurfaceContainer],
       color: theme.colors[ColorToken.Primary]
-    })),
+    }), selectable && styles.selectable),
     expander: props(styles.expander({
       isExpanded
     }))

package/dist/components/tree/tree.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TreeProps } from "./types";
-declare const Tree: ({ expandedKeys: _expandedKeys, onExpand, className, style, nodes, selectable, selectedKeys: _selectedKeys, }: TreeProps) => React.JSX.Element;
+declare const Tree: ({ className, style, nodes, selectable, expandedKeys: _expandedKeys, selectedKeys: _selectedKeys, checkedKeys: _checkedKeys, defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, onExpand, onSelect, onCheck, }: TreeProps) => React.JSX.Element;
 export default Tree;

package/dist/components/tree/tree.js

@@ -4,10 +4,22 @@ import Context from './context.js';
 import { useTogglable } from '@aiszlab/relax';
 import { useExpandedKeys, useSelectedKeys } from './hooks.js';
 
-const Tree = ({ expandedKeys: _expandedKeys, onExpand, className, style, nodes, selectable = true, selectedKeys: _selectedKeys, }) => {
-    const { toggledKeys: checkedKeys, toggle: check } = useTogglable(nodes);
-    const { expandedKeys, toggle: expand } = useExpandedKeys([_expandedKeys, onExpand]);
-    const { selectedKeys, toggle: select } = useSelectedKeys({ selectedKeys: _selectedKeys });
+const Tree = ({ className, style, nodes, selectable = true, expandedKeys: _expandedKeys, selectedKeys: _selectedKeys, checkedKeys: _checkedKeys, defaultExpandedKeys = [], defaultSelectedKeys = [], defaultCheckedKeys = [], onExpand, onSelect, onCheck, }) => {
+    const { toggledKeys: checkedKeys, toggle: check } = useTogglable(nodes, {
+        defaultToggledKeys: defaultCheckedKeys,
+        toggledKeys: _checkedKeys,
+        onToggle: onCheck,
+    });
+    const { expandedKeys, toggle: expand } = useExpandedKeys({
+        expandedKeys: _expandedKeys,
+        onExpand,
+        defaultExpandedKeys,
+    });
+    const { selectedKeys, toggle: select } = useSelectedKeys({
+        selectedKeys: _selectedKeys,
+        defaultSelectedKeys,
+        onSelect,
+    });
     const contextValue = useMemo(() => {
         return {
             checkedKeys,

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

@@ -38,6 +38,12 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     expandedKeys?: Key[];
+    /**
+     * @description
+     * default expanded keys
+     * @default []
+     */
+    defaultExpandedKeys?: Key[];
     /**
      * @description
      * expand handler
@@ -56,6 +62,36 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     selectedKeys?: Key[];
+    /**
+     * @description
+     * default selected keys
+     * @default []
+     */
+    defaultSelectedKeys?: Key[];
+    /**
+     * @description
+     * select handler
+     * @default void 0
+     */
+    onSelect?: (key: Key) => void;
+    /**
+     * @description
+     * checked keys
+     * @default void 0
+     */
+    checkedKeys?: Key[];
+    /**
+     * @description
+     * default checked keys
+     * @default []
+     */
+    defaultCheckedKeys?: Key[];
+    /**
+     * @description
+     * check handler
+     * @default void 0
+     */
+    onCheck?: (keys: Key[]) => void;
 };
 /**
  * @description

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';