@kakadu/components 3.4.0 → 3.5.0

package/build/components/button.d.ts

@@ -24,6 +24,7 @@ type BaseButtonProperties = Omit<HTMLProps<HTMLButtonElement>, 'children'> & {
     readonly iconRight?: IconType | ReactNode;
     readonly isLoading?: boolean;
     readonly isSkeleton?: boolean;
+    readonly isSkeletonAnimated?: boolean;
     readonly hasMovingGradients?: boolean;
     readonly movingGradientsCount?: number;
     readonly hasMovingStars?: boolean;
@@ -36,5 +37,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, isSkeleton, 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, isSkeletonAnimated, 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"),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;
+"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"),C=require("../icons/icon.js"),F=require("./spinner.js"),O=require("./moving-gradients.js"),P=require("./moving-stars.js"),H=require("./theme-setter.js"),J=require("./click-ripples.js"),E=require("./hover-gradient.js"),K=require("./button-tooltip.js"),Q=require("./aria-text.js"),U=require("./atom.js"),X=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(F.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(C.default,{width:14,height:14,type:s}):s})}const S="kakadu-components-2244098950",Y="kakadu-components-3923184173",g="kakadu-components-317965671",q="kakadu-components-1978976872";function Z({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,isSkeletonAnimated:M=!0,hasMovingGradients:D=!1,movingGradientsCount:l=4,hasMovingStars:I=!1,movingStarsCount:p=10,...T}){const k=R.useId(),j=R.useRef(null),G=H.useIsDarkMode(j),z=s??"button",A=D&&l>0,W=I&&p>0,a=o&&!r,y=!!_||!!x||!!r;return e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3559664923",children:[e.jsxRuntimeExports.jsxs(U.default,{...T,as:a?"a":"button",type:a?void 0:z,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(Q.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}),A&&e.jsxRuntimeExports.jsx(O.default,{opacity:G?.4:.3,maximumGradientsCount:l,className:u.cx("kakadu-components-2055737617",n==="secondary"&&"kakadu-components-2972748387")}),W&&e.jsxRuntimeExports.jsx(P.default,{maximumStarsCount:p,className:"kakadu-components-1226008615"}),y?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(J.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(K.default,{id:k,label:i,position:B}):null]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-3422055155",children:e.jsxRuntimeExports.jsx(X.SkeletonInstance,{width:"100%",height:"100%",isAnimated:M})}):null]})}exports.ButtonLoader=f;exports.ButtonVariant=v;exports.buttonDangerStyles=q;exports.buttonSecondaryStyles=S;exports.buttonSuccessStyles=Y;exports.buttonWarningStyles=g;exports.default=Z;

package/build/components/button.mjs

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

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

@@ -14,5 +14,6 @@ export type IconButtonProperties = HTMLProps<HTMLButtonElement> & {
     readonly tooltipPosition?: ButtonTooltipPosition;
     readonly isLoading?: boolean;
     readonly isSkeleton?: boolean;
+    readonly isSkeletonAnimated?: boolean;
 };
-export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, isSkeleton, className, ...properties }: IconButtonProperties): import("react/jsx-runtime").JSX.Element;
+export default function IconButton({ icon, variant, label, tooltipPosition, disabled, isLoading, isSkeleton, isSkeletonAnimated, 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"),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;
+"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"),I=require("./theme-setter.js"),u=require("./button.js"),T=require("./button-tooltip.js"),B=require("./click-ripples.js"),S=require("./hover-gradient.js"),D=require("./skeleton.js");var b=(e=>(e.default="default",e.success="success",e.warning="warning",e.danger="danger",e))(b||{});function M({icon:e,variant:o="default",label:m,tooltipPosition:g,disabled:y,isLoading:x,isSkeleton:l,isSkeletonAnimated:E=!0,className:q,...w}){const p=s.useId(),_=I.useIsDarkMode(),[r,N]=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),N(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",{...w,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",q),children:[t.jsxRuntimeExports.jsxs("span",{"data-theme":o==="default"?_?"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(T.default,{id:p,label:m,position:g}),j?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(B.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(D.SkeletonInstance,{width:"100%",height:"100%",isAnimated:E})}):null]})}exports.IconButtonVariant=b;exports.default=M;

package/build/components/icon-button.mjs

@@ -1,16 +1,16 @@
 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 { useId as D, useState as x, useRef as g, useEffect as l, useCallback as T } 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 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 { buttonResetStyles as z, effectStyles as C } from "../theme.mjs";
+import { useIsDarkMode as E } from "./theme-setter.mjs";
+import { ButtonLoader as M, buttonSecondaryStyles as v, buttonSuccessStyles as A, 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";
-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({
+import { SkeletonInstance as J } from "./skeleton.mjs";
+var K = /* @__PURE__ */ ((e) => (e.default = "default", e.success = "success", e.warning = "warning", e.danger = "danger", e))(K || {});
+function se({
   icon: e,
   variant: o = "default",
   label: d,
@@ -18,14 +18,15 @@ function ee({
   disabled: b,
   isLoading: m,
   isSkeleton: u,
-  className: w,
-  ...N
+  isSkeletonAnimated: w = !0,
+  className: N,
+  ...R
 }) {
-  const i = B(), R = C(), [n, I] = x(e), [p, c] = x(!1), f = g(e), a = g(null);
+  const i = D(), I = E(), [n, B] = x(e), [p, c] = x(!1), f = g(e), a = g(null);
   l(() => {
     f.current = e;
   }, [e]);
-  const r = D(() => {
+  const r = T(() => {
     a.current && (clearTimeout(a.current), a.current = null);
   }, []);
   l(() => {
@@ -34,29 +35,29 @@ function ee({
       return;
     }
     c(!0), r(), a.current = setTimeout(() => {
-      c(!1), I(f.current);
+      c(!1), B(f.current);
     }, 370);
   }, [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.jsxs("button", { ...R, type: "button", "aria-label": d, "aria-describedby": i, disabled: k, className: t(z, C, "kakadu-components-1951951921", o === "default" && t(v, "kakadu-components-1561784812"), o === "success" && t(A, "kakadu-components-1398421429"), o === "warning" && t(F, "kakadu-components-1872098090"), o === "danger" && t(G, "kakadu-components-2064536093"), u && "kakadu-components-2662775151", N), children: [
+      /* @__PURE__ */ s.jsxs("span", { "data-theme": o === "default" ? I ? "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(M, { 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 })
       ] })
     ] }),
-    u ? /* @__PURE__ */ s.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ s.jsx(A, { width: "100%", height: "100%" }) }) : null
+    u ? /* @__PURE__ */ s.jsx("div", { className: "kakadu-components-3422055155", children: /* @__PURE__ */ s.jsx(J, { width: "100%", height: "100%", isAnimated: w }) }) : null
   ] });
 }
 export {
-  J as IconButtonVariant,
-  ee as default
+  K as IconButtonVariant,
+  se as default
 };

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

@@ -11,6 +11,7 @@ type BaseTextButtonProperties = Omit<HTMLProps<HTMLButtonElement>, 'children'> &
     readonly tooltip?: string;
     readonly tooltipPosition?: ButtonTooltipPosition;
     readonly isSkeleton?: boolean;
+    readonly isSkeletonAnimated?: boolean;
 };
 export type TextButtonProperties = BaseTextButtonProperties & ({
     children: ReactNode;
@@ -19,5 +20,5 @@ export type TextButtonProperties = BaseTextButtonProperties & ({
     children?: never;
     label: string;
 });
-export default function TextButton({ iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, isSkeleton, className, children, label, ...properties }: TextButtonProperties): import("react/jsx-runtime").JSX.Element;
+export default function TextButton({ iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, isSkeleton, isSkeletonAnimated, className, children, label, ...properties }: TextButtonProperties): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/text-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"),a=require("@kuma-ui/core"),i=require("../icons/icon.js"),m=require("./flex.js"),_=require("./text.js"),h=require("./click-ripples.js"),c=require("./hover-gradient.js"),B=require("./button-tooltip.js"),f=require("./aria-text.js"),b=require("./atom.js"),N=require("./skeleton.js");var p=(s=>(s.primary="primary",s.delete="delete",s))(p||{});const g="kakadu-components-4017654514";function w({iconLeft:s,iconRight:n,variant:d="primary",tooltip:u,tooltipPosition:j,href:x,target:k,rel:E,disabled:v,isSkeleton:r,className:R,children:t,label:y,...q}){const l=!!v||!!r,o=x&&!r;return e.jsxRuntimeExports.jsxs("div",{className:a.cx("kakadu-components-1400843519",t&&(s||n)?a.cx(!!s&&"kakadu-components-497190725",!!n&&"kakadu-components-3729381008"):"kakadu-components-3866032606"),children:[e.jsxRuntimeExports.jsxs(b.default,{...q,as:o?"a":"button",type:o?void 0:"button",href:o?x:void 0,target:o?k:void 0,rel:o?E:void 0,disabled:o?void 0:l,className:a.cx(_.textShadowStyles,"kakadu-components-2081390622",d==="delete"&&g,r&&"kakadu-components-2662775151",R),children:[e.jsxRuntimeExports.jsxs(m.default,{direction:"row",gap:.5,alignment:m.FlexAlignment.center,children:[s?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",t?"kakadu-components-1285017646":"kakadu-components-1475172827"),children:typeof s=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:s}):s}):null,t?e.jsxRuntimeExports.jsx("span",{className:"kakadu-components-3068418250",children:t}):e.jsxRuntimeExports.jsx(f.default,{children:y}),n?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",t?"kakadu-components-2421728947":"kakadu-components-1475172827"),children:typeof n=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:n}):n}):null]}),e.jsxRuntimeExports.jsxs("span",{className:"kakadu-components-1970948853",children:[l?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(h.default,{size:t?void 0:50}),e.jsxRuntimeExports.jsx(c.default,{size:t?void 0:50,className:c.normalBlendStyles})]}),u?e.jsxRuntimeExports.jsx(B.default,{label:u,position:j}):null]})]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-1970948853",children:e.jsxRuntimeExports.jsx(N.SkeletonInstance,{width:"100%",height:"100%"})}):null]})}exports.TextButtonVariant=p;exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),a=require("@kuma-ui/core"),i=require("../icons/icon.js"),m=require("./flex.js"),h=require("./text.js"),B=require("./click-ripples.js"),c=require("./hover-gradient.js"),f=require("./button-tooltip.js"),b=require("./aria-text.js"),N=require("./atom.js"),g=require("./skeleton.js");var d=(t=>(t.primary="primary",t.delete="delete",t))(d||{});const w="kakadu-components-4017654514";function S({iconLeft:t,iconRight:n,variant:p="primary",tooltip:u,tooltipPosition:j,href:x,target:k,rel:E,disabled:v,isSkeleton:r,isSkeletonAnimated:R=!0,className:y,children:s,label:q,..._}){const l=!!v||!!r,o=x&&!r;return e.jsxRuntimeExports.jsxs("div",{className:a.cx("kakadu-components-1400843519",s&&(t||n)?a.cx(!!t&&"kakadu-components-497190725",!!n&&"kakadu-components-3729381008"):"kakadu-components-3866032606"),children:[e.jsxRuntimeExports.jsxs(N.default,{..._,as:o?"a":"button",type:o?void 0:"button",href:o?x:void 0,target:o?k:void 0,rel:o?E:void 0,disabled:o?void 0:l,className:a.cx(h.textShadowStyles,"kakadu-components-2081390622",p==="delete"&&w,r&&"kakadu-components-2662775151",y),children:[e.jsxRuntimeExports.jsxs(m.default,{direction:"row",gap:.5,alignment:m.FlexAlignment.center,children:[t?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",s?"kakadu-components-1285017646":"kakadu-components-1475172827"),children:typeof t=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:t}):t}):null,s?e.jsxRuntimeExports.jsx("span",{className:"kakadu-components-3068418250",children:s}):e.jsxRuntimeExports.jsx(b.default,{children:q}),n?e.jsxRuntimeExports.jsx("div",{className:a.cx("kakadu-components-743909038",s?"kakadu-components-2421728947":"kakadu-components-1475172827"),children:typeof n=="string"?e.jsxRuntimeExports.jsx(i.default,{width:14,height:14,type:n}):n}):null]}),e.jsxRuntimeExports.jsxs("span",{className:"kakadu-components-1970948853",children:[l?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(B.default,{size:s?void 0:50}),e.jsxRuntimeExports.jsx(c.default,{size:s?void 0:50,className:c.normalBlendStyles})]}),u?e.jsxRuntimeExports.jsx(f.default,{label:u,position:j}):null]})]}),r?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-1970948853",children:e.jsxRuntimeExports.jsx(g.SkeletonInstance,{width:"100%",height:"100%",isAnimated:R})}):null]})}exports.TextButtonVariant=d;exports.default=S;

package/build/components/text-button.mjs

@@ -1,52 +1,53 @@
 import { j as o } from "../jsx-runtime-B4hRZ52C.mjs";
 import { cx as n } from "@kuma-ui/core";
 import p from "../icons/icon.mjs";
-import f, { FlexAlignment as B } from "./flex.mjs";
-import { textShadowStyles as h } from "./text.mjs";
-import N from "./click-ripples.mjs";
-import b, { normalBlendStyles as g } from "./hover-gradient.mjs";
-import w from "./button-tooltip.mjs";
-import A from "./aria-text.mjs";
-import F from "./atom.mjs";
-import { SkeletonInstance as z } from "./skeleton.mjs";
-var C = /* @__PURE__ */ ((e) => (e.primary = "primary", e.delete = "delete", e))(C || {});
-const D = "kakadu-components-4017654514";
-function P({
+import B, { FlexAlignment as h } from "./flex.mjs";
+import { textShadowStyles as N } from "./text.mjs";
+import b from "./click-ripples.mjs";
+import g, { normalBlendStyles as w } from "./hover-gradient.mjs";
+import A from "./button-tooltip.mjs";
+import F from "./aria-text.mjs";
+import z from "./atom.mjs";
+import { SkeletonInstance as C } from "./skeleton.mjs";
+var D = /* @__PURE__ */ ((e) => (e.primary = "primary", e.delete = "delete", e))(D || {});
+const I = "kakadu-components-4017654514";
+function Q({
   iconLeft: e,
   iconRight: s,
   variant: i = "primary",
   tooltip: r,
-  tooltipPosition: k,
+  tooltipPosition: u,
   href: l,
-  target: u,
+  target: k,
   rel: c,
   disabled: x,
   isSkeleton: m,
-  className: j,
+  isSkeletonAnimated: j = !0,
+  className: v,
   children: a,
-  label: v,
-  ...y
+  label: y,
+  ...f
 }) {
   const d = !!x || !!m, t = l && !m;
   return /* @__PURE__ */ o.jsxs("div", { className: n("kakadu-components-1400843519", a && (e || s) ? n(!!e && "kakadu-components-497190725", !!s && "kakadu-components-3729381008") : "kakadu-components-3866032606"), children: [
-    /* @__PURE__ */ o.jsxs(F, { ...y, as: t ? "a" : "button", type: t ? void 0 : "button", href: t ? l : void 0, target: t ? u : void 0, rel: t ? c : void 0, disabled: t ? void 0 : d, className: n(h, "kakadu-components-2081390622", i === "delete" && D, m && "kakadu-components-2662775151", j), children: [
-      /* @__PURE__ */ o.jsxs(f, { direction: "row", gap: 0.5, alignment: B.center, children: [
+    /* @__PURE__ */ o.jsxs(z, { ...f, as: t ? "a" : "button", type: t ? void 0 : "button", href: t ? l : void 0, target: t ? k : void 0, rel: t ? c : void 0, disabled: t ? void 0 : d, className: n(N, "kakadu-components-2081390622", i === "delete" && I, m && "kakadu-components-2662775151", v), children: [
+      /* @__PURE__ */ o.jsxs(B, { direction: "row", gap: 0.5, alignment: h.center, children: [
         e ? /* @__PURE__ */ o.jsx("div", { className: n("kakadu-components-743909038", a ? "kakadu-components-1285017646" : "kakadu-components-1475172827"), children: typeof e == "string" ? /* @__PURE__ */ o.jsx(p, { width: 14, height: 14, type: e }) : e }) : null,
-        a ? /* @__PURE__ */ o.jsx("span", { className: "kakadu-components-3068418250", children: a }) : /* @__PURE__ */ o.jsx(A, { children: v }),
+        a ? /* @__PURE__ */ o.jsx("span", { className: "kakadu-components-3068418250", children: a }) : /* @__PURE__ */ o.jsx(F, { children: y }),
         s ? /* @__PURE__ */ o.jsx("div", { className: n("kakadu-components-743909038", a ? "kakadu-components-2421728947" : "kakadu-components-1475172827"), children: typeof s == "string" ? /* @__PURE__ */ o.jsx(p, { width: 14, height: 14, type: s }) : s }) : null
       ] }),
       /* @__PURE__ */ o.jsxs("span", { className: "kakadu-components-1970948853", children: [
         d ? null : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-          /* @__PURE__ */ o.jsx(N, { size: a ? void 0 : 50 }),
-          /* @__PURE__ */ o.jsx(b, { size: a ? void 0 : 50, className: g })
+          /* @__PURE__ */ o.jsx(b, { size: a ? void 0 : 50 }),
+          /* @__PURE__ */ o.jsx(g, { size: a ? void 0 : 50, className: w })
         ] }),
-        r ? /* @__PURE__ */ o.jsx(w, { label: r, position: k }) : null
+        r ? /* @__PURE__ */ o.jsx(A, { label: r, position: u }) : null
       ] })
     ] }),
-    m ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-1970948853", children: /* @__PURE__ */ o.jsx(z, { width: "100%", height: "100%" }) }) : null
+    m ? /* @__PURE__ */ o.jsx("div", { className: "kakadu-components-1970948853", children: /* @__PURE__ */ o.jsx(C, { width: "100%", height: "100%", isAnimated: j }) }) : null
   ] });
 }
 export {
-  C as TextButtonVariant,
-  P as default
+  D as TextButtonVariant,
+  Q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kakadu/components",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Kakadu components library",
   "license": "MIT",
   "main": "./build/index.js",