@gradient-ui/gradient-engine 0.5.0

package/dist/types/types.d.ts

@@ -0,0 +1,117 @@
+import type { ColorShade } from './palette';
+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';
+export type GradientShape = 'circle' | 'ellipse';
+export type GradientAnimationPreset = 'shift' | 'pulse' | 'rotate' | 'hue-rotate';
+export interface GradientStop {
+    color: string;
+    position: number;
+    opacity?: number;
+}
+export interface GradientModel {
+    type: GradientType;
+    stops: GradientStop[];
+    direction: GradientDirection;
+    shape?: GradientShape;
+    position?: string;
+    size?: string;
+}
+export interface GradientOptions {
+    direction?: GradientDirection;
+    recipe?: GradientRecipe;
+    shade?: ColorShade;
+    type?: GradientType;
+    shape?: GradientShape;
+    position?: string;
+    size?: string;
+    colors?: readonly string[];
+}
+export interface GradientShadowOptions {
+    x?: number | string;
+    y?: number | string;
+    blur?: number | string;
+    spread?: number | string;
+    opacity?: number;
+    layers?: number;
+}
+export type GradientMorphPreset = 'soft' | 'liquid' | 'ripple';
+export interface GradientMorphOptions {
+    id?: string;
+    preset?: GradientMorphPreset;
+    blobCount?: number;
+    blur?: number;
+    contrast?: number;
+    duration?: number | string;
+    opacity?: number;
+    scale?: number;
+    selector?: string;
+}
+export interface GradientMorphBlob {
+    animationName: string;
+    blur: number;
+    color: string;
+    delay: number;
+    dx: number;
+    dx2: number;
+    dy: number;
+    dy2: number;
+    duration: number | string;
+    opacity: number;
+    originX: string;
+    originY: string;
+    rotateMid: number;
+    rotateTo: number;
+    scaleMid: number;
+    scaleTo: number;
+    size: number;
+    x: number;
+    y: number;
+}
+export interface SvgGradientOptions {
+    id?: string;
+    width?: number;
+    height?: number;
+    rx?: number;
+    x1?: string;
+    x2?: string;
+    y1?: string;
+    y2?: string;
+    cx?: string;
+    cy?: string;
+    r?: string;
+}
+export interface SvgPathAnimationOptions extends SvgGradientOptions {
+    path?: string;
+    strokeWidth?: number;
+    linecap?: 'butt' | 'round' | 'square';
+    duration?: number | string;
+    repeatCount?: number | string;
+    backgroundStroke?: string;
+    activeStroke?: string;
+    backgroundOpacity?: number;
+}
+export interface SvgSourceAnimationOptions extends SvgPathAnimationOptions {
+    normalizeStrokeWidth?: boolean;
+    sourceOpacity?: number;
+    viewBoxPadding?: number | false;
+    strokeWidthBase?: number;
+}
+export interface CanvasGradientOptions {
+    x0?: number;
+    y0?: number;
+    x1?: number;
+    y1?: number;
+    r0?: number;
+    r1?: number;
+    startAngle?: number;
+    width?: number;
+    height?: number;
+}
+export interface GradientAnimationOptions {
+    name?: string;
+    preset?: GradientAnimationPreset;
+    duration?: number | string;
+    easing?: string;
+    selector?: string;
+}

package/dist/types/utils.d.ts

@@ -0,0 +1,10 @@
+import type { GradientDirection, GradientStop } from './types';
+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;
+export declare const toCssDuration: (value: number | string) => string;
+export declare const clamp: (value: number, min?: number, max?: number) => number;
+export declare const toCssColor: (color: string, opacity?: number) => string;
+export declare const formatStop: ({ color, opacity, position }: GradientStop) => string;
+export declare const createStop: (color: string, position: number, opacity?: number) => GradientStop;
+export declare const getConicStops: (stops: readonly GradientStop[]) => readonly GradientStop[];

package/dist/utils-6iJ6IpZZ.cjs

@@ -0,0 +1 @@
+"use strict";const s=(t,r=0,o=1)=>Math.min(o,Math.max(r,t)),T=t=>{const r=t.slice(1),o=r.length===3||r.length===4?r.slice(0,3).split("").map(n=>n.repeat(2)).join(""):r.slice(0,6);return o.length!==6||!/^[\da-f]{6}$/i.test(o)?null:{r:parseInt(o.slice(0,2),16),g:parseInt(o.slice(2,4),16),b:parseInt(o.slice(4,6),16)}},m=t=>{const r=t.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i);return r?{r:s(Number(r[1]),0,255),g:s(Number(r[2]),0,255),b:s(Number(r[3]),0,255)}:null},e=t=>{if(typeof t=="number"){const o=t&16777215;return{r:o>>16&255,g:o>>8&255,b:o&255}}const r=t.trim();return r.startsWith("#")?T(r):r.toLowerCase().startsWith("rgb")?m(r):null},a=({r:t,g:r,b:o})=>`#${[t,r,o].map(n=>Math.round(n).toString(16).padStart(2,"0")).join("")}`,c=({r:t,g:r,b:o})=>`${Math.round(t)}, ${Math.round(r)}, ${Math.round(o)}`,p=(t,r)=>{const o=e(t)??e(r);if(!o)throw new Error(`Invalid fallback color: ${r}`);return a(o)};const u="center",I="farthest-corner",D=(t=135)=>typeof t=="number"?`${t}deg`:t,h=t=>typeof t=="number"?`${t}px`:t,E=t=>typeof t=="number"?`${t}ms`:t,i=(t,r=0,o=1)=>Math.min(o,Math.max(r,t)),l=(t,r)=>{if(r===void 0)return t;const o=e(t);return o?`rgb(${c(o).replace(/,/g,"")} / ${i(r)})`:t},g=({color:t,opacity:r,position:o})=>`${l(t,r)} ${o}%`,f=(t,r,o)=>({color:t,position:r}),C=t=>{if(t.length<=1)return t;const r=t.map(n=>({...n,position:n.position/2})),o=[...t].reverse().map(n=>({...n,position:100-n.position/2}));return[...r,...o]};exports.DEFAULT_GRADIENT_DIRECTION=135;exports.DEFAULT_GRADIENT_POSITION=u;exports.DEFAULT_GRADIENT_SIZE=I;exports.clamp=i;exports.colorToHex=p;exports.createStop=f;exports.formatStop=g;exports.getConicStops=C;exports.normalizeDirection=D;exports.parseColor=e;exports.rgbToChannels=c;exports.rgbToHex=a;exports.toCssColor=l;exports.toCssDuration=E;exports.toCssLength=h;

package/dist/utils-B_VQDGMy.js

@@ -0,0 +1,67 @@
+const e = (t, r = 0, n = 1) => Math.min(n, Math.max(r, t)), a = (t) => {
+  const r = t.slice(1), n = r.length === 3 || r.length === 4 ? r.slice(0, 3).split("").map((s) => s.repeat(2)).join("") : r.slice(0, 6);
+  return n.length !== 6 || !/^[\da-f]{6}$/i.test(n) ? null : {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16)
+  };
+}, c = (t) => {
+  const r = t.match(
+    /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i
+  );
+  return r ? {
+    r: e(Number(r[1]), 0, 255),
+    g: e(Number(r[2]), 0, 255),
+    b: e(Number(r[3]), 0, 255)
+  } : null;
+}, o = (t) => {
+  if (typeof t == "number") {
+    const n = t & 16777215;
+    return {
+      r: n >> 16 & 255,
+      g: n >> 8 & 255,
+      b: n & 255
+    };
+  }
+  const r = t.trim();
+  return r.startsWith("#") ? a(r) : r.toLowerCase().startsWith("rgb") ? c(r) : null;
+}, i = ({ r: t, g: r, b: n }) => `#${[t, r, n].map((s) => Math.round(s).toString(16).padStart(2, "0")).join("")}`, l = ({ r: t, g: r, b: n }) => `${Math.round(t)}, ${Math.round(r)}, ${Math.round(n)}`, p = (t, r) => {
+  const n = o(t) ?? o(r);
+  if (!n)
+    throw new Error(`Invalid fallback color: ${r}`);
+  return i(n);
+}, h = 135, f = "center", g = "farthest-corner", b = (t = 135) => typeof t == "number" ? `${t}deg` : t, d = (t) => typeof t == "number" ? `${t}px` : t, I = (t) => typeof t == "number" ? `${t}ms` : t, u = (t, r = 0, n = 1) => Math.min(n, Math.max(r, t)), m = (t, r) => {
+  if (r === void 0) return t;
+  const n = o(t);
+  return n ? `rgb(${l(n).replace(/,/g, "")} / ${u(r)})` : t;
+}, $ = ({ color: t, opacity: r, position: n }) => `${m(t, r)} ${n}%`, T = (t, r, n) => ({
+  color: t,
+  position: r
+}), D = (t) => {
+  if (t.length <= 1) return t;
+  const r = t.map((s) => ({
+    ...s,
+    position: s.position / 2
+  })), n = [...t].reverse().map((s) => ({
+    ...s,
+    position: 100 - s.position / 2
+  }));
+  return [...r, ...n];
+};
+export {
+  h as D,
+  i as a,
+  u as b,
+  p as c,
+  g as d,
+  f as e,
+  $ as f,
+  D as g,
+  T as h,
+  m as i,
+  d as j,
+  b as n,
+  o as p,
+  l as r,
+  I as t
+};

package/package.json

@@ -0,0 +1,114 @@
+{
+	"name": "@gradient-ui/gradient-engine",
+	"version": "0.5.0",
+	"private": false,
+	"type": "module",
+	"description": "Framework-free gradient generation engine for CSS, SVG, canvas, effects and material tokens.",
+	"license": "MIT",
+	"author": "David Aliev",
+	"keywords": [
+		"gradient",
+		"gradients",
+		"css-gradient",
+		"svg-gradient",
+		"canvas-gradient",
+		"color",
+		"color-palette",
+		"material-you",
+		"design-system",
+		"animation",
+		"effects",
+		"typescript",
+		"framework-agnostic"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Deadida322/gradientUi.git",
+		"directory": "packages/gradient-engine"
+	},
+	"bugs": {
+		"url": "https://github.com/Deadida322/gradientUi/issues"
+	},
+	"homepage": "https://gradient-ui-docs.netlify.app/docs/gradient-engine",
+	"sideEffects": false,
+	"engines": {
+		"node": ">=18"
+	},
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.mjs",
+	"types": "./dist/types/index.d.ts",
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
+		},
+		"./core": {
+			"types": "./dist/types/core.d.ts",
+			"import": "./dist/core.mjs",
+			"require": "./dist/core.cjs"
+		},
+		"./formatters": {
+			"types": "./dist/types/formatters/index.d.ts",
+			"import": "./dist/formatters.mjs",
+			"require": "./dist/formatters.cjs"
+		},
+		"./effects": {
+			"types": "./dist/types/effects/index.d.ts",
+			"import": "./dist/effects.mjs",
+			"require": "./dist/effects.cjs"
+		},
+		"./animation": {
+			"types": "./dist/types/animation/index.d.ts",
+			"import": "./dist/animation.mjs",
+			"require": "./dist/animation.cjs"
+		},
+		"./material": {
+			"types": "./dist/types/material.d.ts",
+			"import": "./dist/material.mjs",
+			"require": "./dist/material.cjs"
+		},
+		"./package.json": "./package.json"
+	},
+	"typesVersions": {
+		"*": {
+			"core": [
+				"dist/types/core.d.ts"
+			],
+			"formatters": [
+				"dist/types/formatters/index.d.ts"
+			],
+			"effects": [
+				"dist/types/effects/index.d.ts"
+			],
+			"animation": [
+				"dist/types/animation/index.d.ts"
+			],
+			"material": [
+				"dist/types/material.d.ts"
+			],
+			"*": [
+				"dist/types/index.d.ts"
+			]
+		}
+	},
+	"scripts": {
+		"build": "vite build --config vite.config.ts && tsc -p tsconfig.json --emitDeclarationOnly",
+		"pack:dry": "npm pack --dry-run",
+		"type-check": "tsc -p tsconfig.json --noEmit"
+	},
+	"dependencies": {
+		"@material/material-color-utilities": "^0.4.0"
+	},
+	"devDependencies": {
+		"typescript": "^5.5.4",
+		"vite": "^5.4.1"
+	}
+}