@kakadu/components 3.3.0 → 3.4.0

package/build/components/button-tooltip.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),u=require("@kuma-ui/core");var a=(t=>(t.top="top",t.bottom="bottom",t))(a||{});function s({id:t,label:r,position:o="top",className:e}){return n.jsxRuntimeExports.jsx("div",{id:t,role:"tooltip",className:u.cx("kakadu-components-982005200",o==="top"&&"kakadu-components-430823771",o==="bottom"&&"kakadu-components-2189175034",e),children:n.jsxRuntimeExports.jsx("span",{className:u.cx("kakadu-components-2032235075",o==="top"&&"kakadu-components-2481216458",o==="bottom"&&"kakadu-components-637471806",e),children:r})})}exports.ButtonTooltipPosition=a;exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../jsx-runtime-BB_1_6y_.js"),u=require("@kuma-ui/core");var a=(t=>(t.top="top",t.bottom="bottom",t))(a||{});function s({id:t,label:r,position:o="top",className:e}){return n.jsxRuntimeExports.jsx("div",{id:t,role:"tooltip",className:u.cx("kakadu-components-982005200",o==="top"&&"kakadu-components-430823771",o==="bottom"&&"kakadu-components-2189175034",e),children:n.jsxRuntimeExports.jsx("span",{className:u.cx("kakadu-components-3316581213",o==="top"&&"kakadu-components-2481216458",o==="bottom"&&"kakadu-components-637471806",e),children:r})})}exports.ButtonTooltipPosition=a;exports.default=s;

package/build/components/button-tooltip.mjs

@@ -7,7 +7,7 @@ function c({
   position: t = "top",
   className: a
 }) {
-  return /* @__PURE__ */ m.jsx("div", { id: o, role: "tooltip", className: n("kakadu-components-982005200", t === "top" && "kakadu-components-430823771", t === "bottom" && "kakadu-components-2189175034", a), children: /* @__PURE__ */ m.jsx("span", { className: n("kakadu-components-2032235075", t === "top" && "kakadu-components-2481216458", t === "bottom" && "kakadu-components-637471806", a), children: e }) });
+  return /* @__PURE__ */ m.jsx("div", { id: o, role: "tooltip", className: n("kakadu-components-982005200", t === "top" && "kakadu-components-430823771", t === "bottom" && "kakadu-components-2189175034", a), children: /* @__PURE__ */ m.jsx("span", { className: n("kakadu-components-3316581213", t === "top" && "kakadu-components-2481216458", t === "bottom" && "kakadu-components-637471806", a), children: e }) });
 }
 export {
   p as ButtonTooltipPosition,

package/build/components/click-ripples.d.ts

@@ -1,2 +1,4 @@
 import { type HTMLProps } from 'react';
-export default function ClickRipples({ size, className, ...properties }: HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export default function ClickRipples({ isActive, size, className, ...properties }: HTMLProps<HTMLDivElement> & {
+    readonly isActive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/build/components/click-ripples.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../jsx-runtime-BB_1_6y_.js"),n=require("react"),k=require("@kuma-ui/core");function v({id:s,x:r,y:i,onEnd:t}){return n.useEffect(()=>{const o=setTimeout(()=>{t(s)},370);return()=>{clearTimeout(o)}},[t,s]),a.jsxRuntimeExports.jsx("div",{style:{top:i,left:r},className:"kakadu-components-3828473824"})}function w({size:s=150,className:r,...i}){const t=n.useRef(null),[o,f]=n.useState([]);n.useEffect(()=>{const e=u=>{if(t.current){const c=t.current.getBoundingClientRect(),{clientX:l,clientY:d}=u,{left:m,right:j,top:x,bottom:E}=c;l>m&&l<j&&d>x&&d<E&&f(R=>[...R,{id:Date.now()+Math.random()*1e3,x:l-m,y:d-x}])}};return window.addEventListener("pointerdown",e),()=>{window.removeEventListener("pointerdown",e)}},[]);const p=n.useCallback(e=>{f(u=>u.filter(c=>c.id!==e))},[]);return a.jsxRuntimeExports.jsx("div",{...i,ref:t,style:{"--size":`${s}px`},className:k.cx("kakadu-components-4189236582",r),children:o.map(e=>a.jsxRuntimeExports.jsx(v,{id:e.id,x:e.x,y:e.y,onEnd:p},e.id))})}exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../jsx-runtime-BB_1_6y_.js"),r=require("react"),w=require("@kuma-ui/core");function v({id:t,x:o,y:i,onEnd:s}){return r.useEffect(()=>{const n=setTimeout(()=>{s(t)},370);return()=>{clearTimeout(n)}},[s,t]),a.jsxRuntimeExports.jsx("div",{style:{top:i,left:o},className:"kakadu-components-3828473824"})}function y({isActive:t=!0,size:o=150,className:i,...s}){const n=r.useRef(null),[p,f]=r.useState([]);r.useEffect(()=>{if(!t)return;const e=u=>{if(n.current){const c=n.current.getBoundingClientRect(),{clientX:l,clientY:d}=u,{left:m,right:E,top:x,bottom:R}=c;l>m&&l<E&&d>x&&d<R&&f(k=>[...k,{id:Date.now()+Math.random()*1e3,x:l-m,y:d-x}])}};return window.addEventListener("pointerdown",e),()=>{window.removeEventListener("pointerdown",e)}},[t]);const j=r.useCallback(e=>{f(u=>u.filter(c=>c.id!==e))},[]);return a.jsxRuntimeExports.jsx("div",{...s,ref:n,style:{"--size":`${o}px`},className:w.cx("kakadu-components-4189236582",i),children:p.map(e=>a.jsxRuntimeExports.jsx(v,{id:e.id,x:e.x,y:e.y,onEnd:j},e.id))})}exports.default=y;

package/build/components/click-ripples.mjs

@@ -1,60 +1,63 @@
 import { j as a } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useRef as v, useState as y, useEffect as p, useCallback as E } from "react";
-import { cx as R } from "@kuma-ui/core";
-function h({
-  id: n,
-  x: o,
+import { useRef as E, useState as R, useEffect as p, useCallback as h } from "react";
+import { cx as v } from "@kuma-ui/core";
+function C({
+  id: t,
+  x: r,
   y: s,
-  onEnd: t
+  onEnd: o
 }) {
   return p(() => {
-    const i = setTimeout(() => {
-      t(n);
+    const n = setTimeout(() => {
+      o(t);
     }, 370);
     return () => {
-      clearTimeout(i);
+      clearTimeout(n);
     };
-  }, [t, n]), /* @__PURE__ */ a.jsx("div", { style: {
+  }, [o, t]), /* @__PURE__ */ a.jsx("div", { style: {
     top: s,
-    left: o
+    left: r
   }, className: "kakadu-components-3828473824" });
 }
-function L({
-  size: n = 150,
-  className: o,
-  ...s
+function N({
+  isActive: t = !0,
+  size: r = 150,
+  className: s,
+  ...o
 }) {
-  const t = v(null), [i, d] = y([]);
+  const n = E(null), [x, d] = R([]);
   p(() => {
-    const e = (r) => {
-      if (t.current) {
-        const c = t.current.getBoundingClientRect(), {
-          clientX: l,
-          clientY: u
-        } = r, {
+    if (!t)
+      return;
+    const e = (i) => {
+      if (n.current) {
+        const c = n.current.getBoundingClientRect(), {
+          clientX: u,
+          clientY: l
+        } = i, {
           left: m,
-          right: k,
+          right: w,
           top: f,
-          bottom: w
+          bottom: j
         } = c;
-        l > m && l < k && u > f && u < w && d((j) => [...j, {
+        u > m && u < w && l > f && l < j && d((y) => [...y, {
           id: Date.now() + Math.random() * 1e3,
-          x: l - m,
-          y: u - f
+          x: u - m,
+          y: l - f
         }]);
       }
     };
     return window.addEventListener("pointerdown", e), () => {
       window.removeEventListener("pointerdown", e);
     };
+  }, [t]);
+  const k = h((e) => {
+    d((i) => i.filter((c) => c.id !== e));
   }, []);
-  const x = E((e) => {
-    d((r) => r.filter((c) => c.id !== e));
-  }, []);
-  return /* @__PURE__ */ a.jsx("div", { ...s, ref: t, style: {
-    "--size": `${n}px`
-  }, className: R("kakadu-components-4189236582", o), children: i.map((e) => /* @__PURE__ */ a.jsx(h, { id: e.id, x: e.x, y: e.y, onEnd: x }, e.id)) });
+  return /* @__PURE__ */ a.jsx("div", { ...o, ref: n, style: {
+    "--size": `${r}px`
+  }, className: v("kakadu-components-4189236582", s), children: x.map((e) => /* @__PURE__ */ a.jsx(C, { id: e.id, x: e.x, y: e.y, onEnd: k }, e.id)) });
 }
 export {
-  L as default
+  N as default
 };

package/build/components/hover-gradient.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLProps } from 'react';
 export declare const normalBlendStyles: string;
-export default function HoverGradient({ size, className, ...properties }: HTMLProps<HTMLDivElement> & {
+export default function HoverGradient({ isActive, size, className, ...properties }: HTMLProps<HTMLDivElement> & {
+    readonly isActive?: boolean;
     readonly size?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/build/components/hover-gradient.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("../jsx-runtime-BB_1_6y_.js"),t=require("react"),p=require("@kuma-ui/core"),R="kakadu-components-2608453841";function $({size:x=200,className:k,...E}){const i=t.useRef(null),n=t.useRef(null),[g,u]=t.useState(!1),[s,b]=t.useState();return t.useEffect(()=>{const c=i.current;if(!c)return;n.current||(n.current=c.parentElement);const e=n.current;if(!e)return;const l=m=>{const j=m.target;if(!e.contains(j))return;const S=e.getBoundingClientRect(),{clientX:o,clientY:r}=m,{left:d,right:y,top:f,bottom:L}=S;o>d&&o<y&&r>f&&r<L&&(u(!0),b([o-d,r-f]))},a=()=>{u(!1)};return e.addEventListener("mousemove",l),e.addEventListener("mouseleave",a),()=>{e.removeEventListener("mousemove",l),e.removeEventListener("mouseleave",a)}},[]),v.jsxRuntimeExports.jsx("div",{...E,ref:i,className:p.cx("kakadu-components-1237006455",k),children:s?v.jsxRuntimeExports.jsx("div",{style:{"--size":`${x}px`,"--offset-x":`${s[0]}px`,"--offset-y":`${s[1]}px`},className:p.cx("kakadu-components-611160091",g&&"kakadu-components-3627966847")}):null})}exports.default=$;exports.normalBlendStyles=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("../jsx-runtime-BB_1_6y_.js"),t=require("react"),p=require("@kuma-ui/core"),$="kakadu-components-2608453841";function q({isActive:x=!0,size:k=200,className:E,...g}){const i=t.useRef(null),n=t.useRef(null),[b,s]=t.useState(!1),[o,j]=t.useState();return t.useEffect(()=>{if(!x){s(!1);return}const c=i.current;if(!c)return;n.current||(n.current=c.parentElement);const e=n.current;if(!e)return;const l=m=>{const S=m.target;if(!e.contains(S))return;const y=e.getBoundingClientRect(),{clientX:r,clientY:u}=m,{left:f,right:L,top:d,bottom:R}=y;r>f&&r<L&&u>d&&u<R&&(s(!0),j([r-f,u-d]))},a=()=>{s(!1)};return e.addEventListener("mousemove",l),e.addEventListener("mouseleave",a),()=>{e.removeEventListener("mousemove",l),e.removeEventListener("mouseleave",a)}},[]),v.jsxRuntimeExports.jsx("div",{...g,ref:i,className:p.cx("kakadu-components-1237006455",E),children:o?v.jsxRuntimeExports.jsx("div",{style:{"--size":`${k}px`,"--offset-x":`${o[0]}px`,"--offset-y":`${o[1]}px`},className:p.cx("kakadu-components-611160091",b&&"kakadu-components-3627966847")}):null})}exports.default=q;exports.normalBlendStyles=$;

package/build/components/hover-gradient.mjs

@@ -1,48 +1,53 @@
 import { j as d } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useRef as p, useState as v, useEffect as B } from "react";
+import { useRef as p, useState as v, useEffect as N } from "react";
 import { cx as x } from "@kuma-ui/core";
-const V = "kakadu-components-2608453841";
-function z({
-  size: k = 200,
-  className: E,
-  ...g
+const z = "kakadu-components-2608453841";
+function C({
+  isActive: k = !0,
+  size: E = 200,
+  className: g,
+  ...L
 }) {
-  const r = p(null), t = p(null), [L, i] = v(!1), [n, b] = v();
-  return B(() => {
-    const c = r.current;
-    if (!c)
+  const i = p(null), t = p(null), [b, n] = v(!1), [s, j] = v();
+  return N(() => {
+    if (!k) {
+      n(!1);
       return;
-    t.current || (t.current = c.parentElement);
+    }
+    const a = i.current;
+    if (!a)
+      return;
+    t.current || (t.current = a.parentElement);
     const e = t.current;
     if (!e)
       return;
-    const a = (u) => {
-      const j = u.target;
-      if (!e.contains(j))
+    const c = (l) => {
+      const y = l.target;
+      if (!e.contains(y))
         return;
-      const y = e.getBoundingClientRect(), {
-        clientX: s,
-        clientY: o
-      } = u, {
+      const $ = e.getBoundingClientRect(), {
+        clientX: o,
+        clientY: r
+      } = l, {
         left: m,
-        right: $,
+        right: h,
         top: f,
-        bottom: h
-      } = y;
-      s > m && s < $ && o > f && o < h && (i(!0), b([s - m, o - f]));
-    }, l = () => {
-      i(!1);
+        bottom: B
+      } = $;
+      o > m && o < h && r > f && r < B && (n(!0), j([o - m, r - f]));
+    }, u = () => {
+      n(!1);
     };
-    return e.addEventListener("mousemove", a), e.addEventListener("mouseleave", l), () => {
-      e.removeEventListener("mousemove", a), e.removeEventListener("mouseleave", l);
+    return e.addEventListener("mousemove", c), e.addEventListener("mouseleave", u), () => {
+      e.removeEventListener("mousemove", c), e.removeEventListener("mouseleave", u);
     };
-  }, []), /* @__PURE__ */ d.jsx("div", { ...g, ref: r, className: x("kakadu-components-1237006455", E), children: n ? /* @__PURE__ */ d.jsx("div", { style: {
-    "--size": `${k}px`,
-    "--offset-x": `${n[0]}px`,
-    "--offset-y": `${n[1]}px`
-  }, className: x("kakadu-components-611160091", L && "kakadu-components-3627966847") }) : null });
+  }, []), /* @__PURE__ */ d.jsx("div", { ...L, ref: i, className: x("kakadu-components-1237006455", g), children: s ? /* @__PURE__ */ d.jsx("div", { style: {
+    "--size": `${E}px`,
+    "--offset-x": `${s[0]}px`,
+    "--offset-y": `${s[1]}px`
+  }, className: x("kakadu-components-611160091", b && "kakadu-components-3627966847") }) : null });
 }
 export {
-  z as default,
-  V as normalBlendStyles
+  C as default,
+  z as normalBlendStyles
 };

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

package/build/components/popover-menu.mjs

@@ -3,8 +3,8 @@ import { cx as M } from "@kuma-ui/core";
 import { useMemo as v, useState as y, useCallback as x, useEffect as w } from "react";
 import { buttonResetStyles as E } from "../theme.mjs";
 import h from "../icons/icon.mjs";
-import S, { PopoverContainer as K, usePopover as F, usePopoverContext as b } from "./popover.mjs";
-import A from "./atom.mjs";
+import S, { PopoverContainer as K, usePopover as A, usePopoverContext as b } from "./popover.mjs";
+import F from "./atom.mjs";
 import { Span as I } from "./text.mjs";
 import D, { normalBlendStyles as H } from "./hover-gradient.mjs";
 import z from "./click-ripples.mjs";
@@ -14,12 +14,12 @@ const j = /* @__PURE__ */ new Set();
 function N() {
   const [e, t] = y(!1), s = x((o) => {
     t(o);
-    for (const i of j)
-      i(o);
+    for (const c of j)
+      c(o);
   }, []);
   return w(() => {
-    const o = (i) => {
-      t(i);
+    const o = (c) => {
+      t(c);
     };
     return j.add(o), () => {
       j.delete(o);
@@ -34,7 +34,7 @@ function R({
   iconLeft: t,
   iconRight: s,
   href: o,
-  shouldCloseOnClick: i = !0,
+  shouldCloseOnClick: c = !0,
   decorators: k = [],
   submenu: m,
   className: a,
@@ -43,21 +43,21 @@ function R({
 }) {
   const {
     isVisible: u,
-    isFocused: c,
+    isFocused: i,
     close: l
   } = b(), {
     isKeyboardNavigating: d
   } = N(), p = x((P) => {
-    c && (r == null || r(P), m ? m.show() : i && (l == null || l()));
-  }, [c, r, m, i, l]), g = v(() => /* @__PURE__ */ n.jsxs(A, { as: o ? "a" : "button", ...f, type: o ? void 0 : "button", role: "menuitem", href: o, disabled: o ? void 0 : !u, className: M(E, "kakadu-components-3114599304", d ? "kakadu-components-2043829669" : "kakadu-components-2554182777", a), onClick: p, children: [
+    i && (r == null || r(P), m ? m.show() : c && (l == null || l()));
+  }, [i, r, m, c, l]), g = v(() => /* @__PURE__ */ n.jsxs(F, { as: o ? "a" : "button", ...f, type: o ? void 0 : "button", role: "menuitem", href: o, disabled: o ? void 0 : !u, className: M(E, "kakadu-components-4075327442", i && "kakadu-components-3160069815", d ? "kakadu-components-2043829669" : i && "kakadu-components-2862719809", a), onClick: p, children: [
     /* @__PURE__ */ n.jsxs(I, { className: "kakadu-components-1109353535", children: [
       t ? /* @__PURE__ */ n.jsx(h, { width: 12, height: 12, type: t }) : null,
       /* @__PURE__ */ n.jsx("span", { className: "kakadu-components-913703148", children: e }),
       s ? /* @__PURE__ */ n.jsx(h, { width: 12, height: 12, type: s }) : null
     ] }),
     d ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsx(D, { size: 150, className: H }),
-      /* @__PURE__ */ n.jsx(z, { size: 100 })
+      /* @__PURE__ */ n.jsx(z, { isActive: i, size: 100 }),
+      /* @__PURE__ */ n.jsx(D, { isActive: i, size: 150, className: H })
     ] })
   ] }), [o, f, u, d, a, p, t, e, s]);
   return /* @__PURE__ */ n.jsx(L, { decorators: k, children: m ? /* @__PURE__ */ n.jsx(U, { menu: m.popoverMenu, className: "kakadu-components-1861176543", children: g }) : g });
@@ -77,12 +77,12 @@ function B({
   const {
     isFocused: t
   } = b(), [s, o] = y([]), {
-    setIsKeyboardNavigating: i
+    setIsKeyboardNavigating: c
   } = N(), k = x((a) => {
     a && o((r) => r.includes(a) ? r : [...r, a]);
   }, []), m = x((a) => {
-    t && (a.currentTarget.focus(), i(!1));
-  }, [t, i]);
+    t && (a.currentTarget.focus(), c(!1));
+  }, [t, c]);
   return w(() => {
     if (!t)
       return;
@@ -90,35 +90,35 @@ function B({
       const f = s.filter((p) => p.isConnected), u = f.length;
       if (u === 0)
         return;
-      let c;
+      let i;
       const l = document.activeElement;
       let d = l ? f.indexOf(l) : -1;
       switch (d === -1 && (d = 0), r.key) {
         case "ArrowDown": {
-          c = (d + 1) % u;
+          i = (d + 1) % u;
           break;
         }
         case "ArrowUp": {
-          c = (d - 1 + u) % u;
+          i = (d - 1 + u) % u;
           break;
         }
         case "Home": {
-          c = 0;
+          i = 0;
           break;
         }
         case "End": {
-          c = u - 1;
+          i = u - 1;
           break;
         }
         case "Tab": {
-          i(!0);
+          c(!0);
           return;
         }
       }
-      if (c !== void 0) {
+      if (i !== void 0) {
         r.preventDefault(), r.stopPropagation();
-        const p = f[c];
-        p && (p.focus(), i(!0));
+        const p = f[i];
+        p && (p.focus(), c(!0));
       }
     };
     return window.addEventListener("keydown", a, {
@@ -128,7 +128,7 @@ function B({
         capture: !0
       });
     };
-  }, [t, s, i]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((a, r) => /* @__PURE__ */ n.jsx(
+  }, [t, s, c]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((a, r) => /* @__PURE__ */ n.jsx(
     T,
     {
       ...a,
@@ -150,7 +150,7 @@ function ne(e) {
   }), [e]), {
     show: s,
     popover: o
-  } = F(G, t);
+  } = A(G, t);
   return v(() => ({
     show: s,
     popoverMenu: o