@radishon/lumina 1.0.9 → 1.1.1

package/dist/index.mjs

@@ -1,311 +1,36 @@
-// src/sequence.ts
-var SEQUENCES = {
-  claude: {
-    name: "CLAUDE \u8F68\u8FF9",
-    chars: ["\u2732", "\u2731", "\u273A", "\u273B", "\u273C", "\u273D", "\u273E"],
-    color: "#fadb14"
-  },
-  diamond: {
-    name: "\u83F1\u5F62\u8109\u51B2",
-    chars: ["\u25C7", "\u25C6", "\u25C8", "\u25C6", "\u25C7", "\u25C6", "\u25C8", "\u25C6"],
-    color: "#40a9ff"
-  },
-  circle: {
-    name: "\u67D4\u5149\u5706\u73AF",
-    chars: ["\xB7", "\u2219", "\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
-    color: "#b37feb"
-  },
-  step: {
-    name: "\u9636\u68AF\u8282\u594F",
-    chars: ["\u2591", "\u2592", "\u2593", "\u2588", "\u2593", "\u2592", "\u2591"],
-    color: "#73d13d"
-  },
-  flower: {
-    name: "\u5F00\u82B1\u7EFD\u653E",
-    chars: ["\u2740", "\u2741", "\u273F", "\u2743", "\u274B", "\u273E", "\u2740"],
-    color: "#ffadd2"
-  },
-  star: {
-    name: "\u661F\u8FB0\u56DE\u73AF",
-    chars: ["\u2726", "\u2727", "\u2729", "\u272A", "\u272B", "\u272C", "\u272D", "\u272E", "\u272F"],
-    color: "#ffffff"
-  },
-  snow: {
-    name: "\u96EA\u82B1\u6676\u683C",
-    chars: ["\xB7", "\u2744", "\u2745", "\u2746", "\u2744", "\u2745", "\u2746"],
-    color: "#e6f7ff"
-  },
-  spiral: {
-    name: "\u87BA\u65CB\u56DE\u58F0",
-    chars: ["\u25C9", "\u25CE", "\u25CB", "\u25CC", "\u25CD", "\u25CF", "\u25D0", "\u25D1"],
-    color: "#fadb14"
-  },
-  braille: {
-    name: "\u5E03\u83B1\u53F6\u7801",
-    chars: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
-    color: "#00ff00"
-  },
-  cypher: {
-    name: "\u5BC6\u7801\u77E9\u9635",
-    chars: ["\u259E", "\u259A", "\u259C", "\u2599", "\u259F", "\u259B"],
-    color: "#00d8ff"
-  },
-  moon: {
-    name: "\u6708\u76F8\u53D8\u5316",
-    chars: ["\u{1F311}", "\u{1F312}", "\u{1F313}", "\u{1F314}", "\u{1F315}", "\u{1F316}", "\u{1F317}", "\u{1F318}"],
-    color: "#fffae6"
-  },
-  wave: {
-    name: "\u6CE2\u6D6A\u8D77\u4F0F",
-    chars: ["_", "\u23BD", "\u23BC", "\u23BB", "\u23BA", "\u23BB", "\u23BC", "\u23BD"],
-    color: "#ff4d4f"
-  },
-  compass: {
-    name: "\u65B9\u5411\u7F57\u76D8",
-    chars: ["\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199", "\u2190", "\u2196"],
-    color: "#ff4500"
-  },
-  pixel: {
-    name: "\u50CF\u7D20\u65B9\u5757",
-    chars: ["\u25A3", "\u25A4", "\u25A5", "\u25A6", "\u25A7", "\u25A8", "\u25A9"],
-    color: "#722ed1"
-  },
-  clock: {
-    name: "\u65F6\u949F\u6307\u9488",
-    chars: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
-    color: "#ffbb96"
-  },
-  // 音乐风格
-  equalizer: {
-    name: "\u97F3\u9891\u5747\u8861",
-    chars: ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588", "\u2587", "\u2586", "\u2585", "\u2584"],
-    color: "#00bcd4"
-  },
-  waveform: {
-    name: "\u6CE2\u5F62\u632F\u8361",
-    chars: ["\u223F", "\u25E0", "\u25E1", "\u223F", "\u25E0", "\u25E1"],
-    color: "#ff5722"
-  },
-  // 游戏风格
-  dice: {
-    name: "\u9AB0\u5B50\u6EDA\u52A8",
-    chars: ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685", "\u2680", "\u2681"],
-    color: "#607d8b"
-  },
-  // 动态几何
-  bounce: {
-    name: "\u5F39\u8DF3\u7403",
-    chars: ["\u2801", "\u2803", "\u2807", "\u2847", "\u28C7", "\u28E7", "\u28F7", "\u28FF", "\u28F7", "\u28E7", "\u28C7", "\u2847"],
-    color: "#ff6b6b"
-  },
-  radar: {
-    name: "\u96F7\u8FBE\u626B\u63CF",
-    chars: ["\u25D0", "\u25D1", "\u25D2", "\u25D3", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
-    color: "#00d4aa"
-  },
-  // 数字符号
-  dots: {
-    name: "\u70B9\u9635\u547C\u5438",
-    chars: ["\xB7", "\u22EF", "\u22EF\u22EF", "\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7"],
-    color: "#4d96ff"
-  },
-  // 液体流体
-  liquid: {
-    name: "\u6DB2\u4F53\u6643\u52A8",
-    chars: ["\u223D", "\u223E", "\u223F", "\u223D", "\u223E", "\u223F", "\u2240", "\u223D"],
-    color: "#118ab2"
-  },
-  ripple: {
-    name: "\u6C34\u7EB9\u6269\u6563",
-    chars: ["\u25CB", "\u25CE", "\u25C9", "\u25CF", "\u25CB", "\u25CE", "\u25C9", "\u25CF"],
-    color: "#073b4c"
-  },
-  bubble: {
-    name: "\u6C14\u6CE1\u6D6E\u8D77",
-    chars: ["\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25CB", "\u2218"],
-    color: "#48cae4"
-  },
-  // 光谱渐变
-  gradient: {
-    name: "\u6E10\u53D8\u6761",
-    chars: ["\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588", "\u2589", "\u258A", "\u258B", "\u258C"],
-    color: "#ee82ee"
-  },
-  spectrum: {
-    name: "\u5149\u8C31\u626B\u63CF",
-    chars: ["\u2591\u2592\u2593", "\u2592\u2593\u2588", "\u2593\u2588\u2591", "\u2588\u2591\u2592", "\u2591\u2592\u2593", "\u2592\u2593\u2588"],
-    color: "#ff69b4"
-  },
-  // 中国传统
-  bagua: {
-    name: "\u516B\u5366",
-    chars: ["\u2630", "\u2631", "\u2632", "\u2633", "\u2634", "\u2635", "\u2636", "\u2637"],
-    color: "#8d6e63"
-  },
-  // 几何角落
-  corners: {
-    name: "\u89D2\u843D\u65CB\u8F6C",
-    chars: ["\u231C", "\u231D", "\u231F", "\u231E", "\u231C", "\u231D", "\u231F", "\u231E"],
-    color: "#80cbc4"
-  },
-  // 扑克纸牌
-  cards: {
-    name: "\u7EB8\u724C",
-    chars: ["\u{1F0A1}", "\u{1F0A2}", "\u{1F0A3}", "\u{1F0A4}", "\u{1F0A5}", "\u{1F0A6}", "\u{1F0A7}", "\u{1F0A8}"],
-    color: "#c62828"
-  },
-  // 装饰符号
-  ornament: {
-    name: "\u88C5\u9970\u7B26",
-    chars: ["\u2766", "\u2767", "\u2740", "\u273F", "\u2741", "\u2742", "\u2743", "\u2747", "\u2748"],
-    color: "#e91e63"
-  },
-  // 危险警告
-  radiation: {
-    name: "\u8F90\u5C04\u8B66\u544A",
-    chars: ["\u2622", "\u2623", "\u2620", "\u269B", "\u262E", "\u2622", "\u2623", "\u2620"],
-    color: "#76ff03"
-  }
-};
+import {
+  SEQUENCES
+} from "./chunk-QRENGH6F.mjs";
 
-// src/Lumina.ts
-var LuminaElement = class extends HTMLElement {
-  constructor() {
-    super();
-    this._index = 0;
-    this._timer = null;
-    this._div = null;
-    this.attachShadow({ mode: "open" });
-  }
-  static get observedAttributes() {
-    return ["type", "speed", "chars", "color"];
-  }
-  connectedCallback() {
-    this.render();
-    this.startAnimation();
-  }
-  disconnectedCallback() {
-    if (this._timer) {
-      clearInterval(this._timer);
-    }
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      if (name === "speed" && this._timer) {
-        this.startAnimation();
-      }
-      if (name === "type" || name === "chars" || name === "color") {
-        this.render();
-        this.startAnimation();
-      }
-    }
-  }
-  get type() {
-    return this.getAttribute("type") || "claude";
-  }
-  set type(value) {
-    this.setAttribute("type", value);
-  }
-  get speed() {
-    const speed = this.getAttribute("speed");
-    return speed !== null ? parseInt(speed, 10) : 180;
-  }
-  set speed(value) {
-    this.setAttribute("speed", String(value));
-  }
-  get chars() {
-    const charsAttr = this.getAttribute("chars");
-    if (charsAttr) {
-      try {
-        const parsed = JSON.parse(charsAttr);
-        if (Array.isArray(parsed) && parsed.every((item) => typeof item === "string")) {
-          return parsed;
-        }
-      } catch {
-      }
-    }
-    return null;
-  }
-  set chars(value) {
-    if (value === null) {
-      this.removeAttribute("chars");
-    } else {
-      this.setAttribute("chars", JSON.stringify(value));
-    }
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(value) {
-    if (value === null) {
-      this.removeAttribute("color");
-    } else {
-      this.setAttribute("color", value);
-    }
-  }
-  getChars() {
-    const customChars = this.chars;
-    if (customChars) {
-      return customChars;
-    }
-    const config = SEQUENCES[this.type] || SEQUENCES["claude"];
-    return config.chars;
-  }
-  getConfig() {
-    return SEQUENCES[this.type] || SEQUENCES["claude"];
-  }
-  getColor() {
-    const customColor = this.color;
-    if (customColor) {
-      return customColor;
-    }
-    const config = this.getConfig();
-    return config.color;
-  }
-  render() {
-    const chars = this.getChars();
-    const color = this.getColor();
-    const currentChar = chars[this._index] || chars[0];
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: inline-block;
-        }
-        .container {
-          color: ${color};
-          text-shadow: 0 0 20px ${color}66;
-          font-size: 42px;
-          height: 60px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.2s ease;
-          font-family: monospace;
-        }
-      </style>
-      <div class="container">${currentChar}</div>
-    `;
-    this._div = this.shadowRoot.querySelector(".container");
-  }
-  startAnimation() {
-    if (this._timer) {
-      clearInterval(this._timer);
-    }
-    const chars = this.getChars();
-    this._timer = setInterval(() => {
-      this._index = (this._index + 1) % chars.length;
-      if (this._div) {
-        this._div.textContent = chars[this._index];
-      }
-    }, this.speed);
-  }
-};
-if (typeof customElements !== "undefined" && !customElements.get("lumina-loading")) {
-  customElements.define("lumina-loading", LuminaElement);
+// src/LuminaLoading.tsx
+import React, { useEffect, useRef, useState } from "react";
+function LuminaLoading({
+  type = "claude",
+  speed = 180,
+  chars,
+  color,
+  fallback = null
+}) {
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    import("./Lumina-UMNW6GSY.mjs");
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (type) el.setAttribute("type", type);
+    el.setAttribute("speed", String(speed));
+    if (chars) el.setAttribute("chars", JSON.stringify(chars));
+    if (color) el.setAttribute("color", color);
+  }, [type, speed, chars, color]);
+  if (!mounted) {
+    return fallback;
+  }
+  return React.createElement("lumina-loading", { ref });
 }
-var Lumina_default = LuminaElement;
 export {
-  Lumina_default as Lumina,
-  Lumina_default as LuminaElement,
+  LuminaLoading,
   SEQUENCES
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radishon/lumina",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "A beautiful animated loading indicator web component for all frameworks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,8 +9,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -29,8 +29,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@types/react": "^18.3.28",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   }