@gradient-ui/gradient-engine 0.5.0 → 0.6.0

package/dist/effects.mjs

@@ -1,5 +1,7 @@
-import { t as w, b as $, j as m, i as b } from "./utils-B_VQDGMy.js";
-const T = "http://www.w3.org/2000/svg", X = {
+import { t as S, b as h, k as u, j as M } from "./utils-BzSNCfat.js";
+import { t as B } from "./css-DVaTTIqS.js";
+import { D, G as X } from "./types-BFr1fN-7.js";
+const N = "http://www.w3.org/2000/svg", k = "http://www.w3.org/1999/xhtml", O = (r) => r.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Y = {
   soft: {
     blobCount: 5,
     blur: 40,
@@ -24,31 +26,33 @@ const T = "http://www.w3.org/2000/svg", X = {
     opacity: 0.78,
     scale: 0.94
   }
-}, y = (r = {}) => {
-  const t = X[r.preset ?? "soft"];
+}, E = new Set(X), A = (r) => E.has(r), z = (r) => r && A(r) ? r : D, $ = (r = {}) => {
+  const a = Y[r.preset ?? "soft"];
   return {
     blobCount: Math.max(
       2,
-      Math.round(r.blobCount ?? t.blobCount)
+      Math.round(r.blobCount ?? a.blobCount)
     ),
-    blur: $(r.blur ?? t.blur, 0, 80),
-    contrast: $(r.contrast ?? t.contrast, 0, 36),
-    duration: r.duration ?? t.duration,
+    blendMode: z(r.blendMode),
+    blobOpacity: h(r.blobOpacity ?? 1, 0, 1.6),
+    blur: h(r.blur ?? a.blur, 0, 80),
+    contrast: h(r.contrast ?? a.contrast, 0, 36),
+    duration: r.duration ?? a.duration,
     id: r.id ?? "g-gradient-morph",
-    opacity: $(r.opacity ?? t.opacity),
-    scale: $(r.scale ?? t.scale, 0.4, 2)
+    opacity: h(r.opacity ?? a.opacity),
+    scale: h(r.scale ?? a.scale, 0.4, 2)
   };
-}, Y = (r, t) => {
-  var o, i;
-  return ((o = r.stops[t % r.stops.length]) == null ? void 0 : o.color) ?? ((i = r.stops[0]) == null ? void 0 : i.color) ?? "currentColor";
-}, G = (r) => {
+}, P = (r, a) => {
+  var t, i;
+  return ((t = r.stops[a % r.stops.length]) == null ? void 0 : t.color) ?? ((i = r.stops[0]) == null ? void 0 : i.color) ?? "currentColor";
+}, j = (r) => {
   if (typeof r == "number") return r;
-  const t = Number.parseFloat(r);
-  return Number.isFinite(t) ? t : 9e3;
-}, B = (r, t) => {
-  const o = Math.sin((r + 1) * 12.9898 + t * 78.233) * 43758.5453;
-  return o - Math.floor(o);
-}, d = (r, t, o, i) => o + B(r, t) * (i - o), l = (r) => Number(r.toFixed(3)), v = [
+  const a = Number.parseFloat(r);
+  return Number.isFinite(a) ? a : 9e3;
+}, L = (r, a) => {
+  const t = Math.sin((r + 1) * 12.9898 + a * 78.233) * 43758.5453;
+  return t - Math.floor(t);
+}, c = (r, a, t, i) => t + L(r, a) * (i - t), p = (r) => Number(r.toFixed(3)), w = [
   {
     animationName: "g-gradient-morph-drift",
     dx: 20,
@@ -153,61 +157,61 @@ const T = "http://www.w3.org/2000/svg", X = {
     x: 18,
     y: 24
   }
-], _ = (r, t = {}) => {
-  const { blobCount: o, duration: i, scale: c } = y(t), a = G(i);
-  return Array.from({ length: o }, (s, n) => {
-    const e = v[n % v.length], g = d(n, 1, 0.88, 1.16), h = d(n, 2, 0.86, 1.24), u = d(n, 3, 0.72, 1), x = d(n, 4, 0, 4), f = (34 + n % 4 * 9) * c * g;
+], C = (r, a = {}) => {
+  const { blobCount: t, blobOpacity: i, duration: g, scale: d } = $(a), e = j(g);
+  return Array.from({ length: t }, (l, n) => {
+    const s = w[n % w.length], m = c(n, 1, 0.88, 1.16), o = c(n, 2, 0.86, 1.24), f = h(c(n, 3, 0.72, 1) * i), x = c(n, 4, 0, 4), v = (34 + n % 4 * 9) * d * m;
     return {
-      animationName: e.animationName,
-      blur: l(x),
-      color: Y(r, n),
+      animationName: s.animationName,
+      blur: p(x),
+      color: P(r, n),
       delay: Math.round(
-        n * -0.19 * a - d(n, 5, 0, 900)
+        n * -0.19 * e - c(n, 5, 0, 900)
       ),
-      dx: l(e.dx * d(n, 6, 0.84, 1.18)),
-      dx2: l(e.dx2 * d(n, 7, 0.82, 1.22)),
-      dy: l(e.dy * d(n, 8, 0.84, 1.18)),
-      dy2: l(e.dy2 * d(n, 9, 0.82, 1.22)),
+      dx: p(s.dx * c(n, 6, 0.84, 1.18)),
+      dx2: p(s.dx2 * c(n, 7, 0.82, 1.22)),
+      dy: p(s.dy * c(n, 8, 0.84, 1.18)),
+      dy2: p(s.dy2 * c(n, 9, 0.82, 1.22)),
       duration: Math.round(
-        a * (1 + n % 3 * 0.11) * h
+        e * (1 + n % 3 * 0.11) * o
       ),
-      opacity: l(u),
-      originX: e.originX,
-      originY: e.originY,
-      rotateMid: Math.round(d(n, 10, 95, 165)),
-      rotateTo: Math.round(d(n, 11, 220, 310)),
-      scaleMid: e.scaleMid,
-      scaleTo: e.scaleTo,
-      size: l(f),
-      x: e.x,
-      y: e.y
+      opacity: p(f),
+      originX: s.originX,
+      originY: s.originY,
+      rotateMid: Math.round(c(n, 10, 95, 165)),
+      rotateTo: Math.round(c(n, 11, 220, 310)),
+      scaleMid: s.scaleMid,
+      scaleTo: s.scaleTo,
+      size: p(v),
+      x: s.x,
+      y: s.y
     };
   });
-}, k = (r = {}) => `url(#${y(r).id}) blur(${y(r).blur}px)`, j = (r = {}) => {
-  const { blur: t, contrast: o, id: i } = y(r), c = Math.max(2, Math.round(t * 0.25)), a = -(o * 0.45), s = o <= 0 ? "" : `
-    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${o} ${a}" result="g-gradient-morph-goo" />
+}, T = (r = {}) => `url(#${$(r).id}) blur(${$(r).blur}px)`, F = (r = {}) => {
+  const { blur: a, contrast: t, id: i } = $(r), g = Math.max(2, Math.round(a * 0.25)), d = -(t * 0.45), e = t <= 0 ? "" : `
+    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${t} ${d}" result="g-gradient-morph-goo" />
     <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;
-  return `<svg xmlns="${T}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
+  return `<svg xmlns="${N}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
   <filter id="${i}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${c}" result="g-gradient-morph-blur" />${s}
+    <feGaussianBlur in="SourceGraphic" stdDeviation="${g}" result="g-gradient-morph-blur" />${e}
   </filter>
 </svg>`;
-}, A = (r, t = {}) => {
-  const o = t.selector ?? ".g-gradient-morph", { opacity: i } = y(t), c = _(r, t);
-  return `${o} {
+}, V = (r, a = {}) => {
+  const t = a.selector ?? ".g-gradient-morph", { blendMode: i, opacity: g } = $(a), d = C(r, a);
+  return `${t} {
 	position: relative;
 	overflow: hidden;
 }
 
-${o}__blobs {
+${t}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${i};
-	filter: ${k(t)};
-	mix-blend-mode: hard-light;
+	opacity: ${g};
+	filter: ${T(a)};
+	mix-blend-mode: ${i};
 }
 
-${o}__blob {
+${t}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -218,28 +222,29 @@ ${o}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${c.map(
-    (a, s) => `${o}__blob:nth-child(${s + 1}) {
-	top: ${a.y}%;
-	left: ${a.x}%;
-	width: ${a.size}%;
+${d.map(
+    (e, l) => `${t}__blob:nth-child(${l + 1}) {
+	top: ${e.y}%;
+	left: ${e.x}%;
+	width: ${e.size}%;
 	aspect-ratio: 1;
-	--g-gradient-morph-blob-color: ${a.color};
-	--g-gradient-morph-x: ${a.dx}%;
-	--g-gradient-morph-x2: ${a.dx2}%;
-	--g-gradient-morph-y: ${a.dy}%;
-	--g-gradient-morph-y2: ${a.dy2}%;
-	--g-gradient-morph-origin-x: ${a.originX};
-	--g-gradient-morph-origin-y: ${a.originY};
-	--g-gradient-morph-animation: ${a.animationName};
-	--g-gradient-morph-blur: ${a.blur}px;
-	--g-gradient-morph-opacity: ${a.opacity};
-	--g-gradient-morph-rotate-mid: ${a.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${a.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${a.scaleMid};
-	--g-gradient-morph-scale: ${a.scaleTo};
-	animation-delay: ${a.delay}ms;
-	animation-duration: ${w(a.duration)};
+	--g-gradient-morph-blob-color: ${e.color};
+	--g-gradient-morph-x: ${e.dx}%;
+	--g-gradient-morph-x2: ${e.dx2}%;
+	--g-gradient-morph-y: ${e.dy}%;
+	--g-gradient-morph-y2: ${e.dy2}%;
+	--g-gradient-morph-origin-x: ${e.originX};
+	--g-gradient-morph-origin-y: ${e.originY};
+	--g-gradient-morph-animation: ${e.animationName};
+	--g-gradient-morph-blur: ${e.blur}px;
+	--g-gradient-morph-opacity: ${e.opacity};
+	--g-gradient-morph-rotate-mid: ${e.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${e.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${e.scaleMid};
+	--g-gradient-morph-scale: ${e.scaleTo};
+	--g-gradient-morph-delay: ${e.delay}ms;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${S(e.duration)};
 }`
   ).join(`
 
@@ -286,36 +291,148 @@ ${c.map(
 		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale));
 	}
 }`;
-}, C = (r, t) => {
-  const o = r.stops.filter(
-    (a) => a.position >= 25 && a.position <= 85
+}, K = (r, a = {}) => {
+  const t = a.id ?? "g-gradient-morph", i = a.width ?? 360, g = a.height ?? 240, d = a.rx ?? 24, e = `${t}-filter`, l = T({ ...a, id: e }), n = C(r, a), { blendMode: s, opacity: m } = $(a);
+  return `<svg xmlns="${N}" viewBox="0 0 ${i} ${g}" width="${i}" height="${g}" role="img">
+  <defs>
+    <clipPath id="${t}-clip">
+      <rect width="${i}" height="${g}" rx="${d}" />
+    </clipPath>
+  </defs>
+  <foreignObject width="${i}" height="${g}" clip-path="url(#${t}-clip)">
+    <div xmlns="${k}" class="g-gradient-material">
+      ${F({ ...a, id: `${t}-filter` })}
+      <style>
+.g-gradient-material {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: ${i}px;
+	height: ${g}px;
+	border-radius: ${d}px;
+}
+
+.g-gradient-material__surface {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-radius: ${d}px;
+	background: ${O(B(r))};
+}
+
+.g-gradient-material__morph {
+	--g-gradient-material-morph-bleed: 18%;
+	position: absolute;
+	z-index: 1;
+	inset: calc(-1 * var(--g-gradient-material-morph-bleed));
+	width: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
+	height: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
+	opacity: ${m};
+	filter: ${l};
+	mix-blend-mode: ${s};
+}
+
+.g-gradient-material__morph-blob {
+	position: absolute;
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	transform: translate(-50%, -50%);
+	aspect-ratio: 1;
+	border-radius: 999px;
+	opacity: var(--g-gradient-morph-opacity);
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	filter: blur(var(--g-gradient-morph-blur));
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${n.map(
+    (o, f) => `.g-gradient-material__morph-blob:nth-child(${f + 1}) {
+	left: ${o.x}%;
+	top: ${o.y}%;
+	width: ${o.size}%;
+	--g-gradient-morph-blob-color: ${o.color};
+	--g-gradient-morph-x: ${o.dx}%;
+	--g-gradient-morph-x2: ${o.dx2}%;
+	--g-gradient-morph-y: ${o.dy}%;
+	--g-gradient-morph-y2: ${o.dy2}%;
+	--g-gradient-morph-origin-x: ${o.originX};
+	--g-gradient-morph-origin-y: ${o.originY};
+	--g-gradient-morph-animation: ${o.animationName};
+	--g-gradient-morph-blur: ${o.blur}px;
+	--g-gradient-morph-opacity: ${o.opacity};
+	--g-gradient-morph-rotate-mid: ${o.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${o.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${o.scaleMid};
+	--g-gradient-morph-scale: ${o.scaleTo};
+	--g-gradient-morph-delay: ${o.delay}ms;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${S(o.duration)};
+}`
+  ).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% { transform: translate(-50%, -50%) scale(0.92); }
+	42% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid)); }
+}
+
+@keyframes g-gradient-morph-float {
+	0% { transform: translate(-50%, -50%) scale(1); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale)); }
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale)); }
+}
+      </style>
+      <span class="g-gradient-material__surface">
+        <span class="g-gradient-material__morph">
+          ${n.map(() => '<span class="g-gradient-material__morph-blob"></span>').join(`
+          `)}
+        </span>
+      </span>
+    </div>
+  </foreignObject>
+</svg>`;
+}, G = (r, a) => {
+  const t = r.stops.filter(
+    (d) => d.position >= 25 && d.position <= 85
   ), i = r.stops.filter(
-    (a) => !o.includes(a)
+    (d) => !t.includes(d)
   );
-  return [...o, ...i].sort(
-    (a, s) => Math.abs(a.position - 50) - Math.abs(s.position - 50)
-  ).slice(0, t);
-}, D = (r, t) => r * ([1, 0.54, 0.3, 0.18][t] ?? 0.12), p = (r, t) => {
-  const o = String(r).match(/^(-?\d*\.?\d+)(.*)$/);
-  return o ? `${Math.round(Number(o[1]) * t * 1e3) / 1e3}${o[2] || "px"}` : null;
-}, S = (r, t, o) => p(r, 1 / t) ?? (o === 0 ? m(r) : "0px"), z = (r, t) => p(r, 1 / Math.sqrt(t)) ?? m(r), L = (r, t = {}) => {
-  var M;
-  const o = t.x ?? 0, i = t.y ?? 6, c = t.blur ?? 14, a = t.spread ?? -3, s = t.opacity ?? 0.24, n = Math.max(1, Math.round(t.layers ?? 2)), e = ((M = C(r, 1)[0]) == null ? void 0 : M.color) ?? "#000000", g = `${m(o)} ${m(i)} ${m(c)} ${m(a)} ${b(e, s)}`;
-  if (n === 1) return g;
-  const h = p(o, 0.35) ?? "0px", u = p(i, 0.35) ?? "2px", x = p(c, 0.3) ?? "4px", f = p(a, 0.5) ?? "-2px", N = Math.min(0.18, s * 0.65);
-  return `${`${h} ${u} ${x} ${f} ${b("#000000", N)}`}, ${g}`;
-}, P = (r, t = {}) => {
-  const o = t.x ?? 0, i = t.y ?? 6, c = t.blur ?? 14, a = t.opacity ?? 0.42, s = Math.max(1, Math.round(t.layers ?? 2)), n = z(c, s);
-  return C(r, s).map((e, g) => {
-    const h = S(o, s, g), u = S(i, s, g);
-    return `drop-shadow(${h} ${u} ${n} ${b(e.color, D(a, g))})`;
+  return [...t, ...i].sort(
+    (d, e) => Math.abs(d.position - 50) - Math.abs(e.position - 50)
+  ).slice(0, a);
+}, R = (r, a) => r * ([1, 0.54, 0.3, 0.18][a] ?? 0.12), y = (r, a) => {
+  const t = String(r).match(/^(-?\d*\.?\d+)(.*)$/);
+  return t ? `${Math.round(Number(t[1]) * a * 1e3) / 1e3}${t[2] || "px"}` : null;
+}, _ = (r, a, t) => y(r, 1 / a) ?? (t === 0 ? u(r) : "0px"), q = (r, a) => y(r, 1 / Math.sqrt(a)) ?? u(r), Q = (r, a = {}) => {
+  var b;
+  const t = a.x ?? 0, i = a.y ?? 6, g = a.blur ?? 14, d = a.spread ?? -3, e = a.opacity ?? 0.24, l = Math.max(1, Math.round(a.layers ?? 2)), n = ((b = G(r, 1)[0]) == null ? void 0 : b.color) ?? "#000000", s = `${u(t)} ${u(i)} ${u(g)} ${u(d)} ${M(n, e)}`;
+  if (l === 1) return s;
+  const m = y(t, 0.35) ?? "0px", o = y(i, 0.35) ?? "2px", f = y(g, 0.3) ?? "4px", x = y(d, 0.5) ?? "-2px", v = Math.min(0.18, e * 0.65);
+  return `${`${m} ${o} ${f} ${x} ${M("#000000", v)}`}, ${s}`;
+}, W = (r, a = {}) => {
+  const t = a.x ?? 0, i = a.y ?? 6, g = a.blur ?? 14, d = a.opacity ?? 0.42, e = Math.max(1, Math.round(a.layers ?? 2)), l = q(g, e);
+  return G(r, e).map((n, s) => {
+    const m = _(t, e, s), o = _(i, e, s);
+    return `drop-shadow(${m} ${o} ${l} ${M(n.color, R(d, s))})`;
   }).join(" ");
 };
 export {
-  _ as createGradientMorphBlobs,
-  L as toGradientBoxShadow,
-  P as toGradientDropShadow,
-  A as toGradientMorphCSS,
-  k as toGradientMorphFilter,
-  j as toGradientMorphFilterMarkup
+  C as createGradientMorphBlobs,
+  A as isGradientMorphBlendMode,
+  z as resolveGradientMorphBlendMode,
+  Q as toGradientBoxShadow,
+  W as toGradientDropShadow,
+  V as toGradientMorphCSS,
+  T as toGradientMorphFilter,
+  F as toGradientMorphFilterMarkup,
+  K as toGradientMorphMarkup
 };

package/dist/formatters.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("./css-YuAJQW13.cjs"),h=require("./utils-6iJ6IpZZ.cjs"),n=require("./svg-BVcl24Cf.cjs"),M=(r,a,t={})=>{const c=t.width??r.canvas.width,s=t.height??r.canvas.height,e=c/2,i=s/2,v=Math.hypot(c,s)/2,o=((typeof a.direction=="number"?a.direction:Number.parseFloat(a.direction)||h.DEFAULT_GRADIENT_DIRECTION)-90)*Math.PI/180,S=c/2,f=s/2,u=Math.cos(o)*S,g=Math.sin(o)*f,y=a.type==="radial"?r.createRadialGradient(t.x0??e,t.y0??i,t.r0??0,t.x1??e,t.y1??i,t.r1??v):a.type==="conic"&&typeof r.createConicGradient=="function"?r.createConicGradient(t.startAngle??o,t.x0??e,t.y0??i):r.createLinearGradient(t.x0??e-u,t.y0??i-g,t.x1??e+u,t.y1??i+g),C=a.type==="conic"?h.getConicStops(a.stops):a.stops;for(const d of C)y.addColorStop(d.position/100,h.toCssColor(d.color,d.opacity));return y};exports.createLinearGradient=G.createLinearGradient;exports.toCssGradient=G.toCssGradient;exports.toSvgGradient=n.toSvgGradient;exports.toSvgGradientMarkup=n.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=n.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=n.toSvgSourceAnimationMarkup;exports.toCanvasGradient=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("./css-BVHXLMRl.cjs"),h=require("./utils-D83DMCMa.cjs"),n=require("./svg-dGtLYnIJ.cjs"),M=(r,a,t={})=>{const c=t.width??r.canvas.width,s=t.height??r.canvas.height,e=c/2,i=s/2,v=Math.hypot(c,s)/2,o=((typeof a.direction=="number"?a.direction:Number.parseFloat(a.direction)||h.DEFAULT_GRADIENT_DIRECTION)-90)*Math.PI/180,S=c/2,f=s/2,u=Math.cos(o)*S,g=Math.sin(o)*f,y=a.type==="radial"?r.createRadialGradient(t.x0??e,t.y0??i,t.r0??0,t.x1??e,t.y1??i,t.r1??v):a.type==="conic"&&typeof r.createConicGradient=="function"?r.createConicGradient(t.startAngle??o,t.x0??e,t.y0??i):r.createLinearGradient(t.x0??e-u,t.y0??i-g,t.x1??e+u,t.y1??i+g),C=a.type==="conic"?h.getConicStops(a.stops):a.stops;for(const d of C)y.addColorStop(d.position/100,h.toCssColor(d.color,d.opacity));return y};exports.createLinearGradient=G.createLinearGradient;exports.toCssGradient=G.toCssGradient;exports.toSvgGradient=n.toSvgGradient;exports.toSvgGradientMarkup=n.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=n.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=n.toSvgSourceAnimationMarkup;exports.toCanvasGradient=M;

package/dist/formatters.mjs

@@ -1,6 +1,6 @@
-import { c as I, t as R } from "./css-CaOuUhfh.js";
-import { D as C, g as p, i as v } from "./utils-B_VQDGMy.js";
-import { t as k, a as w, b as E, c as L } from "./svg-CZThYPKf.js";
+import { c as I, t as R } from "./css-DVaTTIqS.js";
+import { D as C, h as p, j as v } from "./utils-BzSNCfat.js";
+import { t as k, a as w, b as E, c as L } from "./svg-hZus3ztj.js";
 const x = (r, a, t = {}) => {
   const i = t.width ?? r.canvas.width, n = t.height ?? r.canvas.height, e = i / 2, c = n / 2, y = Math.hypot(i, n) / 2, s = ((typeof a.direction == "number" ? a.direction : Number.parseFloat(a.direction) || C) - 90) * Math.PI / 180, g = i / 2, G = n / 2, h = Math.cos(s) * g, d = Math.sin(s) * G, f = a.type === "radial" ? r.createRadialGradient(
     t.x0 ?? e,

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core.cjs"),t=require("./utils-6iJ6IpZZ.cjs"),e=require("./presets-UIJJyagu.cjs"),n=require("./css-YuAJQW13.cjs"),d=require("./formatters.cjs"),a=require("./svg-BVcl24Cf.cjs"),r=require("./effects.cjs"),s=require("./animation.cjs"),o=require("./tokens-DMGI7_df.cjs");exports.createGradient=i.createGradient;exports.createGradientFromColor=i.createGradientFromColor;exports.colorToHex=t.colorToHex;exports.parseColor=t.parseColor;exports.rgbToChannels=t.rgbToChannels;exports.rgbToHex=t.rgbToHex;exports.COLOR_SHADES=e.COLOR_SHADES;exports.SHADE_TONES=e.SHADE_TONES;exports.createGradientModel=e.createGradientModel;exports.createGradientModelFromColor=e.createGradientModelFromColor;exports.createPalette=e.createPalette;exports.createRecipeStops=e.createRecipeStops;exports.defineGradientPreset=e.defineGradientPreset;exports.defineGradientPresetRegistry=e.defineGradientPresetRegistry;exports.getGradientPreset=e.getGradientPreset;exports.gradientPresets=e.gradientPresets;exports.gradientRecipes=e.gradientRecipes;exports.createLinearGradient=n.createLinearGradient;exports.toCssGradient=n.toCssGradient;exports.toCanvasGradient=d.toCanvasGradient;exports.toSvgGradient=a.toSvgGradient;exports.toSvgGradientMarkup=a.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=a.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=a.toSvgSourceAnimationMarkup;exports.createGradientMorphBlobs=r.createGradientMorphBlobs;exports.toGradientBoxShadow=r.toGradientBoxShadow;exports.toGradientDropShadow=r.toGradientDropShadow;exports.toGradientMorphCSS=r.toGradientMorphCSS;exports.toGradientMorphFilter=r.toGradientMorphFilter;exports.toGradientMorphFilterMarkup=r.toGradientMorphFilterMarkup;exports.toGradientAnimationCSS=s.toGradientAnimationCSS;exports.createGradientMaterial=o.createGradientMaterial;exports.createGradientPreset=o.createGradientPreset;exports.createGradientTokens=o.createGradientTokens;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./core.cjs"),o=require("./utils-D83DMCMa.cjs"),r=require("./designTokens-C1WdzS3v.cjs"),e=require("./presets-BBLdqUE4.cjs"),d=require("./css-BVHXLMRl.cjs"),c=require("./formatters.cjs"),i=require("./svg-dGtLYnIJ.cjs"),t=require("./effects.cjs"),G=require("./animation.cjs"),a=require("./material.cjs"),s=require("./types-BMLEvdee.cjs");exports.createGradient=n.createGradient;exports.createGradientFromColor=n.createGradientFromColor;exports.colorToHex=o.colorToHex;exports.getContrastingColor=o.getContrastingColor;exports.parseColor=o.parseColor;exports.rgbToChannels=o.rgbToChannels;exports.rgbToHex=o.rgbToHex;exports.COLOR_SEEDS=r.COLOR_SEEDS;exports.DEFAULT_SEED=r.DEFAULT_SEED;exports.createColorSystem=r.createColorSystem;exports.createDesignTokens=r.createDesignTokens;exports.createSemanticTokens=r.createSemanticTokens;exports.normalizeDesignTokenSeed=r.normalizeDesignTokenSeed;exports.COLOR_SHADES=e.COLOR_SHADES;exports.ON_SHADE_TONES=e.ON_SHADE_TONES;exports.SHADE_TONES=e.SHADE_TONES;exports.createGradientModel=e.createGradientModel;exports.createGradientModelFromColor=e.createGradientModelFromColor;exports.createOnPalette=e.createOnPalette;exports.createPalette=e.createPalette;exports.createPalettePair=e.createPalettePair;exports.createRecipeStops=e.createRecipeStops;exports.defineGradientPreset=e.defineGradientPreset;exports.defineGradientPresetRegistry=e.defineGradientPresetRegistry;exports.getGradientPreset=e.getGradientPreset;exports.gradientPresets=e.gradientPresets;exports.gradientRecipes=e.gradientRecipes;exports.createLinearGradient=d.createLinearGradient;exports.toCssGradient=d.toCssGradient;exports.toCanvasGradient=c.toCanvasGradient;exports.toSvgGradient=i.toSvgGradient;exports.toSvgGradientMarkup=i.toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=i.toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=i.toSvgSourceAnimationMarkup;exports.createGradientMorphBlobs=t.createGradientMorphBlobs;exports.isGradientMorphBlendMode=t.isGradientMorphBlendMode;exports.resolveGradientMorphBlendMode=t.resolveGradientMorphBlendMode;exports.toGradientBoxShadow=t.toGradientBoxShadow;exports.toGradientDropShadow=t.toGradientDropShadow;exports.toGradientMorphCSS=t.toGradientMorphCSS;exports.toGradientMorphFilter=t.toGradientMorphFilter;exports.toGradientMorphFilterMarkup=t.toGradientMorphFilterMarkup;exports.toGradientMorphMarkup=t.toGradientMorphMarkup;exports.toGradientAnimationCSS=G.toGradientAnimationCSS;exports.clearGradientMaterialCache=a.clearGradientMaterialCache;exports.createGradientMaterial=a.createGradientMaterial;exports.createGradientPreset=a.createGradientPreset;exports.createGradientTokens=a.createGradientTokens;exports.getGradientMaterialCacheStats=a.getGradientMaterialCacheStats;exports.setGradientMaterialCacheLimit=a.setGradientMaterialCacheLimit;exports.DEFAULT_GRADIENT_MORPH_BLEND_MODE=s.DEFAULT_GRADIENT_MORPH_BLEND_MODE;exports.GRADIENT_MORPH_BLEND_MODES=s.GRADIENT_MORPH_BLEND_MODES;

package/dist/index.mjs

@@ -1,45 +1,65 @@
-import { createGradient as a, createGradientFromColor as t } from "./core.mjs";
-import { c as i, p as s, r as n, a as d } from "./utils-B_VQDGMy.js";
-import { C as G, S as c, c as S, a as m, b as f, d as l, e as x, f as g, g as M, h as C, i as h } from "./presets-55krt4L_.js";
-import { c as b, t as k } from "./css-CaOuUhfh.js";
-import { toCanvasGradient as v } from "./formatters.mjs";
-import { t as T, a as F, b as H, c as R } from "./svg-CZThYPKf.js";
-import { createGradientMorphBlobs as E, toGradientBoxShadow as O, toGradientDropShadow as w, toGradientMorphCSS as B, toGradientMorphFilter as L, toGradientMorphFilterMarkup as _ } from "./effects.mjs";
-import { toGradientAnimationCSS as N } from "./animation.mjs";
-import { c as q, a as z, b as I } from "./tokens-OfSofVKl.js";
+import { createGradient as r, createGradientFromColor as t } from "./core.mjs";
+import { c as s, g as i, p as n, r as d, a as G } from "./utils-BzSNCfat.js";
+import { C as p, D as S, c as l, a as M, b as m, n as C } from "./designTokens-BnzZfRES.js";
+import { C as g, O as E, S as h, c as f, a as x, b as O, d as T, e as _, f as P, g as k, h as A, i as R, j as L, k as H } from "./presets-DYXLx_nN.js";
+import { c as b, t as u } from "./css-DVaTTIqS.js";
+import { toCanvasGradient as B } from "./formatters.mjs";
+import { t as w, a as y, b as I, c as U } from "./svg-hZus3ztj.js";
+import { createGradientMorphBlobs as z, isGradientMorphBlendMode as q, resolveGradientMorphBlendMode as J, toGradientBoxShadow as K, toGradientDropShadow as Q, toGradientMorphCSS as V, toGradientMorphFilter as W, toGradientMorphFilterMarkup as X, toGradientMorphMarkup as Y } from "./effects.mjs";
+import { toGradientAnimationCSS as $ } from "./animation.mjs";
+import { clearGradientMaterialCache as ae, createGradientMaterial as re, createGradientPreset as te, createGradientTokens as oe, getGradientMaterialCacheStats as se, setGradientMaterialCacheLimit as ie } from "./material.mjs";
+import { D as de, G as Ge } from "./types-BFr1fN-7.js";
 export {
-  G as COLOR_SHADES,
-  c as SHADE_TONES,
-  i as colorToHex,
-  a as createGradient,
+  p as COLOR_SEEDS,
+  g as COLOR_SHADES,
+  de as DEFAULT_GRADIENT_MORPH_BLEND_MODE,
+  S as DEFAULT_SEED,
+  Ge as GRADIENT_MORPH_BLEND_MODES,
+  E as ON_SHADE_TONES,
+  h as SHADE_TONES,
+  ae as clearGradientMaterialCache,
+  s as colorToHex,
+  l as createColorSystem,
+  M as createDesignTokens,
+  r as createGradient,
   t as createGradientFromColor,
-  q as createGradientMaterial,
-  S as createGradientModel,
-  m as createGradientModelFromColor,
-  E as createGradientMorphBlobs,
-  z as createGradientPreset,
-  I as createGradientTokens,
+  re as createGradientMaterial,
+  f as createGradientModel,
+  x as createGradientModelFromColor,
+  z as createGradientMorphBlobs,
+  te as createGradientPreset,
+  oe as createGradientTokens,
   b as createLinearGradient,
-  f as createPalette,
-  l as createRecipeStops,
-  x as defineGradientPreset,
-  g as defineGradientPresetRegistry,
-  M as getGradientPreset,
-  C as gradientPresets,
-  h as gradientRecipes,
-  s as parseColor,
-  n as rgbToChannels,
-  d as rgbToHex,
-  v as toCanvasGradient,
-  k as toCssGradient,
-  N as toGradientAnimationCSS,
-  O as toGradientBoxShadow,
-  w as toGradientDropShadow,
-  B as toGradientMorphCSS,
-  L as toGradientMorphFilter,
-  _ as toGradientMorphFilterMarkup,
-  T as toSvgGradient,
-  F as toSvgGradientMarkup,
-  H as toSvgPathAnimationMarkup,
-  R as toSvgSourceAnimationMarkup
+  O as createOnPalette,
+  T as createPalette,
+  _ as createPalettePair,
+  P as createRecipeStops,
+  m as createSemanticTokens,
+  k as defineGradientPreset,
+  A as defineGradientPresetRegistry,
+  i as getContrastingColor,
+  se as getGradientMaterialCacheStats,
+  R as getGradientPreset,
+  L as gradientPresets,
+  H as gradientRecipes,
+  q as isGradientMorphBlendMode,
+  C as normalizeDesignTokenSeed,
+  n as parseColor,
+  J as resolveGradientMorphBlendMode,
+  d as rgbToChannels,
+  G as rgbToHex,
+  ie as setGradientMaterialCacheLimit,
+  B as toCanvasGradient,
+  u as toCssGradient,
+  $ as toGradientAnimationCSS,
+  K as toGradientBoxShadow,
+  Q as toGradientDropShadow,
+  V as toGradientMorphCSS,
+  W as toGradientMorphFilter,
+  X as toGradientMorphFilterMarkup,
+  Y as toGradientMorphMarkup,
+  w as toSvgGradient,
+  y as toSvgGradientMarkup,
+  I as toSvgPathAnimationMarkup,
+  U as toSvgSourceAnimationMarkup
 };

package/dist/material.cjs

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-DMGI7_df.cjs");exports.createGradientMaterial=e.createGradientMaterial;exports.createGradientPreset=e.createGradientPreset;exports.createGradientTokens=e.createGradientTokens;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./presets-BBLdqUE4.cjs"),S=require("./animation.cjs"),u=require("./effects.cjs"),G=require("./css-BVHXLMRl.cjs"),x=require("./svg-dGtLYnIJ.cjs"),k=["glare","soft","mesh"],T=128;let y=T;const m=new Map,V=a=>a.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),p=a=>V(a),j=(a,e,t)=>`${a}-${e}`,$=a=>Object.entries(a).map(([e,t])=>`${e}: ${t};`).join(`
+`),A=a=>a.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),E=a=>Object.entries(a).map(([e,t])=>`${A(e)}: ${t};`).join(`
+`),b=a=>a===null||typeof a!="object"?JSON.stringify(a):Array.isArray(a)?`[${a.map(b).join(",")}]`:`{${Object.entries(a).filter(([,e])=>e!==void 0).sort(([e],[t])=>e.localeCompare(t)).map(([e,t])=>`${JSON.stringify(e)}:${b(t)}`).join(",")}}`,O=a=>{let e=5381;for(let t=0;t<a.length;t+=1)e=e*33^a.charCodeAt(t);return(e>>>0).toString(36)},P=(a,e)=>b({options:e,seed:a}),L=a=>{const e=m.get(a);if(e)return m.delete(a),m.set(a,e),e},B=(a,e)=>{if(y<=0)return e;for(m.set(a,e);m.size>y;){const t=m.keys().next().value;if(t===void 0)break;m.delete(t)}return e},I=()=>{m.clear()},K=a=>{for(y=Math.max(0,Math.floor(a));m.size>y;){const e=m.keys().next().value;if(e===void 0)break;m.delete(e)}},q=()=>({limit:y,size:m.size}),z=(a,e,t,r)=>{const i=$(e),c=E(t),s=[i,c].filter(Boolean).join(`
+`);return[`.${a} {
+${s}
+}`,r].filter(Boolean).join(`
+
+`)},N=(a,e)=>a in e,v=(a,e)=>N(a,e)?g.getGradientPreset(a,e):a==="soft"?{label:"Soft",description:"Quiet monochrome radial gradient.",gradient:{recipe:"monochrome",type:"radial",position:"center",shape:"ellipse"},shadow:{layers:2,opacity:.18,blur:18,y:7,spread:-4},dropShadow:{layers:2,opacity:.26,blur:16,y:6},animation:{preset:"pulse",duration:7200,easing:"ease-in-out"}}:a==="mesh"?null:{label:a,gradient:{recipe:a,type:"linear",direction:a==="glare"?135:145}},_=a=>{const e=[`radial-gradient(circle at 16% 18%, ${g.shiftHue(a,-42,72,1.05)} 0%, transparent 34%)`,`radial-gradient(circle at 86% 20%, ${g.getComplementaryColor(a)} 0%, transparent 32%)`,`radial-gradient(circle at 50% 84%, ${g.shiftHue(a,56,64,1.08)} 0%, transparent 38%)`,`linear-gradient(135deg, ${g.changeTone(a,94)}, ${g.changeTone(a,28)})`];return{layers:e,value:e.join(", ")}},D=(a,e,t,r,i)=>{if(e==="mesh"){const n=_(a);return{cssVar:t,layers:n.layers,value:n.value}}const c=v(e,i),s=g.createPalette(a),l=g.createGradientModel(s,{...c==null?void 0:c.gradient,...r});return{cssVar:t,model:l,stops:l.stops,svg:x.toSvgGradient(l,{id:t.replace(/^--/,"")}),value:G.toCssGradient(l)}},F=(a,e,t,r)=>{var l,n;if(!a)return{};const i=`${e.replace(/^--/,"")}-morph`,c=u.resolveGradientMorphBlendMode((l=r==null?void 0:r.morph)==null?void 0:l.blendMode),s={...r==null?void 0:r.morph,id:((n=r==null?void 0:r.morph)==null?void 0:n.id)??i};return{boxShadow:{cssVar:`${e}-shadow`,value:u.toGradientBoxShadow(a,(r==null?void 0:r.shadow)??(t==null?void 0:t.shadow))},dropShadow:{cssVar:`${e}-drop-shadow`,value:u.toGradientDropShadow(a,(r==null?void 0:r.dropShadow)??(t==null?void 0:t.dropShadow))},morph:{blendMode:c,blendModeCssVar:`${e}-morph-blend-mode`,cssVar:`${e}-morph`,svg:u.toGradientMorphFilterMarkup(s),value:u.toGradientMorphFilter(s)}}},H=(a,e,t,r)=>{var c;const i={...t==null?void 0:t.animation,...r,name:`g-gradient-${a}-${(r==null?void 0:r.preset)??((c=t==null?void 0:t.animation)==null?void 0:c.preset)??"shift"}`,selector:`.g-gradient-${a}`};return{css:S.toGradientAnimationCSS(i),cssVar:`${e}-animation`,keyframes:S.toGradientAnimationKeyframes(i),name:i.name,value:S.toGradientAnimationValue(i)}},M=(a,e="glare",t={})=>{const r=t.registry??g.gradientPresets,i=p(e),c=j(t.prefix??"--g-gradient",i),s=v(e,r),n=g.createPalette(a)[500],d=D(n,e,c,t,r),f={[c]:d.value},o=t.effects?F(d.model,c,s,{dropShadow:t.dropShadow,morph:t.morph,shadow:t.shadow}):void 0,h=t.animations?H(i,c,s,t.animation):void 0;return o!=null&&o.boxShadow&&(f[o.boxShadow.cssVar]=o.boxShadow.value),o!=null&&o.dropShadow&&(f[o.dropShadow.cssVar]=o.dropShadow.value),o!=null&&o.morph&&(f[o.morph.cssVar]=o.morph.value,f[o.morph.blendModeCssVar]=o.morph.blendMode),h&&(f[h.cssVar]=h.value),{animation:h,cssText:$(f),cssVars:f,description:s==null?void 0:s.description,effects:o,gradient:d,keyframes:(h==null?void 0:h.keyframes)??"",label:(s==null?void 0:s.label)??i,name:i}},J=(a,e={})=>{const t=e.recipes??k,r={},i={},c={},s={},l=[];for(const n of t){const d=M(a,n,{animations:e.animations,effects:e.effects,morph:e.morph,prefix:e.prefix,registry:e.registry});r[d.name]=d.gradient,Object.assign(s,d.cssVars),d.effects&&(i[d.name]=d.effects),d.animation&&(c[d.name]=d.animation,l.push(d.animation.keyframes))}return{animations:c,cssText:$(s),cssVars:s,effects:i,gradients:r,keyframes:l.join(`
+`)}},R=(a,e={})=>{var w,C;const t=P(a,e),r=L(t);if(r)return r;const{className:i,id:c,recipe:s="glare",...l}=e,n=M(a,s,l),d=n.gradient.model&&e.effects&&e.morph?u.createGradientMorphBlobs(n.gradient.model,e.morph):void 0,f=c??`g-gradient-${n.name}-${O(b({options:e,seed:a}))}`,o=i??f,h={backgroundImage:`var(${n.gradient.cssVar})`};return(w=n.effects)!=null&&w.boxShadow&&(h.boxShadow=`var(${n.effects.boxShadow.cssVar})`),(C=n.effects)!=null&&C.dropShadow&&(h.filter=`var(${n.effects.dropShadow.cssVar})`),n.animation&&(h.animation=`var(${n.animation.cssVar})`),B(t,{animation:n.animation,className:o,cssText:z(o,n.cssVars,h,n.keyframes),cssVars:n.cssVars,effects:n.effects,gradient:n.gradient,id:f,keyframes:n.keyframes,morphBlobs:d,preset:n,style:h})};exports.clearGradientMaterialCache=I;exports.createGradientMaterial=R;exports.createGradientPreset=M;exports.createGradientTokens=J;exports.getGradientMaterialCacheStats=q;exports.setGradientMaterialCacheLimit=K;