@gradient-ui/core 0.4.0 → 0.5.0-rc.0

package/dist/material-okvXHenb.js

@@ -0,0 +1,1162 @@
+import { j as _, t as vt, i as A, H as k } from "./camelToKebabCase-6qY6WHvl.js";
+const D = (t, e = 0, r = 1) => Math.min(r, Math.max(e, t)), Mt = (t) => {
+  const e = t.slice(1), r = e.length === 3 || e.length === 4 ? e.slice(0, 3).split("").map((a) => a.repeat(2)).join("") : e.slice(0, 6);
+  return r.length !== 6 || !/^[\da-f]{6}$/i.test(r) ? null : {
+    r: parseInt(r.slice(0, 2), 16),
+    g: parseInt(r.slice(2, 4), 16),
+    b: parseInt(r.slice(4, 6), 16)
+  };
+}, kt = (t) => {
+  const e = t.match(
+    /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i
+  );
+  return e ? {
+    r: D(Number(e[1]), 0, 255),
+    g: D(Number(e[2]), 0, 255),
+    b: D(Number(e[3]), 0, 255)
+  } : null;
+}, L = (t) => {
+  if (typeof t == "number") {
+    const r = t & 16777215;
+    return {
+      r: r >> 16 & 255,
+      g: r >> 8 & 255,
+      b: r & 255
+    };
+  }
+  const e = t.trim();
+  return e.startsWith("#") ? Mt(e) : e.toLowerCase().startsWith("rgb") ? kt(e) : null;
+}, Ct = ({ r: t, g: e, b: r }) => `#${[t, e, r].map((a) => Math.round(a).toString(16).padStart(2, "0")).join("")}`, Gt = ({ r: t, g: e, b: r }) => `${Math.round(t)}, ${Math.round(e)}, ${Math.round(r)}`, Tt = (t, e) => {
+  const r = L(t) ?? L(e);
+  if (!r)
+    throw new Error(`Invalid fallback color: ${e}`);
+  return Ct(r);
+}, P = 135, F = "center", nt = "farthest-corner", ot = (t = P) => typeof t == "number" ? `${t}deg` : t, v = (t) => typeof t == "number" ? `${t}px` : t, B = (t) => typeof t == "number" ? `${t}ms` : t, w = (t, e = 0, r = 1) => Math.min(r, Math.max(e, t)), C = (t, e) => {
+  if (e === void 0) return t;
+  const r = L(t);
+  return r ? `rgb(${Gt(r).replace(/,/g, "")} / ${w(e)})` : t;
+}, R = ({ color: t, opacity: e, position: r }) => `${C(t, e)} ${r}%`, c = (t, e, r) => ({
+  color: t,
+  position: e
+}), it = (t) => {
+  if (t.length <= 1) return t;
+  const e = t.map((a) => ({
+    ...a,
+    position: a.position / 2
+  })), r = [...t].reverse().map((a) => ({
+    ...a,
+    position: 100 - a.position / 2
+  }));
+  return [...e, ...r];
+}, Nt = (t) => `@keyframes ${t} {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
+}`, Ot = (t) => `@keyframes ${t} {
+	0%, 100% {
+		filter: saturate(1) brightness(1);
+	}
+
+	50% {
+		filter: saturate(1.22) brightness(1.08);
+	}
+}`, jt = (t) => `@keyframes ${t} {
+	0%, 100% {
+		filter: hue-rotate(0deg) saturate(1);
+	}
+
+	50% {
+		filter: hue-rotate(28deg) saturate(1.18);
+	}
+}`, _t = (t) => `@keyframes ${t} {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}`, E = (t = {}) => {
+  const e = t.name ?? "g-gradient-shift", r = B(t.duration ?? 6e3), a = t.easing ?? "ease-in-out", o = t.selector ?? ".g-gradient-animated", n = t.preset ?? "shift";
+  return {
+    duration: r,
+    easing: a,
+    name: e,
+    preset: n,
+    selector: o
+  };
+}, X = (t = {}) => {
+  const { name: e, preset: r } = E(t);
+  return r === "pulse" ? Ot(e) : r === "hue-rotate" ? jt(e) : r === "rotate" ? _t(e) : Nt(e);
+}, st = (t = {}) => {
+  const { duration: e, easing: r, name: a, preset: o } = E(t);
+  return `${a} ${e} ${o === "rotate" ? "linear" : r} infinite`;
+}, ct = (t = {}) => {
+  const { duration: e, easing: r, name: a, preset: o, selector: n } = E(t);
+  return o === "rotate" ? `${n} {
+	position: relative;
+	overflow: hidden;
+}
+
+${n}::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 200%;
+	height: 200%;
+	min-width: 150vmax;
+	min-height: 150vmax;
+	background: inherit;
+	animation: ${a} ${e} linear infinite;
+	transform-origin: center;
+}` : o === "pulse" || o === "hue-rotate" ? `${n} {
+	animation: ${a} ${e} ${r} infinite;
+}` : `${n} {
+	animation: ${a} ${e} ${r} infinite;
+	background-size: 220% 220%;
+}`;
+}, dt = (t = {}) => {
+  const e = X(t), r = ct(t);
+  return `${e}
+${r}`;
+}, _e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGradientAnimationOptions: E,
+  toGradientAnimationCSS: dt,
+  toGradientAnimationKeyframes: X,
+  toGradientAnimationStyles: ct,
+  toGradientAnimationValue: st
+}, Symbol.toStringTag, { value: "Module" })), At = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900
+], Pt = {
+  50: 90,
+  100: 80,
+  200: 70,
+  300: 60,
+  400: 50,
+  500: 40,
+  600: 35,
+  700: 30,
+  800: 20,
+  900: 10
+}, Bt = (t) => {
+  const e = Tt(t, "#000000");
+  return vt(A(e)).palettes.primary;
+}, I = (t) => {
+  const e = Bt(t);
+  return Object.fromEntries(
+    At.map((r) => [
+      r,
+      _(e.tone(Pt[r]))
+    ])
+  );
+}, lt = (t, e = P) => `linear-gradient(${ot(e)}, ${t.join(", ")})`, V = (t) => {
+  const e = t.stops.map(R).join(", ");
+  if (t.type === "radial") {
+    const r = t.shape ?? "ellipse", a = t.size ?? nt, o = t.position ?? F;
+    return `radial-gradient(${r} ${a} at ${o}, ${e})`;
+  }
+  if (t.type === "conic") {
+    const r = ot(t.direction), a = t.position ?? F, o = it(t.stops).map(R).join(", ");
+    return `conic-gradient(from ${r} at ${a}, ${o})`;
+  }
+  return lt(t.stops.map(R), t.direction);
+}, f = (t, e) => {
+  const r = k.fromInt(A(t));
+  return _(k.from(r.hue, r.chroma, e).toInt());
+}, u = (t, e, r, a = 1) => {
+  const o = k.fromInt(A(t)), n = (o.hue + e + 360) % 360, i = Math.min(o.chroma * a, 100);
+  return _(k.from(n, i, r).toInt());
+}, G = (t) => {
+  const e = k.fromInt(A(t)), r = (e.hue + 110) % 360, a = Math.min(e.chroma * 1.2, 100), o = e.tone < 50 ? 65 : Math.min(e.tone + 10, 75);
+  return _(k.from(r, a, o).toInt());
+}, Et = (t) => {
+  const e = G(t);
+  return [
+    c(f(e, 95), 0),
+    c(e, 25),
+    c(t, 50),
+    c(f(t, 80), 75),
+    c(f(t, 20), 100)
+  ];
+}, It = (t) => [
+  c(f(t, 94), 0),
+  c(f(t, 72), 28),
+  c(t, 55),
+  c(f(t, 24), 100)
+], Vt = (t) => [
+  c(f(G(t), 88), 0),
+  c(t, 50),
+  c(f(G(t), 32), 100)
+], zt = (t) => [
+  c(u(t, 148, 82, 0.95), 0),
+  c(u(t, -148, 70, 1.05), 28),
+  c(t, 56),
+  c(u(t, 150, 34, 1.08), 100)
+], Dt = (t) => [
+  c(u(t, -34, 72, 0.95), 0),
+  c(t, 50),
+  c(u(t, 34, 34, 1.05), 100)
+], Rt = (t) => [
+  c(u(t, -120, 78, 0.9), 0),
+  c(t, 50),
+  c(u(t, 120, 36, 1.05), 100)
+], Lt = (t) => [
+  c(u(t, -90, 78, 0.92), 0),
+  c(t, 32),
+  c(u(t, 90, 62, 1), 58),
+  c(u(t, 180, 34, 1.08), 100)
+], Ft = (t) => [
+  c(u(t, -28, 82, 0.96), 0),
+  c(t, 27),
+  c(u(t, 152, 66, 1.02), 62),
+  c(u(t, 180, 34, 1.08), 100)
+], Ht = (t) => [
+  c(u(t, -90, 78, 0.94), 0),
+  c(t, 30),
+  c(u(t, 90, 62, 1), 62),
+  c(u(t, 180, 36, 1.08), 100)
+], Xt = (t, e) => {
+  const r = (e == null ? void 0 : e[0]) ?? f(t, 84), a = (e == null ? void 0 : e[1]) ?? G(t);
+  return [
+    c(r, 0),
+    c(t, 48),
+    c(a, 100)
+  ];
+}, gt = {
+  glare: Et,
+  monochrome: It,
+  complementary: Vt,
+  "split-complementary": zt,
+  analogous: Dt,
+  triadic: Rt,
+  tetradic: Lt,
+  rectangle: Ft,
+  square: Ht,
+  duotone: Xt
+}, ht = (t, e, r) => gt[e](t, r), z = (t, e = {}) => {
+  const r = e.shade ?? 500, a = e.recipe ?? "glare";
+  return {
+    type: e.type ?? "linear",
+    stops: ht(t[r], a, e.colors),
+    direction: e.direction ?? P,
+    shape: e.shape ?? "ellipse",
+    position: e.position ?? F,
+    size: e.size ?? nt
+  };
+}, Yt = (t, e = {}) => z(I(t), e), $ = (t) => t, mt = (t) => t, j = mt({
+  materialBorder: $({
+    label: "Material border",
+    description: "Default Gradient UI border material.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 12,
+      y: 4,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.32,
+      blur: 12,
+      y: 5
+    },
+    animation: {
+      preset: "shift",
+      duration: 6400,
+      easing: "ease-in-out"
+    }
+  }),
+  materialAction: $({
+    label: "Material action",
+    description: "Compact action material for buttons, chips and controls.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.2,
+      blur: 10,
+      y: 3,
+      spread: -2
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.28,
+      blur: 10,
+      y: 4
+    },
+    animation: {
+      preset: "shift",
+      duration: 6800,
+      easing: "ease-in-out"
+    }
+  }),
+  materialSurface: $({
+    label: "Material surface",
+    description: "Soft surface material for calm gradient backgrounds.",
+    gradient: {
+      recipe: "monochrome",
+      type: "linear",
+      direction: 145
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.18,
+      blur: 14,
+      y: 5,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 14,
+      y: 5
+    },
+    animation: {
+      preset: "pulse",
+      duration: 7600,
+      easing: "ease-in-out"
+    }
+  }),
+  brandGlare: $({
+    label: "Brand glare",
+    description: "Classic Gradient UI glare with a vivid complementary highlight.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.24,
+      blur: 16,
+      y: 6,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.38,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "shift",
+      duration: 6e3,
+      easing: "ease-in-out"
+    }
+  }),
+  softMono: $({
+    label: "Soft mono",
+    description: "Quiet monochrome ramp for subtle surfaces.",
+    gradient: {
+      recipe: "monochrome",
+      type: "linear",
+      direction: 145
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.18,
+      blur: 18,
+      y: 7,
+      spread: -4
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.26,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "pulse",
+      duration: 7200,
+      easing: "ease-in-out"
+    }
+  }),
+  neonDuo: $({
+    label: "Neon duo",
+    description: "Punchy duotone setup with stronger glow defaults.",
+    gradient: {
+      recipe: "duotone",
+      type: "linear",
+      direction: 120
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.32,
+      blur: 18,
+      y: 7,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.52,
+      blur: 18,
+      y: 7
+    },
+    animation: {
+      preset: "shift",
+      duration: 5200,
+      easing: "ease-in-out"
+    }
+  }),
+  orbitalConic: $({
+    label: "Orbital conic",
+    description: "Smooth mirrored conic gradient for badges and marks.",
+    gradient: {
+      recipe: "triadic",
+      type: "conic",
+      direction: 35,
+      position: "center"
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.24,
+      blur: 16,
+      y: 6,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.36,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "rotate",
+      duration: 9e3
+    }
+  }),
+  auroraRadial: $({
+    label: "Aurora radial",
+    description: "Radial analogous gradient with slow hue motion.",
+    gradient: {
+      recipe: "analogous",
+      type: "radial",
+      direction: 0,
+      position: "top left",
+      shape: "circle"
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 18,
+      y: 7,
+      spread: -4
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.32,
+      blur: 18,
+      y: 7
+    },
+    animation: {
+      preset: "hue-rotate",
+      duration: 8e3,
+      easing: "ease-in-out"
+    }
+  })
+}), ut = (t, e = j) => e[t] ?? j.brandGlare, pt = (t, e = {}) => V(z(t, e)), Ut = (t, e = {}) => pt(I(t), e), Ae = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createGradient: pt,
+  createGradientFromColor: Ut,
+  createGradientModel: z,
+  createGradientModelFromColor: Yt,
+  createRecipeStops: ht,
+  defineGradientPreset: $,
+  defineGradientPresetRegistry: mt,
+  getGradientPreset: ut,
+  gradientPresets: j,
+  gradientRecipes: gt
+}, Symbol.toStringTag, { value: "Module" })), Wt = "http://www.w3.org/2000/svg", Kt = {
+  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
+  }
+}, T = (t = {}) => {
+  const e = Kt[t.preset ?? "soft"];
+  return {
+    blobCount: Math.max(
+      2,
+      Math.round(t.blobCount ?? e.blobCount)
+    ),
+    blur: w(t.blur ?? e.blur, 0, 80),
+    contrast: w(t.contrast ?? e.contrast, 0, 36),
+    duration: t.duration ?? e.duration,
+    id: t.id ?? "g-gradient-morph",
+    opacity: w(t.opacity ?? e.opacity),
+    scale: w(t.scale ?? e.scale, 0.4, 2)
+  };
+}, qt = (t, e) => {
+  var r, a;
+  return ((r = t.stops[e % t.stops.length]) == null ? void 0 : r.color) ?? ((a = t.stops[0]) == null ? void 0 : a.color) ?? "currentColor";
+}, Jt = (t) => {
+  if (typeof t == "number") return t;
+  const e = Number.parseFloat(t);
+  return Number.isFinite(e) ? e : 9e3;
+}, Zt = (t, e) => {
+  const r = Math.sin((t + 1) * 12.9898 + e * 78.233) * 43758.5453;
+  return r - Math.floor(r);
+}, y = (t, e, r, a) => r + Zt(t, e) * (a - r), S = (t) => Number(t.toFixed(3)), rt = [
+  {
+    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
+  }
+], Y = (t, e = {}) => {
+  const { blobCount: r, duration: a, scale: o } = T(e), n = Jt(a);
+  return Array.from({ length: r }, (i, s) => {
+    const l = rt[s % rt.length], d = y(s, 1, 0.88, 1.16), h = y(s, 2, 0.86, 1.24), g = y(s, 3, 0.72, 1), m = y(s, 4, 0, 4), p = (34 + s % 4 * 9) * o * d;
+    return {
+      animationName: l.animationName,
+      blur: S(m),
+      color: qt(t, s),
+      delay: Math.round(
+        s * -0.19 * n - y(s, 5, 0, 900)
+      ),
+      dx: S(l.dx * y(s, 6, 0.84, 1.18)),
+      dx2: S(l.dx2 * y(s, 7, 0.82, 1.22)),
+      dy: S(l.dy * y(s, 8, 0.84, 1.18)),
+      dy2: S(l.dy2 * y(s, 9, 0.82, 1.22)),
+      duration: Math.round(
+        n * (1 + s % 3 * 0.11) * h
+      ),
+      opacity: S(g),
+      originX: l.originX,
+      originY: l.originY,
+      rotateMid: Math.round(y(s, 10, 95, 165)),
+      rotateTo: Math.round(y(s, 11, 220, 310)),
+      scaleMid: l.scaleMid,
+      scaleTo: l.scaleTo,
+      size: S(p),
+      x: l.x,
+      y: l.y
+    };
+  });
+}, U = (t = {}) => `url(#${T(t).id}) blur(${T(t).blur}px)`, yt = (t = {}) => {
+  const { blur: e, contrast: r, id: a } = T(t), o = Math.max(2, Math.round(e * 0.25)), n = -(r * 0.45), i = r <= 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 ${r} ${n}" result="g-gradient-morph-goo" />
+    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;
+  return `<svg xmlns="${Wt}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
+  <filter id="${a}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="${o}" result="g-gradient-morph-blur" />${i}
+  </filter>
+</svg>`;
+}, Qt = (t, e = {}) => {
+  const r = e.selector ?? ".g-gradient-morph", { opacity: a } = T(e), o = Y(t, e);
+  return `${r} {
+	position: relative;
+	overflow: hidden;
+}
+
+${r}__blobs {
+	position: absolute;
+	inset: -18%;
+	opacity: ${a};
+	filter: ${U(e)};
+	mix-blend-mode: hard-light;
+}
+
+${r}__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;
+}
+
+${o.map(
+    (n, i) => `${r}__blob:nth-child(${i + 1}) {
+	top: ${n.y}%;
+	left: ${n.x}%;
+	width: ${n.size}%;
+	aspect-ratio: 1;
+	--g-gradient-morph-blob-color: ${n.color};
+	--g-gradient-morph-x: ${n.dx}%;
+	--g-gradient-morph-x2: ${n.dx2}%;
+	--g-gradient-morph-y: ${n.dy}%;
+	--g-gradient-morph-y2: ${n.dy2}%;
+	--g-gradient-morph-origin-x: ${n.originX};
+	--g-gradient-morph-origin-y: ${n.originY};
+	--g-gradient-morph-animation: ${n.animationName};
+	--g-gradient-morph-blur: ${n.blur}px;
+	--g-gradient-morph-opacity: ${n.opacity};
+	--g-gradient-morph-rotate-mid: ${n.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${n.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${n.scaleMid};
+	--g-gradient-morph-scale: ${n.scaleTo};
+	animation-delay: ${n.delay}ms;
+	animation-duration: ${B(n.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));
+	}
+}`;
+}, ft = (t, e) => {
+  const r = t.stops.filter(
+    (n) => n.position >= 25 && n.position <= 85
+  ), a = t.stops.filter(
+    (n) => !r.includes(n)
+  );
+  return [...r, ...a].sort(
+    (n, i) => Math.abs(n.position - 50) - Math.abs(i.position - 50)
+  ).slice(0, e);
+}, te = (t, e) => t * ([1, 0.54, 0.3, 0.18][e] ?? 0.12), M = (t, e) => {
+  const r = String(t).match(/^(-?\d*\.?\d+)(.*)$/);
+  return r ? `${Math.round(Number(r[1]) * e * 1e3) / 1e3}${r[2] || "px"}` : null;
+}, at = (t, e, r) => M(t, 1 / e) ?? (r === 0 ? v(t) : "0px"), ee = (t, e) => M(t, 1 / Math.sqrt(e)) ?? v(t), $t = (t, e = {}) => {
+  var b;
+  const r = e.x ?? 0, a = e.y ?? 6, o = e.blur ?? 14, n = e.spread ?? -3, i = e.opacity ?? 0.24, s = Math.max(1, Math.round(e.layers ?? 2)), l = ((b = ft(t, 1)[0]) == null ? void 0 : b.color) ?? "#000000", d = `${v(r)} ${v(a)} ${v(o)} ${v(n)} ${C(l, i)}`;
+  if (s === 1) return d;
+  const h = M(r, 0.35) ?? "0px", g = M(a, 0.35) ?? "2px", m = M(o, 0.3) ?? "4px", p = M(n, 0.5) ?? "-2px", x = Math.min(0.18, i * 0.65);
+  return `${`${h} ${g} ${m} ${p} ${C("#000000", x)}`}, ${d}`;
+}, bt = (t, e = {}) => {
+  const r = e.x ?? 0, a = e.y ?? 6, o = e.blur ?? 14, n = e.opacity ?? 0.42, i = Math.max(1, Math.round(e.layers ?? 2)), s = ee(o, i);
+  return ft(t, i).map((l, d) => {
+    const h = at(r, i, d), g = at(a, i, d);
+    return `drop-shadow(${h} ${g} ${s} ${C(l.color, te(n, d))})`;
+  }).join(" ");
+}, Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createGradientMorphBlobs: Y,
+  toGradientBoxShadow: $t,
+  toGradientDropShadow: bt,
+  toGradientMorphCSS: Qt,
+  toGradientMorphFilter: U,
+  toGradientMorphFilterMarkup: yt
+}, Symbol.toStringTag, { value: "Module" })), re = (t, e, r = {}) => {
+  const a = r.width ?? t.canvas.width, o = r.height ?? t.canvas.height, n = a / 2, i = o / 2, s = Math.hypot(a, o) / 2, d = ((typeof e.direction == "number" ? e.direction : Number.parseFloat(e.direction) || P) - 90) * Math.PI / 180, h = a / 2, g = o / 2, m = Math.cos(d) * h, p = Math.sin(d) * g, x = e.type === "radial" ? t.createRadialGradient(
+    r.x0 ?? n,
+    r.y0 ?? i,
+    r.r0 ?? 0,
+    r.x1 ?? n,
+    r.y1 ?? i,
+    r.r1 ?? s
+  ) : e.type === "conic" && typeof t.createConicGradient == "function" ? t.createConicGradient(
+    r.startAngle ?? d,
+    r.x0 ?? n,
+    r.y0 ?? i
+  ) : t.createLinearGradient(
+    r.x0 ?? n - m,
+    r.y0 ?? i - p,
+    r.x1 ?? n + m,
+    r.y1 ?? i + p
+  ), O = e.type === "conic" ? it(e.stops) : e.stops;
+  for (const b of O)
+    x.addColorStop(
+      b.position / 100,
+      C(b.color, b.opacity)
+    );
+  return x;
+}, W = "http://www.w3.org/2000/svg", ae = "http://www.w3.org/1999/xhtml", N = (t) => t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), K = (t) => {
+  const e = t.opacity === void 0 ? "" : ` stop-opacity="${w(t.opacity)}"`;
+  return `<stop offset="${t.position}%" stop-color="${t.color}"${e} />`;
+}, ne = (t, e) => {
+  var r, a, o;
+  return {
+    active: e.activeStroke ?? ((r = t.stops[Math.max(0, Math.floor(t.stops.length / 2))]) == null ? void 0 : r.color) ?? ((a = t.stops[0]) == null ? void 0 : a.color) ?? "currentColor",
+    background: e.backgroundStroke ?? ((o = t.stops[0]) == null ? void 0 : o.color) ?? e.activeStroke ?? "currentColor"
+  };
+}, oe = (t, e) => {
+  var n;
+  const r = (n = t.match(/\bviewBox=(["'])(.*?)\1/i)) == null ? void 0 : n[2];
+  if (r) return r;
+  const a = e.width ?? 240, o = e.height ?? 120;
+  return `0 0 ${a} ${o}`;
+}, ie = (t) => {
+  var e;
+  return ((e = t.replace(/<\?xml[\s\S]*?\?>/gi, "").replace(/<!doctype[\s\S]*?>/gi, "").match(/<svg\b[^>]*>([\s\S]*?)<\/svg>/i)) == null ? void 0 : e[1].trim()) ?? t;
+}, se = (t) => {
+  const e = t.trim().split(/(?=M\s*[-+.\d])/).map((r) => r.trim()).filter(Boolean);
+  return e.length > 1 ? e : [t];
+}, ce = (t) => [...t.matchAll(/<path\b[^>]*\sd=(["'])([\s\S]*?)\1/gi)].flatMap(
+  (e) => se(e[2])
+), xt = (t) => {
+  var e;
+  return Math.max(1, ((e = t.match(/[LlHhVvCcSsQqTtAaZz]/g)) == null ? void 0 : e.length) ?? 0);
+}, de = (t, e) => {
+  const a = 0.5 + (1 - xt(t) / e) * 0.22;
+  return Math.round(a * 1e3) / 1e3;
+}, q = (t) => {
+  const [e = "0", r = "0", a = "240", o = "120"] = t.trim().split(/[\s,]+/);
+  return {
+    height: Number(o) || 120,
+    width: Number(a) || 240,
+    x: Number(e) || 0,
+    y: Number(r) || 0
+  };
+}, le = (t, e, r) => {
+  if (r.viewBoxPadding === !1) return t;
+  const a = q(t), o = Math.max(
+    e * 2,
+    Math.min(a.width, a.height) * 0.02
+  ), n = r.viewBoxPadding ?? o;
+  return [
+    a.x - n,
+    a.y - n,
+    a.width + n * 2,
+    a.height + n * 2
+  ].join(" ");
+}, ge = (t) => {
+  const { height: e, width: r } = q(t);
+  return {
+    height: Number(e) || 120,
+    width: Number(r) || 240
+  };
+}, he = (t, e, r) => {
+  if (r.normalizeStrokeWidth === !1) return t;
+  const { height: a, width: o } = ge(e), n = r.strokeWidthBase ?? 180;
+  return t * (Math.min(o, a) / n);
+}, J = (t, e = {}) => {
+  const r = e.id ?? "g-gradient", a = t.stops.map(K).join("");
+  return t.type === "radial" ? `<radialGradient id="${r}" cx="${e.cx ?? "50%"}" cy="${e.cy ?? "50%"}" r="${e.r ?? "75%"}">${a}</radialGradient>` : t.type === "conic" ? `<pattern id="${r}" patternUnits="objectBoundingBox" width="1" height="1"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="${ae}" style="width:100%;height:100%;background:${N(V(t))};"></div></foreignObject></pattern>` : `<linearGradient id="${r}" x1="${e.x1 ?? "0%"}" y1="${e.y1 ?? "0%"}" x2="${e.x2 ?? "100%"}" y2="${e.y2 ?? "100%"}">${a}</linearGradient>`;
+}, me = (t, e = {}) => {
+  const r = e.id ?? "g-gradient", a = e.width ?? 240, o = e.height ?? 120, n = e.rx ?? 18;
+  return `<svg xmlns="${W}" viewBox="0 0 ${a} ${o}" role="img">
+  <defs>
+    ${J(t, e)}
+  </defs>
+  <rect width="${a}" height="${o}" rx="${n}" fill="url(#${r})" />
+</svg>`;
+}, ue = (t, e, r = {}) => {
+  const o = `${r.id ?? "g-gradient-source"}-stroke`, n = oe(t, r), i = ie(t), s = ce(t), l = he(
+    r.strokeWidth ?? 1.4,
+    n,
+    r
+  ), d = le(n, l, r), { width: h, x: g } = q(d), m = r.linecap ?? "round", p = B(r.duration ?? 3600), x = r.repeatCount ?? "indefinite", O = r.sourceOpacity ?? 0.22, b = e.stops.map(K).join(""), wt = Math.max(...s.map(xt));
+  return `<svg xmlns="${W}" viewBox="${N(d)}" role="img">
+  <defs>
+    <linearGradient id="${o}" gradientUnits="userSpaceOnUse" x1="${g}" y1="0" x2="${g + h}" y2="0">
+      ${b}
+    </linearGradient>
+  </defs>
+  <g opacity="${w(O)}">
+    ${i}
+  </g>
+  <g fill="none" stroke="url(#${o})" stroke-width="${l}" stroke-linecap="${m}" stroke-linejoin="round">
+    ${s.map((tt) => {
+    const et = de(tt, wt);
+    return `<path d="${N(tt)}" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="0">
+      <animate attributeName="stroke-dasharray" values="0 100;100 100;0 100" keyTimes="0;${et};1" dur="${p}" repeatCount="${x}" calcMode="linear" />
+      <animate attributeName="stroke-dashoffset" values="0;0;-100" keyTimes="0;${et};1" dur="${p}" repeatCount="${x}" calcMode="linear" />
+    </path>`;
+  }).join(`
+    `)}
+  </g>
+</svg>`;
+}, pe = (t, e = {}) => {
+  const a = `${e.id ?? "g-gradient-path"}-stroke`, o = e.width ?? 240, n = e.height ?? 120, i = e.path ?? `M 20 ${n * 0.64} C ${o * 0.28} ${n * 0.18}, ${o * 0.58} ${n * 0.18}, ${o - 20} ${n * 0.64}`, s = e.strokeWidth ?? 12, l = e.linecap ?? "round", d = B(e.duration ?? 2800), h = e.repeatCount ?? "indefinite", g = e.backgroundOpacity ?? 0.24, m = ne(t, e), p = t.stops.map(K).join("");
+  return `<svg xmlns="${W}" viewBox="0 0 ${o} ${n}" role="img">
+  <defs>
+    <linearGradient id="${a}" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="${o}" y2="0">
+      ${p}
+    </linearGradient>
+  </defs>
+  <path d="${N(i)}" fill="none" stroke="${m.background}" stroke-width="${s}" stroke-linecap="${l}" opacity="${g}" />
+  <path d="${N(i)}" fill="none" stroke="${e.activeStroke ? m.active : `url(#${a})`}" stroke-width="${s}" stroke-linecap="${l}" pathLength="100" stroke-dasharray="100 100" stroke-dashoffset="100">
+    <animate attributeName="stroke-dashoffset" values="100;0;-100" dur="${d}" repeatCount="${h}" />
+  </path>
+</svg>`;
+}, Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createLinearGradient: lt,
+  toCanvasGradient: re,
+  toCssGradient: V,
+  toSvgGradient: J,
+  toSvgGradientMarkup: me,
+  toSvgPathAnimationMarkup: pe,
+  toSvgSourceAnimationMarkup: ue
+}, Symbol.toStringTag, { value: "Module" })), ye = ["glare", "soft", "mesh"], fe = (t) => t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), $e = (t) => fe(t), be = (t, e, r) => `${t}-${e}`, Z = (t) => Object.entries(t).map(([e, r]) => `${e}: ${r};`).join(`
+`), xe = (t) => t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), Se = (t) => Object.entries(t).map(([e, r]) => `${xe(e)}: ${r};`).join(`
+`), H = (t) => t === null || typeof t != "object" ? JSON.stringify(t) : Array.isArray(t) ? `[${t.map(H).join(",")}]` : `{${Object.entries(t).filter(([, e]) => e !== void 0).sort(([e], [r]) => e.localeCompare(r)).map(
+  ([e, r]) => `${JSON.stringify(e)}:${H(r)}`
+).join(",")}}`, we = (t) => {
+  let e = 5381;
+  for (let r = 0; r < t.length; r += 1)
+    e = e * 33 ^ t.charCodeAt(r);
+  return (e >>> 0).toString(36);
+}, ve = (t, e, r, a) => {
+  const o = Z(e), n = Se(r), i = [o, n].filter(Boolean).join(`
+`);
+  return [`.${t} {
+${i}
+}`, a].filter(Boolean).join(`
+
+`);
+}, Me = (t, e) => t in e, St = (t, e) => Me(t, e) ? ut(t, e) : t === "soft" ? {
+  label: "Soft",
+  description: "Quiet monochrome radial gradient.",
+  gradient: {
+    recipe: "monochrome",
+    type: "radial",
+    position: "center",
+    shape: "ellipse"
+  },
+  shadow: {
+    layers: 2,
+    opacity: 0.18,
+    blur: 18,
+    y: 7,
+    spread: -4
+  },
+  dropShadow: {
+    layers: 2,
+    opacity: 0.26,
+    blur: 16,
+    y: 6
+  },
+  animation: {
+    preset: "pulse",
+    duration: 7200,
+    easing: "ease-in-out"
+  }
+} : t === "mesh" ? null : {
+  label: t,
+  gradient: {
+    recipe: t,
+    type: "linear",
+    direction: t === "glare" ? 135 : 145
+  }
+}, ke = (t) => {
+  const e = [
+    `radial-gradient(circle at 16% 18%, ${u(t, -42, 72, 1.05)} 0%, transparent 34%)`,
+    `radial-gradient(circle at 86% 20%, ${G(t)} 0%, transparent 32%)`,
+    `radial-gradient(circle at 50% 84%, ${u(t, 56, 64, 1.08)} 0%, transparent 38%)`,
+    `linear-gradient(135deg, ${f(t, 94)}, ${f(t, 28)})`
+  ];
+  return {
+    layers: e,
+    value: e.join(", ")
+  };
+}, Ce = (t, e, r, a, o) => {
+  if (e === "mesh") {
+    const l = ke(t);
+    return {
+      cssVar: r,
+      layers: l.layers,
+      value: l.value
+    };
+  }
+  const n = St(e, o), i = I(t), s = z(i, {
+    ...n == null ? void 0 : n.gradient,
+    ...a
+  });
+  return {
+    cssVar: r,
+    model: s,
+    stops: s.stops,
+    svg: J(s, { id: r.replace(/^--/, "") }),
+    value: V(s)
+  };
+}, Ge = (t, e, r, a) => {
+  var i;
+  if (!t) return {};
+  const o = `${e.replace(/^--/, "")}-morph`, n = {
+    ...a == null ? void 0 : a.morph,
+    id: ((i = a == null ? void 0 : a.morph) == null ? void 0 : i.id) ?? o
+  };
+  return {
+    boxShadow: {
+      cssVar: `${e}-shadow`,
+      value: $t(t, (a == null ? void 0 : a.shadow) ?? (r == null ? void 0 : r.shadow))
+    },
+    dropShadow: {
+      cssVar: `${e}-drop-shadow`,
+      value: bt(
+        t,
+        (a == null ? void 0 : a.dropShadow) ?? (r == null ? void 0 : r.dropShadow)
+      )
+    },
+    morph: {
+      cssVar: `${e}-morph`,
+      svg: yt(n),
+      value: U(n)
+    }
+  };
+}, Te = (t, e, r, a) => {
+  var n;
+  const o = {
+    ...r == null ? void 0 : r.animation,
+    ...a,
+    name: `g-gradient-${t}-${(a == null ? void 0 : a.preset) ?? ((n = r == null ? void 0 : r.animation) == null ? void 0 : n.preset) ?? "shift"}`,
+    selector: `.g-gradient-${t}`
+  };
+  return {
+    css: dt(o),
+    cssVar: `${e}-animation`,
+    keyframes: X(o),
+    name: o.name,
+    value: st(o)
+  };
+}, Q = (t, e = "glare", r = {}) => {
+  const a = r.registry ?? j, o = $e(e), n = be(r.prefix ?? "--g-gradient", o), i = St(e, a), l = I(t)[500], d = Ce(
+    l,
+    e,
+    n,
+    r,
+    a
+  ), h = {
+    [n]: d.value
+  }, g = r.effects ? Ge(d.model, n, i, {
+    dropShadow: r.dropShadow,
+    morph: r.morph,
+    shadow: r.shadow
+  }) : void 0, m = r.animations ? Te(o, n, i, r.animation) : void 0;
+  return g != null && g.boxShadow && (h[g.boxShadow.cssVar] = g.boxShadow.value), g != null && g.dropShadow && (h[g.dropShadow.cssVar] = g.dropShadow.value), g != null && g.morph && (h[g.morph.cssVar] = g.morph.value), m && (h[m.cssVar] = m.value), {
+    animation: m,
+    cssText: Z(h),
+    cssVars: h,
+    description: i == null ? void 0 : i.description,
+    effects: g,
+    gradient: d,
+    keyframes: (m == null ? void 0 : m.keyframes) ?? "",
+    label: (i == null ? void 0 : i.label) ?? o,
+    name: o
+  };
+}, Ne = (t, e = {}) => {
+  const r = e.recipes ?? ye, a = {}, o = {}, n = {}, i = {}, s = [];
+  for (const l of r) {
+    const d = Q(t, l, {
+      animations: e.animations,
+      effects: e.effects,
+      morph: e.morph,
+      prefix: e.prefix,
+      registry: e.registry
+    });
+    a[d.name] = d.gradient, Object.assign(i, d.cssVars), d.effects && (o[d.name] = d.effects), d.animation && (n[d.name] = d.animation, s.push(d.animation.keyframes));
+  }
+  return {
+    animations: n,
+    cssText: Z(i),
+    cssVars: i,
+    effects: o,
+    gradients: a,
+    keyframes: s.join(`
+`)
+  };
+}, Oe = (t, e = {}) => {
+  var g, m;
+  const { className: r, id: a, recipe: o = "glare", ...n } = e, i = Q(t, o, n), s = i.gradient.model && e.effects && e.morph ? Y(i.gradient.model, e.morph) : void 0, l = a ?? `g-gradient-${i.name}-${we(
+    H({ options: e, seed: t })
+  )}`, d = r ?? l, h = {
+    backgroundImage: `var(${i.gradient.cssVar})`
+  };
+  return (g = i.effects) != null && g.boxShadow && (h.boxShadow = `var(${i.effects.boxShadow.cssVar})`), (m = i.effects) != null && m.dropShadow && (h.filter = `var(${i.effects.dropShadow.cssVar})`), i.animation && (h.animation = `var(${i.animation.cssVar})`), {
+    animation: i.animation,
+    className: d,
+    cssText: ve(
+      d,
+      i.cssVars,
+      h,
+      i.keyframes
+    ),
+    cssVars: i.cssVars,
+    effects: i.effects,
+    gradient: i.gradient,
+    id: l,
+    keyframes: i.keyframes,
+    morphBlobs: s,
+    preset: i,
+    style: h
+  };
+}, Ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createGradientMaterial: Oe,
+  createGradientPreset: Q,
+  createGradientTokens: Ne
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Pe as a,
+  Be as b,
+  Ae as c,
+  _e as i,
+  Ee as m
+};