@gradient-ui/gradient-engine 0.5.0

package/dist/effects.mjs

@@ -0,0 +1,321 @@
+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 = {
+  soft: {
+    blobCount: 5,
+    blur: 40,
+    contrast: 18,
+    duration: 12e3,
+    opacity: 0.76,
+    scale: 1.05
+  },
+  liquid: {
+    blobCount: 6,
+    blur: 46,
+    contrast: 22,
+    duration: 9200,
+    opacity: 0.82,
+    scale: 1.18
+  },
+  ripple: {
+    blobCount: 7,
+    blur: 34,
+    contrast: 20,
+    duration: 7200,
+    opacity: 0.78,
+    scale: 0.94
+  }
+}, y = (r = {}) => {
+  const t = X[r.preset ?? "soft"];
+  return {
+    blobCount: Math.max(
+      2,
+      Math.round(r.blobCount ?? t.blobCount)
+    ),
+    blur: $(r.blur ?? t.blur, 0, 80),
+    contrast: $(r.contrast ?? t.contrast, 0, 36),
+    duration: r.duration ?? t.duration,
+    id: r.id ?? "g-gradient-morph",
+    opacity: $(r.opacity ?? t.opacity),
+    scale: $(r.scale ?? t.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) => {
+  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 = [
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: 20,
+    dx2: 8,
+    dy: -8,
+    dy2: 16,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.16,
+    scaleTo: 1.04,
+    x: 6,
+    y: 58
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: -18,
+    dx2: 10,
+    dy: 18,
+    dy2: -10,
+    originX: "24%",
+    originY: "68%",
+    scaleMid: 0.96,
+    scaleTo: 1.12,
+    x: 44,
+    y: 20
+  },
+  {
+    animationName: "g-gradient-morph-float",
+    dx: -16,
+    dx2: -8,
+    dy: -12,
+    dy2: 18,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.2,
+    scaleTo: 1.08,
+    x: 74,
+    y: 58
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: 12,
+    dx2: -20,
+    dy: 14,
+    dy2: 6,
+    originX: "70%",
+    originY: "30%",
+    scaleMid: 1.04,
+    scaleTo: 1.18,
+    x: 88,
+    y: 25
+  },
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: 24,
+    dx2: -12,
+    dy: -16,
+    dy2: -8,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.12,
+    scaleTo: 0.98,
+    x: 30,
+    y: 78
+  },
+  {
+    animationName: "g-gradient-morph-float",
+    dx: -22,
+    dx2: 14,
+    dy: 10,
+    dy2: -18,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 0.94,
+    scaleTo: 1.1,
+    x: 104,
+    y: 82
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: 14,
+    dx2: -16,
+    dy: -22,
+    dy2: 10,
+    originX: "35%",
+    originY: "35%",
+    scaleMid: 1.18,
+    scaleTo: 1.02,
+    x: 55,
+    y: 64
+  },
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: -18,
+    dx2: 18,
+    dy: -14,
+    dy2: 14,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.08,
+    scaleTo: 0.96,
+    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;
+    return {
+      animationName: e.animationName,
+      blur: l(x),
+      color: Y(r, n),
+      delay: Math.round(
+        n * -0.19 * a - d(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)),
+      duration: Math.round(
+        a * (1 + n % 3 * 0.11) * h
+      ),
+      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
+    };
+  });
+}, 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" />
+    <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;">
+  <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}
+  </filter>
+</svg>`;
+}, A = (r, t = {}) => {
+  const o = t.selector ?? ".g-gradient-morph", { opacity: i } = y(t), c = _(r, t);
+  return `${o} {
+	position: relative;
+	overflow: hidden;
+}
+
+${o}__blobs {
+	position: absolute;
+	inset: -18%;
+	opacity: ${i};
+	filter: ${k(t)};
+	mix-blend-mode: hard-light;
+}
+
+${o}__blob {
+	position: absolute;
+	transform: translate(-50%, -50%);
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	opacity: var(--g-gradient-morph-opacity);
+	filter: blur(var(--g-gradient-morph-blur));
+	border-radius: 999px;
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	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}%;
+	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)};
+}`
+  ).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));
+	}
+}`;
+}, C = (r, t) => {
+  const o = r.stops.filter(
+    (a) => a.position >= 25 && a.position <= 85
+  ), i = r.stops.filter(
+    (a) => !o.includes(a)
+  );
+  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))})`;
+  }).join(" ");
+};
+export {
+  _ as createGradientMorphBlobs,
+  L as toGradientBoxShadow,
+  P as toGradientDropShadow,
+  A as toGradientMorphCSS,
+  k as toGradientMorphFilter,
+  j as toGradientMorphFilterMarkup
+};

package/dist/formatters.cjs

@@ -0,0 +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;

package/dist/formatters.mjs

@@ -0,0 +1,37 @@
+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";
+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,
+    t.y0 ?? c,
+    t.r0 ?? 0,
+    t.x1 ?? e,
+    t.y1 ?? c,
+    t.r1 ?? y
+  ) : a.type === "conic" && typeof r.createConicGradient == "function" ? r.createConicGradient(
+    t.startAngle ?? s,
+    t.x0 ?? e,
+    t.y0 ?? c
+  ) : r.createLinearGradient(
+    t.x0 ?? e - h,
+    t.y0 ?? c - d,
+    t.x1 ?? e + h,
+    t.y1 ?? c + d
+  ), u = a.type === "conic" ? p(a.stops) : a.stops;
+  for (const o of u)
+    f.addColorStop(
+      o.position / 100,
+      v(o.color, o.opacity)
+    );
+  return f;
+};
+export {
+  I as createLinearGradient,
+  x as toCanvasGradient,
+  R as toCssGradient,
+  k as toSvgGradient,
+  w as toSvgGradientMarkup,
+  E as toSvgPathAnimationMarkup,
+  L as toSvgSourceAnimationMarkup
+};

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.mjs

@@ -0,0 +1,45 @@
+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";
+export {
+  G as COLOR_SHADES,
+  c as SHADE_TONES,
+  i as colorToHex,
+  a as createGradient,
+  t as createGradientFromColor,
+  q as createGradientMaterial,
+  S as createGradientModel,
+  m as createGradientModelFromColor,
+  E as createGradientMorphBlobs,
+  z as createGradientPreset,
+  I 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
+};

package/dist/material.cjs

@@ -0,0 +1 @@
+"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;

package/dist/material.mjs

@@ -0,0 +1,6 @@
+import { c as r, a as t, b as s } from "./tokens-OfSofVKl.js";
+export {
+  r as createGradientMaterial,
+  t as createGradientPreset,
+  s as createGradientTokens
+};