@radishon/lumina 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +143 -0
  2. package/dist/index.d.mts +81 -0
  3. package/dist/index.d.ts +81 -0
  4. package/dist/index.js +138 -0
  5. package/dist/index.mjs +111 -0
  6. package/package.json +32 -0
package/README.md ADDED
@@ -0,0 +1,143 @@
1
+ # Lumina
2
+
3
+ 一个优雅的 React 动画加载指示器组件，提供多种预设动画序列，为你的应用增添独特的视觉体验。
4
+
5
+ ## 简介
6
+
7
+ Lumina 是一个轻量级的 React Loading 组件，通过精心设计的 Unicode 字符序列和颜色配置，呈现出流畅的动画效果。无论是科技感的赛博朋克风格，还是自然的月相变化，都能为你的应用加载状态提供独特的视觉表达。
8
+
9
+ ## 安装
10
+
11
+ ```bash
12
+ npm install lumina
13
+ ```
14
+
15
+ 或
16
+
17
+ ```bash
18
+ yarn add lumina
19
+ ```
20
+
21
+ 或
22
+
23
+ ```bash
24
+ pnpm add lumina
25
+ ```
26
+
27
+ ## 使用示例
28
+
29
+ ### 基本用法
30
+
31
+ ```tsx
32
+ import { Lumina } from 'lumina';
33
+
34
+ function App() {
35
+ return (
36
+ <div className="loading-container">
37
+ <Lumina />
38
+ </div>
39
+ );
40
+ }
41
+ ```
42
+
43
+ ### 自定义序列类型
44
+
45
+ ```tsx
46
+ import { Lumina } from 'lumina';
47
+
48
+ function App() {
49
+ return (
50
+ <div>
51
+ {/* 使用菱形脉冲效果 */}
52
+ <Lumina type="diamond" />
53
+
54
+ {/* 使用月相变化效果，调整动画速度 */}
55
+ <Lumina type="moon" speed={300} />
56
+
57
+ {/* 使用赛博朋克风格 */}
58
+ <Lumina type="braille" speed={100} />
59
+ </div>
60
+ );
61
+ }
62
+ ```
63
+
64
+ ## Props API
65
+
66
+ | 属性 | 类型 | 默认值 | 说明 |
67
+ |------|------|--------|------|
68
+ | `type` | `SequenceKey` | `'claude'` | 动画序列类型，见下方可用序列列表 |
69
+ | `speed` | `number` | `180` | 动画帧切换速度（毫秒） |
70
+ | `showBar` | `boolean` | `true` | 是否显示进度条（目前未实现） |
71
+
72
+ ## 可用的序列类型
73
+
74
+ Lumina 提供了 16 种精心设计的动画序列：
75
+
76
+ | 类型 | 名称 | 描述 | 颜色 |
77
+ |------|------|------|------|
78
+ | `claude` | CLAUDE 轨迹 | Claude 专属星光轨迹动画 | 金黄色 `#fadb14` |
79
+ | `diamond` | 菱形脉冲 | 菱形闪烁变化效果 | 天蓝色 `#40a9ff` |
80
+ | `circle` | 柔光圆环 | 圆环渐变扩展动画 | 紫罗兰 `#b37feb` |
81
+ | `step` | 阶梯节奏 | 方块阶梯式进度变化 | 绿色 `#73d13d` |
82
+ | `flower` | 开花绽放 | 花朵绽放动画 | 粉色 `#ffadd2` |
83
+ | `star` | 星辰回环 | 星星旋转变化 | 白色 `#ffffff` |
84
+ | `snow` | 雪花晶格 | 雪花飘落效果 | 冰蓝 `#e6f7ff` |
85
+ | `spiral` | 螰旋回声 | 螰旋圆环变化 | 金黄色 `#fadb14` |
86
+ | `braille` | 布莱叶码 | 赛博朋克风格的布莱叶点码动画 | 荧光绿 `#00ff00` |
87
+ | `cypher` | 密码矩阵 | 赛博朋克几何方块变换 | 霓虹蓝 `#00d8ff` |
88
+ | `moon` | 月相变化 | 自然风格的月相周期动画 | 月光白 `#fffae6` |
89
+ | `wave` | 波浪起伏 | 自然风格的波浪动画 | 红色 `#ff4d4f` |
90
+ | `compass` | 方向罗盘 | 逻辑风格的指针旋转 | 橙红 `#ff4500` |
91
+ | `pixel` | 像素方块 | 复古风格的像素方块变化 | 紫色 `#722ed1` |
92
+ | `clock` | 时钟指针 | 复古风格的时钟动画 | 橙色 `#ffbb96` |
93
+
94
+ ### 序列分类
95
+
96
+ - **赛博朋克风格**: `braille`, `cypher`
97
+ - **自然风格**: `moon`, `wave`
98
+ - **逻辑风格**: `compass`
99
+ - **复古风格**: `pixel`, `clock`
100
+
101
+ ## 开发指南
102
+
103
+ ### 构建
104
+
105
+ ```bash
106
+ npm run build
107
+ ```
108
+
109
+ ### 发布
110
+
111
+ 1. 确保已登录 npm：
112
+
113
+ ```bash
114
+ npm login
115
+ ```
116
+
117
+ 2. 发布包：
118
+
119
+ ```bash
120
+ npm publish
121
+ ```
122
+
123
+ ### 本地测试
124
+
125
+ 在项目根目录运行：
126
+
127
+ ```bash
128
+ npm link
129
+ ```
130
+
131
+ 然后在目标项目中：
132
+
133
+ ```bash
134
+ npm link lumina
135
+ ```
136
+
137
+ ## 许可证
138
+
139
+ MIT
140
+
141
+ ## 贡献
142
+
143
+ 欢迎提交 Issue 和 Pull Request！
package/dist/index.d.mts ADDED
@@ -0,0 +1,81 @@
1
+ import React from 'react';
2
+
3
+ declare const SEQUENCES: {
4
+ claude: {
5
+ name: string;
6
+ chars: string[];
7
+ color: string;
8
+ };
9
+ diamond: {
10
+ name: string;
11
+ chars: string[];
12
+ color: string;
13
+ };
14
+ circle: {
15
+ name: string;
16
+ chars: string[];
17
+ color: string;
18
+ };
19
+ step: {
20
+ name: string;
21
+ chars: string[];
22
+ color: string;
23
+ };
24
+ flower: {
25
+ name: string;
26
+ chars: string[];
27
+ color: string;
28
+ };
29
+ star: {
30
+ name: string;
31
+ chars: string[];
32
+ color: string;
33
+ };
34
+ snow: {
35
+ name: string;
36
+ chars: string[];
37
+ color: string;
38
+ };
39
+ spiral: {
40
+ name: string;
41
+ chars: string[];
42
+ color: string;
43
+ };
44
+ braille: {
45
+ chars: string[];
46
+ color: string;
47
+ };
48
+ cypher: {
49
+ chars: string[];
50
+ color: string;
51
+ };
52
+ moon: {
53
+ chars: string[];
54
+ color: string;
55
+ };
56
+ wave: {
57
+ chars: string[];
58
+ color: string;
59
+ };
60
+ compass: {
61
+ chars: string[];
62
+ color: string;
63
+ };
64
+ pixel: {
65
+ chars: string[];
66
+ color: string;
67
+ };
68
+ clock: {
69
+ chars: string[];
70
+ color: string;
71
+ };
72
+ };
73
+ type SequenceKey = keyof typeof SEQUENCES;
74
+ interface LuminaProps {
75
+ type?: SequenceKey;
76
+ speed?: number;
77
+ showBar?: boolean;
78
+ }
79
+ declare const Lumina: React.FC<LuminaProps>;
80
+
81
+ export { Lumina, type SequenceKey };
package/dist/index.d.ts ADDED
@@ -0,0 +1,81 @@
1
+ import React from 'react';
2
+
3
+ declare const SEQUENCES: {
4
+ claude: {
5
+ name: string;
6
+ chars: string[];
7
+ color: string;
8
+ };
9
+ diamond: {
10
+ name: string;
11
+ chars: string[];
12
+ color: string;
13
+ };
14
+ circle: {
15
+ name: string;
16
+ chars: string[];
17
+ color: string;
18
+ };
19
+ step: {
20
+ name: string;
21
+ chars: string[];
22
+ color: string;
23
+ };
24
+ flower: {
25
+ name: string;
26
+ chars: string[];
27
+ color: string;
28
+ };
29
+ star: {
30
+ name: string;
31
+ chars: string[];
32
+ color: string;
33
+ };
34
+ snow: {
35
+ name: string;
36
+ chars: string[];
37
+ color: string;
38
+ };
39
+ spiral: {
40
+ name: string;
41
+ chars: string[];
42
+ color: string;
43
+ };
44
+ braille: {
45
+ chars: string[];
46
+ color: string;
47
+ };
48
+ cypher: {
49
+ chars: string[];
50
+ color: string;
51
+ };
52
+ moon: {
53
+ chars: string[];
54
+ color: string;
55
+ };
56
+ wave: {
57
+ chars: string[];
58
+ color: string;
59
+ };
60
+ compass: {
61
+ chars: string[];
62
+ color: string;
63
+ };
64
+ pixel: {
65
+ chars: string[];
66
+ color: string;
67
+ };
68
+ clock: {
69
+ chars: string[];
70
+ color: string;
71
+ };
72
+ };
73
+ type SequenceKey = keyof typeof SEQUENCES;
74
+ interface LuminaProps {
75
+ type?: SequenceKey;
76
+ speed?: number;
77
+ showBar?: boolean;
78
+ }
79
+ declare const Lumina: React.FC<LuminaProps>;
80
+
81
+ export { Lumina, type SequenceKey };
package/dist/index.js ADDED
@@ -0,0 +1,138 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Lumina: () => Lumina_default
24
+ });
25
+ module.exports = __toCommonJS(index_exports);
26
+
27
+ // src/Lumina.tsx
28
+ var import_react = require("react");
29
+ var import_jsx_runtime = require("react/jsx-runtime");
30
+ var SEQUENCES = {
31
+ claude: {
32
+ name: "CLAUDE \u8F68\u8FF9",
33
+ chars: ["\u274B", "\u2731", "\u2732", "\u273B", "\u273C", "\u274B", "\u273B", "\u2731", "\u2732"],
34
+ color: "#fadb14"
35
+ },
36
+ diamond: {
37
+ name: "\u83F1\u5F62\u8109\u51B2",
38
+ chars: ["\u25C7", "\u25C6", "\u25C8", "\u25C6", "\u25C7", "\u25C6", "\u25C8", "\u25C6"],
39
+ color: "#40a9ff"
40
+ },
41
+ circle: {
42
+ name: "\u67D4\u5149\u5706\u73AF",
43
+ chars: ["\xB7", "\u2219", "\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
44
+ color: "#b37feb"
45
+ },
46
+ step: {
47
+ name: "\u9636\u68AF\u8282\u594F",
48
+ chars: ["\u2591", "\u2592", "\u2593", "\u2588", "\u2593", "\u2592", "\u2591"],
49
+ color: "#73d13d"
50
+ },
51
+ flower: {
52
+ name: "\u5F00\u82B1\u7EFD\u653E",
53
+ chars: ["\u2740", "\u2741", "\u273F", "\u2743", "\u274B", "\u273E", "\u2740"],
54
+ color: "#ffadd2"
55
+ },
56
+ star: {
57
+ name: "\u661F\u8FB0\u56DE\u73AF",
58
+ chars: ["\u2726", "\u2727", "\u2729", "\u272A", "\u272B", "\u272C", "\u272D", "\u272E", "\u272F"],
59
+ color: "#ffffff"
60
+ },
61
+ snow: {
62
+ name: "\u96EA\u82B1\u6676\u683C",
63
+ chars: ["\xB7", "\u2744", "\u2745", "\u2746", "\u2744", "\u2745", "\u2746"],
64
+ color: "#e6f7ff"
65
+ },
66
+ spiral: {
67
+ name: "\u87BA\u65CB\u56DE\u58F0",
68
+ chars: ["\u25C9", "\u25CE", "\u25CB", "\u25CC", "\u25CD", "\u25CF", "\u25D0", "\u25D1"],
69
+ color: "#fadb14"
70
+ },
71
+ // 1. Cyberpunk
72
+ braille: {
73
+ chars: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
74
+ color: "#00ff00"
75
+ },
76
+ cypher: { chars: ["\u259E", "\u259A", "\u259C", "\u2599", "\u259F", "\u259B"], color: "#00d8ff" },
77
+ // 2. Nature
78
+ moon: {
79
+ chars: ["\u{1F311}", "\u{1F312}", "\u{1F313}", "\u{1F314}", "\u{1F315}", "\u{1F316}", "\u{1F317}", "\u{1F318}"],
80
+ color: "#fffae6"
81
+ },
82
+ wave: { chars: ["_", "\u23BD", "\u23BC", "\u23BB", "\u23BA", "\u23BB", "\u23BC", "\u23BD"], color: "#ff4d4f" },
83
+ // 3. Logic
84
+ compass: {
85
+ chars: ["\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199", "\u2190", "\u2196"],
86
+ color: "#ff4500"
87
+ },
88
+ // 4. Retro
89
+ pixel: { chars: ["\u25A3", "\u25A4", "\u25A5", "\u25A6", "\u25A7", "\u25A8", "\u25A9"], color: "#722ed1" },
90
+ clock: {
91
+ chars: [
92
+ "\u{1F550}",
93
+ "\u{1F551}",
94
+ "\u{1F552}",
95
+ "\u{1F553}",
96
+ "\u{1F554}",
97
+ "\u{1F555}",
98
+ "\u{1F556}",
99
+ "\u{1F557}",
100
+ "\u{1F558}",
101
+ "\u{1F559}",
102
+ "\u{1F55A}",
103
+ "\u{1F55B}"
104
+ ],
105
+ color: "#ffbb96"
106
+ }
107
+ };
108
+ var Lumina = ({
109
+ type = "claude",
110
+ speed = 180,
111
+ showBar = true
112
+ }) => {
113
+ const [index, setIndex] = (0, import_react.useState)(0);
114
+ const config = SEQUENCES[type];
115
+ (0, import_react.useEffect)(() => {
116
+ const timer = setInterval(() => {
117
+ setIndex((prevIndex) => (prevIndex + 1) % config.chars.length);
118
+ }, speed);
119
+ return () => clearInterval(timer);
120
+ }, [config.chars.length, speed]);
121
+ const glowStyle = {
122
+ color: config.color,
123
+ textShadow: `0 0 20px ${config.color}66`,
124
+ fontSize: "42px",
125
+ height: "60px",
126
+ display: "flex",
127
+ alignItems: "center",
128
+ justifyContent: "center",
129
+ transition: "all 0.2s ease",
130
+ fontFamily: "monospace"
131
+ };
132
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: glowStyle, children: config.chars[index] });
133
+ };
134
+ var Lumina_default = Lumina;
135
+ // Annotate the CommonJS export names for ESM import in node:
136
+ 0 && (module.exports = {
137
+ Lumina
138
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,111 @@
1
+ // src/Lumina.tsx
2
+ import { useState, useEffect } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ var SEQUENCES = {
5
+ claude: {
6
+ name: "CLAUDE \u8F68\u8FF9",
7
+ chars: ["\u274B", "\u2731", "\u2732", "\u273B", "\u273C", "\u274B", "\u273B", "\u2731", "\u2732"],
8
+ color: "#fadb14"
9
+ },
10
+ diamond: {
11
+ name: "\u83F1\u5F62\u8109\u51B2",
12
+ chars: ["\u25C7", "\u25C6", "\u25C8", "\u25C6", "\u25C7", "\u25C6", "\u25C8", "\u25C6"],
13
+ color: "#40a9ff"
14
+ },
15
+ circle: {
16
+ name: "\u67D4\u5149\u5706\u73AF",
17
+ chars: ["\xB7", "\u2219", "\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
18
+ color: "#b37feb"
19
+ },
20
+ step: {
21
+ name: "\u9636\u68AF\u8282\u594F",
22
+ chars: ["\u2591", "\u2592", "\u2593", "\u2588", "\u2593", "\u2592", "\u2591"],
23
+ color: "#73d13d"
24
+ },
25
+ flower: {
26
+ name: "\u5F00\u82B1\u7EFD\u653E",
27
+ chars: ["\u2740", "\u2741", "\u273F", "\u2743", "\u274B", "\u273E", "\u2740"],
28
+ color: "#ffadd2"
29
+ },
30
+ star: {
31
+ name: "\u661F\u8FB0\u56DE\u73AF",
32
+ chars: ["\u2726", "\u2727", "\u2729", "\u272A", "\u272B", "\u272C", "\u272D", "\u272E", "\u272F"],
33
+ color: "#ffffff"
34
+ },
35
+ snow: {
36
+ name: "\u96EA\u82B1\u6676\u683C",
37
+ chars: ["\xB7", "\u2744", "\u2745", "\u2746", "\u2744", "\u2745", "\u2746"],
38
+ color: "#e6f7ff"
39
+ },
40
+ spiral: {
41
+ name: "\u87BA\u65CB\u56DE\u58F0",
42
+ chars: ["\u25C9", "\u25CE", "\u25CB", "\u25CC", "\u25CD", "\u25CF", "\u25D0", "\u25D1"],
43
+ color: "#fadb14"
44
+ },
45
+ // 1. Cyberpunk
46
+ braille: {
47
+ chars: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
48
+ color: "#00ff00"
49
+ },
50
+ cypher: { chars: ["\u259E", "\u259A", "\u259C", "\u2599", "\u259F", "\u259B"], color: "#00d8ff" },
51
+ // 2. Nature
52
+ moon: {
53
+ chars: ["\u{1F311}", "\u{1F312}", "\u{1F313}", "\u{1F314}", "\u{1F315}", "\u{1F316}", "\u{1F317}", "\u{1F318}"],
54
+ color: "#fffae6"
55
+ },
56
+ wave: { chars: ["_", "\u23BD", "\u23BC", "\u23BB", "\u23BA", "\u23BB", "\u23BC", "\u23BD"], color: "#ff4d4f" },
57
+ // 3. Logic
58
+ compass: {
59
+ chars: ["\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199", "\u2190", "\u2196"],
60
+ color: "#ff4500"
61
+ },
62
+ // 4. Retro
63
+ pixel: { chars: ["\u25A3", "\u25A4", "\u25A5", "\u25A6", "\u25A7", "\u25A8", "\u25A9"], color: "#722ed1" },
64
+ clock: {
65
+ chars: [
66
+ "\u{1F550}",
67
+ "\u{1F551}",
68
+ "\u{1F552}",
69
+ "\u{1F553}",
70
+ "\u{1F554}",
71
+ "\u{1F555}",
72
+ "\u{1F556}",
73
+ "\u{1F557}",
74
+ "\u{1F558}",
75
+ "\u{1F559}",
76
+ "\u{1F55A}",
77
+ "\u{1F55B}"
78
+ ],
79
+ color: "#ffbb96"
80
+ }
81
+ };
82
+ var Lumina = ({
83
+ type = "claude",
84
+ speed = 180,
85
+ showBar = true
86
+ }) => {
87
+ const [index, setIndex] = useState(0);
88
+ const config = SEQUENCES[type];
89
+ useEffect(() => {
90
+ const timer = setInterval(() => {
91
+ setIndex((prevIndex) => (prevIndex + 1) % config.chars.length);
92
+ }, speed);
93
+ return () => clearInterval(timer);
94
+ }, [config.chars.length, speed]);
95
+ const glowStyle = {
96
+ color: config.color,
97
+ textShadow: `0 0 20px ${config.color}66`,
98
+ fontSize: "42px",
99
+ height: "60px",
100
+ display: "flex",
101
+ alignItems: "center",
102
+ justifyContent: "center",
103
+ transition: "all 0.2s ease",
104
+ fontFamily: "monospace"
105
+ };
106
+ return /* @__PURE__ */ jsx("div", { style: glowStyle, children: config.chars[index] });
107
+ };
108
+ var Lumina_default = Lumina;
109
+ export {
110
+ Lumina_default as Lumina
111
+ };
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@radishon/lumina",
3
+ "version": "1.0.0",
4
+ "description": "A beautiful animated loading indicator component for React with multiple preset sequences",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.esm.js",
7
+ "types": "dist/index.d.ts",
8
+ "files": ["dist"],
9
+ "scripts": {
10
+ "build": "tsup src/index.ts --format cjs,esm --dts",
11
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
12
+ "prepublishOnly": "npm run build"
13
+ },
14
+ "keywords": ["react", "loading", "spinner", "animation", "lumina", "component"],
15
+ "author": "",
16
+ "license": "MIT",
17
+ "publishConfig": {
18
+ "access": "public"
19
+ },
20
+ "peerDependencies": {
21
+ "react": ">=16.8.0",
22
+ "react-dom": ">=16.8.0"
23
+ },
24
+ "devDependencies": {
25
+ "@types/react": "^18.0.0",
26
+ "@types/react-dom": "^18.0.0",
27
+ "react": "^18.0.0",
28
+ "react-dom": "^18.0.0",
29
+ "tsup": "^8.0.0",
30
+ "typescript": "^5.0.0"
31
+ }
32
+ }