asterui 0.12.42 → 0.12.44

package/dist/components/Button.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+export declare const IconSizeContext: React.Context<"xs" | "sm" | "md" | "lg" | "xl" | undefined>;
 type BaseButtonProps = {
     /** Button color */
     color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral';

package/dist/components/Button.js

@@ -1,21 +1,22 @@
-import { jsx as o, jsxs as F, Fragment as I } from "react/jsx-runtime";
-const J = ({
-  children: s,
-  color: y,
-  variant: c,
-  size: p = "md",
-  active: C = !1,
-  loading: n = !1,
-  shape: i,
-  noAnimation: k = !1,
-  icon: a,
-  iconPosition: l = "start",
-  danger: x = !1,
+import { jsx as r, jsxs as I, Fragment as E } from "react/jsx-runtime";
+import { createContext as F } from "react";
+const $ = F(void 0), Q = ({
+  children: a,
+  color: p,
+  variant: i,
+  size: c = "md",
+  active: x = !1,
+  loading: t = !1,
+  shape: d,
+  noAnimation: C = !1,
+  icon: l,
+  iconPosition: n = "start",
+  danger: k = !1,
   pressed: b,
-  className: w = "",
-  ...r
+  className: v = "",
+  ...o
 }) => {
-  const d = x ? "error" : y, D = {
+  const m = k ? "error" : p, g = {
     primary: "btn-primary",
     secondary: "btn-secondary",
     accent: "btn-accent",
@@ -24,7 +25,7 @@ const J = ({
     warning: "btn-warning",
     error: "btn-error",
     neutral: "btn-neutral"
-  }, v = {
+  }, w = {
     solid: "",
     // default, no extra class needed
     outline: "btn-outline",
@@ -32,13 +33,13 @@ const J = ({
     soft: "btn-soft",
     ghost: "btn-ghost",
     link: "btn-link"
-  }, g = {
+  }, D = {
     xs: "btn-xs",
     sm: "btn-sm",
     md: "",
     lg: "btn-lg",
     xl: "btn-xl"
-  }, K = {
+  }, B = {
     square: "btn-square",
     circle: "btn-circle",
     wide: "btn-wide",
@@ -46,61 +47,68 @@ const J = ({
     round: "rounded-full"
   }, u = [
     "btn",
-    d && D[d],
-    c && v[c],
-    g[p],
-    C && "btn-active",
-    i && K[i],
-    k && "no-animation",
-    w
-  ].filter(Boolean).join(" "), N = s != null && s !== "" ? l === "start" ? "mr-2" : "ml-2" : "", f = a && /* @__PURE__ */ o("span", { className: `inline-flex items-center ${N}`, "aria-hidden": "true", children: a }), h = /* @__PURE__ */ F(I, { children: [
-    n && /* @__PURE__ */ o("span", { className: "loading loading-spinner", "aria-hidden": "true" }),
-    !n && a && l === "start" && f,
-    s,
-    !n && a && l === "end" && f
+    m && g[m],
+    i && w[i],
+    D[c],
+    x && "btn-active",
+    d && B[d],
+    C && "no-animation",
+    v
+  ].filter(Boolean).join(" "), K = a != null && a !== "" ? {
+    xs: n === "start" ? "mr-1" : "ml-1",
+    sm: n === "start" ? "mr-1" : "ml-1",
+    md: n === "start" ? "mr-1.5" : "ml-1.5",
+    lg: n === "start" ? "mr-2" : "ml-2",
+    xl: n === "start" ? "mr-2" : "ml-2"
+  }[c] : "", f = l && /* @__PURE__ */ r($.Provider, { value: c, children: /* @__PURE__ */ r("span", { className: `inline-flex items-center ${K}`, "aria-hidden": "true", children: l }) }), h = /* @__PURE__ */ I(E, { children: [
+    t && /* @__PURE__ */ r("span", { className: "loading loading-spinner", "aria-hidden": "true" }),
+    !t && l && n === "start" && f,
+    a,
+    !t && l && n === "end" && f
   ] });
-  if ("href" in r && r.href !== void 0) {
-    const { href: j, disabled: q, onKeyDown: B, onClick: z, ...E } = r, e = q || n;
-    return /* @__PURE__ */ o(
+  if ("href" in o && o.href !== void 0) {
+    const { href: S, disabled: T, onKeyDown: j, onClick: q, ...z } = o, s = T || t;
+    return /* @__PURE__ */ r(
       "a",
       {
-        href: e ? void 0 : j,
+        href: s ? void 0 : S,
         role: "button",
         className: u,
-        "aria-disabled": e || void 0,
-        "aria-busy": n || void 0,
+        "aria-disabled": s || void 0,
+        "aria-busy": t || void 0,
         "aria-pressed": b,
-        tabIndex: e ? -1 : 0,
-        onKeyDown: (t) => {
-          t.key === " " && !e && (t.preventDefault(), t.currentTarget.click()), B?.(t);
+        tabIndex: s ? -1 : 0,
+        onKeyDown: (e) => {
+          e.key === " " && !s && (e.preventDefault(), e.currentTarget.click()), j?.(e);
         },
-        onClick: (t) => {
-          if (e) {
-            t.preventDefault();
+        onClick: (e) => {
+          if (s) {
+            e.preventDefault();
             return;
           }
-          z?.(t);
+          q?.(e);
         },
-        ...E,
+        ...z,
         children: h
       }
     );
   }
-  const { htmlType: T, ...m } = r;
-  return /* @__PURE__ */ o(
+  const { htmlType: N, ...y } = o;
+  return /* @__PURE__ */ r(
     "button",
     {
-      type: T ?? "button",
+      type: N ?? "button",
       className: u,
-      "aria-busy": n || void 0,
+      "aria-busy": t || void 0,
       "aria-pressed": b,
-      disabled: n || m.disabled,
-      ...m,
+      disabled: t || y.disabled,
+      ...y,
       children: h
     }
   );
 };
 export {
-  J as Button
+  Q as Button,
+  $ as IconSizeContext
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React from 'react'\n\ntype BaseButtonProps = {\n  /** Button color */\n  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'\n  /** Button style variant */\n  variant?: 'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'\n  /** Button size */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Active/pressed visual state */\n  active?: boolean\n  /** Show loading spinner and disable button */\n  loading?: boolean\n  /** Button shape */\n  shape?: 'square' | 'circle' | 'wide' | 'block' | 'round'\n  /** Disable click animation */\n  noAnimation?: boolean\n  /** Icon element to display */\n  icon?: React.ReactNode\n  /** Position of the icon */\n  iconPosition?: 'start' | 'end'\n  /** Applies error/danger styling (shorthand for color=\"error\") */\n  danger?: boolean\n  /** Toggle button pressed state (sets aria-pressed) */\n  pressed?: boolean\n}\n\ntype ButtonAsButton = BaseButtonProps &\n  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {\n    href?: undefined\n    htmlType?: 'button' | 'submit' | 'reset'\n  }\n\ntype ButtonAsAnchor = BaseButtonProps &\n  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {\n    href: string\n    htmlType?: undefined\n    /** Disable the link button */\n    disabled?: boolean\n  }\n\nexport type ButtonProps = ButtonAsButton | ButtonAsAnchor\n\nexport const Button: React.FC<ButtonProps> = ({\n  children,\n  color,\n  variant,\n  size = 'md',\n  active = false,\n  loading = false,\n  shape,\n  noAnimation = false,\n  icon,\n  iconPosition = 'start',\n  danger = false,\n  pressed,\n  className = '',\n  ...props\n}) => {\n  // danger prop is a shorthand for color=\"error\"\n  const effectiveColor = danger ? 'error' : color\n\n  const colorClasses = {\n    primary: 'btn-primary',\n    secondary: 'btn-secondary',\n    accent: 'btn-accent',\n    info: 'btn-info',\n    success: 'btn-success',\n    warning: 'btn-warning',\n    error: 'btn-error',\n    neutral: 'btn-neutral',\n  }\n\n  const variantClasses = {\n    solid: '', // default, no extra class needed\n    outline: 'btn-outline',\n    dash: 'btn-dash',\n    soft: 'btn-soft',\n    ghost: 'btn-ghost',\n    link: 'btn-link',\n  }\n\n  const sizeClasses = {\n    xs: 'btn-xs',\n    sm: 'btn-sm',\n    md: '',\n    lg: 'btn-lg',\n    xl: 'btn-xl',\n  }\n\n  const shapeClasses = {\n    square: 'btn-square',\n    circle: 'btn-circle',\n    wide: 'btn-wide',\n    block: 'btn-block',\n    round: 'rounded-full',\n  }\n\n  const classes = [\n    'btn',\n    effectiveColor && colorClasses[effectiveColor],\n    variant && variantClasses[variant],\n    sizeClasses[size],\n    active && 'btn-active',\n    shape && shapeClasses[shape],\n    noAnimation && 'no-animation',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Determine icon spacing based on whether there's text content\n  const hasChildren = children !== undefined && children !== null && children !== ''\n  const iconSpacing = hasChildren ? (iconPosition === 'start' ? 'mr-2' : 'ml-2') : ''\n\n  const iconElement = icon && (\n    <span className={`inline-flex items-center ${iconSpacing}`} aria-hidden=\"true\">\n      {icon}\n    </span>\n  )\n\n  const content = (\n    <>\n      {loading && <span className=\"loading loading-spinner\" aria-hidden=\"true\"></span>}\n      {!loading && icon && iconPosition === 'start' && iconElement}\n      {children}\n      {!loading && icon && iconPosition === 'end' && iconElement}\n    </>\n  )\n\n  if ('href' in props && props.href !== undefined) {\n    const { href, disabled, onKeyDown, onClick, ...anchorProps } = props as ButtonAsAnchor & {\n      onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>\n      onClick?: React.MouseEventHandler<HTMLAnchorElement>\n    }\n    const isDisabled = disabled || loading\n\n    // Handle Space key for anchor buttons (links only respond to Enter natively)\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n      if (event.key === ' ' && !isDisabled) {\n        event.preventDefault()\n        event.currentTarget.click()\n      }\n      onKeyDown?.(event)\n    }\n\n    // Prevent click when disabled\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onClick?.(event)\n    }\n\n    return (\n      <a\n        href={isDisabled ? undefined : href}\n        role=\"button\"\n        className={classes}\n        aria-disabled={isDisabled || undefined}\n        aria-busy={loading || undefined}\n        aria-pressed={pressed}\n        tabIndex={isDisabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        {...anchorProps}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  const { htmlType, ...buttonProps } = props as Omit<ButtonAsButton, keyof BaseButtonProps>\n  const buttonType: 'button' | 'submit' | 'reset' = htmlType ?? 'button'\n  return (\n    <button\n      type={buttonType}\n      className={classes}\n      aria-busy={loading || undefined}\n      aria-pressed={pressed}\n      disabled={loading || buttonProps.disabled}\n      {...buttonProps}\n    >\n      {content}\n    </button>\n  )\n}\n"],"names":["Button","children","color","variant","size","active","loading","shape","noAnimation","icon","iconPosition","danger","pressed","className","props","effectiveColor","colorClasses","variantClasses","sizeClasses","shapeClasses","classes","iconSpacing","iconElement","jsx","content","jsxs","Fragment","href","disabled","onKeyDown","onClick","anchorProps","isDisabled","event","htmlType","buttonProps"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React, { createContext } from 'react'\n\nexport const IconSizeContext = createContext<'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined>(undefined)\n\ntype BaseButtonProps = {\n  /** Button color */\n  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'\n  /** Button style variant */\n  variant?: 'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'\n  /** Button size */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Active/pressed visual state */\n  active?: boolean\n  /** Show loading spinner and disable button */\n  loading?: boolean\n  /** Button shape */\n  shape?: 'square' | 'circle' | 'wide' | 'block' | 'round'\n  /** Disable click animation */\n  noAnimation?: boolean\n  /** Icon element to display */\n  icon?: React.ReactNode\n  /** Position of the icon */\n  iconPosition?: 'start' | 'end'\n  /** Applies error/danger styling (shorthand for color=\"error\") */\n  danger?: boolean\n  /** Toggle button pressed state (sets aria-pressed) */\n  pressed?: boolean\n}\n\ntype ButtonAsButton = BaseButtonProps &\n  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {\n    href?: undefined\n    htmlType?: 'button' | 'submit' | 'reset'\n  }\n\ntype ButtonAsAnchor = BaseButtonProps &\n  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {\n    href: string\n    htmlType?: undefined\n    /** Disable the link button */\n    disabled?: boolean\n  }\n\nexport type ButtonProps = ButtonAsButton | ButtonAsAnchor\n\nexport const Button: React.FC<ButtonProps> = ({\n  children,\n  color,\n  variant,\n  size = 'md',\n  active = false,\n  loading = false,\n  shape,\n  noAnimation = false,\n  icon,\n  iconPosition = 'start',\n  danger = false,\n  pressed,\n  className = '',\n  ...props\n}) => {\n  // danger prop is a shorthand for color=\"error\"\n  const effectiveColor = danger ? 'error' : color\n\n  const colorClasses = {\n    primary: 'btn-primary',\n    secondary: 'btn-secondary',\n    accent: 'btn-accent',\n    info: 'btn-info',\n    success: 'btn-success',\n    warning: 'btn-warning',\n    error: 'btn-error',\n    neutral: 'btn-neutral',\n  }\n\n  const variantClasses = {\n    solid: '', // default, no extra class needed\n    outline: 'btn-outline',\n    dash: 'btn-dash',\n    soft: 'btn-soft',\n    ghost: 'btn-ghost',\n    link: 'btn-link',\n  }\n\n  const sizeClasses = {\n    xs: 'btn-xs',\n    sm: 'btn-sm',\n    md: '',\n    lg: 'btn-lg',\n    xl: 'btn-xl',\n  }\n\n  const shapeClasses = {\n    square: 'btn-square',\n    circle: 'btn-circle',\n    wide: 'btn-wide',\n    block: 'btn-block',\n    round: 'rounded-full',\n  }\n\n  const classes = [\n    'btn',\n    effectiveColor && colorClasses[effectiveColor],\n    variant && variantClasses[variant],\n    sizeClasses[size],\n    active && 'btn-active',\n    shape && shapeClasses[shape],\n    noAnimation && 'no-animation',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Determine icon spacing based on whether there's text content and button size\n  const hasChildren = children !== undefined && children !== null && children !== ''\n  const spacingBySize = {\n    xs: iconPosition === 'start' ? 'mr-1' : 'ml-1',\n    sm: iconPosition === 'start' ? 'mr-1' : 'ml-1',\n    md: iconPosition === 'start' ? 'mr-1.5' : 'ml-1.5',\n    lg: iconPosition === 'start' ? 'mr-2' : 'ml-2',\n    xl: iconPosition === 'start' ? 'mr-2' : 'ml-2',\n  }\n  const iconSpacing = hasChildren ? spacingBySize[size] : ''\n\n  const iconElement = icon && (\n    <IconSizeContext.Provider value={size}>\n      <span className={`inline-flex items-center ${iconSpacing}`} aria-hidden=\"true\">\n        {icon}\n      </span>\n    </IconSizeContext.Provider>\n  )\n\n  const content = (\n    <>\n      {loading && <span className=\"loading loading-spinner\" aria-hidden=\"true\"></span>}\n      {!loading && icon && iconPosition === 'start' && iconElement}\n      {children}\n      {!loading && icon && iconPosition === 'end' && iconElement}\n    </>\n  )\n\n  if ('href' in props && props.href !== undefined) {\n    const { href, disabled, onKeyDown, onClick, ...anchorProps } = props as ButtonAsAnchor & {\n      onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>\n      onClick?: React.MouseEventHandler<HTMLAnchorElement>\n    }\n    const isDisabled = disabled || loading\n\n    // Handle Space key for anchor buttons (links only respond to Enter natively)\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n      if (event.key === ' ' && !isDisabled) {\n        event.preventDefault()\n        event.currentTarget.click()\n      }\n      onKeyDown?.(event)\n    }\n\n    // Prevent click when disabled\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onClick?.(event)\n    }\n\n    return (\n      <a\n        href={isDisabled ? undefined : href}\n        role=\"button\"\n        className={classes}\n        aria-disabled={isDisabled || undefined}\n        aria-busy={loading || undefined}\n        aria-pressed={pressed}\n        tabIndex={isDisabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        {...anchorProps}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  const { htmlType, ...buttonProps } = props as Omit<ButtonAsButton, keyof BaseButtonProps>\n  const buttonType: 'button' | 'submit' | 'reset' = htmlType ?? 'button'\n  return (\n    <button\n      type={buttonType}\n      className={classes}\n      aria-busy={loading || undefined}\n      aria-pressed={pressed}\n      disabled={loading || buttonProps.disabled}\n      {...buttonProps}\n    >\n      {content}\n    </button>\n  )\n}\n"],"names":["IconSizeContext","createContext","Button","children","color","variant","size","active","loading","shape","noAnimation","icon","iconPosition","danger","pressed","className","props","effectiveColor","colorClasses","variantClasses","sizeClasses","shapeClasses","classes","iconSpacing","iconElement","jsx","content","jsxs","Fragment","href","disabled","onKeyDown","onClick","anchorProps","isDisabled","event","htmlType","buttonProps"],"mappings":"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"}

package/dist/components/ContextMenu.d.ts

@@ -21,8 +21,6 @@ export interface ContextMenuProps {
     className?: string;
 }
 export interface ContextMenuItemProps {
-    /** Unique key for the item */
-    itemKey: string;
     /** Item content */
     children: React.ReactNode;
     /** Icon to display before label */
@@ -33,14 +31,14 @@ export interface ContextMenuItemProps {
     danger?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /** @internal */
+    _key?: string;
 }
 export interface ContextMenuDividerProps {
     /** Additional CSS classes */
     className?: string;
 }
 export interface ContextMenuSubMenuProps {
-    /** Unique key for the submenu */
-    itemKey: string;
     /** Submenu label */
     label: React.ReactNode;
     /** Icon to display before label */
@@ -51,6 +49,8 @@ export interface ContextMenuSubMenuProps {
     children: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /** @internal */
+    _key?: string;
 }
 export declare const ContextMenu: React.FC<ContextMenuProps> & {
     Item: React.FC<ContextMenuItemProps>;

package/dist/components/ContextMenu.js

@@ -1,25 +1,25 @@
-import { jsxs as b, Fragment as P, jsx as n } from "react/jsx-runtime";
-import T, { useState as g, useRef as C, useCallback as M, useEffect as N, createContext as W, useContext as z } from "react";
-import { createPortal as B } from "react-dom";
-const E = W(null), I = () => {
-  const e = z(E);
+import { jsxs as b, Fragment as B, jsx as n } from "react/jsx-runtime";
+import C, { useState as g, useRef as y, useCallback as M, useEffect as E, createContext as I, useContext as K } from "react";
+import { createPortal as V } from "react-dom";
+const L = I(null), A = () => {
+  const e = K(L);
   if (!e)
     throw new Error("ContextMenu compound components must be used within a ContextMenu");
   return e;
-}, A = ({
-  itemKey: e,
-  children: u,
-  icon: l,
+}, S = ({
+  children: e,
+  icon: c,
   disabled: s = !1,
   danger: d = !1,
-  className: o = ""
+  className: h = "",
+  _key: l
 }) => {
-  const { onSelect: h, onClose: t } = I();
-  return /* @__PURE__ */ n("li", { className: o, children: /* @__PURE__ */ b(
+  const { onSelect: m, onClose: o } = A();
+  return /* @__PURE__ */ n("li", { className: h, children: /* @__PURE__ */ b(
     "button",
     {
       onClick: () => {
-        s || (h(e), t());
+        s || !l || (m(l), o());
       },
       disabled: s,
       className: `
@@ -28,30 +28,30 @@ const E = W(null), I = () => {
           ${d ? "text-error hover:bg-error/10" : ""}
         `,
       children: [
-        l && /* @__PURE__ */ n("span", { className: "w-4 h-4", children: l }),
-        /* @__PURE__ */ n("span", { className: "flex-1", children: u })
+        c && /* @__PURE__ */ n("span", { className: "w-4 h-4", children: c }),
+        /* @__PURE__ */ n("span", { className: "flex-1", children: e })
       ]
     }
   ) });
-}, H = ({ className: e = "" }) => /* @__PURE__ */ n("li", { className: `divider my-1 ${e}` }), K = ({
-  itemKey: e,
-  label: u,
-  icon: l,
+}, H = ({ className: e = "" }) => /* @__PURE__ */ n("li", { className: `divider my-1 ${e}` }), R = ({
+  label: e,
+  icon: c,
   disabled: s = !1,
   children: d,
-  className: o = ""
+  className: h = "",
+  _key: l
 }) => {
-  const [h, t] = g(!1), a = C(null), c = () => {
-    s || (a.current && clearTimeout(a.current), t(!0));
-  }, m = () => {
-    a.current = setTimeout(() => t(!1), 100);
+  const [m, o] = g(!1), a = y(null), u = () => {
+    s || (a.current && clearTimeout(a.current), o(!0));
+  }, f = () => {
+    a.current = setTimeout(() => o(!1), 100);
   };
   return /* @__PURE__ */ b(
     "li",
     {
-      onMouseEnter: c,
-      onMouseLeave: m,
-      className: `relative ${o}`,
+      onMouseEnter: u,
+      onMouseLeave: f,
+      className: `relative ${h}`,
       children: [
         /* @__PURE__ */ b(
           "button",
@@ -62,46 +62,46 @@ const E = W(null), I = () => {
           ${s ? "opacity-50 cursor-not-allowed" : "hover:bg-base-200"}
         `,
             children: [
-              l && /* @__PURE__ */ n("span", { className: "w-4 h-4", children: l }),
-              /* @__PURE__ */ n("span", { className: "flex-1", children: u }),
+              c && /* @__PURE__ */ n("span", { className: "w-4 h-4", children: c }),
+              /* @__PURE__ */ n("span", { className: "flex-1", children: e }),
               /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             ]
           }
         ),
-        h && /* @__PURE__ */ n(
+        m && /* @__PURE__ */ n(
           "ul",
           {
             className: "menu bg-base-100 rounded-box shadow-lg border border-base-300 absolute left-full top-0 min-w-[160px] z-50 p-1",
-            onMouseEnter: c,
-            onMouseLeave: m,
+            onMouseEnter: u,
+            onMouseLeave: f,
             children: d
           }
         )
       ]
     }
   );
-}, L = ({ item: e, onSelect: u, onClose: l }) => {
-  const [s, d] = g(!1), o = C(null);
+}, $ = ({ item: e, onSelect: c, onClose: s }) => {
+  const [d, h] = g(!1), l = y(null);
   if (e.divider)
     return /* @__PURE__ */ n("li", { className: "divider my-1" });
-  const h = () => {
-    e.disabled || e.children && e.children.length > 0 || (u(e.key), l());
-  }, t = e.children && e.children.length > 0, a = () => {
-    t && (o.current && clearTimeout(o.current), d(!0));
-  }, c = () => {
-    t && (o.current = setTimeout(() => d(!1), 100));
+  const m = () => {
+    e.disabled || e.children && e.children.length > 0 || (c(e.key), s());
+  }, o = e.children && e.children.length > 0, a = () => {
+    o && (l.current && clearTimeout(l.current), h(!0));
+  }, u = () => {
+    o && (l.current = setTimeout(() => h(!1), 100));
   };
   return /* @__PURE__ */ b(
     "li",
     {
       onMouseEnter: a,
-      onMouseLeave: c,
+      onMouseLeave: u,
       className: "relative",
       children: [
         /* @__PURE__ */ b(
           "button",
           {
-            onClick: h,
+            onClick: m,
             disabled: e.disabled,
             className: `
           flex items-center gap-2 w-full px-4 py-2 text-left text-sm
@@ -111,17 +111,17 @@ const E = W(null), I = () => {
             children: [
               e.icon && /* @__PURE__ */ n("span", { className: "w-4 h-4", children: e.icon }),
               /* @__PURE__ */ n("span", { className: "flex-1", children: e.label }),
-              t && /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              o && /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             ]
           }
         ),
-        t && s && /* @__PURE__ */ n(
+        o && d && /* @__PURE__ */ n(
           "ul",
           {
             className: "menu bg-base-100 rounded-box shadow-lg border border-base-300 absolute left-full top-0 min-w-[160px] z-50 p-1",
             onMouseEnter: a,
-            onMouseLeave: c,
-            children: e.children.map((m) => /* @__PURE__ */ n(L, { item: m, onSelect: u, onClose: l }, m.key))
+            onMouseLeave: u,
+            children: e.children.map((f) => /* @__PURE__ */ n($, { item: f, onSelect: c, onClose: s }, f.key))
           }
         )
       ]
@@ -129,69 +129,76 @@ const E = W(null), I = () => {
   );
 }, O = ({
   children: e,
-  items: u,
-  onSelect: l,
-  disabled: s = !1,
-  className: d = ""
+  items: c,
+  onSelect: s,
+  disabled: d = !1,
+  className: h = ""
 }) => {
-  const [o, h] = g(!1), [t, a] = g({ x: 0, y: 0 }), c = C(null), m = C(null), S = M(
+  const [l, m] = g(!1), [o, a] = g({ x: 0, y: 0 }), u = y(null), f = y(null), j = M(
     (r) => {
-      if (s) return;
+      if (d) return;
       r.preventDefault(), r.stopPropagation();
-      let i = r.clientX, f = r.clientY;
-      a({ x: i, y: f }), h(!0);
+      let t = r.clientX, i = r.clientY;
+      a({ x: t, y: i }), m(!0);
     },
-    [s]
-  ), x = M(() => {
-    h(!1);
-  }, []), y = M(
+    [d]
+  ), p = M(() => {
+    m(!1);
+  }, []), k = M(
     (r) => {
-      l?.(r);
+      s?.(r);
     },
-    [l]
+    [s]
   );
-  N(() => {
-    if (o && c.current) {
-      const i = c.current.getBoundingClientRect(), f = window.innerWidth, p = window.innerHeight;
-      let { x: v, y: w } = t;
-      v + i.width > f && (v = f - i.width - 8), w + i.height > p && (w = p - i.height - 8), (v !== t.x || w !== t.y) && a({ x: v, y: w });
+  E(() => {
+    if (l && u.current) {
+      const t = u.current.getBoundingClientRect(), i = window.innerWidth, x = window.innerHeight;
+      let { x: v, y: w } = o;
+      v + t.width > i && (v = i - t.width - 8), w + t.height > x && (w = x - t.height - 8), (v !== o.x || w !== o.y) && a({ x: v, y: w });
     }
-  }, [o, t]), N(() => {
-    if (!o) return;
-    const r = (p) => {
-      c.current && !c.current.contains(p.target) && x();
-    }, i = (p) => {
-      p.key === "Escape" && x();
-    }, f = () => {
-      x();
+  }, [l, o]), E(() => {
+    if (!l) return;
+    const r = (x) => {
+      u.current && !u.current.contains(x.target) && p();
+    }, t = (x) => {
+      x.key === "Escape" && p();
+    }, i = () => {
+      p();
     };
-    return document.addEventListener("mousedown", r), document.addEventListener("keydown", i), document.addEventListener("scroll", f, !0), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", i), document.removeEventListener("scroll", f, !0);
+    return document.addEventListener("mousedown", r), document.addEventListener("keydown", t), document.addEventListener("scroll", i, !0), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", t), document.removeEventListener("scroll", i, !0);
     };
-  }, [o, x]);
-  const k = T.Children.toArray(e), R = k[0], $ = k.slice(1), j = u && u.length > 0, D = {
-    onSelect: y,
-    onClose: x
+  }, [l, p]);
+  const D = (r) => C.Children.map(r, (t) => {
+    if (C.isValidElement(t)) {
+      const i = t.key != null ? String(t.key) : void 0;
+      if (t.type === S || t.type === R)
+        return C.cloneElement(t, { _key: i });
+    }
+    return t;
+  }), N = C.Children.toArray(e), W = N[0], P = D(N.slice(1)), T = c && c.length > 0, z = {
+    onSelect: k,
+    onClose: p
   };
-  return /* @__PURE__ */ b(P, { children: [
-    /* @__PURE__ */ n("div", { ref: m, onContextMenu: S, className: "inline-block", children: R }),
-    o && B(
-      /* @__PURE__ */ n(E.Provider, { value: D, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ n("div", { ref: f, onContextMenu: j, className: "inline-block", children: W }),
+    l && V(
+      /* @__PURE__ */ n(L.Provider, { value: z, children: /* @__PURE__ */ n(
         "ul",
         {
-          ref: c,
-          className: `menu bg-base-100 rounded-box shadow-lg border border-base-300 min-w-[160px] p-1 fixed z-[9999] ${d}`,
-          style: { left: t.x, top: t.y },
-          children: j ? u.map((r) => /* @__PURE__ */ n(L, { item: r, onSelect: y, onClose: x }, r.key)) : $
+          ref: u,
+          className: `menu bg-base-100 rounded-box shadow-lg border border-base-300 min-w-[160px] p-1 fixed z-[9999] ${h}`,
+          style: { left: o.x, top: o.y },
+          children: T ? c.map((r) => /* @__PURE__ */ n($, { item: r, onSelect: k, onClose: p }, r.key)) : P
         }
       ) }),
       document.body
     )
   ] });
 }, Y = Object.assign(O, {
-  Item: A,
+  Item: S,
   Divider: H,
-  SubMenu: K
+  SubMenu: R
 });
 export {
   Y as ContextMenu