real-time-gradient 1.0.1 → 1.0.2

package/README.md

@@ -176,56 +176,69 @@ gradient.triggerEffect({ hue: "gold", duration: 2000 });
 
 ```ts
 // index.d.ts
-declare module "real-time-gradient" {
-  type GradientType = "linear" | "radial";
+export type GradientType = "linear" | "radial";
 
-  type HuePreset = "white" | "black" | "gold" | "silver" | string;
-  // string allows custom hex codes "#RRGGBB"
+export type HuePreset = "white" | "black" | "gold" | "silver" | string;
 
-  interface ScheduleEntry {
-    time: string; // "HH:MM" in 24h format
-    colors: string[]; // array of CSS color values
-    type?: GradientType;
-    direction?: string;
+export interface ScheduleEntry {
+  time: string;
+  colors: string[];
+}
+
+export interface GradientOptions {
+  type?: GradientType;
+  direction?: string;
+  colors?: string[];
+  transitionDuration?: number;
+  schedule?: ScheduleEntry[];
+  textClip?: boolean;
+}
+
+export interface EffectOptions {
+  applyColors?: string[];
+  duration?: number;
+  hue?: HuePreset;
+}
+
+export class DynamicGradient {
+  private container: HTMLElement;
+  private options: GradientOptions;
+
+  constructor(container: string | HTMLElement, options: GradientOptions = {}) {
+    this.container =
+      typeof container === "string"
+        ? (document.querySelector(container) as HTMLElement)
+        : container;
+
+    this.options = options;
+  }
+
+  static init(container: string | HTMLElement, options?: GradientOptions) {
+    return new DynamicGradient(container, options);
   }
 
-  interface GradientOptions {
+  setGradient(options: {
+    colors: string[];
     type?: GradientType;
     direction?: string;
-    colors?: string[];
-    transitionDuration?: number;
-    schedule?: ScheduleEntry[];
-    textClip?: boolean;
+  }): void {
+    // implementation
   }
 
-  interface EffectOptions {
-    applyColors?: string[];
-    duration?: number;
-    hue?: HuePreset;
+  schedule(entries: ScheduleEntry[]): void {
+    // implementation
   }
 
-  export class DynamicGradient {
-    constructor(container: string | HTMLElement, options?: GradientOptions);
-
-    static init(
-      container: string | HTMLElement,
-      options?: GradientOptions
-    ): DynamicGradient;
-
-    setGradient(options: {
-      colors: string[];
-      type?: GradientType;
-      direction?: string;
-    }): void;
-
-    schedule(entries: ScheduleEntry[]): void;
-
-    triggerEffect(options?: EffectOptions): void;
+  triggerEffect(options?: EffectOptions): void {
+    // implementation
+  }
 
-    persistEffect(colors: string[], duration?: number): void;
+  persistEffect(colors: string[], duration?: number): void {
+    // implementation
+  }
 
-    stopEffects(): void;
-    destroy(): void;
+  stopEffects(): void {
+    // implementation
   }
 }
 ```

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export type GradientType = "linear" | "radial";
-export type HuePreset = "white" | "black" | "gold" | "silver" | string;
 export interface ScheduleEntry {
     time: string;
     colors: string[];
+    type?: GradientType;
+    direction?: string;
 }
 export interface GradientOptions {
     type?: GradientType;
@@ -15,20 +16,10 @@ export interface GradientOptions {
 export interface EffectOptions {
     applyColors?: string[];
     duration?: number;
-    hue?: HuePreset;
-}
-export declare class DynamicGradient {
-    private container;
-    private options;
-    constructor(container: string | HTMLElement, options?: GradientOptions);
-    static init(container: string | HTMLElement, options?: GradientOptions): DynamicGradient;
-    setGradient(options: {
-        colors: string[];
-        type?: GradientType;
-        direction?: string;
-    }): void;
-    schedule(entries: ScheduleEntry[]): void;
-    triggerEffect(options?: EffectOptions): void;
-    persistEffect(colors: string[], duration?: number): void;
-    stopEffects(): void;
+    hue?: "white" | "black" | "gold" | "silver" | string;
+    loop?: boolean;
 }
+export declare const DynamicGradient: {
+    new (container: string | HTMLElement, options?: GradientOptions): any;
+    init(container: string | HTMLElement, options?: GradientOptions): any;
+};

package/dist/index.es.js

@@ -1,21 +1,225 @@
-class s {
-  constructor(t, e = {}) {
-    this.container = typeof t == "string" ? document.querySelector(t) : t, this.options = e;
+function c(n, e = "linear", t = "to right") {
+  return e === "linear" ? `linear-gradient(${t}, ${n.join(",")})` : `radial-gradient(circle, ${n.join(",")})`;
+}
+function f(n, e, t) {
+  const i = document.createElement("div");
+  return Object.assign(i.style, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: 0,
+    background: e,
+    opacity: "0",
+    transition: `opacity ${t}ms ease-in-out`
+  }), n.appendChild(i), i;
+}
+function v(n, e, t) {
+  const i = document.createElement("span");
+  i.textContent = n.textContent, Object.assign(i.style, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: "inline-block",
+    background: e,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    pointerEvents: "none",
+    opacity: "0",
+    transition: `opacity ${t}ms ease-in-out`,
+    zIndex: 20
+  });
+  const s = n.parentNode;
+  return getComputedStyle(s).position === "static" && (s.style.position = "relative"), s.appendChild(i), requestAnimationFrame(() => {
+    i.style.opacity = "1";
+  }), i;
+}
+function b(n, e) {
+  if (n.__dgTextFx && n.__dgTextFx.duration !== e) {
+    const { a: o, b: a } = n.__dgTextFx;
+    return o.style.transition = a.style.transition = `opacity ${e}ms ease-in-out`, n.__dgTextFx.duration = e, n.__dgTextFx;
   }
-  static init(t, e) {
-    return new s(t, e);
+  if (n.__dgTextFx) return n.__dgTextFx;
+  const t = n.parentNode;
+  getComputedStyle(t).position === "static" && (t.style.position = "relative");
+  const i = (o) => {
+    const a = document.createElement("span");
+    return a.textContent = n.textContent, Object.assign(a.style, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "inline-block",
+      WebkitBackgroundClip: "text",
+      backgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      color: "transparent",
+      pointerEvents: "none",
+      opacity: "0",
+      willChange: "opacity",
+      zIndex: o,
+      transition: `opacity ${e}ms ease-in-out`
+    }), t.appendChild(a), a;
+  }, s = i(20), r = i(21);
+  return n.__dgTextFx = { a: s, b: r, visible: null, duration: e }, n.__dgTextFx;
+}
+function k() {
+  const n = /* @__PURE__ */ new Date();
+  return `${String(n.getHours()).padStart(2, "0")}:${String(
+    n.getMinutes()
+  ).padStart(2, "0")}`;
+}
+function C(n, e) {
+  if (!n.length) return null;
+  let t = n[0];
+  for (let i = 0; i < n.length; i++)
+    e >= n[i].time && (t = n[i]);
+  return e < n[0].time && (t = n[n.length - 1]), t;
+}
+const p = {
+  white: "#ffffff",
+  black: "#000000",
+  gold: "#ffe864ff",
+  silver: "#d4d4d4ff"
+};
+let I = class g {
+  constructor(e, t = {}) {
+    if (this.container = typeof e == "string" ? document.querySelector(e) : e, !this.container)
+      throw new Error("DynamicGradient: container not found.");
+    this.type = t.type || "linear", this.direction = t.direction || "to right", this.colors = t.colors || ["#1e3c72", "#2a5298"], this.transitionDuration = t.transitionDuration ?? 1500, this.textClip = t.textClip || !1, this.scheduleData = t.schedule || [], this.currentInterval = null, this.lastAppliedKey = null, this.container.style.position = this.container.style.position || "relative", this.applyGradient(this.colors, this.type, this.direction, !1), this.scheduleData.length > 0 && this.schedule(this.scheduleData);
   }
-  setGradient(t) {
+  /** Apply gradient with optional transition */
+  applyGradient(e = this.colors, t = this.type, i = this.direction, s = !0) {
+    const r = c(e, t, i), o = this.container.style.background;
+    r !== o && (this.textClip ? (v(
+      this.container,
+      r,
+      this.transitionDuration
+    ), this.container.style.fontWeight = "inherit") : s ? (this.transitionOverlay && this.transitionOverlay.remove(), this.transitionOverlay = f(
+      this.container,
+      r,
+      this.transitionDuration
+    ), requestAnimationFrame(() => {
+      this.transitionOverlay.style.opacity = "1";
+    }), setTimeout(() => {
+      this.container.style.background = r, this.transitionOverlay.remove(), this.transitionOverlay = null;
+    }, this.transitionDuration)) : this.container.style.background = r, this.colors = e, this.type = t, this.direction = i);
   }
-  schedule(t) {
+  /** Allow toggling text-clip dynamically */
+  setTextClip(e = !0) {
+    this.textClip = e, this.applyGradient(this.colors, this.type, this.direction, !1);
   }
-  triggerEffect(t) {
+  /** Trigger a temporary animated effect */
+  triggerEffect({
+    applyColors: e = null,
+    duration: t = this.transitionDuration,
+    loop: i = !0,
+    hue: s = "white"
+  } = {}) {
+    let r;
+    p[s] ? r = p[s] : /^#([0-9A-F]{3}){1,2}$/i.test(s) ? r = s : r = "#ffffff";
+    const o = e ? c(e, this.type, this.direction) : c([...this.colors, r], this.type, this.direction);
+    if (this.textClip) {
+      const y = b(this.container, t), d = () => {
+        const { a: h, b: m, visible: x } = y, l = x === "a" ? m : h, T = e ? c(e, this.type, this.direction) : c(
+          [...this.colors, p[s] || r],
+          this.type,
+          this.direction
+        );
+        l.style.background = T, l.style.backgroundClip = "text", l.style.transition = `opacity ${t}ms ease-in-out`, l.style.opacity = "0", requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            l.style.opacity = "1";
+          });
+        }), setTimeout(() => {
+          l.style.opacity = "0";
+        }, t), y.visible = l === h ? "a" : "b", i ? (this.effectLoopTimeout && clearTimeout(this.effectLoopTimeout), this.effectLoopTimeout = setTimeout(d, t * 2)) : setTimeout(() => {
+          this.applyGradient(
+            e || this.colors,
+            this.type,
+            this.direction,
+            !1
+          ), h.style.opacity = "0", m.style.opacity = "0";
+        }, t * 2);
+      };
+      d();
+      return;
+    }
+    this.effectOverlay || (this.effectOverlay = f(
+      this.container,
+      o,
+      t
+    ));
+    const a = this.effectOverlay, u = () => {
+      a.style.background = o, a.style.opacity = "1", setTimeout(() => {
+        a.style.opacity = "0";
+      }, t);
+    };
+    this.effectRunning || (this.effectRunning = !0, u(), i ? (this.effectLoopInterval && clearInterval(this.effectLoopInterval), this.effectLoopInterval = setInterval(u, t * 2)) : setTimeout(() => {
+      a.remove(), this.effectOverlay = null;
+    }, t * 2));
   }
-  persistEffect(t, e) {
+  persistEffect(e = this.colors, t = this.transitionDuration) {
+    const i = c(
+      e,
+      this.type,
+      this.direction
+    );
+    if (this.textClip) {
+      const s = v(
+        this.container,
+        i,
+        t
+      );
+      requestAnimationFrame(() => {
+        s.style.opacity = "1";
+      }), setTimeout(() => {
+        this.applyGradient(e, this.type, this.direction, !1);
+      }, t);
+    } else {
+      const s = f(this.container, i, t);
+      requestAnimationFrame(() => {
+        s.style.opacity = "1";
+      }), setTimeout(() => {
+        this.applyGradient(e, this.type, this.direction, !1), s.remove();
+      }, t);
+    }
   }
   stopEffects() {
+    this.effectLoopInterval && (clearInterval(this.effectLoopInterval), this.effectLoopInterval = null), this.effectLoopTimeout && (clearTimeout(this.effectLoopTimeout), this.effectLoopTimeout = null), this.effectRunning = !1;
   }
-}
+  // ✅ added: cleanup method to prevent leaks
+  destroy() {
+    this.stopEffects(), this.currentInterval && (clearInterval(this.currentInterval), this.currentInterval = null), this.transitionOverlay && (this.transitionOverlay.remove(), this.transitionOverlay = null), this.effectOverlay && (this.effectOverlay.remove(), this.effectOverlay = null);
+  }
+  setGradient({ colors: e, type: t, direction: i }) {
+    const s = e || this.colors, r = t || this.type, o = i || this.direction;
+    s.join(",") === this.colors.join(",") && r === this.type && o === this.direction || this.applyGradient(s, r, o, !0);
+  }
+  schedule(e = []) {
+    this.scheduleData = e.map((t) => ({
+      ...t,
+      time: t.time.padStart(5, "0")
+    })).sort((t, i) => t.time.localeCompare(i.time)), this.currentInterval && clearInterval(this.currentInterval), this.checkSchedule(), this.currentInterval = setInterval(() => this.checkSchedule(), 60 * 1e3);
+  }
+  checkSchedule() {
+    const e = k(), t = C(this.scheduleData, e);
+    if (t) {
+      const i = `${t.time}-${t.colors.join(",")}`;
+      i !== this.lastAppliedKey && (this.setGradient(t), this.lastAppliedKey = i);
+    }
+  }
+  static init(e, t) {
+    return new g(e, t);
+  }
+};
+const O = I;
 export {
-  s as DynamicGradient
+  O as DynamicGradient
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.RealTimeGradient={}))})(this,function(i){"use strict";class t{constructor(e,n={}){this.container=typeof e=="string"?document.querySelector(e):e,this.options=n}static init(e,n){return new t(e,n)}setGradient(e){}schedule(e){}triggerEffect(e){}persistEffect(e,n){}stopEffects(){}}i.DynamicGradient=t,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(h,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(h=typeof globalThis<"u"?globalThis:h||self,l(h.RealTimeGradient={}))})(this,function(h){"use strict";function l(n,e="linear",t="to right"){return e==="linear"?`linear-gradient(${t}, ${n.join(",")})`:`radial-gradient(circle, ${n.join(",")})`}function f(n,e,t){const i=document.createElement("div");return Object.assign(i.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:0,background:e,opacity:"0",transition:`opacity ${t}ms ease-in-out`}),n.appendChild(i),i}function y(n,e,t){const i=document.createElement("span");i.textContent=n.textContent,Object.assign(i.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"inline-block",background:e,WebkitBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent",pointerEvents:"none",opacity:"0",transition:`opacity ${t}ms ease-in-out`,zIndex:20});const s=n.parentNode;return getComputedStyle(s).position==="static"&&(s.style.position="relative"),s.appendChild(i),requestAnimationFrame(()=>{i.style.opacity="1"}),i}function T(n,e){if(n.__dgTextFx&&n.__dgTextFx.duration!==e){const{a:o,b:a}=n.__dgTextFx;return o.style.transition=a.style.transition=`opacity ${e}ms ease-in-out`,n.__dgTextFx.duration=e,n.__dgTextFx}if(n.__dgTextFx)return n.__dgTextFx;const t=n.parentNode;getComputedStyle(t).position==="static"&&(t.style.position="relative");const i=o=>{const a=document.createElement("span");return a.textContent=n.textContent,Object.assign(a.style,{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"inline-block",WebkitBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent",pointerEvents:"none",opacity:"0",willChange:"opacity",zIndex:o,transition:`opacity ${e}ms ease-in-out`}),t.appendChild(a),a},s=i(20),r=i(21);return n.__dgTextFx={a:s,b:r,visible:null,duration:e},n.__dgTextFx}function b(){const n=new Date;return`${String(n.getHours()).padStart(2,"0")}:${String(n.getMinutes()).padStart(2,"0")}`}function k(n,e){if(!n.length)return null;let t=n[0];for(let i=0;i<n.length;i++)e>=n[i].time&&(t=n[i]);return e<n[0].time&&(t=n[n.length-1]),t}const u={white:"#ffffff",black:"#000000",gold:"#ffe864ff",silver:"#d4d4d4ff"},C=class x{constructor(e,t={}){if(this.container=typeof e=="string"?document.querySelector(e):e,!this.container)throw new Error("DynamicGradient: container not found.");this.type=t.type||"linear",this.direction=t.direction||"to right",this.colors=t.colors||["#1e3c72","#2a5298"],this.transitionDuration=t.transitionDuration??1500,this.textClip=t.textClip||!1,this.scheduleData=t.schedule||[],this.currentInterval=null,this.lastAppliedKey=null,this.container.style.position=this.container.style.position||"relative",this.applyGradient(this.colors,this.type,this.direction,!1),this.scheduleData.length>0&&this.schedule(this.scheduleData)}applyGradient(e=this.colors,t=this.type,i=this.direction,s=!0){const r=l(e,t,i),o=this.container.style.background;r!==o&&(this.textClip?(y(this.container,r,this.transitionDuration),this.container.style.fontWeight="inherit"):s?(this.transitionOverlay&&this.transitionOverlay.remove(),this.transitionOverlay=f(this.container,r,this.transitionDuration),requestAnimationFrame(()=>{this.transitionOverlay.style.opacity="1"}),setTimeout(()=>{this.container.style.background=r,this.transitionOverlay.remove(),this.transitionOverlay=null},this.transitionDuration)):this.container.style.background=r,this.colors=e,this.type=t,this.direction=i)}setTextClip(e=!0){this.textClip=e,this.applyGradient(this.colors,this.type,this.direction,!1)}triggerEffect({applyColors:e=null,duration:t=this.transitionDuration,loop:i=!0,hue:s="white"}={}){let r;u[s]?r=u[s]:/^#([0-9A-F]{3}){1,2}$/i.test(s)?r=s:r="#ffffff";const o=e?l(e,this.type,this.direction):l([...this.colors,r],this.type,this.direction);if(this.textClip){const m=T(this.container,t),v=()=>{const{a:p,b:g,visible:O}=m,c=O==="a"?g:p,I=e?l(e,this.type,this.direction):l([...this.colors,u[s]||r],this.type,this.direction);c.style.background=I,c.style.backgroundClip="text",c.style.transition=`opacity ${t}ms ease-in-out`,c.style.opacity="0",requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.style.opacity="1"})}),setTimeout(()=>{c.style.opacity="0"},t),m.visible=c===p?"a":"b",i?(this.effectLoopTimeout&&clearTimeout(this.effectLoopTimeout),this.effectLoopTimeout=setTimeout(v,t*2)):setTimeout(()=>{this.applyGradient(e||this.colors,this.type,this.direction,!1),p.style.opacity="0",g.style.opacity="0"},t*2)};v();return}this.effectOverlay||(this.effectOverlay=f(this.container,o,t));const a=this.effectOverlay,d=()=>{a.style.background=o,a.style.opacity="1",setTimeout(()=>{a.style.opacity="0"},t)};this.effectRunning||(this.effectRunning=!0,d(),i?(this.effectLoopInterval&&clearInterval(this.effectLoopInterval),this.effectLoopInterval=setInterval(d,t*2)):setTimeout(()=>{a.remove(),this.effectOverlay=null},t*2))}persistEffect(e=this.colors,t=this.transitionDuration){const i=l(e,this.type,this.direction);if(this.textClip){const s=y(this.container,i,t);requestAnimationFrame(()=>{s.style.opacity="1"}),setTimeout(()=>{this.applyGradient(e,this.type,this.direction,!1)},t)}else{const s=f(this.container,i,t);requestAnimationFrame(()=>{s.style.opacity="1"}),setTimeout(()=>{this.applyGradient(e,this.type,this.direction,!1),s.remove()},t)}}stopEffects(){this.effectLoopInterval&&(clearInterval(this.effectLoopInterval),this.effectLoopInterval=null),this.effectLoopTimeout&&(clearTimeout(this.effectLoopTimeout),this.effectLoopTimeout=null),this.effectRunning=!1}destroy(){this.stopEffects(),this.currentInterval&&(clearInterval(this.currentInterval),this.currentInterval=null),this.transitionOverlay&&(this.transitionOverlay.remove(),this.transitionOverlay=null),this.effectOverlay&&(this.effectOverlay.remove(),this.effectOverlay=null)}setGradient({colors:e,type:t,direction:i}){const s=e||this.colors,r=t||this.type,o=i||this.direction;s.join(",")===this.colors.join(",")&&r===this.type&&o===this.direction||this.applyGradient(s,r,o,!0)}schedule(e=[]){this.scheduleData=e.map(t=>({...t,time:t.time.padStart(5,"0")})).sort((t,i)=>t.time.localeCompare(i.time)),this.currentInterval&&clearInterval(this.currentInterval),this.checkSchedule(),this.currentInterval=setInterval(()=>this.checkSchedule(),60*1e3)}checkSchedule(){const e=b(),t=k(this.scheduleData,e);if(t){const i=`${t.time}-${t.colors.join(",")}`;i!==this.lastAppliedKey&&(this.setGradient(t),this.lastAppliedKey=i)}}static init(e,t){return new x(e,t)}};h.DynamicGradient=C,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "real-time-gradient",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Dynamic Gradient background library.",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
     "build": "vite build"
   },