@validationcloud/fractal-ui 1.17.0 → 1.18.0

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

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

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     component: import('react').ForwardRefExoticComponent<{
         className?: string;
-        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text";
+        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light";
         size?: "large" | "medium" | "small" | "xsmall";
     } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean;
@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Secondary: Story;
+export declare const Light: Story;
 export declare const Gradient: Story;
 export declare const Warning: Story;
 export declare const Info: Story;

package/dist/fractal-ui.js

@@ -79,14 +79,14 @@ function S1() {
           case U:
             return (c._context.displayName || "Context") + ".Consumer";
           case z:
-            var g = c.render;
-            return c = c.displayName, c || (c = g.displayName || g.name || "", c = c !== "" ? "ForwardRef(" + c + ")" : "ForwardRef"), c;
+            var b = c.render;
+            return c = c.displayName, c || (c = b.displayName || b.name || "", c = c !== "" ? "ForwardRef(" + c + ")" : "ForwardRef"), c;
           case m:
-            return g = c.displayName || null, g !== null ? g : l(c.type) || "Memo";
+            return b = c.displayName || null, b !== null ? b : l(c.type) || "Memo";
           case x:
-            g = c._payload, c = c._init;
+            b = c._payload, c = c._init;
             try {
-              return l(c(g));
+              return l(c(b));
             } catch {
             }
         }
@@ -98,15 +98,15 @@ function S1() {
     function o(c) {
       try {
         i(c);
-        var g = !1;
+        var b = !1;
       } catch {
-        g = !0;
+        b = !0;
       }
-      if (g) {
-        g = console;
-        var b = g.error, y = typeof Symbol == "function" && Symbol.toStringTag && c[Symbol.toStringTag] || c.constructor.name || "Object";
-        return b.call(
-          g,
+      if (b) {
+        b = console;
+        var g = b.error, y = typeof Symbol == "function" && Symbol.toStringTag && c[Symbol.toStringTag] || c.constructor.name || "Object";
+        return g.call(
+          b,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           y
         ), i(c);
@@ -117,8 +117,8 @@ function S1() {
       if (typeof c == "object" && c !== null && c.$$typeof === x)
         return "<...>";
       try {
-        var g = l(c);
-        return g ? "<" + g + ">" : "<...>";
+        var b = l(c);
+        return b ? "<" + b + ">" : "<...>";
       } catch {
         return "<...>";
       }
@@ -132,20 +132,20 @@ function S1() {
     }
     function n(c) {
       if (s2.call(c, "key")) {
-        var g = Object.getOwnPropertyDescriptor(c, "key").get;
-        if (g && g.isReactWarning) return !1;
+        var b = Object.getOwnPropertyDescriptor(c, "key").get;
+        if (b && b.isReactWarning) return !1;
       }
       return c.key !== void 0;
     }
-    function a(c, g) {
-      function b() {
+    function a(c, b) {
+      function g() {
         O || (O = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          g
+          b
         ));
       }
-      b.isReactWarning = !0, Object.defineProperty(c, "key", {
-        get: b,
+      g.isReactWarning = !0, Object.defineProperty(c, "key", {
+        get: g,
         configurable: !0
       });
     }
@@ -155,14 +155,14 @@ function S1() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), c = this.props.ref, c !== void 0 ? c : null;
     }
-    function p(c, g, b, y, R, T, _, o2) {
-      return b = T.ref, c = {
+    function p(c, b, g, y, R, T, _, o2) {
+      return g = T.ref, c = {
         $$typeof: w,
         type: c,
-        key: g,
+        key: b,
         props: T,
         _owner: R
-      }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(c, "ref", {
+      }, (g !== void 0 ? g : null) !== null ? Object.defineProperty(c, "ref", {
         enumerable: !1,
         get: f
       }) : Object.defineProperty(c, "ref", { enumerable: !1, value: null }), c._store = {}, Object.defineProperty(c._store, "validated", {
@@ -187,8 +187,8 @@ function S1() {
         value: o2
       }), Object.freeze && (Object.freeze(c.props), Object.freeze(c)), c;
     }
-    function v(c, g, b, y, R, T, _, o2) {
-      var E = g.children;
+    function v(c, b, g, y, R, T, _, o2) {
+      var E = b.children;
       if (E !== void 0)
         if (y)
           if (f2(E)) {
@@ -200,9 +200,9 @@ function S1() {
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else C(E);
-      if (s2.call(g, "key")) {
+      if (s2.call(b, "key")) {
         E = l(c);
-        var q = Object.keys(g).filter(function(r2) {
+        var q = Object.keys(b).filter(function(r2) {
           return r2 !== "key";
         });
         y = 0 < q.length ? "{key: someKey, " + q.join(": ..., ") + ": ...}" : "{key: someKey}", h2[E + y] || (q = 0 < q.length ? "{" + q.join(": ..., ") + ": ...}" : "{}", console.error(
@@ -218,13 +218,13 @@ React keys must be passed directly to JSX without using spread:
           E
         ), h2[E + y] = !0);
       }
-      if (E = null, b !== void 0 && (o(b), E = "" + b), n(g) && (o(g.key), E = "" + g.key), "key" in g) {
-        b = {};
-        for (var K in g)
-          K !== "key" && (b[K] = g[K]);
-      } else b = g;
+      if (E = null, g !== void 0 && (o(g), E = "" + g), n(b) && (o(b.key), E = "" + b.key), "key" in b) {
+        g = {};
+        for (var K in b)
+          K !== "key" && (g[K] = b[K]);
+      } else g = b;
       return E && a(
-        b,
+        g,
         typeof c == "function" ? c.displayName || c.name || "Unknown" : c
       ), p(
         c,
@@ -232,7 +232,7 @@ React keys must be passed directly to JSX without using spread:
         T,
         R,
         r(),
-        b,
+        g,
         _,
         o2
       );
@@ -252,24 +252,24 @@ React keys must be passed directly to JSX without using spread:
       M,
       d
     )(), p2 = W(t(d)), h2 = {};
-    L2.Fragment = P, L2.jsx = function(c, g, b, y, R) {
+    L2.Fragment = P, L2.jsx = function(c, b, g, y, R) {
       var T = 1e4 > X.recentlyCreatedOwnerStacks++;
       return v(
         c,
-        g,
         b,
+        g,
         !1,
         y,
         R,
         T ? Error("react-stack-top-frame") : F,
         T ? W(t(c)) : p2
       );
-    }, L2.jsxs = function(c, g, b, y, R) {
+    }, L2.jsxs = function(c, b, g, y, R) {
       var T = 1e4 > X.recentlyCreatedOwnerStacks++;
       return v(
         c,
-        g,
         b,
+        g,
         !0,
         y,
         R,
@@ -462,19 +462,19 @@ function j1(e) {
     }
   });
   return s.useEffect(() => {
-    const f = g2(o.current);
+    const f = b2(o.current);
     r.current = n === "mounted" ? f : "none";
   }, [n]), D2(() => {
     const f = o.current, p = t.current;
     if (p !== e) {
-      const C = r.current, M = g2(f);
+      const C = r.current, M = b2(f);
       e ? a("MOUNT") : M === "none" || (f == null ? void 0 : f.display) === "none" ? a("UNMOUNT") : a(p && C !== M ? "ANIMATION_OUT" : "UNMOUNT"), t.current = e;
     }
   }, [e, a]), D2(() => {
     if (l) {
       let f;
       const p = l.ownerDocument.defaultView ?? window, v = (M) => {
-        const A = g2(o.current).includes(M.animationName);
+        const A = b2(o.current).includes(M.animationName);
         if (M.target === l && A && (a("ANIMATION_END"), !t.current)) {
           const P = l.style.animationFillMode;
           l.style.animationFillMode = "forwards", f = p.setTimeout(() => {
@@ -482,7 +482,7 @@ function j1(e) {
           });
         }
       }, C = (M) => {
-        M.target === l && (r.current = g2(o.current));
+        M.target === l && (r.current = b2(o.current));
       };
       return l.addEventListener("animationstart", C), l.addEventListener("animationcancel", v), l.addEventListener("animationend", v), () => {
         p.clearTimeout(f), l.removeEventListener("animationstart", C), l.removeEventListener("animationcancel", v), l.removeEventListener("animationend", v);
@@ -496,7 +496,7 @@ function j1(e) {
     }, [])
   };
 }
-function g2(e) {
+function b2(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
 function G1(e) {
@@ -1240,7 +1240,7 @@ const G2 = "-", c3 = (e) => {
   }
   return a;
 };
-function g3() {
+function b3() {
   let e = 0, l, i, o = "";
   for (; e < arguments.length; )
     (l = arguments[e++]) && (i = m1(l)) && (o && (o += " "), o += i);
@@ -1268,22 +1268,22 @@ function J2(e, ...l) {
     return t(a, p), p;
   }
   return function() {
-    return r(g3.apply(null, arguments));
+    return r(b3.apply(null, arguments));
   };
 }
 const k = (e) => {
   const l = (i) => i[e] || [];
   return l.isThemeGetter = !0, l;
-}, M1 = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, g1 = /^\((?:(\w[\w-]*):)?(.+)\)$/i, b3 = /^\d+\/\d+$/, Z3 = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, w3 = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, x3 = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, y3 = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, A3 = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, d2 = (e) => b3.test(e), Z = (e) => !!e && !Number.isNaN(Number(e)), Q = (e) => !!e && Number.isInteger(Number(e)), P2 = (e) => e.endsWith("%") && Z(e.slice(0, -1)), J = (e) => Z3.test(e), _3 = () => !0, E3 = (e) => (
+}, M1 = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, b1 = /^\((?:(\w[\w-]*):)?(.+)\)$/i, g3 = /^\d+\/\d+$/, Z3 = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, w3 = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, x3 = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, y3 = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, A3 = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, d2 = (e) => g3.test(e), Z = (e) => !!e && !Number.isNaN(Number(e)), Q = (e) => !!e && Number.isInteger(Number(e)), P2 = (e) => e.endsWith("%") && Z(e.slice(0, -1)), J = (e) => Z3.test(e), _3 = () => !0, E3 = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   w3.test(e) && !x3.test(e)
-), b1 = () => !1, B3 = (e) => y3.test(e), S3 = (e) => A3.test(e), k3 = (e) => !h(e) && !u(e), P3 = (e) => a2(e, x1, b1), h = (e) => M1.test(e), e2 = (e) => a2(e, y1, E3), V2 = (e) => a2(e, R3, Z), Q2 = (e) => a2(e, Z1, b1), V3 = (e) => a2(e, w1, S3), b2 = (e) => a2(e, A1, B3), u = (e) => g1.test(e), v2 = (e) => c2(e, y1), D3 = (e) => c2(e, T3), K2 = (e) => c2(e, Z1), H3 = (e) => c2(e, x1), z3 = (e) => c2(e, w1), Z2 = (e) => c2(e, A1, !0), a2 = (e, l, i) => {
+), g1 = () => !1, B3 = (e) => y3.test(e), S3 = (e) => A3.test(e), k3 = (e) => !h(e) && !u(e), P3 = (e) => a2(e, x1, g1), h = (e) => M1.test(e), e2 = (e) => a2(e, y1, E3), V2 = (e) => a2(e, R3, Z), Q2 = (e) => a2(e, Z1, g1), V3 = (e) => a2(e, w1, S3), g2 = (e) => a2(e, A1, B3), u = (e) => b1.test(e), v2 = (e) => c2(e, y1), D3 = (e) => c2(e, T3), K2 = (e) => c2(e, Z1), H3 = (e) => c2(e, x1), z3 = (e) => c2(e, w1), Z2 = (e) => c2(e, A1, !0), a2 = (e, l, i) => {
   const o = M1.exec(e);
   return o ? o[1] ? l(o[1]) : i(o[2]) : !1;
 }, c2 = (e, l, i = !1) => {
-  const o = g1.exec(e);
+  const o = b1.exec(e);
   return o ? o[1] ? l(o[1]) : i : !1;
 }, Z1 = (e) => e === "position" || e === "percentage", w1 = (e) => e === "image" || e === "url", x1 = (e) => e === "length" || e === "size" || e === "bg-size", y1 = (e) => e === "length", R3 = (e) => e === "number", T3 = (e) => e === "family-name", A1 = (e) => e === "shadow", e1 = () => {
   const e = k("color"), l = k("font"), i = k("text"), o = k("font-weight"), t = k("tracking"), r = k("leading"), d = k("breakpoint"), n = k("container"), a = k("spacing"), f = k("radius"), p = k("shadow"), v = k("inset-shadow"), C = k("text-shadow"), M = k("drop-shadow"), w = k("blur"), A = k("perspective"), P = k("aspect"), B = k("ease"), G = k("animate"), U = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], H = () => [
@@ -1312,7 +1312,7 @@ const k = (e) => {
     repeat: ["", "x", "y", "space", "round"]
   }], c = () => ["auto", "cover", "contain", H3, P3, {
     size: [u, h]
-  }], g = () => [P2, v2, e2], b = () => [
+  }], b = () => [P2, v2, e2], g = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -2320,21 +2320,21 @@ const k = (e) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from-pos": [{
-        from: g()
+        from: b()
       }],
       /**
        * Gradient Color Stops Via Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via-pos": [{
-        via: g()
+        via: b()
       }],
       /**
        * Gradient Color Stops To Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to-pos": [{
-        to: g()
+        to: b()
       }],
       /**
        * Gradient Color Stops From
@@ -2365,105 +2365,105 @@ const k = (e) => {
        * @see https://tailwindcss.com/docs/border-radius
        */
       rounded: [{
-        rounded: b()
+        rounded: g()
       }],
       /**
        * Border Radius Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-s": [{
-        "rounded-s": b()
+        "rounded-s": g()
       }],
       /**
        * Border Radius End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-e": [{
-        "rounded-e": b()
+        "rounded-e": g()
       }],
       /**
        * Border Radius Top
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-t": [{
-        "rounded-t": b()
+        "rounded-t": g()
       }],
       /**
        * Border Radius Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-r": [{
-        "rounded-r": b()
+        "rounded-r": g()
       }],
       /**
        * Border Radius Bottom
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-b": [{
-        "rounded-b": b()
+        "rounded-b": g()
       }],
       /**
        * Border Radius Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-l": [{
-        "rounded-l": b()
+        "rounded-l": g()
       }],
       /**
        * Border Radius Start Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ss": [{
-        "rounded-ss": b()
+        "rounded-ss": g()
       }],
       /**
        * Border Radius Start End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-se": [{
-        "rounded-se": b()
+        "rounded-se": g()
       }],
       /**
        * Border Radius End End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ee": [{
-        "rounded-ee": b()
+        "rounded-ee": g()
       }],
       /**
        * Border Radius End Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-es": [{
-        "rounded-es": b()
+        "rounded-es": g()
       }],
       /**
        * Border Radius Top Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tl": [{
-        "rounded-tl": b()
+        "rounded-tl": g()
       }],
       /**
        * Border Radius Top Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tr": [{
-        "rounded-tr": b()
+        "rounded-tr": g()
       }],
       /**
        * Border Radius Bottom Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-br": [{
-        "rounded-br": b()
+        "rounded-br": g()
       }],
       /**
        * Border Radius Bottom Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-bl": [{
-        "rounded-bl": b()
+        "rounded-bl": g()
       }],
       /**
        * Border Width
@@ -2678,7 +2678,7 @@ const k = (e) => {
           "none",
           p,
           Z2,
-          b2
+          g2
         ]
       }],
       /**
@@ -2693,7 +2693,7 @@ const k = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       "inset-shadow": [{
-        "inset-shadow": ["none", v, Z2, b2]
+        "inset-shadow": ["none", v, Z2, g2]
       }],
       /**
        * Inset Box Shadow Color
@@ -2760,7 +2760,7 @@ const k = (e) => {
        * @see https://tailwindcss.com/docs/text-shadow
        */
       "text-shadow": [{
-        "text-shadow": ["none", C, Z2, b2]
+        "text-shadow": ["none", C, Z2, g2]
       }],
       /**
        * Text Shadow Color
@@ -3034,7 +3034,7 @@ const k = (e) => {
           "none",
           M,
           Z2,
-          b2
+          g2
         ]
       }],
       /**
@@ -3939,6 +3939,16 @@ const y2 = {
       // 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",
+      // Disabled
+      "disabled:bg-neutral-30 disabled:text-neutral-50",
+      // Focus
+      "focus-visible:ring-neutral-40"
+    ],
     ghost: [
       // Base
       "inline-flex text-current bg-transparent",

package/package.json

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