@validationcloud/fractal-ui 1.20.0 → 1.22.0

package/dist/components/button/button.d.ts

@@ -8,8 +8,8 @@ import { default as React } from 'react';
  */
 export declare const Button: React.ForwardRefExoticComponent<{
     className?: string;
-    variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light";
-    size?: "large" | "medium" | "small" | "xsmall";
+    variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light" | "redText";
+    size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
 } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.stories.d.ts

@@ -2,8 +2,8 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     component: import('react').ForwardRefExoticComponent<{
         className?: string;
-        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light";
-        size?: "large" | "medium" | "small" | "xsmall";
+        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light" | "redText";
+        size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
     } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean;
     } & import('react').RefAttributes<HTMLButtonElement>>;
@@ -19,6 +19,7 @@ export declare const Light: Story;
 export declare const Gradient: Story;
 export declare const Warning: Story;
 export declare const Info: Story;
+export declare const RedText: Story;
 export declare const Ghost: Story;
 export declare const GhostButtonInTextLayout: Story;
 export declare const AllSizes: Story;

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type SkeletonProps = React.ComponentPropsWithoutRef<'span'>;
+/**
+ * Universal skeleton component for <span> elements.
+ * Animated fallback automatically sizes itself automatically according to line-height.
+ * Explicit width needs to be set for the component to work properly.
+ */
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/skeleton/skeleton.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+import { Skeleton } from './skeleton';
+declare const meta: {
+    component: typeof Skeleton;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InlineTextSkeleton: Story;
+export declare const TextSkeleton: Story;
+export declare const ListSkeleton: Story;
+export declare const FormSkeleton: Story;
+export declare const TableSkeleton: Story;

package/dist/fractal-ui.js

@@ -191,7 +191,7 @@ function S0() {
       var G = B.children;
       if (G !== void 0)
         if (T)
-          if ($(G)) {
+          if (q(G)) {
             for (T = 0; T < G.length; T++)
               p(G[T]);
             Object.freeze && Object.freeze(G);
@@ -205,7 +205,7 @@ function S0() {
         var K = Object.keys(B).filter(function(h2) {
           return h2 !== "key";
         });
-        T = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", W[G + T] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        T = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", $[G + T] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -216,7 +216,7 @@ React keys must be passed directly to JSX without using spread:
           G,
           K,
           G
-        ), W[G + T] = !0);
+        ), $[G + T] = !0);
       }
       if (G = null, k !== void 0 && (o(k), G = "" + k), d(B) && (o(B.key), G = "" + B.key), "key" in B) {
         k = {};
@@ -240,7 +240,7 @@ React keys must be passed directly to JSX without using spread:
     function p(L) {
       typeof L == "object" && L !== null && L.$$typeof === v && L._store && (L._store.validated = 1);
     }
-    var h = Z0, v = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), b = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), N = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, $ = Array.isArray, V = console.createTask ? console.createTask : function() {
+    var h = Z0, v = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), b = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), N = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, q = Array.isArray, V = console.createTask ? console.createTask : function() {
       return null;
     };
     h = {
@@ -251,7 +251,7 @@ React keys must be passed directly to JSX without using spread:
     var H, O = {}, F = h["react-stack-bottom-frame"].bind(
       h,
       n
-    )(), U = V(i(n)), W = {};
+    )(), U = V(i(n)), $ = {};
     H2.Fragment = g, H2.jsx = function(L, B, k, T, J) {
       var Q = 1e4 > N.recentlyCreatedOwnerStacks++;
       return u(
@@ -1036,12 +1036,12 @@ const Fe = (e) => ({
     }, h = k1(i), v = B1(h), m = await n.getDimensions(s), g = h === "y", b = g ? "top" : "left", M = g ? "bottom" : "right", _ = g ? "clientHeight" : "clientWidth", Z = r.reference[v] + r.reference[h] - p[h] - r.floating[v], A = p[h] - r.reference[h], S = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(s));
     let E = S ? S[_] : 0;
     (!E || !await (n.isElement == null ? void 0 : n.isElement(S))) && (E = d.floating[_] || r.floating[v]);
-    const w = Z / 2 - A / 2, P = E / 2 - m[v] / 2 - 1, D = b2(u[b], P), z = b2(u[M], P), N = D, j = E - m[v] - z, $ = E / 2 - m[v] / 2 + w, V = b1(N, $, j), H = !a.arrow && P2(i) != null && $ !== V && r.reference[v] / 2 - ($ < N ? D : z) - m[v] / 2 < 0, O = H ? $ < N ? $ - N : $ - j : 0;
+    const w = Z / 2 - A / 2, P = E / 2 - m[v] / 2 - 1, D = b2(u[b], P), z = b2(u[M], P), N = D, j = E - m[v] - z, q = E / 2 - m[v] / 2 + w, V = b1(N, q, j), H = !a.arrow && P2(i) != null && q !== V && r.reference[v] / 2 - (q < N ? D : z) - m[v] / 2 < 0, O = H ? q < N ? q - N : q - j : 0;
     return {
       [h]: p[h] + O,
       data: {
         [h]: V,
-        centerOffset: $ - V - O,
+        centerOffset: q - V - O,
         ...H && {
           alignmentOffset: O
         }
@@ -1105,16 +1105,16 @@ const Fe = (e) => ({
         if (!O)
           switch (h) {
             case "bestFit": {
-              var $;
-              const F = ($ = D.filter((U) => {
+              var q;
+              const F = (q = D.filter((U) => {
                 if (S) {
-                  const W = L2(U.placement);
-                  return W === M || // Create a bias to the `y` side axis due to horizontal
+                  const $ = L2(U.placement);
+                  return $ === M || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
-                  W === "y";
+                  $ === "y";
                 }
                 return !0;
-              }).map((U) => [U.placement, U.overflows.filter((W) => W > 0).reduce((W, L) => W + L, 0)]).sort((U, W) => U[1] - W[1])[0]) == null ? void 0 : $[0];
+              }).map((U) => [U.placement, U.overflows.filter(($) => $ > 0).reduce(($, L) => $ + L, 0)]).sort((U, $) => U[1] - $[1])[0]) == null ? void 0 : q[0];
               F && (O = F);
               break;
             }
@@ -1946,7 +1946,7 @@ function Qe(e) {
       middleware: p
     };
     z.current && (F.platform = z.current), Je(S.current, E.current, F).then((U) => {
-      const W = {
+      const $ = {
         ...U,
         // The floating element's position may be recomputed while it's closed
         // but still mounted (such as when transitioning out). To ensure
@@ -1954,8 +1954,8 @@ function Qe(e) {
         // setting it to `true` when `open === false` (must be specified).
         isPositioned: N.current !== !1
       };
-      $.current && !o1(w.current, W) && (w.current = W, v3.flushSync(() => {
-        u(W);
+      q.current && !o1(w.current, $) && (w.current = $, v3.flushSync(() => {
+        u($);
       }));
     });
   }, [p, l, t, z, N]);
@@ -1965,9 +1965,9 @@ function Qe(e) {
       isPositioned: !1
     })));
   }, [s]);
-  const $ = f.useRef(!1);
-  K2(() => ($.current = !0, () => {
-    $.current = !1;
+  const q = f.useRef(!1);
+  K2(() => (q.current = !0, () => {
+    q.current = !1;
   }), []), K2(() => {
     if (Z && (S.current = Z), A && (E.current = A), Z && A) {
       if (D.current)
@@ -1991,17 +1991,17 @@ function Qe(e) {
     };
     if (!H.floating)
       return F;
-    const U = r3(H.floating, c.x), W = r3(H.floating, c.y);
+    const U = r3(H.floating, c.x), $ = r3(H.floating, c.y);
     return d ? {
       ...F,
-      transform: "translate(" + U + "px, " + W + "px)",
+      transform: "translate(" + U + "px, " + $ + "px)",
       ...B3(H.floating) >= 1.5 && {
         willChange: "transform"
       }
     } : {
       position: t,
       left: U,
-      top: W
+      top: $
     };
   }, [t, d, H.floating, c.x, c.y]);
   return f.useMemo(() => ({
@@ -2108,7 +2108,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
       boundary: z.filter(p4),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: N
-    }, { refs: $, floatingStyles: V, placement: H, isPositioned: O, middlewareData: F } = Qe({
+    }, { refs: q, floatingStyles: V, placement: H, isPositioned: O, middlewareData: F } = Qe({
       // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
       strategy: "fixed",
       placement: P,
@@ -2138,7 +2138,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
         h4({ arrowWidth: E, arrowHeight: w }),
         p && r4({ strategy: "referenceHidden", ...j })
       ]
-    }), [U, W] = I3(H), L = r2(v);
+    }), [U, $] = I3(H), L = r2(v);
     g2(() => {
       O && (L == null || L());
     }, [O, L]);
@@ -2148,7 +2148,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
     }, [b]), /* @__PURE__ */ C.jsx(
       "div",
       {
-        ref: $.setFloating,
+        ref: q.setFloating,
         "data-radix-popper-content-wrapper": "",
         style: {
           ...V,
@@ -2182,7 +2182,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
               o2.div,
               {
                 "data-side": U,
-                "data-align": W,
+                "data-align": $,
                 ...m,
                 ref: _,
                 style: {
@@ -3362,9 +3362,9 @@ const Y = (e) => {
     "left-bottom"
   ], A = () => [...Z(), y, x], S = () => ["auto", "hidden", "clip", "visible", "scroll"], E = () => ["auto", "contain", "none"], w = () => [y, x, a], P = () => [y2, "full", "auto", ...w()], D = () => [F2, "none", "subgrid", y, x], z = () => ["auto", {
     span: ["full", F2, y, x]
-  }, F2, y, x], N = () => [F2, "auto", y, x], j = () => ["auto", "min", "max", "fr", y, x], $ = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], V = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], H = () => ["auto", ...w()], O = () => [y2, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...w()], F = () => [e, y, x], U = () => [...Z(), f3, c3, {
+  }, F2, y, x], N = () => [F2, "auto", y, x], j = () => ["auto", "min", "max", "fr", y, x], q = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], V = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], H = () => ["auto", ...w()], O = () => [y2, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...w()], F = () => [e, y, x], U = () => [...Z(), f3, c3, {
     position: [y, x]
-  }], W = () => ["no-repeat", {
+  }], $ = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
   }], L = () => ["auto", "cover", "contain", El, yl, {
     size: [y, x]
@@ -3786,7 +3786,7 @@ const Y = (e) => {
        * @see https://tailwindcss.com/docs/justify-content
        */
       "justify-content": [{
-        justify: [...$(), "normal"]
+        justify: [...q(), "normal"]
       }],
       /**
        * Justify Items
@@ -3807,7 +3807,7 @@ const Y = (e) => {
        * @see https://tailwindcss.com/docs/align-content
        */
       "align-content": [{
-        content: ["normal", ...$()]
+        content: ["normal", ...q()]
       }],
       /**
        * Align Items
@@ -3832,7 +3832,7 @@ const Y = (e) => {
        * @see https://tailwindcss.com/docs/place-content
        */
       "place-content": [{
-        "place-content": $()
+        "place-content": q()
       }],
       /**
        * Place Items
@@ -4342,7 +4342,7 @@ const Y = (e) => {
        * @see https://tailwindcss.com/docs/background-repeat
        */
       "bg-repeat": [{
-        bg: W()
+        bg: $()
       }],
       /**
        * Background Size
@@ -5019,7 +5019,7 @@ const Y = (e) => {
        * @see https://tailwindcss.com/docs/mask-repeat
        */
       "mask-repeat": [{
-        mask: W()
+        mask: $()
       }],
       /**
        * Mask Size
@@ -5830,7 +5830,7 @@ const Y = (e) => {
 }, b0 = (e, l, t) => {
   const o = l[t];
   o !== void 0 && (e[t] = e[t] ? e[t].concat(o) : o);
-}, kl = (e, ...l) => typeof e == "function" ? s3(u3, e, ...l) : s3(() => Bl(u3(), e), ...l), q = kl({
+}, kl = (e, ...l) => typeof e == "function" ? s3(u3, e, ...l) : s3(() => Bl(u3(), e), ...l), W = kl({
   extend: {
     classGroups: {
       gap: ["gap-r3", "gap-r4", "gap-r5", "gap-r6"],
@@ -5876,7 +5876,7 @@ const Y = (e) => {
       n,
       {
         ref: r,
-        className: q("flex items-center justify-center text-nowrap", Dl[l], Rl[t], o),
+        className: W("flex items-center justify-center text-nowrap", Dl[l], Rl[t], o),
         ...i
       }
     );
@@ -5900,7 +5900,7 @@ const Hl = n1(
       c,
       {
         ref: s,
-        className: q(
+        className: W(
           // borders:
           o,
           t,
@@ -5927,7 +5927,7 @@ function Vl({ padding: e, children: l, className: t, ...o }) {
   return /* @__PURE__ */ C.jsx(
     "div",
     {
-      className: q(
+      className: W(
         "border-b-neutral-60 flex flex-row items-center justify-between border-b",
         // nullify outside padding with negative margin on top and side:
         e === "p-r6" && "xs:-mx-5 xs:-mt-5 -mx-4 -mt-4 md:-mx-6 md:-mt-6",
@@ -5948,26 +5948,48 @@ function Vl({ padding: e, children: l, className: t, ...o }) {
 const Q2 = {
   base: [
     // Base
-    "flex cursor-pointer items-center justify-center text-nowrap text-white ring-inset transition ease-in-out",
+    "flex cursor-pointer items-center justify-center text-nowrap text-neutral-10 ring-inset transition ease-in-out",
     // Focus
-    "focus:border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-10",
+    "focus:border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-10 focus-visible:text-neutral-10",
     // Disabled base
-    "disabled:cursor-default"
+    "disabled:cursor-default disabled:hover:shadow-none"
   ],
   variants: {
     primary: [
       // Base
       "bg-primary-50",
       // Hover
-      "hover:bg-primary-55",
+      "hover:bg-primary-60",
+      // Focus
+      "focus-visible:ring-neutral-30",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
+    secondary: [
+      // Base
+      "bg-neutral-80 ring-1 ring-neutral-55 text-neutral-20",
+      // Hover
+      "hover:ring-1 hover:ring-neutral-60 hover:shadow-button hover:text-neutral-10",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
+    redText: [
+      // Base
+      "bg-neutral-80 text-primary-40 ring-1 ring-neutral-55",
+      // Hover
+      "hover:shadow-button hover:ring-neutral-60",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
     warning: [
       // Base
       "bg-warning-50",
       // Hover
-      "hover:bg-warning-30",
+      "hover:bg-warning-60",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
@@ -5975,7 +5997,7 @@ const Q2 = {
       // Base
       "bg-secondary-40",
       // Hover
-      "hover:bg-secondary-30",
+      "hover:bg-secondary-50",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
@@ -5987,23 +6009,15 @@ const Q2 = {
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
-    secondary: [
-      // Base
-      "bg-neutral-80 ring-1.5 ring-neutral-55",
-      // Hover
-      "hover:bg-neutral-80 hover:text-neutral-20 hover:ring-1.5 hover:ring-neutral-40",
-      // Disabled
-      "disabled:bg-neutral-70 disabled:text-neutral-40 disabled:ring-1.5 disabled:ring-neutral-60"
-    ],
     light: [
       // Base
       "bg-neutral-10 text-neutral-60",
       // Hover
-      "hover:bg-neutral-20",
+      "hover:text-neutral-80 hover:bg-neutral-20",
       // Disabled
       "disabled:bg-neutral-30 disabled:text-neutral-50",
       // Focus
-      "focus-visible:ring-neutral-40"
+      "focus-visible:ring-neutral-40 focus-visible:ring-1.5 focus-visible:text-neutral-60"
     ],
     ghost: [
       // Base
@@ -6027,16 +6041,18 @@ const Q2 = {
     ]
   },
   sizes: {
-    large: "tg-button-text min-h-12 rounded-xl px-5 py-3 md:min-h-14 md:rounded-2xl",
-    medium: "tg-button-text min-h-11 rounded-xl px-5 py-3 md:min-h-12",
-    small: "tg-button-small min-h-10 rounded-lg px-4 py-2 md:min-h-10",
-    xsmall: "tg-button-small min-h-9 rounded-lg px-4 py-1.5"
+    xlarge: "tg-subtitle-bold min-h-12 rounded-xl px-5 py-3 md:min-h-14 md:rounded-2xl",
+    large: "tg-button-text min-h-11 rounded-lg px-5 py-3 md:min-h-12",
+    medium: "tg-button-small min-h-10 rounded-lg px-4 py-2 md:min-h-10",
+    small: "tg-caption-bold min-h-[34px] rounded-md px-4 py-1.5",
+    xsmall: "tg-tag min-h-6 rounded-sm px-2 py-1"
   },
   ghostSizes: {
+    xlarge: "-mx-5 -my-3 px-5 py-3",
     large: "-mx-5 -my-3 px-5 py-3",
     medium: "-mx-5 -my-3 px-5 py-3",
     small: "-mx-4 -my-2 px-4 py-2",
-    xsmall: "-mx-4 -my-1.5 px-4 py-1.5"
+    xsmall: "-mx-4 -my-1.5 px-2 py-1"
   }
 }, Ol = n1(
   ({ asChild: e, variant: l = "primary", size: t = "medium", className: o, children: i, ...r }, n) => {
@@ -6045,7 +6061,7 @@ const Q2 = {
       d,
       {
         ref: n,
-        className: q(
+        className: W(
           ...Q2.base,
           ...Q2.variants[l],
           l !== "text" && Q2.sizes[t],
@@ -6071,8 +6087,8 @@ function Kl({
   className: r,
   ...n
 }) {
-  return /* @__PURE__ */ C.jsxs("div", { className: q("relative", r), ...n, children: [
-    /* @__PURE__ */ C.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ C.jsx(_1, { icon: e, className: q("size-full", l) }) }),
+  return /* @__PURE__ */ C.jsxs("div", { className: W("relative", r), ...n, children: [
+    /* @__PURE__ */ C.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ C.jsx(_1, { icon: e, className: W("size-full", l) }) }),
     /* @__PURE__ */ C.jsx(
       "div",
       {
@@ -6080,7 +6096,7 @@ function Kl({
         style: {
           transform: `scale(${i})`
         },
-        children: /* @__PURE__ */ C.jsx(_1, { icon: t, className: q("size-full", o) })
+        children: /* @__PURE__ */ C.jsx(_1, { icon: t, className: W("size-full", o) })
       }
     )
   ] });
@@ -6089,7 +6105,7 @@ function zl({ className: e, ...l }) {
   return /* @__PURE__ */ C.jsx(
     P4,
     {
-      className: q(
+      className: W(
         "overflow-hidden",
         // custom scrollbar styles, override by redefining these CSS variables
         "[--scrollbar-size:--spacing(2.5)] [--thumb-color:var(--color-neutral-60)] [--thumb-hover-color:var(--color-neutral-55)] [--track-color:var(--color-transparent)] [--track-hover-color:var(--color-transparent)]",
@@ -6100,13 +6116,13 @@ function zl({ className: e, ...l }) {
   );
 }
 function Nl({ className: e, ...l }) {
-  return /* @__PURE__ */ C.jsx(B4, { className: q("", e), ...l });
+  return /* @__PURE__ */ C.jsx(B4, { className: W("", e), ...l });
 }
 function jl({ className: e, ...l }) {
   return /* @__PURE__ */ C.jsx(
     k4,
     {
-      className: q(
+      className: W(
         "flex touch-none p-[1px] transition-colors duration-150 ease-out select-none",
         // colors
         "bg-(--track-color) hover:bg-(--track-hover-color)",
@@ -6122,7 +6138,7 @@ function Il({ className: e, ...l }) {
   return /* @__PURE__ */ C.jsx(
     D4,
     {
-      className: q(
+      className: W(
         "relative flex-1 rounded-(--scrollbar-size) transition-colors duration-150 ease-out",
         // colors
         "bg-(--thumb-color) hover:bg-(--thumb-hover-color)",
@@ -6135,7 +6151,7 @@ function Il({ className: e, ...l }) {
   );
 }
 function Ul({ className: e, ...l }) {
-  return /* @__PURE__ */ C.jsx(R4, { className: q("", e), ...l });
+  return /* @__PURE__ */ C.jsx(R4, { className: W("", e), ...l });
 }
 const e5 = {
   Root: zl,
@@ -6148,7 +6164,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
   return /* @__PURE__ */ C.jsx(
     "button",
     {
-      className: q(
+      className: W(
         "group flex h-full w-10 items-center justify-center focus:outline-none",
         t && "pointer-events-none",
         o
@@ -6157,7 +6173,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
       children: /* @__PURE__ */ C.jsx(
         "div",
         {
-          className: q(
+          className: W(
             "bg-neutral-80 group-focus:ring-neutral-40 flex h-8 w-full items-center justify-center rounded-lg group-focus:ring-1",
             l && "bg-ctaGradient hover:bg-ctaGradientHover",
             t && "bg-neutral-55"
@@ -6166,7 +6182,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
             _1,
             {
               icon: e ? "close" : "enter",
-              className: q(
+              className: W(
                 "text-neutral-10 group-hover:text-neutral-40 h-3.5 w-3.5",
                 l && "group-hover:text-neutral-10",
                 t && "text-neutral-30"
@@ -6184,7 +6200,7 @@ function t5({ className: e, ...l }) {
   return /* @__PURE__ */ C.jsx(
     "div",
     {
-      className: q("absolute h-0 w-0 overflow-clip", e),
+      className: W("absolute h-0 w-0 overflow-clip", e),
       ...l,
       dangerouslySetInnerHTML: { __html: t }
     }
@@ -6197,7 +6213,7 @@ const Wl = n1(
       r,
       {
         ref: i,
-        className: q(
+        className: W(
           e.includes("left") && "xs:pl-4 pl-3 md:pl-6 xl:pl-10",
           e.includes("right") && "xs:pr-4 pr-3 md:pr-6 xl:pr-10",
           e.includes("top") && "xs:pt-4 pt-3 md:pt-6",
@@ -6253,20 +6269,26 @@ function o5({ name: e, size: l = "md", className: t, ...o }) {
     "svg",
     {
       ...o,
-      className: q(`text-protocols-${h3(e)}`, t),
+      className: W(`text-protocols-${h3(e)}`, t),
       height: i,
       width: i,
       children: /* @__PURE__ */ C.jsx("use", { href: `#${h3(e, l)}` })
     }
   );
 }
+function i5({ className: e, ...l }) {
+  return /* @__PURE__ */ C.jsxs("span", { className: W("relative inline-block", e), ...l, children: [
+    /* @__PURE__ */ C.jsx("div", { className: "inline-block" }),
+    /* @__PURE__ */ C.jsx("div", { className: W("absolute inset-0 animate-pulse rounded bg-neutral-50") })
+  ] });
+}
 const ql = {
   "data-lpignore": !0,
   "data-1p-ignore": !0,
   "data-form-type": "other",
   "data-bwignore": !0,
   autoComplete: "off"
-}, i5 = ({
+}, r5 = ({
   variant: e = "outlined",
   disablePasswordManagers: l,
   rightAccessory: t,
@@ -6278,7 +6300,7 @@ const ql = {
   return /* @__PURE__ */ C.jsxs(
     "div",
     {
-      className: q(
+      className: W(
         // base wrapper styles:
         "flex min-h-10 flex-row items-center justify-between rounded-lg",
         // variant-specific base:
@@ -6293,7 +6315,7 @@ const ql = {
         /* @__PURE__ */ C.jsx(
           "input",
           {
-            className: q(
+            className: W(
               // base input styles:
               "tg-body placeholder-neutral-40 flex-1 bg-transparent px-3 focus:outline-none disabled:cursor-not-allowed",
               // text color:
@@ -6314,7 +6336,7 @@ const ql = {
     }
   );
 };
-function r5({
+function n5({
   content: e,
   color: l = "bg-neutral-80",
   side: t = "bottom",
@@ -6339,7 +6361,7 @@ function r5({
         /* @__PURE__ */ C.jsxs(
           K4,
           {
-            className: q(
+            className: W(
               "tg-caption text-neutral-20 max-h-(--radix-tooltip-content-available-height) origin-(--radix-tooltip-content-transform-origin) rounded-lg p-3 text-center text-pretty shadow-md",
               // animations
               "data-[state=closed]:animate-tooltip-exit data-[state=delayed-open]:animate-tooltip-delayed-enter data-[state=instant-open]:animate-tooltip-enter",
@@ -6356,7 +6378,7 @@ function r5({
               /* @__PURE__ */ C.jsx(
                 el,
                 {
-                  className: q(
+                  className: W(
                     l === "bg-neutral-60" && "fill-neutral-60",
                     l === "bg-neutral-80" && "fill-neutral-80",
                     l === "bg-secondary-40" && "fill-secondary-40"
@@ -6372,7 +6394,7 @@ function r5({
     }
   );
 }
-function n5({
+function d5({
   children: e,
   delayDuration: l = 300,
   skipDelayDuration: t = 50,
@@ -6391,7 +6413,8 @@ export {
   Wl as PagePadding,
   o5 as ProtocolLogo,
   e5 as ScrollArea,
-  i5 as TextInput,
-  r5 as Tooltip,
-  n5 as TooltipProvider
+  i5 as Skeleton,
+  r5 as TextInput,
+  n5 as Tooltip,
+  d5 as TooltipProvider
 };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { InputButton } from './components/input-button/input-button';
 export { MountSvgSprite } from './components/mount-svg-sprite/mount-svg-sprite';
 export { PagePadding } from './components/page-padding/page-padding';
 export { ProtocolLogo } from './components/protocol-logo/protocol-logo';
+export { Skeleton } from './components/skeleton/skeleton';
 export { TextInput } from './components/text-input/text-input';
 export { Tooltip } from './components/tooltip/tooltip';
 export { TooltipProvider } from './components/tooltip-provider/tooltip-provider';

package/dist/styles/colors.css

@@ -6,7 +6,7 @@
   --color-purple: #6c5dd3;
 
   /* Primary */
-  --color-primary-60: #bc243e;
+  --color-primary-60: #c14e64;
   --color-primary-50: #d63d57;
   --color-primary-55: #da4e65;
   --color-primary-40: #df687d;
@@ -15,7 +15,8 @@
 
   /* Secondary */
   --color-secondary-70: #193a66;
-  --color-secondary-50: #0052bd;
+  --color-secondary-60: #0052bd;
+  --color-secondary-50: #1e6fda;
   --color-secondary-40: #3f8cff;
   --color-secondary-30: #83b9ff;
   --color-secondary-20: #b2cbeb;
@@ -38,6 +39,7 @@
   --color-success-20: #f0f9f2;
 
   /* Warning */
+  --color-warning-60: #e8562b;
   --color-warning-50: #ff754c;
   --color-warning-30: #ff9a7b;
   --color-warning-20: #f8d9c7;
@@ -72,4 +74,4 @@
   --color-protocols-mnt: #242731;
   --color-protocols-monad: #836ef9;
   --color-protocols-icp: #3a3d46;
-}
+}

package/dist/styles/tailwind.css

@@ -33,6 +33,7 @@
   --shadow-modal: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 0px 14px -4px rgba(0, 0, 0, 0.05);
   --shadow-menu-item: 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
   --shadow-sidebar-accessory: 0px 20px 24px 0px rgba(0, 0, 0, 0.5);
+  --shadow-button: 0px 7.4px 18.5px 0px rgba(255, 255, 255, 0.11) inset;
 
   /* Miscellaneous */
   --border-width-1\.5: 1.5px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.20.0",
+  "version": "1.22.0",
   "module": "./dist/fractal-ui.js",
   "type": "module",
   "files": [