@gradient-ui/gradient-engine 0.6.0 → 1.0.1

package/dist/svg-B2CaHCLv.js

@@ -0,0 +1,118 @@
+import { t as toCssDuration, b as clamp } from "./utils-VaqPefmS.js";
+import { t as toCssGradient } from "./css-B3xGfmW1.js";
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg", XHTML_NAMESPACE = "http://www.w3.org/1999/xhtml", escapeAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), formatSvgStop = (stop) => {
+  const opacity = stop.opacity === void 0 ? "" : ` stop-opacity="${clamp(stop.opacity)}"`;
+  return `<stop offset="${stop.position}%" stop-color="${stop.color}"${opacity} />`;
+}, getPathStroke = (model, options) => {
+  var _a, _b, _c;
+  return {
+    active: options.activeStroke ?? ((_a = model.stops[Math.max(0, Math.floor(model.stops.length / 2))]) == null ? void 0 : _a.color) ?? ((_b = model.stops[0]) == null ? void 0 : _b.color) ?? "currentColor",
+    background: options.backgroundStroke ?? ((_c = model.stops[0]) == null ? void 0 : _c.color) ?? options.activeStroke ?? "currentColor"
+  };
+}, getSvgViewBox = (svg, options) => {
+  var _a;
+  const viewBox = (_a = svg.match(/\bviewBox=(["'])(.*?)\1/i)) == null ? void 0 : _a[2];
+  if (viewBox) return viewBox;
+  const width = options.width ?? 240, height = options.height ?? 120;
+  return `0 0 ${width} ${height}`;
+}, getSvgBody = (svg) => {
+  var _a;
+  return ((_a = svg.replace(/<\?xml[\s\S]*?\?>/gi, "").replace(/<!doctype[\s\S]*?>/gi, "").match(/<svg\b[^>]*>([\s\S]*?)<\/svg>/i)) == null ? void 0 : _a[1].trim()) ?? svg;
+}, splitAbsoluteSubpaths = (path) => {
+  const subpaths = path.trim().split(/(?=M\s*[-+.\d])/).map((subpath) => subpath.trim()).filter(Boolean);
+  return subpaths.length > 1 ? subpaths : [path];
+}, getSvgPathData = (svg) => [...svg.matchAll(/<path\b[^>]*\sd=(["'])([\s\S]*?)\1/gi)].flatMap(
+  (match) => splitAbsoluteSubpaths(match[2])
+), getPathComplexity = (path) => {
+  var _a;
+  return Math.max(1, ((_a = path.match(/[LlHhVvCcSsQqTtAaZz]/g)) == null ? void 0 : _a.length) ?? 0);
+}, getSourcePathFillTime = (path, maxComplexity) => {
+  const fillTime = 0.5 + (1 - getPathComplexity(path) / maxComplexity) * 0.22;
+  return Math.round(fillTime * 1e3) / 1e3;
+}, getViewBoxMetrics = (viewBox) => {
+  const [x = "0", y = "0", width = "240", height = "120"] = viewBox.trim().split(/[\s,]+/);
+  return {
+    height: Number(height) || 120,
+    width: Number(width) || 240,
+    x: Number(x) || 0,
+    y: Number(y) || 0
+  };
+}, getPaddedViewBox = (viewBox, strokeWidth, options) => {
+  if (options.viewBoxPadding === !1) return viewBox;
+  const metrics = getViewBoxMetrics(viewBox), fallbackPadding = Math.max(
+    strokeWidth * 2,
+    Math.min(metrics.width, metrics.height) * 0.02
+  ), padding = options.viewBoxPadding ?? fallbackPadding;
+  return [
+    metrics.x - padding,
+    metrics.y - padding,
+    metrics.width + padding * 2,
+    metrics.height + padding * 2
+  ].join(" ");
+}, getViewBoxSize = (viewBox) => {
+  const { height, width } = getViewBoxMetrics(viewBox);
+  return {
+    height: Number(height) || 120,
+    width: Number(width) || 240
+  };
+}, getNormalizedStrokeWidth = (strokeWidth, viewBox, options) => {
+  if (options.normalizeStrokeWidth === !1) return strokeWidth;
+  const { height, width } = getViewBoxSize(viewBox), base = options.strokeWidthBase ?? 180;
+  return strokeWidth * (Math.min(width, height) / base);
+}, toSvgGradient = (model, options = {}) => {
+  const id = options.id ?? "g-gradient", stops = model.stops.map(formatSvgStop).join("");
+  return model.type === "radial" ? `<radialGradient id="${id}" cx="${options.cx ?? "50%"}" cy="${options.cy ?? "50%"}" r="${options.r ?? "75%"}">${stops}</radialGradient>` : model.type === "conic" ? `<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="${XHTML_NAMESPACE}" style="width:100%;height:100%;background:${escapeAttribute(toCssGradient(model))};"></div></foreignObject></pattern>` : `<linearGradient id="${id}" x1="${options.x1 ?? "0%"}" y1="${options.y1 ?? "0%"}" x2="${options.x2 ?? "100%"}" y2="${options.y2 ?? "100%"}">${stops}</linearGradient>`;
+}, toSvgGradientMarkup = (model, options = {}) => {
+  const id = options.id ?? "g-gradient", width = options.width ?? 240, height = options.height ?? 120, rx = options.rx ?? 18;
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    ${toSvgGradient(model, options)}
+  </defs>
+  <rect width="${width}" height="${height}" rx="${rx}" fill="url(#${id})" />
+</svg>`;
+}, toSvgSourceAnimationMarkup = (sourceSvg, model, options = {}) => {
+  const gradientId = `${options.id ?? "g-gradient-source"}-stroke`, sourceViewBox = getSvgViewBox(sourceSvg, options), body = getSvgBody(sourceSvg), paths = getSvgPathData(sourceSvg), strokeWidth = getNormalizedStrokeWidth(
+    options.strokeWidth ?? 1.4,
+    sourceViewBox,
+    options
+  ), viewBox = getPaddedViewBox(sourceViewBox, strokeWidth, options), { width, x } = getViewBoxMetrics(viewBox), linecap = options.linecap ?? "round", duration = toCssDuration(options.duration ?? 3600), repeatCount = options.repeatCount ?? "indefinite", sourceOpacity = options.sourceOpacity ?? 0.22, stops = model.stops.map(formatSvgStop).join(""), maxPathComplexity = Math.max(...paths.map(getPathComplexity));
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="${escapeAttribute(viewBox)}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="${x}" y1="0" x2="${x + width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <g opacity="${clamp(sourceOpacity)}">
+    ${body}
+  </g>
+  <g fill="none" stroke="url(#${gradientId})" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" stroke-linejoin="round">
+    ${paths.map((path) => {
+    const fillTime = getSourcePathFillTime(path, maxPathComplexity);
+    return `<path d="${escapeAttribute(path)}" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="0">
+      <animate attributeName="stroke-dasharray" values="0 100;100 100;0 100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+      <animate attributeName="stroke-dashoffset" values="0;0;-100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+    </path>`;
+  }).join(`
+    `)}
+  </g>
+</svg>`;
+}, toSvgPathAnimationMarkup = (model, options = {}) => {
+  const gradientId = `${options.id ?? "g-gradient-path"}-stroke`, width = options.width ?? 240, height = options.height ?? 120, path = options.path ?? `M 20 ${height * 0.64} C ${width * 0.28} ${height * 0.18}, ${width * 0.58} ${height * 0.18}, ${width - 20} ${height * 0.64}`, strokeWidth = options.strokeWidth ?? 12, linecap = options.linecap ?? "round", duration = toCssDuration(options.duration ?? 2800), repeatCount = options.repeatCount ?? "indefinite", opacity = options.backgroundOpacity ?? 0.24, stroke = getPathStroke(model, options), stops = model.stops.map(formatSvgStop).join("");
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="${width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${stroke.background}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" opacity="${opacity}" />
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${options.activeStroke ? stroke.active : `url(#${gradientId})`}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" pathLength="100" stroke-dasharray="100 100" stroke-dashoffset="100">
+    <animate attributeName="stroke-dashoffset" values="100;0;-100" dur="${duration}" repeatCount="${repeatCount}" />
+  </path>
+</svg>`;
+};
+export {
+  toSvgGradientMarkup as a,
+  toSvgPathAnimationMarkup as b,
+  toSvgSourceAnimationMarkup as c,
+  toSvgGradient as t
+};

package/dist/svg-BtMrj3fP.cjs

@@ -0,0 +1,32 @@
+"use strict";const utils=require("./utils-Bry9BTmj.cjs"),css=require("./css-CREh0Awz.cjs"),SVG_NAMESPACE="http://www.w3.org/2000/svg",XHTML_NAMESPACE="http://www.w3.org/1999/xhtml",escapeAttribute=value=>value.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),formatSvgStop=stop=>{const opacity=stop.opacity===void 0?"":` stop-opacity="${utils.clamp(stop.opacity)}"`;return`<stop offset="${stop.position}%" stop-color="${stop.color}"${opacity} />`},getPathStroke=(model,options)=>{var _a,_b,_c;return{active:options.activeStroke??((_a=model.stops[Math.max(0,Math.floor(model.stops.length/2))])==null?void 0:_a.color)??((_b=model.stops[0])==null?void 0:_b.color)??"currentColor",background:options.backgroundStroke??((_c=model.stops[0])==null?void 0:_c.color)??options.activeStroke??"currentColor"}},getSvgViewBox=(svg,options)=>{var _a;const viewBox=(_a=svg.match(/\bviewBox=(["'])(.*?)\1/i))==null?void 0:_a[2];if(viewBox)return viewBox;const width=options.width??240,height=options.height??120;return`0 0 ${width} ${height}`},getSvgBody=svg=>{var _a;return((_a=svg.replace(/<\?xml[\s\S]*?\?>/gi,"").replace(/<!doctype[\s\S]*?>/gi,"").match(/<svg\b[^>]*>([\s\S]*?)<\/svg>/i))==null?void 0:_a[1].trim())??svg},splitAbsoluteSubpaths=path=>{const subpaths=path.trim().split(/(?=M\s*[-+.\d])/).map(subpath=>subpath.trim()).filter(Boolean);return subpaths.length>1?subpaths:[path]},getSvgPathData=svg=>[...svg.matchAll(/<path\b[^>]*\sd=(["'])([\s\S]*?)\1/gi)].flatMap(match=>splitAbsoluteSubpaths(match[2])),getPathComplexity=path=>{var _a;return Math.max(1,((_a=path.match(/[LlHhVvCcSsQqTtAaZz]/g))==null?void 0:_a.length)??0)},getSourcePathFillTime=(path,maxComplexity)=>{const fillTime=.5+(1-getPathComplexity(path)/maxComplexity)*.22;return Math.round(fillTime*1e3)/1e3},getViewBoxMetrics=viewBox=>{const[x="0",y="0",width="240",height="120"]=viewBox.trim().split(/[\s,]+/);return{height:Number(height)||120,width:Number(width)||240,x:Number(x)||0,y:Number(y)||0}},getPaddedViewBox=(viewBox,strokeWidth,options)=>{if(options.viewBoxPadding===!1)return viewBox;const metrics=getViewBoxMetrics(viewBox),fallbackPadding=Math.max(strokeWidth*2,Math.min(metrics.width,metrics.height)*.02),padding=options.viewBoxPadding??fallbackPadding;return[metrics.x-padding,metrics.y-padding,metrics.width+padding*2,metrics.height+padding*2].join(" ")},getViewBoxSize=viewBox=>{const{height,width}=getViewBoxMetrics(viewBox);return{height:Number(height)||120,width:Number(width)||240}},getNormalizedStrokeWidth=(strokeWidth,viewBox,options)=>{if(options.normalizeStrokeWidth===!1)return strokeWidth;const{height,width}=getViewBoxSize(viewBox),base=options.strokeWidthBase??180;return strokeWidth*(Math.min(width,height)/base)},toSvgGradient=(model,options={})=>{const id=options.id??"g-gradient",stops=model.stops.map(formatSvgStop).join("");return model.type==="radial"?`<radialGradient id="${id}" cx="${options.cx??"50%"}" cy="${options.cy??"50%"}" r="${options.r??"75%"}">${stops}</radialGradient>`:model.type==="conic"?`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="${XHTML_NAMESPACE}" style="width:100%;height:100%;background:${escapeAttribute(css.toCssGradient(model))};"></div></foreignObject></pattern>`:`<linearGradient id="${id}" x1="${options.x1??"0%"}" y1="${options.y1??"0%"}" x2="${options.x2??"100%"}" y2="${options.y2??"100%"}">${stops}</linearGradient>`},toSvgGradientMarkup=(model,options={})=>{const id=options.id??"g-gradient",width=options.width??240,height=options.height??120,rx=options.rx??18;return`<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    ${toSvgGradient(model,options)}
+  </defs>
+  <rect width="${width}" height="${height}" rx="${rx}" fill="url(#${id})" />
+</svg>`},toSvgSourceAnimationMarkup=(sourceSvg,model,options={})=>{const gradientId=`${options.id??"g-gradient-source"}-stroke`,sourceViewBox=getSvgViewBox(sourceSvg,options),body=getSvgBody(sourceSvg),paths=getSvgPathData(sourceSvg),strokeWidth=getNormalizedStrokeWidth(options.strokeWidth??1.4,sourceViewBox,options),viewBox=getPaddedViewBox(sourceViewBox,strokeWidth,options),{width,x}=getViewBoxMetrics(viewBox),linecap=options.linecap??"round",duration=utils.toCssDuration(options.duration??3600),repeatCount=options.repeatCount??"indefinite",sourceOpacity=options.sourceOpacity??.22,stops=model.stops.map(formatSvgStop).join(""),maxPathComplexity=Math.max(...paths.map(getPathComplexity));return`<svg xmlns="${SVG_NAMESPACE}" viewBox="${escapeAttribute(viewBox)}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="${x}" y1="0" x2="${x+width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <g opacity="${utils.clamp(sourceOpacity)}">
+    ${body}
+  </g>
+  <g fill="none" stroke="url(#${gradientId})" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" stroke-linejoin="round">
+    ${paths.map(path=>{const fillTime=getSourcePathFillTime(path,maxPathComplexity);return`<path d="${escapeAttribute(path)}" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="0">
+      <animate attributeName="stroke-dasharray" values="0 100;100 100;0 100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+      <animate attributeName="stroke-dashoffset" values="0;0;-100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+    </path>`}).join(`
+    `)}
+  </g>
+</svg>`},toSvgPathAnimationMarkup=(model,options={})=>{const gradientId=`${options.id??"g-gradient-path"}-stroke`,width=options.width??240,height=options.height??120,path=options.path??`M 20 ${height*.64} C ${width*.28} ${height*.18}, ${width*.58} ${height*.18}, ${width-20} ${height*.64}`,strokeWidth=options.strokeWidth??12,linecap=options.linecap??"round",duration=utils.toCssDuration(options.duration??2800),repeatCount=options.repeatCount??"indefinite",opacity=options.backgroundOpacity??.24,stroke=getPathStroke(model,options),stops=model.stops.map(formatSvgStop).join("");return`<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="${width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${stroke.background}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" opacity="${opacity}" />
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${options.activeStroke?stroke.active:`url(#${gradientId})`}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" pathLength="100" stroke-dasharray="100 100" stroke-dashoffset="100">
+    <animate attributeName="stroke-dashoffset" values="100;0;-100" dur="${duration}" repeatCount="${repeatCount}" />
+  </path>
+</svg>`};exports.toSvgGradient=toSvgGradient;exports.toSvgGradientMarkup=toSvgGradientMarkup;exports.toSvgPathAnimationMarkup=toSvgPathAnimationMarkup;exports.toSvgSourceAnimationMarkup=toSvgSourceAnimationMarkup;

package/dist/types/animation/css.d.ts

@@ -1,9 +1,9 @@
-import type { GradientAnimationOptions } from '../types';
+import type { GradientAnimationOptions } from '../types.js';
 export declare const getGradientAnimationOptions: (options?: GradientAnimationOptions) => {
     duration: string;
     easing: string;
     name: string;
-    preset: import("..").GradientAnimationPreset;
+    preset: import("../types.js").GradientAnimationPreset;
     selector: string;
 };
 export declare const toGradientAnimationKeyframes: (options?: GradientAnimationOptions) => string;

package/dist/types/animation/index.d.ts

@@ -1 +1 @@
-export { getGradientAnimationOptions, toGradientAnimationCSS, toGradientAnimationKeyframes, toGradientAnimationStyles, toGradientAnimationValue } from './css';
+export { getGradientAnimationOptions, toGradientAnimationCSS, toGradientAnimationKeyframes, toGradientAnimationStyles, toGradientAnimationValue } from './css.js';

package/dist/types/colorSystem.d.ts

@@ -1,6 +1,6 @@
-import { type ColorPalettePair } from './palette';
-import type { ColorInput } from './color';
-import type { ThemeTokens } from './scheme';
+import { type ColorPalettePair } from './palette.js';
+import type { ColorInput } from './color.js';
+import type { ThemeTokens } from './scheme.js';
 export interface ThemeColorDefinition {
     color: ColorInput;
     onColor?: ColorInput;

package/dist/types/core.d.ts

@@ -1,9 +1,9 @@
-import { type ColorPalette } from './palette';
-import type { ColorInput } from './color';
-import type { GradientOptions } from './types';
-export * from './types';
-export { createGradientModel, createGradientModelFromColor } from './model';
-export { createRecipeStops, gradientRecipes } from './recipes';
-export { defineGradientPreset, defineGradientPresetRegistry, getGradientPreset, gradientPresets, type GradientPreset, type GradientPresetName, type GradientPresetRegistry } from './presets';
+import { type ColorPalette } from './palette.js';
+import type { ColorInput } from './color.js';
+import type { GradientOptions } from './types.js';
+export * from './types.js';
+export { createGradientModel, createGradientModelFromColor } from './model.js';
+export { createRecipeStops, gradientRecipes } from './recipes.js';
+export { defineGradientPreset, defineGradientPresetRegistry, getGradientPreset, gradientPresets, type GradientPreset, type GradientPresetName, type GradientPresetRegistry } from './presets.js';
 export declare const createGradient: (palette: ColorPalette, options?: GradientOptions) => string;
 export declare const createGradientFromColor: (color: ColorInput, options?: GradientOptions) => string;

package/dist/types/designTokens.d.ts

@@ -1,7 +1,7 @@
-import { type ColorInput } from './color';
-import { type ColorSystem, type ThemeColorExtensions } from './colorSystem';
-import { type CreatedGradientTokens, type GradientTokenOptions } from './tokens';
-import { type ThemeMode, type ThemeTokens } from './scheme';
+import { type ColorInput } from './color.js';
+import { type ColorSystem, type ThemeColorExtensions } from './colorSystem.js';
+import { type CreatedGradientTokens, type GradientTokenOptions } from './tokens.js';
+import { type ThemeMode, type ThemeTokens } from './scheme.js';
 export declare const DEFAULT_SEED = "#4e51ff";
 export interface DesignTokenOptions {
     seed?: ColorInput;

package/dist/types/effects/index.d.ts

@@ -1,2 +1,2 @@
-export { createGradientMorphBlobs, isGradientMorphBlendMode, resolveGradientMorphBlendMode, toGradientMorphCSS, toGradientMorphFilter, toGradientMorphFilterMarkup, toGradientMorphMarkup } from './morph';
-export { toGradientBoxShadow, toGradientDropShadow } from './shadow';
+export { createGradientMorphBlobs, isGradientMorphBlendMode, resolveGradientMorphBlendMode, toGradientMorphCSS, toGradientMorphFilter, toGradientMorphFilterMarkup, toGradientMorphMarkup } from './morph.js';
+export { toGradientBoxShadow, toGradientDropShadow } from './shadow.js';

package/dist/types/effects/morph.d.ts

@@ -1,4 +1,4 @@
-import type { GradientModel, GradientMorphBlob, GradientMorphBlendMode, GradientMorphMarkupOptions, GradientMorphOptions } from '../types';
+import type { GradientModel, GradientMorphBlob, GradientMorphBlendMode, GradientMorphMarkupOptions, GradientMorphOptions } from '../types.js';
 export declare const isGradientMorphBlendMode: (value: string) => value is GradientMorphBlendMode;
 export declare const resolveGradientMorphBlendMode: (value: string | undefined) => GradientMorphBlendMode;
 export declare const createGradientMorphBlobs: (model: GradientModel, options?: GradientMorphOptions) => GradientMorphBlob[];

package/dist/types/effects/shadow.d.ts

@@ -1,3 +1,3 @@
-import type { GradientModel, GradientShadowOptions } from '../types';
+import type { GradientModel, GradientShadowOptions } from '../types.js';
 export declare const toGradientBoxShadow: (model: GradientModel, options?: GradientShadowOptions) => string;
 export declare const toGradientDropShadow: (model: GradientModel, options?: GradientShadowOptions) => string;

package/dist/types/formatters/canvas.d.ts

@@ -1,2 +1,2 @@
-import type { CanvasGradientOptions, GradientModel } from '../types';
+import type { CanvasGradientOptions, GradientModel } from '../types.js';
 export declare const toCanvasGradient: (context: CanvasRenderingContext2D, model: GradientModel, options?: CanvasGradientOptions) => CanvasGradient;

package/dist/types/formatters/css.d.ts

@@ -1,3 +1,3 @@
-import type { GradientDirection, GradientModel } from '../types';
+import type { GradientDirection, GradientModel } from '../types.js';
 export declare const createLinearGradient: (stops: readonly string[], direction?: GradientDirection) => string;
 export declare const toCssGradient: (model: GradientModel) => string;

package/dist/types/formatters/index.d.ts

@@ -1,3 +1,3 @@
-export { createLinearGradient, toCssGradient } from './css';
-export { toCanvasGradient } from './canvas';
-export { toSvgGradient, toSvgGradientMarkup, toSvgPathAnimationMarkup, toSvgSourceAnimationMarkup } from './svg';
+export { createLinearGradient, toCssGradient } from './css.js';
+export { toCanvasGradient } from './canvas.js';
+export { toSvgGradient, toSvgGradientMarkup, toSvgPathAnimationMarkup, toSvgSourceAnimationMarkup } from './svg.js';

package/dist/types/formatters/svg.d.ts

@@ -1,4 +1,4 @@
-import type { GradientModel, SvgGradientOptions, SvgPathAnimationOptions, SvgSourceAnimationOptions } from '../types';
+import type { GradientModel, SvgGradientOptions, SvgPathAnimationOptions, SvgSourceAnimationOptions } from '../types.js';
 export declare const toSvgGradient: (model: GradientModel, options?: SvgGradientOptions) => string;
 export declare const toSvgGradientMarkup: (model: GradientModel, options?: SvgGradientOptions) => string;
 export declare const toSvgSourceAnimationMarkup: (sourceSvg: string, model: GradientModel, options?: SvgSourceAnimationOptions) => string;

package/dist/types/index.d.ts

@@ -1,11 +1,11 @@
-export * from './core';
-export * from './color';
-export * from './colorSeeds';
-export * from './colorSystem';
-export * from './palette';
-export * from './scheme';
-export * from './formatters';
-export * from './effects';
-export { toGradientAnimationCSS } from './animation';
-export * from './material';
-export * from './designTokens';
+export * from './core.js';
+export * from './color.js';
+export * from './colorSeeds.js';
+export * from './colorSystem.js';
+export * from './palette.js';
+export * from './scheme.js';
+export * from './formatters/index.js';
+export * from './effects/index.js';
+export { toGradientAnimationCSS } from './animation/index.js';
+export * from './material.js';
+export * from './designTokens.js';

package/dist/types/material.d.ts

@@ -1 +1 @@
-export { createGradientMaterial, createGradientPreset, createGradientTokens, clearGradientMaterialCache, getGradientMaterialCacheStats, setGradientMaterialCacheLimit, type CreatedGradientMaterial, type CreatedGradientPreset, type CreatedGradientTokens, type GradientAnimationTokenEntry, type GradientEffectTokenEntry, type GradientMaterialOptions, type GradientTokenEntry, type GradientTokenOptions, type GradientTokenRecipe } from './tokens';
+export { createGradientMaterial, createGradientPreset, createGradientTokens, clearGradientMaterialCache, getGradientMaterialCacheStats, setGradientMaterialCacheLimit, type CreatedGradientMaterial, type CreatedGradientPreset, type CreatedGradientTokens, type GradientAnimationTokenEntry, type GradientEffectTokenEntry, type GradientMaterialOptions, type GradientTokenEntry, type GradientTokenOptions, type GradientTokenRecipe } from './tokens.js';

package/dist/types/model.d.ts

@@ -1,5 +1,5 @@
-import { type ColorPalette } from './palette';
-import type { GradientModel, GradientOptions } from './types';
-import type { ColorInput } from './color';
+import { type ColorPalette } from './palette.js';
+import type { GradientModel, GradientOptions } from './types.js';
+import type { ColorInput } from './color.js';
 export declare const createGradientModel: (palette: ColorPalette, options?: GradientOptions) => GradientModel;
 export declare const createGradientModelFromColor: (color: ColorInput, options?: GradientOptions) => GradientModel;

package/dist/types/palette.d.ts

@@ -1,4 +1,4 @@
-import { type ColorInput } from './color';
+import { type ColorInput } from './color.js';
 export declare const COLOR_SHADES: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 export type ColorShade = (typeof COLOR_SHADES)[number];
 export type ColorPalette = Record<ColorShade, string>;

package/dist/types/presets.d.ts

@@ -1,4 +1,4 @@
-import type { GradientAnimationOptions, GradientAnimationPreset, GradientOptions, GradientRecipe, GradientShadowOptions, GradientType } from './types';
+import type { GradientAnimationOptions, GradientAnimationPreset, GradientOptions, GradientRecipe, GradientShadowOptions, GradientType } from './types.js';
 export interface GradientPreset {
     label: string;
     description?: string;

package/dist/types/recipes.d.ts

@@ -1,14 +1,14 @@
-import type { GradientRecipe } from './types';
+import type { GradientRecipe } from './types.js';
 export declare const gradientRecipes: {
-    glare: (base: string) => import("./types").GradientStop[];
-    monochrome: (base: string) => import("./types").GradientStop[];
-    complementary: (base: string) => import("./types").GradientStop[];
-    'split-complementary': (base: string) => import("./types").GradientStop[];
-    analogous: (base: string) => import("./types").GradientStop[];
-    triadic: (base: string) => import("./types").GradientStop[];
-    tetradic: (base: string) => import("./types").GradientStop[];
-    rectangle: (base: string) => import("./types").GradientStop[];
-    square: (base: string) => import("./types").GradientStop[];
-    duotone: (base: string, colors: readonly string[] | undefined) => import("./types").GradientStop[];
+    glare: (base: string) => import("./types.js").GradientStop[];
+    monochrome: (base: string) => import("./types.js").GradientStop[];
+    complementary: (base: string) => import("./types.js").GradientStop[];
+    'split-complementary': (base: string) => import("./types.js").GradientStop[];
+    analogous: (base: string) => import("./types.js").GradientStop[];
+    triadic: (base: string) => import("./types.js").GradientStop[];
+    tetradic: (base: string) => import("./types.js").GradientStop[];
+    rectangle: (base: string) => import("./types.js").GradientStop[];
+    square: (base: string) => import("./types.js").GradientStop[];
+    duotone: (base: string, colors: readonly string[] | undefined) => import("./types.js").GradientStop[];
 };
-export declare const createRecipeStops: (base: string, recipe: GradientRecipe, colors?: readonly string[]) => import("./types").GradientStop[];
+export declare const createRecipeStops: (base: string, recipe: GradientRecipe, colors?: readonly string[]) => import("./types.js").GradientStop[];

package/dist/types/tokens.d.ts

@@ -1,6 +1,6 @@
-import type { ColorInput } from './color';
-import { type GradientPresetName, type GradientPresetRegistry } from './presets';
-import type { GradientAnimationOptions, GradientMorphBlendMode, GradientMorphBlob, GradientMorphOptions, GradientModel, GradientOptions, GradientRecipe, GradientShadowOptions, GradientStop } from './types';
+import type { ColorInput } from './color.js';
+import { type GradientPresetName, type GradientPresetRegistry } from './presets.js';
+import type { GradientAnimationOptions, GradientMorphBlendMode, GradientMorphBlob, GradientMorphOptions, GradientModel, GradientOptions, GradientRecipe, GradientShadowOptions, GradientStop } from './types.js';
 export type GradientTokenRecipe = GradientRecipe | GradientPresetName | 'mesh' | 'soft';
 export interface GradientTokenEntry {
     value: string;

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import type { ColorShade } from './palette';
+import type { ColorShade } from './palette.js';
 export type GradientDirection = number | string;
 export type GradientType = 'linear' | 'radial' | 'conic';
 export type GradientRecipe = 'glare' | 'monochrome' | 'complementary' | 'split-complementary' | 'analogous' | 'triadic' | 'tetradic' | 'rectangle' | 'square' | 'duotone';

package/dist/types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { GradientDirection, GradientStop } from './types';
+import type { GradientDirection, GradientStop } from './types.js';
 export declare const normalizeDirection: (direction?: GradientDirection) => string;
 export declare const toCssLength: (value: number | string) => string;
 export declare const addCssLength: (value: number | string, offset: number) => string;

package/dist/{types-BFr1fN-7.js → types-B0eCazk8.js}

@@ -1,4 +1,4 @@
-const o = [
+const GRADIENT_MORPH_BLEND_MODES = [
   "normal",
   "multiply",
   "screen",
@@ -15,8 +15,8 @@ const o = [
   "saturation",
   "color",
   "luminosity"
-], l = "hard-light";
+], DEFAULT_GRADIENT_MORPH_BLEND_MODE = "hard-light";
 export {
-  l as D,
-  o as G
+  DEFAULT_GRADIENT_MORPH_BLEND_MODE as D,
+  GRADIENT_MORPH_BLEND_MODES as G
 };

package/dist/types-BFkUlDkW.cjs

@@ -0,0 +1 @@
+"use strict";const GRADIENT_MORPH_BLEND_MODES=["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],DEFAULT_GRADIENT_MORPH_BLEND_MODE="hard-light";exports.DEFAULT_GRADIENT_MORPH_BLEND_MODE=DEFAULT_GRADIENT_MORPH_BLEND_MODE;exports.GRADIENT_MORPH_BLEND_MODES=GRADIENT_MORPH_BLEND_MODES;

package/dist/types-cjs/animation/css.d.cts

@@ -0,0 +1,12 @@
+import type { GradientAnimationOptions } from '../types.cjs';
+export declare const getGradientAnimationOptions: (options?: GradientAnimationOptions) => {
+    duration: string;
+    easing: string;
+    name: string;
+    preset: import("../types.cjs").GradientAnimationPreset;
+    selector: string;
+};
+export declare const toGradientAnimationKeyframes: (options?: GradientAnimationOptions) => string;
+export declare const toGradientAnimationValue: (options?: GradientAnimationOptions) => string;
+export declare const toGradientAnimationStyles: (options?: GradientAnimationOptions) => string;
+export declare const toGradientAnimationCSS: (options?: GradientAnimationOptions) => string;

package/dist/types-cjs/animation/index.d.cts

@@ -0,0 +1 @@
+export { getGradientAnimationOptions, toGradientAnimationCSS, toGradientAnimationKeyframes, toGradientAnimationStyles, toGradientAnimationValue } from './css.cjs';

package/dist/types-cjs/color.d.cts

@@ -0,0 +1,11 @@
+export type ColorInput = string | number;
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare const parseColor: (input: ColorInput) => RgbColor | null;
+export declare const rgbToHex: ({ r, g, b }: RgbColor) => string;
+export declare const rgbToChannels: ({ r, g, b }: RgbColor) => string;
+export declare const colorToHex: (input: ColorInput, fallback: string) => string;
+export declare const getContrastingColor: (color: ColorInput) => "#ffffff" | "#0d0d12";

package/dist/types-cjs/colorMath.d.cts

@@ -0,0 +1,3 @@
+export declare const changeTone: (hex: string, tone: number) => string;
+export declare const shiftHue: (hex: string, hueShift: number, tone: number, chromaMultiplier?: number) => string;
+export declare const getComplementaryColor: (hex: string) => string;

package/dist/types-cjs/colorSeeds.d.cts

@@ -0,0 +1,22 @@
+export declare const COLOR_SEEDS: {
+    readonly red: "#F44336";
+    readonly pink: "#E91E63";
+    readonly purple: "#9C27B0";
+    readonly deepPurple: "#673AB7";
+    readonly indigo: "#3F51B5";
+    readonly blue: "#2196F3";
+    readonly lightBlue: "#03A9F4";
+    readonly cyan: "#00BCD4";
+    readonly teal: "#009688";
+    readonly green: "#4CAF50";
+    readonly lightGreen: "#8BC34A";
+    readonly lime: "#CDDC39";
+    readonly yellow: "#FFEB3B";
+    readonly amber: "#FFC107";
+    readonly orange: "#FF9800";
+    readonly deepOrange: "#FF5722";
+    readonly brown: "#795548";
+    readonly grey: "#9E9E9E";
+    readonly blueGrey: "#607D8B";
+};
+export type ColorFamily = keyof typeof COLOR_SEEDS;

package/dist/types-cjs/colorSystem.d.cts

@@ -0,0 +1,20 @@
+import { type ColorPalettePair } from './palette.cjs';
+import type { ColorInput } from './color.cjs';
+import type { ThemeTokens } from './scheme.cjs';
+export interface ThemeColorDefinition {
+    color: ColorInput;
+    onColor?: ColorInput;
+    palette?: boolean;
+    gradient?: string | false;
+}
+export type ThemeColorValue = ColorInput | ThemeColorDefinition;
+export type ThemeColorExtensions = Record<string, ThemeColorValue>;
+export interface ColorSystem {
+    colors: ThemeTokens;
+    gradients: ThemeTokens;
+    palettes: Record<string, ColorPalettePair>;
+}
+export interface ColorSystemOptions {
+    colors?: ThemeColorExtensions;
+}
+export declare const createColorSystem: (seed: ColorInput, options?: ColorSystemOptions) => ColorSystem;

package/dist/types-cjs/constants.d.cts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_GRADIENT_DIRECTION = 135;
+export declare const DEFAULT_GRADIENT_POSITION = "center";
+export declare const DEFAULT_GRADIENT_SIZE = "farthest-corner";

package/dist/types-cjs/core.d.cts

@@ -0,0 +1,9 @@
+import { type ColorPalette } from './palette.cjs';
+import type { ColorInput } from './color.cjs';
+import type { GradientOptions } from './types.cjs';
+export * from './types.cjs';
+export { createGradientModel, createGradientModelFromColor } from './model.cjs';
+export { createRecipeStops, gradientRecipes } from './recipes.cjs';
+export { defineGradientPreset, defineGradientPresetRegistry, getGradientPreset, gradientPresets, type GradientPreset, type GradientPresetName, type GradientPresetRegistry } from './presets.cjs';
+export declare const createGradient: (palette: ColorPalette, options?: GradientOptions) => string;
+export declare const createGradientFromColor: (color: ColorInput, options?: GradientOptions) => string;

package/dist/types-cjs/designTokens.d.cts

@@ -0,0 +1,24 @@
+import { type ColorInput } from './color.cjs';
+import { type ColorSystem, type ThemeColorExtensions } from './colorSystem.cjs';
+import { type CreatedGradientTokens, type GradientTokenOptions } from './tokens.cjs';
+import { type ThemeMode, type ThemeTokens } from './scheme.cjs';
+export declare const DEFAULT_SEED = "#4e51ff";
+export interface DesignTokenOptions {
+    seed?: ColorInput;
+    mode?: ThemeMode;
+    colors?: ThemeColorExtensions;
+    gradientTokens?: GradientTokenOptions;
+}
+export interface CreatedDesignTokens {
+    seed: string;
+    mode: ThemeMode;
+    tokens: {
+        theme: ThemeTokens;
+        colors: ThemeTokens;
+        gradients: ThemeTokens;
+    };
+    colorSystem: ColorSystem;
+    gradientTokens: CreatedGradientTokens;
+}
+export declare const normalizeDesignTokenSeed: (seed?: ColorInput) => string;
+export declare const createDesignTokens: (options?: DesignTokenOptions) => CreatedDesignTokens;

package/dist/types-cjs/effects/index.d.cts

@@ -0,0 +1,2 @@
+export { createGradientMorphBlobs, isGradientMorphBlendMode, resolveGradientMorphBlendMode, toGradientMorphCSS, toGradientMorphFilter, toGradientMorphFilterMarkup, toGradientMorphMarkup } from './morph.cjs';
+export { toGradientBoxShadow, toGradientDropShadow } from './shadow.cjs';

package/dist/types-cjs/effects/morph.d.cts

@@ -0,0 +1,8 @@
+import type { GradientModel, GradientMorphBlob, GradientMorphBlendMode, GradientMorphMarkupOptions, GradientMorphOptions } from '../types.cjs';
+export declare const isGradientMorphBlendMode: (value: string) => value is GradientMorphBlendMode;
+export declare const resolveGradientMorphBlendMode: (value: string | undefined) => GradientMorphBlendMode;
+export declare const createGradientMorphBlobs: (model: GradientModel, options?: GradientMorphOptions) => GradientMorphBlob[];
+export declare const toGradientMorphFilter: (options?: GradientMorphOptions) => string;
+export declare const toGradientMorphFilterMarkup: (options?: GradientMorphOptions) => string;
+export declare const toGradientMorphCSS: (model: GradientModel, options?: GradientMorphOptions) => string;
+export declare const toGradientMorphMarkup: (model: GradientModel, options?: GradientMorphMarkupOptions) => string;

package/dist/types-cjs/effects/shadow.d.cts

@@ -0,0 +1,3 @@
+import type { GradientModel, GradientShadowOptions } from '../types.cjs';
+export declare const toGradientBoxShadow: (model: GradientModel, options?: GradientShadowOptions) => string;
+export declare const toGradientDropShadow: (model: GradientModel, options?: GradientShadowOptions) => string;

package/dist/types-cjs/formatters/canvas.d.cts

@@ -0,0 +1,2 @@
+import type { CanvasGradientOptions, GradientModel } from '../types.cjs';
+export declare const toCanvasGradient: (context: CanvasRenderingContext2D, model: GradientModel, options?: CanvasGradientOptions) => CanvasGradient;

package/dist/types-cjs/formatters/css.d.cts

@@ -0,0 +1,3 @@
+import type { GradientDirection, GradientModel } from '../types.cjs';
+export declare const createLinearGradient: (stops: readonly string[], direction?: GradientDirection) => string;
+export declare const toCssGradient: (model: GradientModel) => string;

package/dist/types-cjs/formatters/index.d.cts

@@ -0,0 +1,3 @@
+export { createLinearGradient, toCssGradient } from './css.cjs';
+export { toCanvasGradient } from './canvas.cjs';
+export { toSvgGradient, toSvgGradientMarkup, toSvgPathAnimationMarkup, toSvgSourceAnimationMarkup } from './svg.cjs';

package/dist/types-cjs/formatters/svg.d.cts

@@ -0,0 +1,5 @@
+import type { GradientModel, SvgGradientOptions, SvgPathAnimationOptions, SvgSourceAnimationOptions } from '../types.cjs';
+export declare const toSvgGradient: (model: GradientModel, options?: SvgGradientOptions) => string;
+export declare const toSvgGradientMarkup: (model: GradientModel, options?: SvgGradientOptions) => string;
+export declare const toSvgSourceAnimationMarkup: (sourceSvg: string, model: GradientModel, options?: SvgSourceAnimationOptions) => string;
+export declare const toSvgPathAnimationMarkup: (model: GradientModel, options?: SvgPathAnimationOptions) => string;

package/dist/types-cjs/index.d.cts

@@ -0,0 +1,11 @@
+export * from './core.cjs';
+export * from './color.cjs';
+export * from './colorSeeds.cjs';
+export * from './colorSystem.cjs';
+export * from './palette.cjs';
+export * from './scheme.cjs';
+export * from './formatters/index.cjs';
+export * from './effects/index.cjs';
+export { toGradientAnimationCSS } from './animation/index.cjs';
+export * from './material.cjs';
+export * from './designTokens.cjs';

package/dist/types-cjs/material.d.cts

@@ -0,0 +1 @@
+export { createGradientMaterial, createGradientPreset, createGradientTokens, clearGradientMaterialCache, getGradientMaterialCacheStats, setGradientMaterialCacheLimit, type CreatedGradientMaterial, type CreatedGradientPreset, type CreatedGradientTokens, type GradientAnimationTokenEntry, type GradientEffectTokenEntry, type GradientMaterialOptions, type GradientTokenEntry, type GradientTokenOptions, type GradientTokenRecipe } from './tokens.cjs';

package/dist/types-cjs/model.d.cts

@@ -0,0 +1,5 @@
+import { type ColorPalette } from './palette.cjs';
+import type { GradientModel, GradientOptions } from './types.cjs';
+import type { ColorInput } from './color.cjs';
+export declare const createGradientModel: (palette: ColorPalette, options?: GradientOptions) => GradientModel;
+export declare const createGradientModelFromColor: (color: ColorInput, options?: GradientOptions) => GradientModel;

package/dist/types-cjs/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "commonjs"
+}