musae 0.2.2 → 0.2.4

package/dist/components/divider/divider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useOffset } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, DividerClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';

package/dist/components/drawer/popup.js

@@ -3,13 +3,13 @@ import { useAnimate } from 'framer-motion';
 import { PLACEMENTS } from './hooks.js';
 import { ComponentToken, DrawerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 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 { contains } from '../../node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.55_react-dom@18.3.1_react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   popup: {

package/dist/components/empty/empty.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, EmptyClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 

package/dist/components/form/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 export declare const CONTEXT_VALUE: Readonly<ContextValue>;
 declare const Context: import("react").Context<ContextValue>;

package/dist/components/form/field/field.d.ts

@@ -6,5 +6,5 @@ import type { RequiredIn } from "@aiszlab/relax/types";
  * form item may not has name prop
  * if there is name prop, it will render
  */
-declare const Field: ({ required, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
+declare const Field: ({ required, children: _children, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
 export default Field;

package/dist/components/form/field/field.js

@@ -2,7 +2,7 @@ import React, { useMemo, isValidElement, cloneElement } from 'react';
 import { useController } from 'react-hook-form';
 import { chain, isRefable } from '@aiszlab/relax';
 import { ComponentToken, FormClassToken } from '../../../utils/class-name.js';
-import { props } from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';
@@ -35,6 +35,7 @@ const styles = {
  */
 const Field = ({
   required,
+  children: _children,
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
@@ -61,25 +62,25 @@ const Field = ({
     }
   });
   const children = useMemo(() => {
-    const _isValidElement = isValidElement(props$1.children);
-    if (!_isValidElement) return props$1.children;
-    const _child = props$1.children;
+    const _isValidElement = isValidElement(_children);
+    if (!_isValidElement) return _children;
+    const _child = _children;
     /// rewrite change and blur handler
     const handlers = {
       onChange: chain(_child.props.onChange, onChange),
       onBlur: chain(_child.props.onBlur, onBlur)
     };
     /// registe react hook form
-    return cloneElement(props$1.children, {
+    return cloneElement(_children, {
       name,
       value,
       ...handlers,
       invalid,
-      ...(isRefable(props$1.children) && {
+      ...(isRefable(_children) && {
         ref
       })
     });
-  }, [props$1.children, name, value, invalid, ref, onChange, onBlur]);
+  }, [_children, name, value, invalid, ref, onChange, onBlur]);
   const styled = {
     error: props(styles.error({
       color: theme.colors[ColorToken.Error]

package/dist/components/form/field/layout.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Context from '../context.js';
 import { Grid } from '../../grid/index.js';
-import { props } from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../../theme/theme.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';

package/dist/components/grid/col.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   col: props => [{

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Grid: {
     Row: ({ align, children, gutter, justify, className, as: As, style }: import("./types").RowProps) => import("react").JSX.Element;
     Col: ({ children, className, span, as: As, style }: import("./types").ColProps) => import("react").JSX.Element;

package/dist/components/grid/row.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, GridClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 
 const styles = {

package/dist/components/icon/icon.js

@@ -2,7 +2,7 @@ import React, { useMemo, createElement } from 'react';
 import { isFunction } from '@aiszlab/relax';
 import { ComponentToken, IconClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 
 const styles = {
@@ -31,7 +31,7 @@ const Icon = ({
   const classNames = useClassNames(ComponentToken.Icon);
   const asProps = useMemo(() => {
     return {
-      size: size === "small" ? 12 : size === "large" ? 20 : size ?? 16
+      size: size === "small" ? 12 : size === "large" ? 20 : size === "medium" ? 16 : size ?? 16
     };
   }, [size]);
   const children = useMemo(() => {

package/dist/components/icon/icons/index.js

@@ -36,6 +36,7 @@ export { default as Cancel } from './navigation/cancel.js';
 export { default as Close } from './navigation/close.js';
 export { default as MoreHoriz } from './navigation/more-horiz.js';
 export { default as Check } from './navigation/check.js';
+export { default as UnfoldMore } from './navigation/unfold-more.js';
 export { default as Bedtime } from './image/bedtime.js';
 export { default as RotateLeft } from './image/rotate-left.js';
 export { default as RotateRight } from './image/rotate-right.js';

package/dist/components/icon/icons/navigation/index.d.ts

@@ -2,4 +2,5 @@ import Cancel from "./cancel";
 import MoreHoriz from "./more-horiz";
 import Close from "./close";
 import Check from "./check";
-export { Cancel, Close, MoreHoriz, Check };
+import UnfoldMore from "./unfold-more";
+export { Cancel, Close, MoreHoriz, Check, UnfoldMore };

package/dist/components/icon/icons/navigation/index.js

@@ -2,3 +2,4 @@ export { default as Cancel } from './cancel.js';
 export { default as MoreHoriz } from './more-horiz.js';
 export { default as Close } from './close.js';
 export { default as Check } from './check.js';
+export { default as UnfoldMore } from './unfold-more.js';

package/dist/components/icon/icons/navigation/unfold-more.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const UnfoldMore: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default UnfoldMore;

package/dist/components/icon/icons/navigation/unfold-more.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.js';
+
+const UnfoldMore = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M12 5.83L15.17 9L16.58 7.59L12 3L7.41003 7.59L8.83003 9L12 5.83ZM12 18.17L8.83003 15L7.42003 16.41L12 21L16.59 16.41L15.17 15L12 18.17Z", fill: "currentColor" })));
+});
+var UnfoldMore$1 = UnfoldMore;
+
+export { UnfoldMore$1 as default };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Image: (({ src, alt, width, height }: import("./types").ImageProps) => import("react").JSX.Element) & {
     Group: ({ children, items }: import("./types").PreviewGroupProps) => import("react").JSX.Element;
 };

package/dist/components/image/preview/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreviewGroupContextValue } from "../types";
 declare const PreviewGroupContext: import("react").Context<PreviewGroupContextValue | null>;
 export default PreviewGroupContext;

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import Portal from '../../portal/portal.js';
 import { useTheme } from '../../theme/hooks.js';
 import { ColorToken } from '../../../utils/colors.js';

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Dialog from '../../dialog/dialog.js';
 import Operations from './operations.js';
-import _stylex from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   image: props => [{

package/dist/components/input/input.d.ts

@@ -3,33 +3,33 @@ import type { InputProps, InputRef } from "./types";
 export declare const styles: Readonly<{
     readonly wrapper: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "flex">;
-        alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
-        cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "text">;
-        minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minHeight", string>;
-        minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minWidth", string>;
-        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
-        boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
-        margin: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"margin", string>;
-        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
-        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
-        transition: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transition", string>;
-        willChange: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"willChange", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        display: "flex";
+        alignItems: "center";
+        cursor: "text";
+        minHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        boxShadow: string;
+        margin: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXVar<string>;
+        transition: string;
+        willChange: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly flexible: Readonly<{
         readonly minWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"minWidth", null>;
     }>;
     readonly focused: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        boxShadow: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly invalid: (props: {
         outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", import("csstype").Property.BorderColor | undefined>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
+    }) => Readonly<[import("@stylexjs/stylex/lib/StyleXTypes").MapNamespace<{
+        boxShadow: string;
+    }>, import("@stylexjs/stylex/lib/StyleXTypes").InlineStyles]>;
     readonly input: Readonly<{
         readonly backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", "transparent">;
         readonly outline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"outline", string>;

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useWrapperEvents } from './hooks.js';
 import { useControlledState, useFocus } from '@aiszlab/relax';
 import { ComponentToken, InputClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -66,18 +66,10 @@ const styles = {
     "--boxShadow": `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` : "initial"
   }],
   invalid: props => [{
-    borderColor: "musae-eqt46j",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
+    boxShadow: "musae-igitpm",
     $$css: true
   }, {
-    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    "--boxShadow": `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.xxxxxxsmall} ${props.outlineColor}` : "initial"
   }],
   input: {
     backgroundColor: "musae-jbqb8w",

package/dist/components/layout/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from '../theme/hooks.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 

package/dist/components/layout/layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from '../grid/index.js';
 import { useChildren, ChildToken } from './hooks.js';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/layout/main.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MainProps } from "./types";
 declare const Main: ({ children }: MainProps) => import("react").ReactNode;
 export default Main;

package/dist/components/loading/loading.d.ts

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

package/dist/components/loading/loading.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
   circle: {
@@ -44,11 +49,55 @@ const styles = {
     width: "musae-1ha45ep",
     height: "musae-b4kbli",
     $$css: true
+  },
+  loading: {
+    position: "musae-1n2onr6",
+    minWidth: "musae-h2iun8",
+    minHeight: "musae-oexrxm",
+    $$css: true
+  },
+  content: props => [{
+    opacity: "musae-byyjgo",
+    userSelect: "musae-87ps6o",
+    pointerEvents: "musae-47corl",
+    transitionProperty: "musae-19991ni",
+    transitionDuration: "musae-1d8287x",
+    zIndex: "musae-1ja2u2z",
+    "::after_content": "musae-1s928wv",
+    "::after_display": "musae-hkezso",
+    "::after_position": "musae-1j6awrg",
+    "::after_inset": "musae-1799ia1",
+    "::after_insetInline": null,
+    "::after_insetInlineStart": null,
+    "::after_insetInlineEnd": null,
+    "::after_left": null,
+    "::after_right": null,
+    "::after_insetBlock": null,
+    "::after_top": null,
+    "::after_bottom": null,
+    "::after_backgroundColor": "musae-27d4w3",
+    $$css: true
+  }, {
+    "--15iyedw": props.backgroundColor != null ? props.backgroundColor : "initial"
+  }],
+  spin: {
+    position: "musae-10l6tqk",
+    top: "musae-wa60dl",
+    insetInlineStart: "musae-budbmw",
+    left: null,
+    right: null,
+    transform: "musae-11lhmoz",
+    zIndex: "musae-1vjfegm",
+    $$css: true
   }
 };
 const Loading = ({
-  size = "medium"
+  size = "medium",
+  overlay = true,
+  children
 }) => {
+  const classNames = useClassNames(ComponentToken.Loading);
+  const theme = useTheme();
   const circles = {
     top: {
       ...{
@@ -83,15 +132,31 @@ const Loading = ({
       r: "70"
     }
   };
-  return React.createElement("svg", {
+  const styled = {
+    loading: {
+      className: "musae-1n2onr6 musae-h2iun8 musae-oexrxm"
+    },
+    spin: props(styles.spin, styles[size]),
+    content: props(overlay && styles.content({
+      backgroundColor: theme.colors[ColorToken.SurfaceDim]
+    }))
+  };
+  return React.createElement("div", {
+    className: clsx(classNames[LoadingClassToken.Loading], styled.loading.className),
+    style: styled.loading.style
+  }, React.createElement("svg", {
     viewBox: "0 0 240 240",
-    ...props(styles[size])
+    className: clsx(classNames[LoadingClassToken.Spin], styled.spin.className),
+    style: styled.spin.style
   }, Array.from(Object.entries(circles)).map(([key, props]) => {
     return React.createElement("circle", {
       ...props,
       key: key
     });
-  }));
+  })), React.createElement("div", {
+    className: (classNames[LoadingClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children));
 };
 var Loading$1 = Loading;
 

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 type Size = "small" | "medium" | "large";
 /**
  * @author murukal
@@ -12,5 +13,17 @@ export interface LoadingProps {
      * @default "medium"
      */
     size?: Size;
+    /**
+     * @description
+     * overlay shown
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * @description
+     * children
+     * @default void 0
+     */
+    children?: ReactNode;
 }
 export {};

package/dist/components/menu/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContextValue } from "./types";
 /**
  * @author murukal

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

@@ -7,8 +7,8 @@ import React from "react";
  */
 declare const Group: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
     items: import("./types").MenuItem[];
-    level?: number | undefined;
-    expanded?: boolean | undefined;
+    level?: number;
+    expanded?: boolean;
     mode: import("./types").Mode;
 } & React.RefAttributes<HTMLUListElement>>;
 export default Group;

package/dist/components/menu/group.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import Item from './item.js';
 import { useMenuContext } from './hooks.js';
 import { useRefs } from '@aiszlab/relax';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useExpandEffect } from '../../hooks/use-expand-effect.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/menu/hooks.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useContext } from 'react';
 import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
 
 const styles = {

package/dist/components/menu/item.d.ts

@@ -10,7 +10,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<import("./types").MenuI
 } & import("../../types/element").ComponentProps & {
     value: React.Key;
     suffix?: React.ReactNode;
-    onClick?: ((key: React.Key) => void | Promise<void>) | undefined;
+    onClick?: import("./types").ContextValue["click"];
     children?: React.ReactNode;
     mode: import("./types").Mode;
 } & React.RefAttributes<HTMLLIElement>>;

package/dist/components/menu/item.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { sizes, spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/notification/holder.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.js';
 import { AnimatePresence } from 'framer-motion';
 import Notification from './notification.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 
 const styles = {

package/dist/components/notification/notification.js

@@ -1,4 +1,4 @@
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React, { useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.js';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type PaginationItems } from "./types";
 /**
  * @author murukal
@@ -13,8 +12,8 @@ export declare const usePagiantion: ({ total, siblings, boundaries, ...props }:
     pageSize: number;
 }) => {
     paginationItems: PaginationItems;
-    add: (step?: number | undefined) => void;
-    subtract: (step?: number | undefined) => void;
+    add: (step?: number) => void;
+    subtract: (step?: number) => void;
     changePage: import("react").Dispatch<import("react").SetStateAction<number>>;
     page: number;
     hasPrev: boolean;

package/dist/components/picker/context.d.ts

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

package/dist/components/picker/picker.js

@@ -4,7 +4,7 @@ import { useBoolean, chain, useFocus } from '@aiszlab/relax';
 import { useEvents } from './hooks.js';
 import { ComponentToken, PickerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/popover/popover.js

@@ -1,7 +1,7 @@
 import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus } from '@aiszlab/relax';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, PopoverClassToken } from '../../utils/class-name.js';

package/dist/components/popper/dropdown.js

@@ -1,7 +1,7 @@
 import React, { useRef, useMemo, useEffect } from 'react';
 import { ComponentToken, PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { isFunction } from '@aiszlab/relax';
 import { autoUpdate, computePosition, flip, offset, arrow } from '@floating-ui/dom';

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

@@ -7,7 +7,7 @@ export declare const useOffsets: ({ offset, arrowable }: {
     offset: PopperProps["offset"];
     arrowable: boolean;
 }) => {
-    mainAxis?: number | undefined;
-    crossAxis?: number | undefined;
-    alignmentAxis?: number | null | undefined;
+    mainAxis?: number;
+    crossAxis?: number;
+    alignmentAxis?: number | null;
 };