@kakadu/components 3.1.4 → 3.2.0

package/build/components/button.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode, type HTMLProps } from 'react';
 import { type IconType } from '../icons/icon';
 import { type ButtonTooltipPosition } from './button-tooltip';
-export declare function ButtonLoader({ isLoading, size, }: {
+export declare function ButtonLoader({ isLoading, size, className, }: {
     readonly isLoading?: boolean;
     readonly size?: number;
+    readonly className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare enum ButtonVariant {
     primary = "primary",
@@ -22,6 +23,7 @@ type BaseButtonProperties = Omit<HTMLProps<HTMLButtonElement>, 'children'> & {
     readonly iconLeft?: IconType | ReactNode;
     readonly iconRight?: IconType | ReactNode;
     readonly isLoading?: boolean;
+    readonly isSkeleton?: boolean;
     readonly hasMovingGradients?: boolean;
     readonly movingGradientsCount?: number;
     readonly hasMovingStars?: boolean;
@@ -34,5 +36,5 @@ export type ButtonProperties = BaseButtonProperties & ({
     children?: never;
     label: string;
 });
-export default function Button({ type, variant, href, target, rel, disabled, className, children, label, tooltip, tooltipPosition, iconLeft, iconRight, isLoading, hasMovingGradients, movingGradientsCount, hasMovingStars, movingStarsCount, ...properties }: ButtonProperties): import("react/jsx-runtime").JSX.Element;
+export default function Button({ type, variant, href, target, rel, disabled, className, children, label, tooltip, tooltipPosition, iconLeft, iconRight, isLoading, isSkeleton, hasMovingGradients, movingGradientsCount, hasMovingStars, movingStarsCount, ...properties }: ButtonProperties): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/button.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),j=require("react"),a=require("@kuma-ui/core"),z=require("../theme.js"),W=require("../icons/icon.js"),$=require("./spinner.js"),C=require("./moving-gradients.js"),F=require("./moving-stars.js"),O=require("./theme-setter.js"),P=require("./click-ripples.js"),y=require("./hover-gradient.js"),A=require("./button-tooltip.js"),H=require("./aria-text.js"),J=require("./atom.js");function b({isLoading:s,size:n}){return e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-3118361790",s&&"kakadu-components-4114685569"),children:e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2395688468",children:e.jsxRuntimeExports.jsx($.RevealSpinner,{isVisible:s,size:n})})})}var S=(s=>(s.primary="primary",s.secondary="secondary",s.warning="warning",s.danger="danger",s))(S||{});function R({icon:s,variant:n="primary",className:o,...r}){return e.jsxRuntimeExports.jsx("div",{...r,className:a.cx("kakadu-components-2658660333",n==="secondary"&&"kakadu-components-3469662110",o),children:typeof s=="string"?e.jsxRuntimeExports.jsx(W.default,{width:14,height:14,type:s}):s})}const E="kakadu-components-2244098950",K="kakadu-components-3923184173",f="kakadu-components-317965671",q="kakadu-components-1978976872";function Q({type:s,variant:n="primary",href:o,target:r,rel:g,disabled:v,className:_,children:t,label:N,tooltip:u,tooltipPosition:w,iconLeft:c,iconRight:i,isLoading:m,hasMovingGradients:B=!1,movingGradientsCount:d=4,hasMovingStars:M=!1,movingStarsCount:l=10,...D}){const x=j.useId(),p=j.useRef(null),h=O.useIsDarkMode(p),I=s??"button",T=B&&d>0,G=M&&l>0,k=o?!1:!!v||!!m;return e.jsxRuntimeExports.jsxs(J.default,{...D,as:o?"a":"button",type:o?void 0:I,href:o,target:r,rel:g,"aria-describedby":u?x:void 0,disabled:k,className:a.cx(z.effectStyles,"kakadu-components-1897763514",!!c&&"kakadu-components-3652831856",!t&&"kakadu-components-2746167644",n==="secondary"&&E,n==="warning"&&f,n==="danger"&&q,_),children:[c?e.jsxRuntimeExports.jsx(R,{variant:n,icon:c,className:t?"kakadu-components-294089230":void 0}):null,t?e.jsxRuntimeExports.jsx("div",{ref:p,className:"kakadu-components-2618257692",children:t}):e.jsxRuntimeExports.jsx(H.default,{children:N}),i?e.jsxRuntimeExports.jsx(R,{variant:n,icon:i,className:t?"kakadu-components-3127707672":void 0}):null,e.jsxRuntimeExports.jsx(b,{isLoading:m}),T&&e.jsxRuntimeExports.jsx(C.default,{opacity:h?.4:.3,maximumGradientsCount:d,className:a.cx("kakadu-components-1505766785",n==="secondary"&&"kakadu-components-3712045697")}),G&&e.jsxRuntimeExports.jsx(F.default,{maximumStarsCount:l,className:"kakadu-components-2813474662"}),k?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(P.default,{size:t?void 0:50}),e.jsxRuntimeExports.jsx(y.default,{size:t?void 0:50,className:n==="secondary"?y.normalBlendStyles:void 0})]}),u?e.jsxRuntimeExports.jsx(A.default,{id:x,label:u,position:w}):null]})}exports.ButtonLoader=b;exports.ButtonVariant=S;exports.buttonDangerStyles=q;exports.buttonSecondaryStyles=E;exports.buttonSuccessStyles=K;exports.buttonWarningStyles=f;exports.default=Q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),R=require("react"),u=require("@kuma-ui/core"),$=require("../theme.js"),A=require("../icons/icon.js"),C=require("./spinner.js"),F=require("./moving-gradients.js"),O=require("./moving-stars.js"),P=require("./theme-setter.js"),H=require("./click-ripples.js"),E=require("./hover-gradient.js"),J=require("./button-tooltip.js"),K=require("./aria-text.js"),Q=require("./atom.js"),U=require("./skeleton.js");function f({isLoading:s,size:n,className:o}){return e.jsxRuntimeExports.jsx("div",{className:u.cx("kakadu-components-2832510379",s&&"kakadu-components-4114685569",o),children:e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-920467642",children:e.jsxRuntimeExports.jsx(C.RevealSpinner,{isVisible:s,size:n})})})}var v=(s=>(s.primary="primary",s.secondary="secondary",s.warning="warning",s.danger="danger",s))(v||{});function b({icon:s,variant:n="primary",className:o,...c}){return e.jsxRuntimeExports.jsx("div",{...c,className:u.cx("kakadu-components-2658660333",n==="secondary"&&"kakadu-components-3469662110",o),children:typeof s=="string"?e.jsxRuntimeExports.jsx(A.default,{width:14,height:14,type:s}):s})}const S="kakadu-components-2244098950",X="kakadu-components-3923184173",g="kakadu-components-317965671",q="kakadu-components-1978976872";function Y({type:s,variant:n="primary",href:o,target:c,rel:h,disabled:_,className:N,children:t,label:w,tooltip:i,tooltipPosition:B,iconLeft:m,iconRight:d,isLoading:x,isSkeleton:r,hasMovingGradients:M=!1,movingGradientsCount:l=4,hasMovingStars:D=!1,movingStarsCount:p=10,...I}){const k=R.useId(),j=R.useRef(null),T=P.useIsDarkMode(j),G=s??"button",z=M&&l>0,W=D&&p>0,a=o&&!r,y=!!_||!!x||!!r;return e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3559664923",children:[e.jsxRuntimeExports.jsxs(Q.default,{...I,as:a?"a":"button",type:a?void 0:G,href:a?o:void 0,target:a?c:void 0,rel:a?h:void 0,"aria-describedby":i?k:void 0,disabled:a?void 0:y,className:u.cx($.effectStyles,"kakadu-components-3709284365",!!m&&"kakadu-components-2735110382",!t&&"kakadu-components-3621693630",n==="secondary"&&S,n==="warning"&&g,n==="danger"&&q,r&&"kakadu-components-2662775151",N),children:[m?e.jsxRuntimeExports.jsx(b,{variant:n,icon:m,className:t?"kakadu-components-136489413":void 0}):null,t?e.jsxRuntimeExports.jsx("div",{ref:j,className:"kakadu-components-207477259",children:t}):e.jsxRuntimeExports.jsx(K.default,{children:w}),d?e.jsxRuntimeExports.jsx(b,{variant:n,icon:d,className:t?"kakadu-components-3631501803":void 0}):null,e.jsxRuntimeExports.jsx(f,{isLoading:x}),z&&e.jsxRuntimeExports.jsx(F.default,{opacity:T?.4:.3,maximumGradientsCount:l,className:u.cx("kakadu-components-2055737617",n==="secondary"&&"kakadu-components-2972748387")}),W&&e.jsxRuntimeExports.jsx(O.default,{maximumStarsCount:p,className:"kakadu-components-1226008615"}),y?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(H.default,{size:t?void 0:50}),e.jsxRuntimeExports.jsx(E.default,{size:t?void 0:50,className:n==="secondary"?E.normalBlendStyles:void 0})]}),i?e.jsxRuntimeExports.jsx(J.default,{id:k,label:i,position:B}):null]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-3422055155",children:e.jsxRuntimeExports.jsx(U.SkeletonInstance,{width:"100%",height:"100%"})}):null]})}exports.ButtonLoader=f;exports.ButtonVariant=v;exports.buttonDangerStyles=q;exports.buttonSecondaryStyles=S;exports.buttonSuccessStyles=X;exports.buttonWarningStyles=g;exports.default=Y;

package/build/components/button.mjs

@@ -1,75 +1,81 @@
 import { j as o } from "../jsx-runtime-B4hRZ52C.mjs";
 import { useId as G, useRef as R } from "react";
-import { cx as t } from "@kuma-ui/core";
+import { cx as m } from "@kuma-ui/core";
 import { effectStyles as T } from "../theme.mjs";
 import z from "../icons/icon.mjs";
-import { RevealSpinner as A } from "./spinner.mjs";
-import C from "./moving-gradients.mjs";
-import h from "./moving-stars.mjs";
-import { useIsDarkMode as E } from "./theme-setter.mjs";
-import F from "./click-ripples.mjs";
-import H, { normalBlendStyles as W } from "./hover-gradient.mjs";
-import q from "./button-tooltip.mjs";
-import J from "./aria-text.mjs";
-import K from "./atom.mjs";
-function O({
+import { RevealSpinner as C } from "./spinner.mjs";
+import E from "./moving-gradients.mjs";
+import F from "./moving-stars.mjs";
+import { useIsDarkMode as H } from "./theme-setter.mjs";
+import W from "./click-ripples.mjs";
+import q, { normalBlendStyles as J } from "./hover-gradient.mjs";
+import K from "./button-tooltip.mjs";
+import O from "./aria-text.mjs";
+import P from "./atom.mjs";
+import { SkeletonInstance as Q } from "./skeleton.mjs";
+function U({
   isLoading: s,
-  size: n
+  size: n,
+  className: a
 }) {
-  return /* @__PURE__ */ o.jsx("div", { className: t("kakadu-components-3118361790", s && "kakadu-components-4114685569"), children: /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-2395688468", children: /* @__PURE__ */ o.jsx(A, { isVisible: s, size: n }) }) });
+  return /* @__PURE__ */ o.jsx("div", { className: m("kakadu-components-2832510379", s && "kakadu-components-4114685569", a), children: /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-920467642", children: /* @__PURE__ */ o.jsx(C, { isVisible: s, size: n }) }) });
 }
-var P = /* @__PURE__ */ ((s) => (s.primary = "primary", s.secondary = "secondary", s.warning = "warning", s.danger = "danger", s))(P || {});
-function y({
+var X = /* @__PURE__ */ ((s) => (s.primary = "primary", s.secondary = "secondary", s.warning = "warning", s.danger = "danger", s))(X || {});
+function j({
   icon: s,
   variant: n = "primary",
   className: a,
-  ...r
+  ...c
 }) {
-  return /* @__PURE__ */ o.jsx("div", { ...r, className: t("kakadu-components-2658660333", n === "secondary" && "kakadu-components-3469662110", a), children: typeof s == "string" ? /* @__PURE__ */ o.jsx(z, { width: 14, height: 14, type: s }) : s });
+  return /* @__PURE__ */ o.jsx("div", { ...c, className: m("kakadu-components-2658660333", n === "secondary" && "kakadu-components-3469662110", a), children: typeof s == "string" ? /* @__PURE__ */ o.jsx(z, { width: 14, height: 14, type: s }) : s });
 }
-const Q = "kakadu-components-2244098950", co = "kakadu-components-3923184173", U = "kakadu-components-317965671", X = "kakadu-components-1978976872";
-function io({
+const Y = "kakadu-components-2244098950", lo = "kakadu-components-3923184173", Z = "kakadu-components-317965671", _ = "kakadu-components-1978976872";
+function ko({
   type: s,
   variant: n = "primary",
   href: a,
-  target: r,
-  rel: f,
-  disabled: j,
-  className: b,
+  target: c,
+  rel: v,
+  disabled: b,
+  className: g,
   children: e,
-  label: S,
-  tooltip: m,
-  tooltipPosition: g,
-  iconLeft: c,
-  iconRight: d,
-  isLoading: i,
-  hasMovingGradients: v = !1,
-  movingGradientsCount: p = 4,
-  hasMovingStars: N = !1,
-  movingStarsCount: u = 10,
-  ...w
+  label: N,
+  tooltip: d,
+  tooltipPosition: h,
+  iconLeft: i,
+  iconRight: p,
+  isLoading: u,
+  isSkeleton: r,
+  hasMovingGradients: S = !1,
+  movingGradientsCount: l = 4,
+  hasMovingStars: w = !1,
+  movingStarsCount: k = 10,
+  ...B
 }) {
-  const l = G(), k = R(null), M = E(k), B = s ?? "button", I = v && p > 0, D = N && u > 0, x = a ? !1 : !!j || !!i;
-  return /* @__PURE__ */ o.jsxs(K, { ...w, as: a ? "a" : "button", type: a ? void 0 : B, href: a, target: r, rel: f, "aria-describedby": m ? l : void 0, disabled: x, className: t(T, "kakadu-components-1897763514", !!c && "kakadu-components-3652831856", !e && "kakadu-components-2746167644", n === "secondary" && Q, n === "warning" && U, n === "danger" && X, b), children: [
-    c ? /* @__PURE__ */ o.jsx(y, { variant: n, icon: c, className: e ? "kakadu-components-294089230" : void 0 }) : null,
-    e ? /* @__PURE__ */ o.jsx("div", { ref: k, className: "kakadu-components-2618257692", children: e }) : /* @__PURE__ */ o.jsx(J, { children: S }),
-    d ? /* @__PURE__ */ o.jsx(y, { variant: n, icon: d, className: e ? "kakadu-components-3127707672" : void 0 }) : null,
-    /* @__PURE__ */ o.jsx(O, { isLoading: i }),
-    I && /* @__PURE__ */ o.jsx(C, { opacity: M ? 0.4 : 0.3, maximumGradientsCount: p, className: t("kakadu-components-1505766785", n === "secondary" && "kakadu-components-3712045697") }),
-    D && /* @__PURE__ */ o.jsx(h, { maximumStarsCount: u, className: "kakadu-components-2813474662" }),
-    x ? null : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      /* @__PURE__ */ o.jsx(F, { size: e ? void 0 : 50 }),
-      /* @__PURE__ */ o.jsx(H, { size: e ? void 0 : 50, className: n === "secondary" ? W : void 0 })
+  const x = G(), f = R(null), I = H(f), M = s ?? "button", D = S && l > 0, A = w && k > 0, t = a && !r, y = !!b || !!u || !!r;
+  return /* @__PURE__ */ o.jsxs("div", { className: "kakadu-components-3559664923", children: [
+    /* @__PURE__ */ o.jsxs(P, { ...B, as: t ? "a" : "button", type: t ? void 0 : M, href: t ? a : void 0, target: t ? c : void 0, rel: t ? v : void 0, "aria-describedby": d ? x : void 0, disabled: t ? void 0 : y, className: m(T, "kakadu-components-3709284365", !!i && "kakadu-components-2735110382", !e && "kakadu-components-3621693630", n === "secondary" && Y, n === "warning" && Z, n === "danger" && _, r && "kakadu-components-2662775151", g), children: [
+      i ? /* @__PURE__ */ o.jsx(j, { variant: n, icon: i, className: e ? "kakadu-components-136489413" : void 0 }) : null,
+      e ? /* @__PURE__ */ o.jsx("div", { ref: f, className: "kakadu-components-207477259", children: e }) : /* @__PURE__ */ o.jsx(O, { children: N }),
+      p ? /* @__PURE__ */ o.jsx(j, { variant: n, icon: p, className: e ? "kakadu-components-3631501803" : void 0 }) : null,
+      /* @__PURE__ */ o.jsx(U, { isLoading: u }),
+      D && /* @__PURE__ */ o.jsx(E, { opacity: I ? 0.4 : 0.3, maximumGradientsCount: l, className: m("kakadu-components-2055737617", n === "secondary" && "kakadu-components-2972748387") }),
+      A && /* @__PURE__ */ o.jsx(F, { maximumStarsCount: k, className: "kakadu-components-1226008615" }),
+      y ? null : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(W, { size: e ? void 0 : 50 }),
+        /* @__PURE__ */ o.jsx(q, { size: e ? void 0 : 50, className: n === "secondary" ? J : void 0 })
+      ] }),
+      d ? /* @__PURE__ */ o.jsx(K, { id: x, label: d, position: h }) : null
     ] }),
-    m ? /* @__PURE__ */ o.jsx(q, { id: l, label: m, position: g }) : null
+    r ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ o.jsx(Q, { width: "100%", height: "100%" }) }) : null
   ] });
 }
 export {
-  O as ButtonLoader,
-  P as ButtonVariant,
-  X as buttonDangerStyles,
-  Q as buttonSecondaryStyles,
-  co as buttonSuccessStyles,
-  U as buttonWarningStyles,
-  io as default
+  U as ButtonLoader,
+  X as ButtonVariant,
+  _ as buttonDangerStyles,
+  Y as buttonSecondaryStyles,
+  lo as buttonSuccessStyles,
+  Z as buttonWarningStyles,
+  ko as default
 };

package/build/components/icon-button.d.ts

@@ -13,5 +13,6 @@ export type IconButtonProperties = HTMLProps<HTMLButtonElement> & {
     readonly label: string;
     readonly tooltipPosition?: ButtonTooltipPosition;
     readonly isLoading?: boolean;
+    readonly isSkeleton?: boolean;
 };
-export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, className, ...properties }: IconButtonProperties): import("react/jsx-runtime").JSX.Element;
+export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, isSkeleton, className, ...properties }: IconButtonProperties): import("react/jsx-runtime").JSX.Element;

package/build/components/icon-button.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),s=require("react"),n=require("@kuma-ui/core"),l=require("../icons/icon.js"),S=require("../theme.js"),_=require("./theme-setter.js"),o=require("./button.js"),N=require("./button-tooltip.js"),T=require("./click-ripples.js"),h=require("./hover-gradient.js");var R=(e=>(e.default="default",e.success="success",e.warning="warning",e.danger="danger",e))(R||{});function D({icon:e,variant:u="default",label:d,tooltipPosition:b,disabled:y,isLoading:m,className:g,...E}){const x=s.useId(),q=_.useIsDarkMode(),[r,w]=s.useState(e),[p,i]=s.useState(!1),f=s.useRef(e),c=s.useRef(null);s.useEffect(()=>{f.current=e},[e]);const a=s.useCallback(()=>{c.current&&(clearTimeout(c.current),c.current=null)},[]);s.useEffect(()=>{if(r===e){i(j=>j&&!1);return}i(!0),a(),c.current=setTimeout(()=>{i(!1),w(f.current)},370)},[r,e,a]),s.useEffect(()=>()=>{a()},[a]);const k=!!y||!!m;return t.jsxRuntimeExports.jsxs("button",{...E,type:"button","aria-label":d,"aria-describedby":x,disabled:k,className:n.cx(S.buttonResetStyles,S.effectStyles,"kakadu-components-1150622507",u==="default"&&n.cx(o.buttonSecondaryStyles,"kakadu-components-2089159949"),u==="success"&&n.cx(o.buttonSuccessStyles,"kakadu-components-4088931955"),u==="warning"&&n.cx(o.buttonWarningStyles,"kakadu-components-1450399719"),u==="danger"&&n.cx(o.buttonDangerStyles,"kakadu-components-3594030066"),g),children:[t.jsxRuntimeExports.jsxs("span",{"data-theme":u==="default"?q?"dark":"light":"dark",className:"kakadu-components-2197738751",children:[t.jsxRuntimeExports.jsx(l.default,{width:16,height:16,type:r,className:n.cx(l.iconShadowStyles,"kakadu-components-1309118222",p&&"kakadu-components-3602476657")}),r===e?null:t.jsxRuntimeExports.jsx(l.default,{width:16,height:16,type:e,className:n.cx(l.iconShadowStyles,"kakadu-components-2883440801",p&&"kakadu-components-1406924214")})]}),t.jsxRuntimeExports.jsx(o.ButtonLoader,{isLoading:m,size:14}),t.jsxRuntimeExports.jsx(N.default,{id:x,label:d,position:b}),k?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(T.default,{size:50}),t.jsxRuntimeExports.jsx(h.default,{size:50,className:u==="default"?h.normalBlendStyles:void 0})]})]})}exports.IconButtonVariant=R;exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),s=require("react"),n=require("@kuma-ui/core"),i=require("../icons/icon.js"),R=require("../theme.js"),N=require("./theme-setter.js"),u=require("./button.js"),I=require("./button-tooltip.js"),T=require("./click-ripples.js"),S=require("./hover-gradient.js"),B=require("./skeleton.js");var b=(e=>(e.default="default",e.success="success",e.warning="warning",e.danger="danger",e))(b||{});function D({icon:e,variant:o="default",label:m,tooltipPosition:g,disabled:y,isLoading:x,isSkeleton:l,className:E,...q}){const p=s.useId(),w=N.useIsDarkMode(),[r,_]=s.useState(e),[k,d]=s.useState(!1),f=s.useRef(e),c=s.useRef(null);s.useEffect(()=>{f.current=e},[e]);const a=s.useCallback(()=>{c.current&&(clearTimeout(c.current),c.current=null)},[]);s.useEffect(()=>{if(r===e){d(h=>h&&!1);return}d(!0),a(),c.current=setTimeout(()=>{d(!1),_(f.current)},370)},[r,e,a]),s.useEffect(()=>()=>{a()},[a]);const j=!!y||!!x||!!l;return t.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-4096632152",children:[t.jsxRuntimeExports.jsxs("button",{...q,type:"button","aria-label":m,"aria-describedby":p,disabled:j,className:n.cx(R.buttonResetStyles,R.effectStyles,"kakadu-components-1951951921",o==="default"&&n.cx(u.buttonSecondaryStyles,"kakadu-components-1561784812"),o==="success"&&n.cx(u.buttonSuccessStyles,"kakadu-components-1398421429"),o==="warning"&&n.cx(u.buttonWarningStyles,"kakadu-components-1872098090"),o==="danger"&&n.cx(u.buttonDangerStyles,"kakadu-components-2064536093"),l&&"kakadu-components-2662775151",E),children:[t.jsxRuntimeExports.jsxs("span",{"data-theme":o==="default"?w?"dark":"light":"dark",className:"kakadu-components-3040141419",children:[t.jsxRuntimeExports.jsx(i.default,{width:16,height:16,type:r,className:n.cx(i.iconShadowStyles,"kakadu-components-1562914001",k&&"kakadu-components-2360250719")}),r===e?null:t.jsxRuntimeExports.jsx(i.default,{width:16,height:16,type:e,className:n.cx(i.iconShadowStyles,"kakadu-components-1224061930",k&&"kakadu-components-2519520784")})]}),t.jsxRuntimeExports.jsx(u.ButtonLoader,{isLoading:x,size:14}),t.jsxRuntimeExports.jsx(I.default,{id:p,label:m,position:g}),j?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(T.default,{size:50}),t.jsxRuntimeExports.jsx(S.default,{size:50,className:o==="default"?S.normalBlendStyles:void 0})]})]}),l?t.jsxRuntimeExports.jsx("div",{className:"kakadu-components-3422055155",children:t.jsxRuntimeExports.jsx(B.SkeletonInstance,{width:"100%",height:"100%"})}):null]})}exports.IconButtonVariant=b;exports.default=D;

package/build/components/icon-button.mjs

@@ -1,57 +1,62 @@
-import { j as t } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useId as D, useState as h, useRef as y, useEffect as c, useCallback as I } from "react";
-import { cx as s } from "@kuma-ui/core";
-import S, { iconShadowStyles as g } from "../icons/icon.mjs";
+import { j as s } from "../jsx-runtime-B4hRZ52C.mjs";
+import { useId as B, useState as x, useRef as g, useEffect as l, useCallback as D } from "react";
+import { cx as t } from "@kuma-ui/core";
+import j, { iconShadowStyles as y } from "../icons/icon.mjs";
 import { buttonResetStyles as T, effectStyles as z } from "../theme.mjs";
-import { useIsDarkMode as B } from "./theme-setter.mjs";
-import { ButtonLoader as C, buttonSecondaryStyles as E, buttonSuccessStyles as M, buttonWarningStyles as F, buttonDangerStyles as G } from "./button.mjs";
+import { useIsDarkMode as C } from "./theme-setter.mjs";
+import { ButtonLoader as E, buttonSecondaryStyles as M, buttonSuccessStyles as v, buttonWarningStyles as F, buttonDangerStyles as G } from "./button.mjs";
 import H from "./button-tooltip.mjs";
 import P from "./click-ripples.mjs";
 import W, { normalBlendStyles as q } from "./hover-gradient.mjs";
-var A = /* @__PURE__ */ ((e) => (e.default = "default", e.success = "success", e.warning = "warning", e.danger = "danger", e))(A || {});
-function $({
+import { SkeletonInstance as A } from "./skeleton.mjs";
+var J = /* @__PURE__ */ ((e) => (e.default = "default", e.success = "success", e.warning = "warning", e.danger = "danger", e))(J || {});
+function ee({
   icon: e,
   variant: o = "default",
-  label: l,
-  tooltipPosition: x,
+  label: d,
+  tooltipPosition: S,
   disabled: b,
   isLoading: m,
-  className: j,
-  ...w
+  isSkeleton: u,
+  className: w,
+  ...N
 }) {
-  const d = D(), R = B(), [n, N] = h(e), [i, u] = h(!1), f = y(e), r = y(null);
-  c(() => {
+  const i = B(), R = C(), [n, I] = x(e), [p, c] = x(!1), f = g(e), a = g(null);
+  l(() => {
     f.current = e;
   }, [e]);
-  const a = I(() => {
-    r.current && (clearTimeout(r.current), r.current = null);
+  const r = D(() => {
+    a.current && (clearTimeout(a.current), a.current = null);
   }, []);
-  c(() => {
+  l(() => {
     if (n === e) {
-      u((k) => k && !1);
+      c((h) => h && !1);
       return;
     }
-    u(!0), a(), r.current = setTimeout(() => {
-      u(!1), N(f.current);
+    c(!0), r(), a.current = setTimeout(() => {
+      c(!1), I(f.current);
     }, 370);
-  }, [n, e, a]), c(() => () => {
-    a();
-  }, [a]);
-  const p = !!b || !!m;
-  return /* @__PURE__ */ t.jsxs("button", { ...w, type: "button", "aria-label": l, "aria-describedby": d, disabled: p, className: s(T, z, "kakadu-components-1150622507", o === "default" && s(E, "kakadu-components-2089159949"), o === "success" && s(M, "kakadu-components-4088931955"), o === "warning" && s(F, "kakadu-components-1450399719"), o === "danger" && s(G, "kakadu-components-3594030066"), j), children: [
-    /* @__PURE__ */ t.jsxs("span", { "data-theme": o === "default" ? R ? "dark" : "light" : "dark", className: "kakadu-components-2197738751", children: [
-      /* @__PURE__ */ t.jsx(S, { width: 16, height: 16, type: n, className: s(g, "kakadu-components-1309118222", i && "kakadu-components-3602476657") }),
-      n === e ? null : /* @__PURE__ */ t.jsx(S, { width: 16, height: 16, type: e, className: s(g, "kakadu-components-2883440801", i && "kakadu-components-1406924214") })
+  }, [n, e, r]), l(() => () => {
+    r();
+  }, [r]);
+  const k = !!b || !!m || !!u;
+  return /* @__PURE__ */ s.jsxs("div", { className: "kakadu-components-4096632152", children: [
+    /* @__PURE__ */ s.jsxs("button", { ...N, type: "button", "aria-label": d, "aria-describedby": i, disabled: k, className: t(T, z, "kakadu-components-1951951921", o === "default" && t(M, "kakadu-components-1561784812"), o === "success" && t(v, "kakadu-components-1398421429"), o === "warning" && t(F, "kakadu-components-1872098090"), o === "danger" && t(G, "kakadu-components-2064536093"), u && "kakadu-components-2662775151", w), children: [
+      /* @__PURE__ */ s.jsxs("span", { "data-theme": o === "default" ? R ? "dark" : "light" : "dark", className: "kakadu-components-3040141419", children: [
+        /* @__PURE__ */ s.jsx(j, { width: 16, height: 16, type: n, className: t(y, "kakadu-components-1562914001", p && "kakadu-components-2360250719") }),
+        n === e ? null : /* @__PURE__ */ s.jsx(j, { width: 16, height: 16, type: e, className: t(y, "kakadu-components-1224061930", p && "kakadu-components-2519520784") })
+      ] }),
+      /* @__PURE__ */ s.jsx(E, { isLoading: m, size: 14 }),
+      /* @__PURE__ */ s.jsx(H, { id: i, label: d, position: S }),
+      k ? null : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsx(P, { size: 50 }),
+        /* @__PURE__ */ s.jsx(W, { size: 50, className: o === "default" ? q : void 0 })
+      ] })
     ] }),
-    /* @__PURE__ */ t.jsx(C, { isLoading: m, size: 14 }),
-    /* @__PURE__ */ t.jsx(H, { id: d, label: l, position: x }),
-    p ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(P, { size: 50 }),
-      /* @__PURE__ */ t.jsx(W, { size: 50, className: o === "default" ? q : void 0 })
-    ] })
+    u ? /* @__PURE__ */ s.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ s.jsx(A, { width: "100%", height: "100%" }) }) : null
   ] });
 }
 export {
-  A as IconButtonVariant,
-  $ as default
+  J as IconButtonVariant,
+  ee as default
 };

package/build/components/modal.d.ts

@@ -26,7 +26,7 @@ type ModalBaseProperties<ModalResult> = Omit<ModalProperties<ModalResult>, 'isVi
 export default function Modal<Data = any>({ root, outerDecorators, innerDecorators, label, maxWidth, className, isVisible, isFullWidth, shouldCloseOnOutsideClick, shouldCloseOnEscapePress, showCloseButton, onClose, children, }: ModalProperties<Data>): import("react/jsx-runtime").JSX.Element;
 export declare function useModal<ModalResult, ModalProperties = ModalBaseProperties<ModalResult>>(ModalComponent: ComponentType<ModalProperties>, properties?: ModalProperties): {
     isVisible: boolean;
-    show: (reference?: HTMLElement) => Promise<ModalResult | undefined>;
+    show: () => Promise<ModalResult | undefined>;
     modal: import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/build/components/modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),E=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),A=require("./text-button.js"),I=require("./decorators.js"),y=e.createContext({isVisible:!1}),{Provider:D}=y;function N(){return e.useContext(y)}function z(){const{close:o}=N(),u=e.useCallback(()=>{o==null||o()},[o]);return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2543813221"}),s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-840864829",children:s.jsxRuntimeExports.jsx(A.default,{iconLeft:B.IconType.times,label:"Close",className:"kakadu-components-3855719072",onClick:u})})]})}function G({root:o,outerDecorators:u=[],innerDecorators:a=[],label:k,maxWidth:r,className:i,isVisible:n,isFullWidth:x=!1,shouldCloseOnOutsideClick:f=!0,shouldCloseOnEscapePress:l=!0,showCloseButton:d=!0,onClose:c,children:g}){const v=e.useRef(null),M=e.useRef(null),[h,L]=e.useState(!1),[m,p]=e.useState(!1),b=e.useCallback(t=>{v.current=t,p(!1)},[]),R=e.useRef(null),w=e.useCallback(t=>{t&&(R.current=t)},[]),[T,q]=e.useState(n??!1),S=e.useMemo(()=>({isVisible:T,setInitialFocus:w,close:b}),[T,w,b]);e.useEffect(()=>{n&&(L(!0),q(!0))},[n]),e.useEffect(()=>{if(n){const t=setTimeout(()=>{p(!0)},100);return()=>{clearTimeout(t)}}p(!1)},[n]),e.useEffect(()=>{if(h&&!m){const t=setTimeout(()=>{c==null||c(v.current??void 0),q(!1)},370);return()=>{clearTimeout(t)}}},[h,m,c]),e.useEffect(()=>{const t=M.current;if(n&&f&&t){const j=_=>{t===_.target&&p(!1)};return t.addEventListener("click",j),()=>{t.removeEventListener("click",j)}}},[n,f]),e.useEffect(()=>{if(!n||!l)return;const t=j=>{j.key==="Escape"&&p(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[n,l]);const F=e.useMemo(()=>({initialFocus:()=>R.current??void 0,onActivate:()=>{var t;return(t=R.current)==null?void 0:t.focus()}}),[]),C=s.jsxRuntimeExports.jsx(I.default,{decorators:u,children:s.jsxRuntimeExports.jsx("div",{"aria-hidden":!m,style:{"--max-width":r?`${r}px`:void 0},className:E.cx("kakadu-components-4119461136",m&&"kakadu-components-2522346797",i),children:s.jsxRuntimeExports.jsx(I.default,{decorators:a,children:s.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:m,focusTrapOptions:F,children:s.jsxRuntimeExports.jsx("div",{ref:M,className:"kakadu-components-4011815997",children:s.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":k??"Modal",className:E.cx("kakadu-components-3324483532",x&&"kakadu-components-3799971070",m&&"kakadu-components-968755580"),children:s.jsxRuntimeExports.jsxs(D,{value:S,children:[d?s.jsxRuntimeExports.jsx(z,{}):null,s.jsxRuntimeExports.jsx("div",{className:E.cx("kakadu-components-633990035",x&&"kakadu-components-171969824"),children:g})]})})})})})})});return o?P.createPortal(C,o):C}function H(o,u){const[a,k]=e.useState(!1),r=e.useRef(void 0),i=e.useRef(null),n=e.useCallback(async l=>(k(!0),i.current=l??document.activeElement,new Promise(d=>{r.current=d})),[]),x=e.useCallback(l=>{var d;if(k(!1),(d=r.current)==null||d.call(r,l),r.current=void 0,i.current){const c=i.current;c.isConnected&&c.focus(),i.current=null}},[]),f=e.useMemo(()=>s.jsxRuntimeExports.jsx(o,{...u,isVisible:a,onClose:x}),[o,u,a,x]);return e.useMemo(()=>({isVisible:a,show:n,modal:f}),[a,n,f])}exports.default=G;exports.useModal=H;exports.useModalContext=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),E=require("@kuma-ui/core"),P=require("react-dom"),$=require("../focus-trap-react-CcpTuiJi.js"),B=require("../icons/icon.js"),A=require("./text-button.js"),C=require("./decorators.js"),I=e.createContext({isVisible:!1}),{Provider:D}=I;function y(){return e.useContext(I)}function z(){const{close:o}=y(),a=e.useCallback(()=>{o==null||o()},[o]);return s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2543813221"}),s.jsxRuntimeExports.jsx("div",{className:"kakadu-components-840864829",children:s.jsxRuntimeExports.jsx(A.default,{iconLeft:B.IconType.times,label:"Close",className:"kakadu-components-3855719072",onClick:a})})]})}function G({root:o,outerDecorators:a=[],innerDecorators:c=[],label:m,maxWidth:r,className:f,isVisible:n,isFullWidth:l=!1,shouldCloseOnOutsideClick:u=!0,shouldCloseOnEscapePress:d=!0,showCloseButton:N=!0,onClose:p,children:g}){const R=e.useRef(null),v=e.useRef(null),[M,L]=e.useState(!1),[i,x]=e.useState(!1),h=e.useCallback(t=>{R.current=t,x(!1)},[]),j=e.useRef(null),b=e.useCallback(t=>{t&&(j.current=t)},[]),[w,T]=e.useState(n??!1),S=e.useMemo(()=>({isVisible:w,setInitialFocus:b,close:h}),[w,b,h]);e.useEffect(()=>{n&&(L(!0),T(!0))},[n]),e.useEffect(()=>{if(n){const t=setTimeout(()=>{x(!0)},100);return()=>{clearTimeout(t)}}x(!1)},[n]),e.useEffect(()=>{if(M&&!i){const t=setTimeout(()=>{p==null||p(R.current??void 0),T(!1)},370);return()=>{clearTimeout(t)}}},[M,i,p]),e.useEffect(()=>{const t=v.current;if(n&&u&&t){const k=_=>{t===_.target&&x(!1)};return t.addEventListener("click",k),()=>{t.removeEventListener("click",k)}}},[n,u]),e.useEffect(()=>{if(!n||!d)return;const t=k=>{k.key==="Escape"&&x(!1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[n,d]);const F=e.useMemo(()=>({initialFocus:()=>j.current??void 0,onActivate:()=>{var t;return(t=j.current)==null?void 0:t.focus()}}),[]),q=s.jsxRuntimeExports.jsx(C.default,{decorators:a,children:s.jsxRuntimeExports.jsx("div",{"aria-hidden":!i,style:{"--max-width":r?`${r}px`:void 0},className:E.cx("kakadu-components-4119461136",i&&"kakadu-components-2522346797",f),children:s.jsxRuntimeExports.jsx(C.default,{decorators:c,children:s.jsxRuntimeExports.jsx($.focusTrapReactExports.FocusTrap,{active:i,focusTrapOptions:F,children:s.jsxRuntimeExports.jsx("div",{ref:v,className:"kakadu-components-4011815997",children:s.jsxRuntimeExports.jsx("div",{role:"dialog","aria-modal":"true","aria-label":m??"Modal",className:E.cx("kakadu-components-3324483532",l&&"kakadu-components-3799971070",i&&"kakadu-components-968755580"),children:s.jsxRuntimeExports.jsxs(D,{value:S,children:[N?s.jsxRuntimeExports.jsx(z,{}):null,s.jsxRuntimeExports.jsx("div",{className:E.cx("kakadu-components-633990035",l&&"kakadu-components-171969824"),children:g})]})})})})})})});return o?P.createPortal(q,o):q}function H(o,a){const[c,m]=e.useState(!1),r=e.useRef(void 0),f=e.useCallback(async()=>(m(!0),new Promise(u=>{r.current=u})),[]),n=e.useCallback(u=>{var d;m(!1),(d=r.current)==null||d.call(r,u),r.current=void 0},[]),l=e.useMemo(()=>s.jsxRuntimeExports.jsx(o,{...a,isVisible:c,onClose:n}),[o,a,c,n]);return e.useMemo(()=>({isVisible:c,show:f,modal:l}),[c,f,l])}exports.default=G;exports.useModal=H;exports.useModalContext=y;

package/build/components/modal.mjs

@@ -1,127 +1,124 @@
 import { j as t } from "../jsx-runtime-B4hRZ52C.mjs";
-import { createContext as q, useRef as p, useState as w, useCallback as v, useMemo as T, useEffect as x, useContext as z } from "react";
+import { createContext as q, useRef as j, useState as h, useCallback as f, useMemo as w, useEffect as m, useContext as z } from "react";
 import { cx as I } from "@kuma-ui/core";
 import { createPortal as G } from "react-dom";
 import { f as H } from "../focus-trap-react-DYXrtbDH.mjs";
 import { IconType as J } from "../icons/icon.mjs";
 import K from "./text-button.mjs";
-import C from "./decorators.mjs";
-const B = q({
+import g from "./decorators.mjs";
+const C = q({
   isVisible: !1
 }), {
   Provider: Q
-} = B;
+} = C;
 function U() {
-  return z(B);
+  return z(C);
 }
 function V() {
   const {
-    close: o
-  } = U(), a = v(() => {
-    o == null || o();
-  }, [o]);
+    close: s
+  } = U(), a = f(() => {
+    s == null || s();
+  }, [s]);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-2543813221" }),
     /* @__PURE__ */ t.jsx("div", { className: "kakadu-components-840864829", children: /* @__PURE__ */ t.jsx(K, { iconLeft: J.times, label: "Close", className: "kakadu-components-3855719072", onClick: a }) })
   ] });
 }
 function ne({
-  root: o,
+  root: s,
   outerDecorators: a = [],
-  innerDecorators: c = [],
-  label: j,
-  maxWidth: s,
-  className: i,
+  innerDecorators: r = [],
+  label: k,
+  maxWidth: o,
+  className: x,
   isVisible: n,
-  isFullWidth: m = !1,
-  shouldCloseOnOutsideClick: f = !0,
-  shouldCloseOnEscapePress: u = !0,
-  showCloseButton: l = !0,
-  onClose: r,
+  isFullWidth: u = !1,
+  shouldCloseOnOutsideClick: c = !0,
+  shouldCloseOnEscapePress: l = !0,
+  showCloseButton: B = !0,
+  onClose: p,
   children: P
 }) {
-  const N = p(null), R = p(null), [y, A] = w(!1), [d, k] = w(!1), L = v((e) => {
-    N.current = e, k(!1);
-  }, []), E = p(null), M = v((e) => {
-    e && (E.current = e);
-  }, []), [F, b] = w(n ?? !1), D = T(() => ({
-    isVisible: F,
+  const E = j(null), N = j(null), [y, A] = h(!1), [i, d] = h(!1), L = f((e) => {
+    E.current = e, d(!1);
+  }, []), T = j(null), M = f((e) => {
+    e && (T.current = e);
+  }, []), [R, F] = h(n ?? !1), D = w(() => ({
+    isVisible: R,
     setInitialFocus: M,
     close: L
-  }), [F, M, L]);
-  x(() => {
-    n && (A(!0), b(!0));
-  }, [n]), x(() => {
+  }), [R, M, L]);
+  m(() => {
+    n && (A(!0), F(!0));
+  }, [n]), m(() => {
     if (n) {
       const e = setTimeout(() => {
-        k(!0);
+        d(!0);
       }, 100);
       return () => {
         clearTimeout(e);
       };
     }
-    k(!1);
-  }, [n]), x(() => {
-    if (y && !d) {
+    d(!1);
+  }, [n]), m(() => {
+    if (y && !i) {
       const e = setTimeout(() => {
-        r == null || r(N.current ?? void 0), b(!1);
+        p == null || p(E.current ?? void 0), F(!1);
       }, 370);
       return () => {
         clearTimeout(e);
       };
     }
-  }, [y, d, r]), x(() => {
-    const e = R.current;
-    if (n && f && e) {
-      const h = ($) => {
-        e === $.target && k(!1);
+  }, [y, i, p]), m(() => {
+    const e = N.current;
+    if (n && c && e) {
+      const v = ($) => {
+        e === $.target && d(!1);
       };
-      return e.addEventListener("click", h), () => {
-        e.removeEventListener("click", h);
+      return e.addEventListener("click", v), () => {
+        e.removeEventListener("click", v);
       };
     }
-  }, [n, f]), x(() => {
-    if (!n || !u)
+  }, [n, c]), m(() => {
+    if (!n || !l)
       return;
-    const e = (h) => {
-      h.key === "Escape" && k(!1);
+    const e = (v) => {
+      v.key === "Escape" && d(!1);
     };
     return window.addEventListener("keydown", e), () => {
       window.removeEventListener("keydown", e);
     };
-  }, [n, u]);
-  const S = T(() => ({
-    initialFocus: () => E.current ?? void 0,
+  }, [n, l]);
+  const S = w(() => ({
+    initialFocus: () => T.current ?? void 0,
     onActivate: () => {
       var e;
-      return (e = E.current) == null ? void 0 : e.focus();
+      return (e = T.current) == null ? void 0 : e.focus();
     }
-  }), []), g = /* @__PURE__ */ t.jsx(C, { decorators: a, children: /* @__PURE__ */ t.jsx("div", { "aria-hidden": !d, style: {
-    "--max-width": s ? `${s}px` : void 0
-  }, className: I("kakadu-components-4119461136", d && "kakadu-components-2522346797", i), children: /* @__PURE__ */ t.jsx(C, { decorators: c, children: /* @__PURE__ */ t.jsx(H.FocusTrap, { active: d, focusTrapOptions: S, children: /* @__PURE__ */ t.jsx("div", { ref: R, className: "kakadu-components-4011815997", children: /* @__PURE__ */ t.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": j ?? "Modal", className: I("kakadu-components-3324483532", m && "kakadu-components-3799971070", d && "kakadu-components-968755580"), children: /* @__PURE__ */ t.jsxs(Q, { value: D, children: [
-    l ? /* @__PURE__ */ t.jsx(V, {}) : null,
-    /* @__PURE__ */ t.jsx("div", { className: I("kakadu-components-633990035", m && "kakadu-components-171969824"), children: P })
+  }), []), b = /* @__PURE__ */ t.jsx(g, { decorators: a, children: /* @__PURE__ */ t.jsx("div", { "aria-hidden": !i, style: {
+    "--max-width": o ? `${o}px` : void 0
+  }, className: I("kakadu-components-4119461136", i && "kakadu-components-2522346797", x), children: /* @__PURE__ */ t.jsx(g, { decorators: r, children: /* @__PURE__ */ t.jsx(H.FocusTrap, { active: i, focusTrapOptions: S, children: /* @__PURE__ */ t.jsx("div", { ref: N, className: "kakadu-components-4011815997", children: /* @__PURE__ */ t.jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": k ?? "Modal", className: I("kakadu-components-3324483532", u && "kakadu-components-3799971070", i && "kakadu-components-968755580"), children: /* @__PURE__ */ t.jsxs(Q, { value: D, children: [
+    B ? /* @__PURE__ */ t.jsx(V, {}) : null,
+    /* @__PURE__ */ t.jsx("div", { className: I("kakadu-components-633990035", u && "kakadu-components-171969824"), children: P })
   ] }) }) }) }) }) }) });
-  return o ? G(g, o) : g;
+  return s ? G(b, s) : b;
 }
-function oe(o, a) {
-  const [c, j] = w(!1), s = p(void 0), i = p(null), n = v(async (u) => (j(!0), i.current = u ?? document.activeElement, new Promise((l) => {
-    s.current = l;
-  })), []), m = v((u) => {
+function se(s, a) {
+  const [r, k] = h(!1), o = j(void 0), x = f(async () => (k(!0), new Promise((c) => {
+    o.current = c;
+  })), []), n = f((c) => {
     var l;
-    if (j(!1), (l = s.current) == null || l.call(s, u), s.current = void 0, i.current) {
-      const r = i.current;
-      r.isConnected && r.focus(), i.current = null;
-    }
-  }, []), f = T(() => /* @__PURE__ */ t.jsx(o, { ...a, isVisible: c, onClose: m }), [o, a, c, m]);
-  return T(() => ({
-    isVisible: c,
-    show: n,
-    modal: f
-  }), [c, n, f]);
+    k(!1), (l = o.current) == null || l.call(o, c), o.current = void 0;
+  }, []), u = w(() => /* @__PURE__ */ t.jsx(s, { ...a, isVisible: r, onClose: n }), [s, a, r, n]);
+  return w(() => ({
+    isVisible: r,
+    show: x,
+    modal: u
+  }), [r, x, u]);
 }
 export {
   ne as default,
-  oe as useModal,
+  se as useModal,
   U as useModalContext
 };

package/build/components/popover-menu.d.ts

@@ -21,7 +21,7 @@ export type PopoverMenuItemProperties = {
     readonly onMouseEnter?: (event: MouseEvent<PopoverMenuItemElementType>) => void;
 };
 export declare function usePopoverMenu(items: PopoverMenuItemProperties[]): {
-    show: (reference?: HTMLElement) => Promise<void | undefined>;
+    show: () => Promise<void | undefined>;
     popoverMenu: import("react/jsx-runtime").JSX.Element;
 };
 export type PopoverMenuProperties = {

package/build/components/popover-menu.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),M=require("@kuma-ui/core"),a=require("react"),b=require("../theme.js"),k=require("../icons/icon.js"),j=require("./popover.js"),q=require("./atom.js"),g=require("./text.js"),R=require("./hover-gradient.js"),P=require("./click-ripples.js"),I=require("./separator.js"),N=require("./decorators.js"),v=new Set;function h(){const[e,n]=a.useState(!1),s=a.useCallback(o=>{n(o);for(const i of v)i(o)},[]);return a.useEffect(()=>{const o=i=>{n(i)};return v.add(o),()=>{v.delete(o)}},[]),a.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:s}),[e,s])}function S({label:e,iconLeft:n,iconRight:s,href:o,shouldCloseOnClick:i=!0,decorators:f=[],submenu:p,className:u,onClick:r,...l}){const{isFocused:c,close:x}=j.usePopoverContext(),{isKeyboardNavigating:d}=h(),m=a.useCallback(w=>{c&&(r==null||r(w),p?p.show():i&&(x==null||x()))},[c,r,i,x,p]),E=a.useMemo(()=>t.jsxRuntimeExports.jsxs(q.default,{as:o?"a":"button",...l,type:o?void 0:"button",role:"menuitem",href:o,className:M.cx(b.buttonResetStyles,"kakadu-components-3114599304",d?"kakadu-components-4096376656":"kakadu-components-2554182777",u),onClick:m,children:[t.jsxRuntimeExports.jsxs(g.Span,{className:"kakadu-components-1109353535",children:[n?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:n}):null,t.jsxRuntimeExports.jsx("span",{className:"kakadu-components-913703148",children:e}),s?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:s}):null]}),d?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(R.default,{size:150,className:R.normalBlendStyles}),t.jsxRuntimeExports.jsx(P.default,{size:100})]})]}),[d,l,o,u,m,n,e,s]);return t.jsxRuntimeExports.jsx(N.default,{decorators:f,children:p?t.jsxRuntimeExports.jsx(y,{menu:p.popoverMenu,className:"kakadu-components-1861176543",children:E}):E})}function _(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(I.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(g.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx(S,{...e})}function K({items:e}){const{isFocused:n}=j.usePopoverContext(),[s,o]=a.useState([]),{setIsKeyboardNavigating:i}=h(),f=a.useCallback(u=>{u&&o(r=>[...r,u])},[]),p=a.useCallback(u=>{n&&(u.currentTarget.focus(),i(!1))},[n,i]);return a.useEffect(()=>{if(!n)return;const u=r=>{const l=s.length;if(l===0)return;let c;const x=document.activeElement,d=x?s.indexOf(x):0;switch(r.key){case"ArrowDown":{c=(d+1)%l;break}case"ArrowUp":{c=(d-1+l)%l;break}case"Home":{c=0;break}case"End":{c=l-1;break}}if(c!==void 0){r.preventDefault(),r.stopPropagation();const m=s[c];m&&(m.focus(),i(!0))}};return window.addEventListener("keydown",u,{capture:!0}),()=>{window.removeEventListener("keydown",u,{capture:!0})}},[n,s,i]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((u,r)=>t.jsxRuntimeExports.jsx(_,{...u,reference:f,onMouseEnter:p},r))})}function C({items:e,...n}){return t.jsxRuntimeExports.jsx(j.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(K,{items:e})})}function F(e){const n=a.useMemo(()=>({items:e}),[e]),{show:s,popover:o}=j.usePopover(C,n);return a.useMemo(()=>({show:s,popoverMenu:o}),[s,o])}function y({menu:e,className:n,children:s}){return t.jsxRuntimeExports.jsxs(j.PopoverContainer,{className:n,children:[s,e]})}exports.default=y;exports.usePopoverMenu=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../jsx-runtime-BB_1_6y_.js"),M=require("@kuma-ui/core"),a=require("react"),b=require("../theme.js"),k=require("../icons/icon.js"),j=require("./popover.js"),q=require("./atom.js"),g=require("./text.js"),R=require("./hover-gradient.js"),P=require("./click-ripples.js"),I=require("./separator.js"),N=require("./decorators.js"),E=new Set;function h(){const[e,n]=a.useState(!1),r=a.useCallback(s=>{n(s);for(const i of E)i(s)},[]);return a.useEffect(()=>{const s=i=>{n(i)};return E.add(s),()=>{E.delete(s)}},[]),a.useMemo(()=>({isKeyboardNavigating:e,setIsKeyboardNavigating:r}),[e,r])}function S({label:e,iconLeft:n,iconRight:r,href:s,shouldCloseOnClick:i=!0,decorators:v=[],submenu:x,className:u,onClick:o,...m}){const{isFocused:l,close:c}=j.usePopoverContext(),{isKeyboardNavigating:f}=h(),d=a.useCallback(w=>{l&&(o==null||o(w),x?x.show():i&&(c==null||c()))},[l,o,i,c,x]),p=a.useMemo(()=>t.jsxRuntimeExports.jsxs(q.default,{as:s?"a":"button",...m,type:s?void 0:"button",role:"menuitem",href:s,className:M.cx(b.buttonResetStyles,"kakadu-components-3114599304",f?"kakadu-components-4096376656":"kakadu-components-2554182777",u),onClick:d,children:[t.jsxRuntimeExports.jsxs(g.Span,{className:"kakadu-components-1109353535",children:[n?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:n}):null,t.jsxRuntimeExports.jsx("span",{className:"kakadu-components-913703148",children:e}),r?t.jsxRuntimeExports.jsx(k.default,{width:12,height:12,type:r}):null]}),f?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(R.default,{size:150,className:R.normalBlendStyles}),t.jsxRuntimeExports.jsx(P.default,{size:100})]})]}),[f,m,s,u,d,n,e,r]);return t.jsxRuntimeExports.jsx(N.default,{decorators:v,children:x?t.jsxRuntimeExports.jsx(y,{menu:x.popoverMenu,className:"kakadu-components-1861176543",children:p}):p})}function _(e){if("type"in e){if(e.type==="separator")return t.jsxRuntimeExports.jsx(I.default,{});if(e.type==="group")return t.jsxRuntimeExports.jsx(g.Span,{className:"kakadu-components-1499037363",children:e.label})}return t.jsxRuntimeExports.jsx(S,{...e})}function K({items:e}){const{isFocused:n}=j.usePopoverContext(),[r,s]=a.useState([]),{setIsKeyboardNavigating:i}=h(),v=a.useCallback(u=>{u&&s(o=>o.includes(u)?o:[...o,u])},[]),x=a.useCallback(u=>{n&&(u.currentTarget.focus(),i(!1))},[n,i]);return a.useEffect(()=>{if(!n)return;const u=o=>{const m=r.filter(p=>p.isConnected),l=m.length;if(l===0)return;let c;const f=document.activeElement;let d=f?m.indexOf(f):-1;switch(d===-1&&(d=0),o.key){case"ArrowDown":{c=(d+1)%l;break}case"ArrowUp":{c=(d-1+l)%l;break}case"Home":{c=0;break}case"End":{c=l-1;break}}if(c!==void 0){o.preventDefault(),o.stopPropagation();const p=m[c];p&&(p.focus(),i(!0))}};return window.addEventListener("keydown",u,{capture:!0}),()=>{window.removeEventListener("keydown",u,{capture:!0})}},[n,r,i]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map((u,o)=>t.jsxRuntimeExports.jsx(_,{...u,reference:v,onMouseEnter:x},o))})}function C({items:e,...n}){return t.jsxRuntimeExports.jsx(j.default,{...n,as:"nav",role:"menu",innerClassName:"kakadu-components-3600436535",children:t.jsxRuntimeExports.jsx(K,{items:e})})}function F(e){const n=a.useMemo(()=>({items:e}),[e]),{show:r,popover:s}=j.usePopover(C,n);return a.useMemo(()=>({show:r,popoverMenu:s}),[r,s])}function y({menu:e,className:n,children:r}){return t.jsxRuntimeExports.jsxs(j.PopoverContainer,{className:n,children:[r,e]})}exports.default=y;exports.usePopoverMenu=F;