@kakadu/components 6.1.1 → 6.3.0

package/build/components/moving-gradients.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("../jsx-runtime-BB_1_6y_.js"),s=require("react"),L=require("@kuma-ui/core"),O=require("../hooks/use-is-in-view.js"),T=require("../hooks/use-is-document-focused.js"),B=["rgb(46, 75, 164)","rgb(58, 125, 159)","rgb(42, 81, 142)","rgb(48, 132, 168)","rgb(45, 64, 157)"];function J(S){return S.map(C=>{var n;const[m,b,X]=((n=C.match(/\d+/g))==null?void 0:n.map(Number))??[];return[m,b,X]})}function K({className:S,colors:C=B,maximumGradientsCount:m=10,speed:b=1,opacity:X=.2}){const n=s.useRef(null),[h,E]=s.useState(),[g,$]=s.useState(0),[p,z]=s.useState(0),q=s.useMemo(()=>J(C),[C]),A=s.useMemo(()=>q.length,[q]),Y=s.useCallback(()=>{const f=Math.random(),y=q[Math.floor(A*f)],r=g*1.25,M=g*.25,v=p*1.25,e=p*.25,t=r*Math.random()-M,o=v*Math.random()-e,i=Math.max(r,v);return{color:y,size:i*f+i/2,opacity:0,speed:Math.max(.1,f/2*b),startPosition:[t,o],currentPosition:[t,o],targetPosition:[r*Math.random()-M,v*Math.random()-e]}},[q,A,g,p,b]),H=O.default(n),W=T.default(),F=s.useRef(!1);return F.current=!H||!W,s.useEffect(()=>{const a=Array.from({length:m}).map(()=>Y());let f=m,y=!1,r;function M(){if(!y){if(!h||F.current){r=requestAnimationFrame(M);return}h.clearRect(0,0,g,p);for(let e=a.length;e;e-=1){const t=a[e-1],[o,i]=t.startPosition,[c,u]=t.currentPosition,[l,d]=t.targetPosition;let x=!0;if(o>l?c>l&&(x=!1):c<l&&(x=!1),i>d?u>d&&(x=!1):u<d&&(x=!1),x){a.splice(e-1,1),f-=1;continue}const _=(o+l)/2-o,D=c-o,G=(i+d)/2-i,N=u-i,R=(D/_+N/G)/2;t.opacity=R>1?2-R:R;const j=t.size/2,I=h.createRadialGradient(c,u,j,c,u,0);if(I.addColorStop(0,`rgba(${t.color.join(",")},0)`),I.addColorStop(1,`rgba(${t.color.join(",")},${t.opacity})`),h.fillStyle=I,h.fillRect(c-j,u-j,t.size,t.size),c!==l){const k=Math.abs(o-l),w=Math.abs(i-d),P=Math.min(1,k/w);c<l?t.currentPosition[0]+=t.speed*P:t.currentPosition[0]-=t.speed*P}if(u!==d){const k=Math.abs(o-l),w=Math.abs(i-d),P=Math.min(1,w/k);u<d?t.currentPosition[1]+=t.speed*P:t.currentPosition[1]-=t.speed*P}}r=requestAnimationFrame(M)}}r=requestAnimationFrame(M);const v=setInterval(()=>{if(F.current)return;let e=m-f;if(e>0)for(;e;)a.push(Y()),e-=1,f+=1},1500);return()=>{y=!0,r&&cancelAnimationFrame(r),clearInterval(v)}},[m,Y,h,g,p,b]),s.useEffect(()=>{if(n.current){const a=n.current.getContext("2d");a&&E(a),$(n.current.offsetWidth),z(n.current.offsetHeight)}},[n]),V.jsxRuntimeExports.jsx("canvas",{ref:n,"aria-hidden":!0,role:"presentation",width:g,height:p,style:{"--opacity":X},className:L.cx("kakadu-components-4131181690",S)})}exports.default=K;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("../jsx-runtime-BB_1_6y_.js"),o=require("react"),O=require("@kuma-ui/core"),V=require("../hooks/use-is-in-view.js"),T=require("../hooks/use-is-document-focused.js"),B=require("../utilities/listeners.js"),J=B.default(m=>{window.addEventListener("resize",m,{passive:!0})},m=>{window.removeEventListener("resize",m)}),K=["rgb(46, 75, 164)","rgb(58, 125, 159)","rgb(42, 81, 142)","rgb(48, 132, 168)","rgb(45, 64, 157)"];function Q(m){return m.map(C=>{var t;const[M,q,R]=((t=C.match(/\d+/g))==null?void 0:t.map(Number))??[];return[M,q,R]})}function U({className:m,colors:C=K,maximumGradientsCount:M=10,speed:q=1,opacity:R=.2}){const t=o.useRef(null),[h,H]=o.useState(),[g,j]=o.useState(0),[p,F]=o.useState(0),w=o.useMemo(()=>Q(C),[C]),I=o.useMemo(()=>w.length,[w]),y=o.useCallback(()=>{const n=Math.random(),b=w[Math.floor(I*n)],u=g*1.25,i=g*.25,s=p*1.25,e=p*.25,a=u*Math.random()-i,c=s*Math.random()-e,r=Math.max(u,s);return{color:b,size:r*n+r/2,opacity:0,speed:Math.max(.1,n/2*q),startPosition:[a,c],currentPosition:[a,c],targetPosition:[u*Math.random()-i,s*Math.random()-e]}},[w,I,g,p,q]),L=V.default(t),W=T.default(),k=!L||!W,G=o.useRef(Array.from({length:M}).map(()=>y()));return o.useEffect(()=>{if(k||!h)return;let v=!1,n;function b(){if(v||!h)return;const i=G.current;h.clearRect(0,0,g,p);for(let s=i.length;s;s-=1){const e=i[s-1],[a,c]=e.startPosition,[r,l]=e.currentPosition,[d,f]=e.targetPosition;let x=!0;if(a>d?r>d&&(x=!1):r<d&&(x=!1),c>f?l>f&&(x=!1):l<f&&(x=!1),x){i.splice(s-1,1);continue}const _=(a+d)/2-a,$=r-a,A=(c+f)/2-c,D=l-c,z=($/(_||1)+D/(A||1))/2;e.opacity=z>1?2-z:z;const S=e.size/2,X=h.createRadialGradient(r,l,S,r,l,0);if(X.addColorStop(0,`rgba(${e.color.join(",")},0)`),X.addColorStop(1,`rgba(${e.color.join(",")},${e.opacity})`),h.fillStyle=X,h.fillRect(r-S,l-S,e.size,e.size),r!==d){const Y=Math.abs(a-d),E=Math.abs(c-f),P=Math.min(1,Y/E);r<d?e.currentPosition[0]+=e.speed*P:e.currentPosition[0]-=e.speed*P}if(l!==f){const Y=Math.abs(a-d),E=Math.abs(c-f),P=Math.min(1,E/Y);l<f?e.currentPosition[1]+=e.speed*P:e.currentPosition[1]-=e.speed*P}}n=requestAnimationFrame(b)}n=requestAnimationFrame(b);const u=setInterval(()=>{const i=G.current;let s=i.length,e=M-s;if(e>0)for(;e;)i.push(y()),e-=1,s+=1},1500);return()=>{v=!0,n&&cancelAnimationFrame(n),clearInterval(u)}},[k,h,g,p,M,y]),o.useEffect(()=>{if(t.current){const v=t.current.getContext("2d");v&&H(v),j(t.current.offsetWidth),F(t.current.offsetHeight);const n=()=>{t.current&&(j(t.current.offsetWidth),F(t.current.offsetHeight))},b=J(n),u=new ResizeObserver(n);return u.observe(t.current),()=>{b(),u.disconnect()}}},[t]),N.jsxRuntimeExports.jsx("canvas",{ref:t,"aria-hidden":!0,role:"presentation",width:g,height:p,style:{"--opacity":R},className:O.cx("kakadu-components-4131181690",m)})}exports.default=U;

package/build/components/moving-gradients.mjs

@@ -1,90 +1,100 @@
-import { j as K } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useRef as H, useState as z, useMemo as S, useCallback as O, useEffect as W } from "react";
+import { j as J } from "../jsx-runtime-B4hRZ52C.mjs";
+import { useRef as q, useState as I, useMemo as A, useCallback as K, useEffect as S } from "react";
 import { cx as Q } from "@kuma-ui/core";
 import T from "../hooks/use-is-in-view.mjs";
 import U from "../hooks/use-is-document-focused.mjs";
-const Z = ["rgb(46, 75, 164)", "rgb(58, 125, 159)", "rgb(42, 81, 142)", "rgb(48, 132, 168)", "rgb(45, 64, 157)"];
-function _(X) {
-  return X.map((P) => {
-    var n;
-    const [f, M, Y] = ((n = P.match(/\d+/g)) == null ? void 0 : n.map(Number)) ?? [];
-    return [f, M, Y];
+import Z from "../utilities/listeners.mjs";
+const _ = Z((f) => {
+  window.addEventListener("resize", f, {
+    passive: !0
+  });
+}, (f) => {
+  window.removeEventListener("resize", f);
+}), tt = ["rgb(46, 75, 164)", "rgb(58, 125, 159)", "rgb(42, 81, 142)", "rgb(48, 132, 168)", "rgb(45, 64, 157)"];
+function et(f) {
+  return f.map((C) => {
+    var e;
+    const [b, P, z] = ((e = C.match(/\d+/g)) == null ? void 0 : e.map(Number)) ?? [];
+    return [b, P, z];
   });
 }
-function st({
-  className: X,
-  colors: P = Z,
-  maximumGradientsCount: f = 10,
-  speed: M = 1,
-  opacity: Y = 0.2
+function ct({
+  className: f,
+  colors: C = tt,
+  maximumGradientsCount: b = 10,
+  speed: P = 1,
+  opacity: z = 0.2
 }) {
-  const n = H(null), [m, k] = z(), [h, D] = z(0), [p, $] = z(0), C = S(() => _(P), [P]), E = S(() => C.length, [C]), F = O(() => {
-    const d = Math.random(), y = C[Math.floor(E * d)], o = h * 1.25, g = h * 0.25, b = p * 1.25, e = p * 0.25, t = o * Math.random() - g, r = b * Math.random() - e, s = Math.max(o, b);
+  const e = q(null), [m, k] = I(), [h, L] = I(0), [p, j] = I(0), w = A(() => et(C), [C]), G = A(() => w.length, [w]), y = K(() => {
+    const n = Math.random(), v = w[Math.floor(G * n)], c = h * 1.25, o = h * 0.25, r = p * 1.25, t = p * 0.25, i = c * Math.random() - o, a = r * Math.random() - t, s = Math.max(c, r);
     return {
-      color: y,
-      size: s * d + s / 2,
+      color: v,
+      size: s * n + s / 2,
       opacity: 0,
-      speed: Math.max(0.1, d / 2 * M),
-      startPosition: [t, r],
-      currentPosition: [t, r],
-      targetPosition: [o * Math.random() - g, b * Math.random() - e]
+      speed: Math.max(0.1, n / 2 * P),
+      startPosition: [i, a],
+      currentPosition: [i, a],
+      targetPosition: [c * Math.random() - o, r * Math.random() - t]
     };
-  }, [C, E, h, p, M]), G = T(n), N = U(), I = H(!1);
-  return I.current = !G || !N, W(() => {
-    const i = Array.from({
-      length: f
-    }).map(() => F());
-    let d = f, y = !1, o;
-    function g() {
-      if (!y) {
-        if (!m || I.current) {
-          o = requestAnimationFrame(g);
-          return;
+  }, [w, G, h, p, P]), D = T(e), $ = U(), H = !D || !$, W = q(Array.from({
+    length: b
+  }).map(() => y()));
+  return S(() => {
+    if (H || !m)
+      return;
+    let g = !1, n;
+    function v() {
+      if (g || !m)
+        return;
+      const o = W.current;
+      m.clearRect(0, 0, h, p);
+      for (let r = o.length; r; r -= 1) {
+        const t = o[r - 1], [i, a] = t.startPosition, [s, l] = t.currentPosition, [u, d] = t.targetPosition;
+        let M = !0;
+        if (i > u ? s > u && (M = !1) : s < u && (M = !1), a > d ? l > d && (M = !1) : l < d && (M = !1), M) {
+          o.splice(r - 1, 1);
+          continue;
         }
-        m.clearRect(0, 0, h, p);
-        for (let e = i.length; e; e -= 1) {
-          const t = i[e - 1], [r, s] = t.startPosition, [a, c] = t.currentPosition, [l, u] = t.targetPosition;
-          let v = !0;
-          if (r > l ? a > l && (v = !1) : a < l && (v = !1), s > u ? c > u && (v = !1) : c < u && (v = !1), v) {
-            i.splice(e - 1, 1), d -= 1;
-            continue;
-          }
-          const V = (r + l) / 2 - r, L = a - r, B = (s + u) / 2 - s, J = c - s, j = (L / V + J / B) / 2;
-          t.opacity = j > 1 ? 2 - j : j;
-          const q = t.size / 2, w = m.createRadialGradient(a, c, q, a, c, 0);
-          if (w.addColorStop(0, `rgba(${t.color.join(",")},0)`), w.addColorStop(1, `rgba(${t.color.join(",")},${t.opacity})`), m.fillStyle = w, m.fillRect(a - q, c - q, t.size, t.size), a !== l) {
-            const A = Math.abs(r - l), R = Math.abs(s - u), x = Math.min(1, A / R);
-            a < l ? t.currentPosition[0] += t.speed * x : t.currentPosition[0] -= t.speed * x;
-          }
-          if (c !== u) {
-            const A = Math.abs(r - l), R = Math.abs(s - u), x = Math.min(1, R / A);
-            c < u ? t.currentPosition[1] += t.speed * x : t.currentPosition[1] -= t.speed * x;
-          }
+        const N = (i + u) / 2 - i, V = s - i, O = (a + d) / 2 - a, B = l - a, R = (V / (N || 1) + B / (O || 1)) / 2;
+        t.opacity = R > 1 ? 2 - R : R;
+        const X = t.size / 2, Y = m.createRadialGradient(s, l, X, s, l, 0);
+        if (Y.addColorStop(0, `rgba(${t.color.join(",")},0)`), Y.addColorStop(1, `rgba(${t.color.join(",")},${t.opacity})`), m.fillStyle = Y, m.fillRect(s - X, l - X, t.size, t.size), s !== u) {
+          const E = Math.abs(i - u), F = Math.abs(a - d), x = Math.min(1, E / F);
+          s < u ? t.currentPosition[0] += t.speed * x : t.currentPosition[0] -= t.speed * x;
+        }
+        if (l !== d) {
+          const E = Math.abs(i - u), F = Math.abs(a - d), x = Math.min(1, F / E);
+          l < d ? t.currentPosition[1] += t.speed * x : t.currentPosition[1] -= t.speed * x;
         }
-        o = requestAnimationFrame(g);
       }
+      n = requestAnimationFrame(v);
     }
-    o = requestAnimationFrame(g);
-    const b = setInterval(() => {
-      if (I.current)
-        return;
-      let e = f - d;
-      if (e > 0)
-        for (; e; )
-          i.push(F()), e -= 1, d += 1;
+    n = requestAnimationFrame(v);
+    const c = setInterval(() => {
+      const o = W.current;
+      let r = o.length, t = b - r;
+      if (t > 0)
+        for (; t; )
+          o.push(y()), t -= 1, r += 1;
     }, 1500);
     return () => {
-      y = !0, o && cancelAnimationFrame(o), clearInterval(b);
+      g = !0, n && cancelAnimationFrame(n), clearInterval(c);
     };
-  }, [f, F, m, h, p, M]), W(() => {
-    if (n.current) {
-      const i = n.current.getContext("2d");
-      i && k(i), D(n.current.offsetWidth), $(n.current.offsetHeight);
+  }, [H, m, h, p, b, y]), S(() => {
+    if (e.current) {
+      const g = e.current.getContext("2d");
+      g && k(g), L(e.current.offsetWidth), j(e.current.offsetHeight);
+      const n = () => {
+        e.current && (L(e.current.offsetWidth), j(e.current.offsetHeight));
+      }, v = _(n), c = new ResizeObserver(n);
+      return c.observe(e.current), () => {
+        v(), c.disconnect();
+      };
     }
-  }, [n]), /* @__PURE__ */ K.jsx("canvas", { ref: n, "aria-hidden": !0, role: "presentation", width: h, height: p, style: {
-    "--opacity": Y
-  }, className: Q("kakadu-components-4131181690", X) });
+  }, [e]), /* @__PURE__ */ J.jsx("canvas", { ref: e, "aria-hidden": !0, role: "presentation", width: h, height: p, style: {
+    "--opacity": z
+  }, className: Q("kakadu-components-4131181690", f) });
 }
 export {
-  st as default
+  ct as default
 };

package/build/components/moving-stars.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("../jsx-runtime-BB_1_6y_.js"),r=require("react"),B=require("@kuma-ui/core"),G=require("../hooks/use-is-in-view.js"),J=require("../hooks/use-is-document-focused.js");function K({color:q,opacity:H,className:W,minimumSize:I=1,maximumSize:A=5,maximumStarsCount:x=50,speed:w=1,hasMask:j=!1}){const e=r.useRef(null),[o,_]=r.useState(),[f,R]=r.useState(0),[d,S]=r.useState(0),y=r.useCallback(()=>{const n=f*1.5,s=f*.25,a=d*1.5,i=d*.25,M=n*Math.random()-s,h=a*Math.random()-i;return{size:Math.max(I,A*Math.random()),opacity:0,speed:Math.max(.1,Math.random()/2*w),startPosition:[M,h],currentPosition:[M,h],targetPosition:[n*Math.random()-s,a*Math.random()-i]}},[f,d,I,A,w]),C=r.useCallback(()=>q??(e.current?getComputedStyle(e.current).color:"#000"),[q,e]),z=G.default(e),D=J.default(),k=r.useRef(!1);return k.current=!z||!D,r.useEffect(()=>{const n=Array.from({length:x}).map(()=>y());let s=x,a=!1,i,M=C();function h(){if(!a){if(!o||k.current){i=requestAnimationFrame(h);return}o.clearRect(0,0,f,d);for(let c=n.length;c;c-=1){const t=n[c-1],[v,p]=t.startPosition,[g,m]=t.currentPosition,[u,l]=t.targetPosition;let P=!0;if(v>u?g>u&&(P=!1):g<u&&(P=!1),p>l?m>l&&(P=!1):m<l&&(P=!1),P){n.splice(c-1,1),s-=1;continue}const O=(v+u)/2-v,V=g-v,$=(p+l)/2-p,N=m-p,X=(V/O+N/$)/2;t.opacity=X>1?2-X:X;const Y=t.size/2;if(o.beginPath(),o.arc(g-Y,m-Y,Y,0,2*Math.PI,!1),o.globalAlpha=t.opacity,o.fillStyle=M,o.fill(),g!==u){const E=Math.abs(v-u),F=Math.abs(p-l),b=Math.min(1,E/F);g<u?t.currentPosition[0]+=t.speed*b:t.currentPosition[0]-=t.speed*b}if(m!==l){const E=Math.abs(v-u),F=Math.abs(p-l),b=Math.min(1,F/E);m<l?t.currentPosition[1]+=t.speed*b:t.currentPosition[1]-=t.speed*b}}i=requestAnimationFrame(h)}}i=requestAnimationFrame(h);const L=setInterval(()=>{if(k.current)return;M=C();let c=x-s;if(c>0)for(;c;)n.push(y()),c-=1,s+=1},500);return()=>{a=!0,i&&cancelAnimationFrame(i),clearInterval(L)}},[x,y,C,o,f,d,w]),r.useEffect(()=>{if(e.current){const n=e.current.getContext("2d");n&&_(n),R(e.current.offsetWidth),S(e.current.offsetHeight);const s=()=>{e.current&&(R(e.current.offsetWidth),S(e.current.offsetHeight))},a=new ResizeObserver(s);return a.observe(e.current),window.addEventListener("resize",s,{passive:!0}),()=>{a.disconnect(),window.removeEventListener("resize",s)}}},[e]),T.jsxRuntimeExports.jsx("canvas",{ref:e,"aria-hidden":!0,role:"presentation",style:{"--color":q,"--opacity":H},className:B.cx("kakadu-components-3366903902",j&&"kakadu-components-4049648322",W),width:f,height:d})}exports.default=K;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("../jsx-runtime-BB_1_6y_.js"),o=require("react"),B=require("@kuma-ui/core"),G=require("../hooks/use-is-in-view.js"),J=require("../hooks/use-is-document-focused.js"),K=require("../utilities/listeners.js"),Q=K.default(l=>{window.addEventListener("resize",l,{passive:!0})},l=>{window.removeEventListener("resize",l)});function U({color:l,opacity:H,className:W,minimumSize:X=1,maximumSize:Y=5,maximumStarsCount:q=50,speed:E=1,hasMask:_=!1}){const t=o.useRef(null),[n,j]=o.useState(),[h,I]=o.useState(0),[v,F]=o.useState(0),C=o.useCallback(()=>{const i=h*1.5,s=h*.25,d=v*1.5,a=v*.25,x=i*Math.random()-s,r=d*Math.random()-a;return{size:Math.max(X,Y*Math.random()),opacity:0,speed:Math.max(.1,Math.random()/2*E),startPosition:[x,r],currentPosition:[x,r],targetPosition:[i*Math.random()-s,d*Math.random()-a]}},[h,v,X,Y,E]),w=o.useCallback(()=>l??(t.current?getComputedStyle(t.current).color:"#000"),[l,t]),L=G.default(t),D=J.default(),z=!L||!D,A=o.useRef(Array.from({length:q}).map(()=>C()));return o.useEffect(()=>{if(z||!n)return;let i=!1,s,d=w();function a(){if(i||!n)return;const r=A.current;n.clearRect(0,0,h,v);for(let f=r.length;f;f-=1){const e=r[f-1],[p,g]=e.startPosition,[m,M]=e.currentPosition,[c,u]=e.targetPosition;let P=!0;if(p>c?m>c&&(P=!1):m<c&&(P=!1),g>u?M>u&&(P=!1):M<u&&(P=!1),P){r.splice(f-1,1);continue}const O=(p+c)/2-p,V=m-p,$=(g+u)/2-g,N=M-g,y=(V/(O||1)+N/($||1))/2;e.opacity=y>1?2-y:y;const S=e.size/2;if(n.beginPath(),n.arc(m-S,M-S,S,0,2*Math.PI,!1),n.globalAlpha=e.opacity,n.fillStyle=d,n.fill(),m!==c){const k=Math.abs(p-c),R=Math.abs(g-u),b=Math.min(1,k/R);m<c?e.currentPosition[0]+=e.speed*b:e.currentPosition[0]-=e.speed*b}if(M!==u){const k=Math.abs(p-c),R=Math.abs(g-u),b=Math.min(1,R/k);M<u?e.currentPosition[1]+=e.speed*b:e.currentPosition[1]-=e.speed*b}}s=requestAnimationFrame(a)}s=requestAnimationFrame(a);const x=setInterval(()=>{d=w();const r=A.current;let f=r.length,e=q-f;if(e>0)for(;e;)r.push(C()),e-=1,f+=1},500);return()=>{i=!0,s&&cancelAnimationFrame(s),clearInterval(x)}},[z,n,w,h,v,q,C]),o.useEffect(()=>{if(t.current){const i=t.current.getContext("2d");i&&j(i),I(t.current.offsetWidth),F(t.current.offsetHeight);const s=()=>{t.current&&(I(t.current.offsetWidth),F(t.current.offsetHeight))},d=Q(s),a=new ResizeObserver(s);return a.observe(t.current),()=>{d(),a.disconnect()}}},[t]),T.jsxRuntimeExports.jsx("canvas",{ref:t,"aria-hidden":!0,role:"presentation",style:{"--color":l,"--opacity":H},className:B.cx("kakadu-components-3366903902",_&&"kakadu-components-4049648322",W),width:h,height:v})}exports.default=U;

package/build/components/moving-stars.mjs

@@ -1,94 +1,97 @@
 import { j as T } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useRef as R, useState as E, useCallback as j, useEffect as z } from "react";
+import { useRef as S, useState as E, useCallback as W, useEffect as q } from "react";
 import { cx as U } from "@kuma-ui/core";
 import Z from "../hooks/use-is-in-view.mjs";
 import _ from "../hooks/use-is-document-focused.mjs";
-function st({
-  color: b,
-  opacity: D,
-  className: L,
-  minimumSize: k = 1,
-  maximumSize: q = 5,
-  maximumStarsCount: x = 50,
-  speed: w = 1,
-  hasMask: S = !1
+import $ from "../utilities/listeners.mjs";
+const tt = $((l) => {
+  window.addEventListener("resize", l, {
+    passive: !0
+  });
+}, (l) => {
+  window.removeEventListener("resize", l);
+});
+function at({
+  color: l,
+  opacity: j,
+  className: D,
+  minimumSize: F = 1,
+  maximumSize: R = 5,
+  maximumStarsCount: b = 50,
+  speed: k = 1,
+  hasMask: V = !1
 }) {
-  const t = R(null), [s, V] = E(), [u, H] = E(0), [f, W] = E(0), y = j(() => {
-    const n = u * 1.5, r = u * 0.25, o = f * 1.5, i = f * 0.25, g = n * Math.random() - r, d = o * Math.random() - i;
+  const e = S(null), [s, N] = E(), [d, z] = E(0), [h, A] = E(0), w = W(() => {
+    const o = d * 1.5, n = d * 0.25, u = h * 1.5, i = h * 0.25, x = o * Math.random() - n, r = u * Math.random() - i;
     return {
-      size: Math.max(k, q * Math.random()),
+      size: Math.max(F, R * Math.random()),
       opacity: 0,
-      speed: Math.max(0.1, Math.random() / 2 * w),
-      startPosition: [g, d],
-      currentPosition: [g, d],
-      targetPosition: [n * Math.random() - r, o * Math.random() - i]
+      speed: Math.max(0.1, Math.random() / 2 * k),
+      startPosition: [x, r],
+      currentPosition: [x, r],
+      targetPosition: [o * Math.random() - n, u * Math.random() - i]
     };
-  }, [u, f, k, q, w]), C = j(() => b ?? (t.current ? getComputedStyle(t.current).color : "#000"), [b, t]), N = Z(t), O = _(), X = R(!1);
-  return X.current = !N || !O, z(() => {
-    const n = Array.from({
-      length: x
-    }).map(() => y());
-    let r = x, o = !1, i, g = C();
-    function d() {
-      if (!o) {
-        if (!s || X.current) {
-          i = requestAnimationFrame(d);
-          return;
+  }, [d, h, F, R, k]), C = W(() => l ?? (e.current ? getComputedStyle(e.current).color : "#000"), [l, e]), O = Z(e), B = _(), H = !O || !B, L = S(Array.from({
+    length: b
+  }).map(() => w()));
+  return q(() => {
+    if (H || !s)
+      return;
+    let o = !1, n, u = C();
+    function i() {
+      if (o || !s)
+        return;
+      const r = L.current;
+      s.clearRect(0, 0, d, h);
+      for (let f = r.length; f; f -= 1) {
+        const t = r[f - 1], [m, p] = t.startPosition, [v, g] = t.currentPosition, [a, c] = t.targetPosition;
+        let M = !0;
+        if (m > a ? v > a && (M = !1) : v < a && (M = !1), p > c ? g > c && (M = !1) : g < c && (M = !1), M) {
+          r.splice(f - 1, 1);
+          continue;
+        }
+        const G = (m + a) / 2 - m, J = v - m, K = (p + c) / 2 - p, Q = g - p, y = (J / (G || 1) + Q / (K || 1)) / 2;
+        t.opacity = y > 1 ? 2 - y : y;
+        const X = t.size / 2;
+        if (s.beginPath(), s.arc(v - X, g - X, X, 0, 2 * Math.PI, !1), s.globalAlpha = t.opacity, s.fillStyle = u, s.fill(), v !== a) {
+          const Y = Math.abs(m - a), I = Math.abs(p - c), P = Math.min(1, Y / I);
+          v < a ? t.currentPosition[0] += t.speed * P : t.currentPosition[0] -= t.speed * P;
         }
-        s.clearRect(0, 0, u, f);
-        for (let a = n.length; a; a -= 1) {
-          const e = n[a - 1], [h, m] = e.startPosition, [p, v] = e.currentPosition, [c, l] = e.targetPosition;
-          let M = !0;
-          if (h > c ? p > c && (M = !1) : p < c && (M = !1), m > l ? v > l && (M = !1) : v < l && (M = !1), M) {
-            n.splice(a - 1, 1), r -= 1;
-            continue;
-          }
-          const G = (h + c) / 2 - h, J = p - h, K = (m + l) / 2 - m, Q = v - m, Y = (J / G + Q / K) / 2;
-          e.opacity = Y > 1 ? 2 - Y : Y;
-          const F = e.size / 2;
-          if (s.beginPath(), s.arc(p - F, v - F, F, 0, 2 * Math.PI, !1), s.globalAlpha = e.opacity, s.fillStyle = g, s.fill(), p !== c) {
-            const I = Math.abs(h - c), A = Math.abs(m - l), P = Math.min(1, I / A);
-            p < c ? e.currentPosition[0] += e.speed * P : e.currentPosition[0] -= e.speed * P;
-          }
-          if (v !== l) {
-            const I = Math.abs(h - c), A = Math.abs(m - l), P = Math.min(1, A / I);
-            v < l ? e.currentPosition[1] += e.speed * P : e.currentPosition[1] -= e.speed * P;
-          }
+        if (g !== c) {
+          const Y = Math.abs(m - a), I = Math.abs(p - c), P = Math.min(1, I / Y);
+          g < c ? t.currentPosition[1] += t.speed * P : t.currentPosition[1] -= t.speed * P;
         }
-        i = requestAnimationFrame(d);
       }
+      n = requestAnimationFrame(i);
     }
-    i = requestAnimationFrame(d);
-    const B = setInterval(() => {
-      if (X.current)
-        return;
-      g = C();
-      let a = x - r;
-      if (a > 0)
-        for (; a; )
-          n.push(y()), a -= 1, r += 1;
+    n = requestAnimationFrame(i);
+    const x = setInterval(() => {
+      u = C();
+      const r = L.current;
+      let f = r.length, t = b - f;
+      if (t > 0)
+        for (; t; )
+          r.push(w()), t -= 1, f += 1;
     }, 500);
     return () => {
-      o = !0, i && cancelAnimationFrame(i), clearInterval(B);
+      o = !0, n && cancelAnimationFrame(n), clearInterval(x);
     };
-  }, [x, y, C, s, u, f, w]), z(() => {
-    if (t.current) {
-      const n = t.current.getContext("2d");
-      n && V(n), H(t.current.offsetWidth), W(t.current.offsetHeight);
-      const r = () => {
-        t.current && (H(t.current.offsetWidth), W(t.current.offsetHeight));
-      }, o = new ResizeObserver(r);
-      return o.observe(t.current), window.addEventListener("resize", r, {
-        passive: !0
-      }), () => {
-        o.disconnect(), window.removeEventListener("resize", r);
+  }, [H, s, C, d, h, b, w]), q(() => {
+    if (e.current) {
+      const o = e.current.getContext("2d");
+      o && N(o), z(e.current.offsetWidth), A(e.current.offsetHeight);
+      const n = () => {
+        e.current && (z(e.current.offsetWidth), A(e.current.offsetHeight));
+      }, u = tt(n), i = new ResizeObserver(n);
+      return i.observe(e.current), () => {
+        u(), i.disconnect();
       };
     }
-  }, [t]), /* @__PURE__ */ T.jsx("canvas", { ref: t, "aria-hidden": !0, role: "presentation", style: {
-    "--color": b,
-    "--opacity": D
-  }, className: U("kakadu-components-3366903902", S && "kakadu-components-4049648322", L), width: u, height: f });
+  }, [e]), /* @__PURE__ */ T.jsx("canvas", { ref: e, "aria-hidden": !0, role: "presentation", style: {
+    "--color": l,
+    "--opacity": j
+  }, className: U("kakadu-components-3366903902", V && "kakadu-components-4049648322", D), width: d, height: h });
 }
 export {
-  st as default
+  at as default
 };

package/build/components/notice.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLProps } from 'react';
+import React, { type HTMLProps } from 'react';
 import { type IconType } from '../icons/icon';
 export declare const noticeTypes: readonly ["default", "success", "information", "warning", "danger"];
 export type NoticeType = (typeof noticeTypes)[number];
@@ -6,4 +6,4 @@ export type NoticeProperties = HTMLProps<HTMLDivElement> & {
     readonly type?: NoticeType;
     readonly icon?: IconType;
 };
-export default function Notice({ type, icon, className, children, ...properties }: NoticeProperties): import("react/jsx-runtime").JSX.Element;
+export default function Notice({ type, icon, className, children, ...properties }: NoticeProperties): React.JSX.Element;

package/build/components/notification.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLProps, type ReactNode } from 'react';
+import React, { type HTMLProps, type ReactNode } from 'react';
 import { type IconType } from '../icons/icon';
 import { type NoticeType } from './notice';
 export { noticeTypes as notificationTypes } from './notice';
@@ -8,12 +8,14 @@ export type NotificationProperties = {
     readonly type?: NoticeType;
     readonly icon?: IconType;
     readonly children: ReactNode;
-    readonly onDismiss?: (index: number) => void;
+    readonly onDismiss?: (id: string) => void;
 };
-export default function Notification({ type, icon, index, className, children, onDismiss, ...properties }: NotificationProperties & {
+export default function Notification({ type, icon, id, index: inputIndex, shouldDismiss, className, children, onDismiss, ...properties }: NotificationProperties & {
     readonly index?: number;
-} & HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    readonly shouldDismiss?: boolean;
+} & HTMLProps<HTMLDivElement>): React.JSX.Element;
 export declare function useCreateNotification(): (notification: NotificationProperties) => void;
-export declare function NotificationProvider({ children, }: {
+export declare function NotificationProvider({ limit, children, }: {
+    readonly limit?: number;
     readonly children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/build/components/notification.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),p=require("@kuma-ui/core"),M=require("../utilities/generate-random-id.js"),j=require("./notice.js");function E({type:n,icon:d,index:u,className:c,children:m,onDismiss:s,...o}){const[t,a]=e.useState(!1),[l,C]=e.useState(!1),[f,k]=e.useState(!1);e.useEffect(()=>{const r=setTimeout(()=>{a(!0)},250);return()=>{clearTimeout(r)}},[]);const N=e.useRef(0),v=e.useRef(0),R=e.useCallback(()=>{k(!0)},[]),b=e.useCallback(()=>{k(!1)},[]);e.useEffect(()=>{if(f){v.current+=Date.now()-N.current;return}if(t){N.current=Date.now();const r=6e3-v.current,h=setTimeout(()=>{a(!1),C(!0)},r);return()=>{clearTimeout(h)}}},[f,t]);const x=u??0;return e.useEffect(()=>{if(l&&!t){const r=setTimeout(()=>{s==null||s(x)},300);return()=>{clearTimeout(r)}}},[l,t,s,x]),i.jsxRuntimeExports.jsx("div",{...o,style:{"--index":x},className:p.cx("kakadu-components-1727618227",t&&"kakadu-components-3003995416",c),children:i.jsxRuntimeExports.jsxs(j.default,{role:"status","aria-live":"polite","aria-atomic":"true",type:n,icon:d,className:p.cx("kakadu-components-3951461646",t&&"kakadu-components-2837603142"),onMouseEnter:R,onMouseLeave:b,children:[m,i.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2751825161",children:i.jsxRuntimeExports.jsx("div",{className:p.cx("kakadu-components-47664046",f?"kakadu-components-758522476":"kakadu-components-3914681513")})})]})})}const T=e.createContext({createNotification(){throw new Error("useCreateNotification must be used within a NotificationProvider")}});function S(){const{createNotification:n}=e.useContext(T);return n}function q({children:n}){const[d,u]=e.useState([]),c=e.useCallback(o=>{const t=M.default();u(a=>[...a,{...o,id:t}])},[]),m=e.useCallback(o=>{u(t=>t.filter((a,l)=>l!==o))},[]),s=e.useMemo(()=>({createNotification:c}),[c]);return i.jsxRuntimeExports.jsxs(T.Provider,{value:s,children:[n,d.map((o,t)=>i.jsxRuntimeExports.jsx(E,{...o,index:t,onDismiss:m},o.id))]})}exports.notificationTypes=j.noticeTypes;exports.NotificationProvider=q;exports.default=E;exports.useCreateNotification=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),E=require("@kuma-ui/core"),I=require("../utilities/generate-random-id.js"),T=require("./notice.js");function R({type:i,icon:p,id:u,index:d,shouldDismiss:r,className:k,children:N,onDismiss:c,...s}){const[t,a]=e.useState(!1),[o,m]=e.useState(!1),[n,x]=e.useState(!1),v=d??0,[h,M]=e.useState(v);e.useEffect(()=>{if(r||o)return;const l=setTimeout(()=>{a(!0)},100);return()=>{clearTimeout(l)}},[r,o]);const j=e.useRef(0),C=e.useRef(0),S=e.useCallback(()=>{x(!0)},[]),q=e.useCallback(()=>{x(!1)},[]);return e.useEffect(()=>{if(n){C.current+=Date.now()-j.current;return}if(t){j.current=Date.now();const l=6e3-C.current,w=setTimeout(()=>{a(!1),m(!0)},l);return()=>{clearTimeout(w)}}},[n,t]),e.useEffect(()=>{r&&!o&&(a(!1),m(!0))},[r,o]),e.useEffect(()=>{if(o&&!t){const l=setTimeout(()=>{u&&(c==null||c(u))},300);return()=>{clearTimeout(l)}}},[o,t,u,c]),e.useEffect(()=>{n||M(v)},[n,v]),f.jsxRuntimeExports.jsx("div",{...s,style:{"--index":h},className:E.cx("kakadu-components-1727618227",t&&"kakadu-components-3003995416",k),children:f.jsxRuntimeExports.jsxs(T.default,{role:"status","aria-live":"polite","aria-atomic":"true",type:i,icon:p,className:E.cx("kakadu-components-3951461646",t&&"kakadu-components-2837603142"),onMouseEnter:S,onMouseLeave:q,children:[N,f.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2751825161",children:f.jsxRuntimeExports.jsx("div",{className:E.cx("kakadu-components-4050948330",n?"kakadu-components-758522476":"kakadu-components-3914681513")})})]})})}const b=e.createContext({createNotification(){throw new Error("useCreateNotification must be used within a NotificationProvider")}});function g(){const{createNotification:i}=e.useContext(b);return i}function P({limit:i=5,children:p}){const[u,d]=e.useState([]),r=e.useCallback(s=>{const t=I.default();d(a=>{const o=[...a,{...s,id:t}];if(o.length<=i)return o;const m=o.length-i;return o.map((n,x)=>x<m?{...n,shouldDismiss:!0}:n)})},[i]),k=e.useCallback(s=>{d(t=>t.filter(a=>a.id!==s))},[]),N=e.useMemo(()=>({createNotification:r}),[r]),c=e.useMemo(()=>[...u].reverse(),[u]);return f.jsxRuntimeExports.jsxs(b.Provider,{value:N,children:[p,c.map((s,t)=>f.jsxRuntimeExports.jsx(R,{...s,index:t,onDismiss:k},s.id))]})}exports.notificationTypes=T.noticeTypes;exports.NotificationProvider=P;exports.default=R;exports.useCreateNotification=g;