@manas-dev/global-themes 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.
- package/README.md +74 -0
- package/assets/preview.svg +51 -0
- package/dist/index.cjs.js +181 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.esm.js +177 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +30 -0
- package/rollup.config.js +27 -0
- package/src/index.tsx +156 -0
- package/tsconfig.json +32 -0
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
|
|
2
|
+
# @manas-dev/global-themes
|
|
3
|
+
|
|
4
|
+
[](https://www.npmjs.com/package/@manas-dev/global-themes)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
[](https://www.npmjs.com/package/@manas-dev/global-themes)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
A beautiful, animated, and fully accessible theme picker component for React applications.
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- 🎨 **Universal Theme Support**: Comes with 20+ preset color palettes (Tailwind-ready).
|
|
15
|
+
- 🌓 **Dark/Light Mode**: Built-in support for dark/light mode context.
|
|
16
|
+
- 🔔 **Notifications**: Integrated toast notifications when changing themes.
|
|
17
|
+
- 📱 **Responsive**: Mobile-friendly design with animated popups.
|
|
18
|
+
- 🎹 **Sound Effects**: Optional callbacks for click and hover sound effects.
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @manas-dev/global-themes lucide-react
|
|
24
|
+
# or
|
|
25
|
+
yarn add @manas-dev/global-themes lucide-react
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
This component logic is "Pure", meaning it controls its internal UI state (open/close) but relies on you to pass the actual Theme settings.
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import React, { useState } from 'react';
|
|
34
|
+
import { GlobalThemes } from '@manas-dev/global-themes';
|
|
35
|
+
|
|
36
|
+
const App = () => {
|
|
37
|
+
// Example state - you might use a Context or Redux store
|
|
38
|
+
const [themeColor, setThemeColor] = useState('default');
|
|
39
|
+
const [isDark, setIsDark] = useState(true);
|
|
40
|
+
|
|
41
|
+
// Optional sound handler
|
|
42
|
+
const playSound = (type) => {
|
|
43
|
+
const audio = new Audio(`/sounds/${type}.mp3`);
|
|
44
|
+
audio.play().catch(() => {});
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<div className={isDark ? 'dark' : ''}>
|
|
49
|
+
<GlobalThemes
|
|
50
|
+
themeColor={themeColor}
|
|
51
|
+
setThemeColor={setThemeColor}
|
|
52
|
+
isDark={isDark}
|
|
53
|
+
playSound={playSound}
|
|
54
|
+
className="fixed top-4 right-4 z-50"
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Props API
|
|
62
|
+
|
|
63
|
+
| Prop | Type | Default | Description |
|
|
64
|
+
|------|------|---------|-------------|
|
|
65
|
+
| `themeColor` | `string` | **Required** | The ID of the currently active theme (e.g., 'blue', 'emerald'). |
|
|
66
|
+
| `setThemeColor` | `(id: string) => void` | **Required** | Callback function to update the theme. |
|
|
67
|
+
| `isDark` | `boolean` | **Required** | Current color mode state. |
|
|
68
|
+
| `playSound` | `(type: 'click' \| 'hover') => void` | `noop` | Optional callback to play sound effects on interaction. |
|
|
69
|
+
| `className` | `string` | `''` | CSS class for the wrapper element (useful for positioning). |
|
|
70
|
+
| `themes` | `ThemeColor[]` | `Defaults` | Optional array of theme objects to override the default presets. |
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<defs>
|
|
3
|
+
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
4
|
+
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
|
|
5
|
+
<feOffset dx="0" dy="4" result="offsetblur"/>
|
|
6
|
+
<feComponentTransfer>
|
|
7
|
+
<feFuncA type="linear" slope="0.3"/>
|
|
8
|
+
</feComponentTransfer>
|
|
9
|
+
<feMerge>
|
|
10
|
+
<feMergeNode/>
|
|
11
|
+
<feMergeNode in="SourceGraphic"/>
|
|
12
|
+
</feMerge>
|
|
13
|
+
</filter>
|
|
14
|
+
</defs>
|
|
15
|
+
|
|
16
|
+
<!-- Background -->
|
|
17
|
+
<rect width="400" height="300" fill="#18181b"/>
|
|
18
|
+
|
|
19
|
+
<!-- Trigger Button -->
|
|
20
|
+
<circle cx="350" cy="50" r="20" fill="#27272a" stroke="#3f3f46" stroke-width="1"/>
|
|
21
|
+
<path d="M345 45 C345 42 355 42 355 45 C355 48 345 48 345 45 Z" fill="#3b82f6"/>
|
|
22
|
+
|
|
23
|
+
<!-- Popup -->
|
|
24
|
+
<rect x="50" y="80" width="300" height="180" rx="16" fill="#27272a" stroke="#3f3f46" stroke-width="1" filter="url(#shadow)"/>
|
|
25
|
+
|
|
26
|
+
<!-- Header -->
|
|
27
|
+
<text x="70" y="110" font-family="sans-serif" font-size="12" font-weight="bold" fill="#71717a">SELECT THEME</text>
|
|
28
|
+
<circle cx="330" cy="105" r="10" fill="#3f3f46"/>
|
|
29
|
+
<text x="326.5" y="109" font-family="sans-serif" font-size="12" fill="#a1a1aa">x</text>
|
|
30
|
+
|
|
31
|
+
<!-- Grid -->
|
|
32
|
+
<g transform="translate(70, 130)">
|
|
33
|
+
<!-- Row 1 -->
|
|
34
|
+
<circle cx="20" cy="20" r="15" fill="#3b82f6"/> <!-- Blue (Default) -->
|
|
35
|
+
<circle cx="65" cy="20" r="15" fill="#a855f7"/> <!-- Purple -->
|
|
36
|
+
<circle cx="110" cy="20" r="15" fill="#10b981"/> <!-- Emerald -->
|
|
37
|
+
<circle cx="155" cy="20" r="15" fill="#f97316"/> <!-- Orange -->
|
|
38
|
+
<circle cx="200" cy="20" r="15" fill="#ec4899"/> <!-- Pink -->
|
|
39
|
+
|
|
40
|
+
<!-- Row 2 -->
|
|
41
|
+
<circle cx="20" cy="65" r="15" fill="#06b6d4"/> <!-- Cyan -->
|
|
42
|
+
<circle cx="65" cy="65" r="15" fill="#f43f5e"/> <!-- Rose -->
|
|
43
|
+
<circle cx="110" cy="65" r="15" fill="#6366f1"/> <!-- Indigo -->
|
|
44
|
+
<circle cx="155" cy="65" r="15" fill="#eab308"/> <!-- Yellow -->
|
|
45
|
+
<circle cx="200" cy="65" r="15" fill="#84cc16"/> <!-- Lime -->
|
|
46
|
+
|
|
47
|
+
<!-- Active Ring -->
|
|
48
|
+
<circle cx="20" cy="20" r="18" fill="none" stroke="white" stroke-width="2"/>
|
|
49
|
+
<path d="M15 20 L18 24 L25 16" stroke="white" stroke-width="2" fill="none"/>
|
|
50
|
+
</g>
|
|
51
|
+
</svg>
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
/******************************************************************************
|
|
9
|
+
Copyright (c) Microsoft Corporation.
|
|
10
|
+
|
|
11
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
12
|
+
purpose with or without fee is hereby granted.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
15
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
16
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
17
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
18
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
19
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
20
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
21
|
+
***************************************************************************** */
|
|
22
|
+
|
|
23
|
+
var __assign = function() {
|
|
24
|
+
__assign = Object.assign || function __assign(t) {
|
|
25
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
26
|
+
s = arguments[i];
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
28
|
+
}
|
|
29
|
+
return t;
|
|
30
|
+
};
|
|
31
|
+
return __assign.apply(this, arguments);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
35
|
+
var e = new Error(message);
|
|
36
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* lucide-react v0.0.1 - ISC
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
var defaultAttributes = {
|
|
44
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
+
width: 24,
|
|
46
|
+
height: 24,
|
|
47
|
+
viewBox: "0 0 24 24",
|
|
48
|
+
fill: "none",
|
|
49
|
+
stroke: "currentColor",
|
|
50
|
+
strokeWidth: 2,
|
|
51
|
+
strokeLinecap: "round",
|
|
52
|
+
strokeLinejoin: "round"
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* lucide-react v0.0.1 - ISC
|
|
57
|
+
*/
|
|
58
|
+
|
|
59
|
+
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
60
|
+
const createLucideIcon = (iconName, iconNode) => {
|
|
61
|
+
const Component = react.forwardRef(
|
|
62
|
+
({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => react.createElement(
|
|
63
|
+
"svg",
|
|
64
|
+
{
|
|
65
|
+
ref,
|
|
66
|
+
...defaultAttributes,
|
|
67
|
+
width: size,
|
|
68
|
+
height: size,
|
|
69
|
+
stroke: color,
|
|
70
|
+
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
|
71
|
+
className: `lucide lucide-${toKebabCase(iconName)}`,
|
|
72
|
+
...rest
|
|
73
|
+
},
|
|
74
|
+
[
|
|
75
|
+
...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
|
|
76
|
+
...(Array.isArray(children) ? children : [children]) || []
|
|
77
|
+
]
|
|
78
|
+
)
|
|
79
|
+
);
|
|
80
|
+
Component.displayName = `${iconName}`;
|
|
81
|
+
return Component;
|
|
82
|
+
};
|
|
83
|
+
var createLucideIcon$1 = createLucideIcon;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* lucide-react v0.0.1 - ISC
|
|
87
|
+
*/
|
|
88
|
+
|
|
89
|
+
const Check = createLucideIcon$1("Check", [
|
|
90
|
+
["polyline", { points: "20 6 9 17 4 12", key: "10jjfj" }]
|
|
91
|
+
]);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* lucide-react v0.0.1 - ISC
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
const Palette = createLucideIcon$1("Palette", [
|
|
98
|
+
["circle", { cx: "13.5", cy: "6.5", r: ".5", key: "1xcu5" }],
|
|
99
|
+
["circle", { cx: "17.5", cy: "10.5", r: ".5", key: "736e4u" }],
|
|
100
|
+
["circle", { cx: "8.5", cy: "7.5", r: ".5", key: "clrty" }],
|
|
101
|
+
["circle", { cx: "6.5", cy: "12.5", r: ".5", key: "1s4xz9" }],
|
|
102
|
+
[
|
|
103
|
+
"path",
|
|
104
|
+
{
|
|
105
|
+
d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z",
|
|
106
|
+
key: "12rzf8"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
]);
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* lucide-react v0.0.1 - ISC
|
|
113
|
+
*/
|
|
114
|
+
|
|
115
|
+
const X = createLucideIcon$1("X", [
|
|
116
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
117
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
118
|
+
]);
|
|
119
|
+
|
|
120
|
+
// Default themes based on the original file
|
|
121
|
+
var DEFAULT_THEMES = [
|
|
122
|
+
{ id: 'default', name: 'Default', secondary: 'fuchsia', previewColor: '#3b82f6' },
|
|
123
|
+
{ id: 'indigo', name: 'Cosmic', secondary: 'purple', previewColor: '#6366f1' },
|
|
124
|
+
{ id: 'blue', name: 'Ocean', secondary: 'cyan', previewColor: '#3b82f6' },
|
|
125
|
+
{ id: 'sky', name: 'Azure', secondary: 'blue', previewColor: '#0ea5e9' },
|
|
126
|
+
{ id: 'cyan', name: 'Aqua', secondary: 'teal', previewColor: '#06b6d4' },
|
|
127
|
+
{ id: 'teal', name: 'Teal', secondary: 'emerald', previewColor: '#14b8a6' },
|
|
128
|
+
{ id: 'emerald', name: 'Forest', secondary: 'lime', previewColor: '#10b981' },
|
|
129
|
+
{ id: 'green', name: 'Nature', secondary: 'emerald', previewColor: '#22c55e' },
|
|
130
|
+
{ id: 'lime', name: 'Citrus', secondary: 'green', previewColor: '#84cc16' },
|
|
131
|
+
{ id: 'yellow', name: 'Sun', secondary: 'orange', previewColor: '#eab308' },
|
|
132
|
+
{ id: 'amber', name: 'Amber', secondary: 'orange', previewColor: '#f59e0b' },
|
|
133
|
+
{ id: 'orange', name: 'Sunset', secondary: 'red', previewColor: '#f97316' },
|
|
134
|
+
{ id: 'red', name: 'Crimson', secondary: 'rose', previewColor: '#ef4444' },
|
|
135
|
+
{ id: 'rose', name: 'Rose', secondary: 'pink', previewColor: '#f43f5e' },
|
|
136
|
+
{ id: 'pink', name: 'Candy', secondary: 'fuchsia', previewColor: '#ec4899' },
|
|
137
|
+
{ id: 'fuchsia', name: 'Neon', secondary: 'purple', previewColor: '#d946ef' },
|
|
138
|
+
{ id: 'purple', name: 'Royal', secondary: 'indigo', previewColor: '#a855f7' },
|
|
139
|
+
{ id: 'violet', name: 'Ultra', secondary: 'fuchsia', previewColor: '#8b5cf6' },
|
|
140
|
+
{ id: 'slate', name: 'Steel', secondary: 'zinc', previewColor: '#64748b' },
|
|
141
|
+
{ id: 'zinc', name: 'Obsidian', secondary: 'slate', previewColor: '#71717a' },
|
|
142
|
+
];
|
|
143
|
+
var GlobalThemes = function (_a) {
|
|
144
|
+
var themeColor = _a.themeColor, setThemeColor = _a.setThemeColor, isDark = _a.isDark, _b = _a.playSound, playSound = _b === void 0 ? function () { } : _b, _c = _a.themes, themes = _c === void 0 ? DEFAULT_THEMES : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
|
|
145
|
+
var _e = react.useState(false), isOpen = _e[0], setIsOpen = _e[1];
|
|
146
|
+
var _f = react.useState(null), toastMessage = _f[0], setToastMessage = _f[1];
|
|
147
|
+
var _g = react.useState(false), showToast = _g[0], setShowToast = _g[1];
|
|
148
|
+
var timeoutRef = react.useRef(null);
|
|
149
|
+
var showNotification = function (message) {
|
|
150
|
+
setToastMessage(message);
|
|
151
|
+
setShowToast(true);
|
|
152
|
+
setTimeout(function () { return setShowToast(false); }, 2000);
|
|
153
|
+
};
|
|
154
|
+
var handleMouseEnter = function () {
|
|
155
|
+
if (timeoutRef.current) {
|
|
156
|
+
clearTimeout(timeoutRef.current);
|
|
157
|
+
timeoutRef.current = null;
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
var handleMouseLeave = function () {
|
|
161
|
+
timeoutRef.current = setTimeout(function () {
|
|
162
|
+
setIsOpen(false);
|
|
163
|
+
}, 1000);
|
|
164
|
+
};
|
|
165
|
+
react.useEffect(function () {
|
|
166
|
+
return function () {
|
|
167
|
+
if (timeoutRef.current)
|
|
168
|
+
clearTimeout(timeoutRef.current);
|
|
169
|
+
};
|
|
170
|
+
}, []);
|
|
171
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "relative ".concat(className) }, { children: [showToast && (jsxRuntime.jsx("div", __assign({ className: "fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap\n ".concat(isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800') }, { children: jsxRuntime.jsx("span", __assign({ className: "text-xs font-bold" }, { children: toastMessage })) }))), jsxRuntime.jsx("button", __assign({ onClick: function () { setIsOpen(!isOpen); playSound('click'); }, onMouseEnter: function () { return playSound('hover'); }, className: "p-2 md:p-3 rounded-full transition-all duration-300\n ".concat(isOpen
|
|
172
|
+
? (isDark ? "bg-zinc-800 text-blue-400" : "bg-blue-50 text-blue-600") // Defaulting to blue/theme generic
|
|
173
|
+
: (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')), "aria-label": "Open theme menu" }, { children: jsxRuntime.jsx(Palette, { size: 20, className: "md:w-6 md:h-6" }) })), isOpen && (jsxRuntime.jsxs("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: "absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] md:w-[300px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50\n ".concat(isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60') }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex justify-between items-center mb-4" }, { children: [jsxRuntime.jsx("span", __assign({ className: "text-xs font-bold uppercase tracking-wider ".concat(isDark ? 'text-zinc-500' : 'text-slate-500') }, { children: "Select Theme" })), jsxRuntime.jsx("button", __assign({ onClick: function () { setIsOpen(false); playSound('click'); }, onMouseEnter: function () { return playSound('hover'); }, className: "p-1 rounded-full ".concat(isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'), "aria-label": "Close theme menu" }, { children: jsxRuntime.jsx(X, { size: 14, className: isDark ? 'text-zinc-400' : 'text-slate-400' }) }))] })), jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-5 gap-2" }, { children: themes.map(function (theme) { return (jsxRuntime.jsx("button", __assign({ onClick: function () {
|
|
174
|
+
setThemeColor(theme.id);
|
|
175
|
+
playSound('click');
|
|
176
|
+
showNotification("Theme: ".concat(theme.name));
|
|
177
|
+
}, onMouseEnter: function () { return playSound('hover'); }, className: "group relative w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110\n ".concat(themeColor === theme.id ? 'ring-2 ring-offset-2 ring-offset-zinc-900 ring-white scale-110' : ''), style: { backgroundColor: theme.previewColor }, title: theme.name, "aria-label": "Select ".concat(theme.name, " theme") }, { children: themeColor === theme.id && jsxRuntime.jsx(Check, { size: 14, className: "text-white drop-shadow-md md:w-4 md:h-4" }) }), theme.id)); }) }))] })))] })));
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
exports.GlobalThemes = GlobalThemes;
|
|
181
|
+
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../node_modules/tslib/tslib.es6.mjs","../node_modules/lucide-react/dist/esm/defaultAttributes.mjs","../node_modules/lucide-react/dist/esm/createLucideIcon.mjs","../node_modules/lucide-react/dist/esm/icons/check.mjs","../node_modules/lucide-react/dist/esm/icons/palette.mjs","../node_modules/lucide-react/dist/esm/icons/x.mjs","../src/index.tsx"],"sourcesContent":["/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nvar defaultAttributes = {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n};\n\nexport { defaultAttributes as default };\n//# sourceMappingURL=defaultAttributes.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes.mjs';\n\nconst toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\nconst createLucideIcon = (iconName, iconNode) => {\n const Component = forwardRef(\n ({ color = \"currentColor\", size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => createElement(\n \"svg\",\n {\n ref,\n ...defaultAttributes,\n width: size,\n height: size,\n stroke: color,\n strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,\n className: `lucide lucide-${toKebabCase(iconName)}`,\n ...rest\n },\n [\n ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n ...(Array.isArray(children) ? children : [children]) || []\n ]\n )\n );\n Component.displayName = `${iconName}`;\n return Component;\n};\nvar createLucideIcon$1 = createLucideIcon;\n\nexport { createLucideIcon$1 as default, toKebabCase };\n//# sourceMappingURL=createLucideIcon.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst Check = createLucideIcon(\"Check\", [\n [\"polyline\", { points: \"20 6 9 17 4 12\", key: \"10jjfj\" }]\n]);\n\nexport { Check as default };\n//# sourceMappingURL=check.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst Palette = createLucideIcon(\"Palette\", [\n [\"circle\", { cx: \"13.5\", cy: \"6.5\", r: \".5\", key: \"1xcu5\" }],\n [\"circle\", { cx: \"17.5\", cy: \"10.5\", r: \".5\", key: \"736e4u\" }],\n [\"circle\", { cx: \"8.5\", cy: \"7.5\", r: \".5\", key: \"clrty\" }],\n [\"circle\", { cx: \"6.5\", cy: \"12.5\", r: \".5\", key: \"1s4xz9\" }],\n [\n \"path\",\n {\n d: \"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\",\n key: \"12rzf8\"\n }\n ]\n]);\n\nexport { Palette as default };\n//# sourceMappingURL=palette.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst X = createLucideIcon(\"X\", [\n [\"path\", { d: \"M18 6 6 18\", key: \"1bl5f8\" }],\n [\"path\", { d: \"m6 6 12 12\", key: \"d8bk6v\" }]\n]);\n\nexport { X as default };\n//# sourceMappingURL=x.mjs.map\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Palette, Check, X } from 'lucide-react';\n\nexport interface ThemeColor {\n id: string;\n name: string;\n secondary: string;\n previewColor: string;\n}\n\n// Default themes based on the original file\nconst DEFAULT_THEMES: ThemeColor[] = [\n { id: 'default', name: 'Default', secondary: 'fuchsia', previewColor: '#3b82f6' }, // blue-500\n { id: 'indigo', name: 'Cosmic', secondary: 'purple', previewColor: '#6366f1' },\n { id: 'blue', name: 'Ocean', secondary: 'cyan', previewColor: '#3b82f6' },\n { id: 'sky', name: 'Azure', secondary: 'blue', previewColor: '#0ea5e9' },\n { id: 'cyan', name: 'Aqua', secondary: 'teal', previewColor: '#06b6d4' },\n { id: 'teal', name: 'Teal', secondary: 'emerald', previewColor: '#14b8a6' },\n { id: 'emerald', name: 'Forest', secondary: 'lime', previewColor: '#10b981' },\n { id: 'green', name: 'Nature', secondary: 'emerald', previewColor: '#22c55e' },\n { id: 'lime', name: 'Citrus', secondary: 'green', previewColor: '#84cc16' },\n { id: 'yellow', name: 'Sun', secondary: 'orange', previewColor: '#eab308' },\n { id: 'amber', name: 'Amber', secondary: 'orange', previewColor: '#f59e0b' },\n { id: 'orange', name: 'Sunset', secondary: 'red', previewColor: '#f97316' },\n { id: 'red', name: 'Crimson', secondary: 'rose', previewColor: '#ef4444' },\n { id: 'rose', name: 'Rose', secondary: 'pink', previewColor: '#f43f5e' },\n { id: 'pink', name: 'Candy', secondary: 'fuchsia', previewColor: '#ec4899' },\n { id: 'fuchsia', name: 'Neon', secondary: 'purple', previewColor: '#d946ef' },\n { id: 'purple', name: 'Royal', secondary: 'indigo', previewColor: '#a855f7' },\n { id: 'violet', name: 'Ultra', secondary: 'fuchsia', previewColor: '#8b5cf6' },\n { id: 'slate', name: 'Steel', secondary: 'zinc', previewColor: '#64748b' },\n { id: 'zinc', name: 'Obsidian', secondary: 'slate', previewColor: '#71717a' },\n];\n\nexport interface GlobalThemesProps {\n /** Current active theme ID */\n themeColor: string;\n /** Function to set the theme */\n setThemeColor: (id: string) => void;\n /** Current mode: true for dark, false for light */\n isDark: boolean;\n /** Function to play sounds (optional) */\n playSound?: (sound: 'click' | 'hover' | 'switch') => void;\n /** Optional array of theme objects to override defaults */\n themes?: ThemeColor[];\n /** ClassName for the trigger button container */\n className?: string;\n}\n\nexport const GlobalThemes: React.FC<GlobalThemesProps> = ({\n themeColor,\n setThemeColor,\n isDark,\n playSound = () => { },\n themes = DEFAULT_THEMES,\n className = ''\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [toastMessage, setToastMessage] = useState<string | null>(null);\n const [showToast, setShowToast] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const showNotification = (message: string) => {\n setToastMessage(message);\n setShowToast(true);\n setTimeout(() => setShowToast(false), 2000);\n };\n\n const handleMouseEnter = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n\n const handleMouseLeave = () => {\n timeoutRef.current = setTimeout(() => {\n setIsOpen(false);\n }, 1000);\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return (\n <div className={`relative ${className}`}>\n {/* Toast Notification */}\n {showToast && (\n <div className={`fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap\n ${isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800'}`}>\n <span className=\"text-xs font-bold\">{toastMessage}</span>\n </div>\n )}\n\n {/* Trigger Button */}\n <button\n onClick={() => { setIsOpen(!isOpen); playSound('click'); }}\n onMouseEnter={() => playSound('hover')}\n className={`p-2 md:p-3 rounded-full transition-all duration-300\n ${isOpen\n ? (isDark ? `bg-zinc-800 text-blue-400` : `bg-blue-50 text-blue-600`) // Defaulting to blue/theme generic\n : (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')\n }`}\n aria-label=\"Open theme menu\"\n >\n <Palette size={20} className=\"md:w-6 md:h-6\" />\n </button>\n\n {/* Popup Menu */}\n {isOpen && (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={`absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] md:w-[300px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50\n ${isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60'}`}>\n\n <div className=\"flex justify-between items-center mb-4\">\n <span className={`text-xs font-bold uppercase tracking-wider ${isDark ? 'text-zinc-500' : 'text-slate-500'}`}>Select Theme</span>\n <button\n onClick={() => { setIsOpen(false); playSound('click'); }}\n onMouseEnter={() => playSound('hover')}\n className={`p-1 rounded-full ${isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'}`}\n aria-label=\"Close theme menu\"\n >\n <X size={14} className={isDark ? 'text-zinc-400' : 'text-slate-400'} />\n </button>\n </div>\n\n <div className=\"grid grid-cols-5 gap-2\">\n {themes.map((theme) => (\n <button\n key={theme.id}\n onClick={() => {\n setThemeColor(theme.id);\n playSound('click');\n showNotification(`Theme: ${theme.name}`);\n }}\n onMouseEnter={() => playSound('hover')}\n className={`group relative w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110\n ${themeColor === theme.id ? 'ring-2 ring-offset-2 ring-offset-zinc-900 ring-white scale-110' : ''}`}\n style={{ backgroundColor: theme.previewColor }}\n title={theme.name}\n aria-label={`Select ${theme.name} theme`}\n >\n {themeColor === theme.id && <Check size={14} className=\"text-white drop-shadow-md md:w-4 md:h-4\" />}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["forwardRef","createElement","createLucideIcon","useState","useRef","useEffect","_jsxs","_jsx"],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ThemeColor {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
previewColor: string;
|
|
7
|
+
}
|
|
8
|
+
export interface GlobalThemesProps {
|
|
9
|
+
/** Current active theme ID */
|
|
10
|
+
themeColor: string;
|
|
11
|
+
/** Function to set the theme */
|
|
12
|
+
setThemeColor: (id: string) => void;
|
|
13
|
+
/** Current mode: true for dark, false for light */
|
|
14
|
+
isDark: boolean;
|
|
15
|
+
/** Function to play sounds (optional) */
|
|
16
|
+
playSound?: (sound: 'click' | 'hover' | 'switch') => void;
|
|
17
|
+
/** Optional array of theme objects to override defaults */
|
|
18
|
+
themes?: ThemeColor[];
|
|
19
|
+
/** ClassName for the trigger button container */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const GlobalThemes: React.FC<GlobalThemesProps>;
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, createElement, useState, useRef, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
/******************************************************************************
|
|
5
|
+
Copyright (c) Microsoft Corporation.
|
|
6
|
+
|
|
7
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
8
|
+
purpose with or without fee is hereby granted.
|
|
9
|
+
|
|
10
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
11
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
12
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
13
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
14
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
15
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
16
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
17
|
+
***************************************************************************** */
|
|
18
|
+
|
|
19
|
+
var __assign = function() {
|
|
20
|
+
__assign = Object.assign || function __assign(t) {
|
|
21
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
22
|
+
s = arguments[i];
|
|
23
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
24
|
+
}
|
|
25
|
+
return t;
|
|
26
|
+
};
|
|
27
|
+
return __assign.apply(this, arguments);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
31
|
+
var e = new Error(message);
|
|
32
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* lucide-react v0.0.1 - ISC
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
var defaultAttributes = {
|
|
40
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
41
|
+
width: 24,
|
|
42
|
+
height: 24,
|
|
43
|
+
viewBox: "0 0 24 24",
|
|
44
|
+
fill: "none",
|
|
45
|
+
stroke: "currentColor",
|
|
46
|
+
strokeWidth: 2,
|
|
47
|
+
strokeLinecap: "round",
|
|
48
|
+
strokeLinejoin: "round"
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* lucide-react v0.0.1 - ISC
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
56
|
+
const createLucideIcon = (iconName, iconNode) => {
|
|
57
|
+
const Component = forwardRef(
|
|
58
|
+
({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => createElement(
|
|
59
|
+
"svg",
|
|
60
|
+
{
|
|
61
|
+
ref,
|
|
62
|
+
...defaultAttributes,
|
|
63
|
+
width: size,
|
|
64
|
+
height: size,
|
|
65
|
+
stroke: color,
|
|
66
|
+
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
|
67
|
+
className: `lucide lucide-${toKebabCase(iconName)}`,
|
|
68
|
+
...rest
|
|
69
|
+
},
|
|
70
|
+
[
|
|
71
|
+
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
72
|
+
...(Array.isArray(children) ? children : [children]) || []
|
|
73
|
+
]
|
|
74
|
+
)
|
|
75
|
+
);
|
|
76
|
+
Component.displayName = `${iconName}`;
|
|
77
|
+
return Component;
|
|
78
|
+
};
|
|
79
|
+
var createLucideIcon$1 = createLucideIcon;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* lucide-react v0.0.1 - ISC
|
|
83
|
+
*/
|
|
84
|
+
|
|
85
|
+
const Check = createLucideIcon$1("Check", [
|
|
86
|
+
["polyline", { points: "20 6 9 17 4 12", key: "10jjfj" }]
|
|
87
|
+
]);
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* lucide-react v0.0.1 - ISC
|
|
91
|
+
*/
|
|
92
|
+
|
|
93
|
+
const Palette = createLucideIcon$1("Palette", [
|
|
94
|
+
["circle", { cx: "13.5", cy: "6.5", r: ".5", key: "1xcu5" }],
|
|
95
|
+
["circle", { cx: "17.5", cy: "10.5", r: ".5", key: "736e4u" }],
|
|
96
|
+
["circle", { cx: "8.5", cy: "7.5", r: ".5", key: "clrty" }],
|
|
97
|
+
["circle", { cx: "6.5", cy: "12.5", r: ".5", key: "1s4xz9" }],
|
|
98
|
+
[
|
|
99
|
+
"path",
|
|
100
|
+
{
|
|
101
|
+
d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z",
|
|
102
|
+
key: "12rzf8"
|
|
103
|
+
}
|
|
104
|
+
]
|
|
105
|
+
]);
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* lucide-react v0.0.1 - ISC
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
const X = createLucideIcon$1("X", [
|
|
112
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
113
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
114
|
+
]);
|
|
115
|
+
|
|
116
|
+
// Default themes based on the original file
|
|
117
|
+
var DEFAULT_THEMES = [
|
|
118
|
+
{ id: 'default', name: 'Default', secondary: 'fuchsia', previewColor: '#3b82f6' },
|
|
119
|
+
{ id: 'indigo', name: 'Cosmic', secondary: 'purple', previewColor: '#6366f1' },
|
|
120
|
+
{ id: 'blue', name: 'Ocean', secondary: 'cyan', previewColor: '#3b82f6' },
|
|
121
|
+
{ id: 'sky', name: 'Azure', secondary: 'blue', previewColor: '#0ea5e9' },
|
|
122
|
+
{ id: 'cyan', name: 'Aqua', secondary: 'teal', previewColor: '#06b6d4' },
|
|
123
|
+
{ id: 'teal', name: 'Teal', secondary: 'emerald', previewColor: '#14b8a6' },
|
|
124
|
+
{ id: 'emerald', name: 'Forest', secondary: 'lime', previewColor: '#10b981' },
|
|
125
|
+
{ id: 'green', name: 'Nature', secondary: 'emerald', previewColor: '#22c55e' },
|
|
126
|
+
{ id: 'lime', name: 'Citrus', secondary: 'green', previewColor: '#84cc16' },
|
|
127
|
+
{ id: 'yellow', name: 'Sun', secondary: 'orange', previewColor: '#eab308' },
|
|
128
|
+
{ id: 'amber', name: 'Amber', secondary: 'orange', previewColor: '#f59e0b' },
|
|
129
|
+
{ id: 'orange', name: 'Sunset', secondary: 'red', previewColor: '#f97316' },
|
|
130
|
+
{ id: 'red', name: 'Crimson', secondary: 'rose', previewColor: '#ef4444' },
|
|
131
|
+
{ id: 'rose', name: 'Rose', secondary: 'pink', previewColor: '#f43f5e' },
|
|
132
|
+
{ id: 'pink', name: 'Candy', secondary: 'fuchsia', previewColor: '#ec4899' },
|
|
133
|
+
{ id: 'fuchsia', name: 'Neon', secondary: 'purple', previewColor: '#d946ef' },
|
|
134
|
+
{ id: 'purple', name: 'Royal', secondary: 'indigo', previewColor: '#a855f7' },
|
|
135
|
+
{ id: 'violet', name: 'Ultra', secondary: 'fuchsia', previewColor: '#8b5cf6' },
|
|
136
|
+
{ id: 'slate', name: 'Steel', secondary: 'zinc', previewColor: '#64748b' },
|
|
137
|
+
{ id: 'zinc', name: 'Obsidian', secondary: 'slate', previewColor: '#71717a' },
|
|
138
|
+
];
|
|
139
|
+
var GlobalThemes = function (_a) {
|
|
140
|
+
var themeColor = _a.themeColor, setThemeColor = _a.setThemeColor, isDark = _a.isDark, _b = _a.playSound, playSound = _b === void 0 ? function () { } : _b, _c = _a.themes, themes = _c === void 0 ? DEFAULT_THEMES : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
|
|
141
|
+
var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
|
|
142
|
+
var _f = useState(null), toastMessage = _f[0], setToastMessage = _f[1];
|
|
143
|
+
var _g = useState(false), showToast = _g[0], setShowToast = _g[1];
|
|
144
|
+
var timeoutRef = useRef(null);
|
|
145
|
+
var showNotification = function (message) {
|
|
146
|
+
setToastMessage(message);
|
|
147
|
+
setShowToast(true);
|
|
148
|
+
setTimeout(function () { return setShowToast(false); }, 2000);
|
|
149
|
+
};
|
|
150
|
+
var handleMouseEnter = function () {
|
|
151
|
+
if (timeoutRef.current) {
|
|
152
|
+
clearTimeout(timeoutRef.current);
|
|
153
|
+
timeoutRef.current = null;
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
var handleMouseLeave = function () {
|
|
157
|
+
timeoutRef.current = setTimeout(function () {
|
|
158
|
+
setIsOpen(false);
|
|
159
|
+
}, 1000);
|
|
160
|
+
};
|
|
161
|
+
useEffect(function () {
|
|
162
|
+
return function () {
|
|
163
|
+
if (timeoutRef.current)
|
|
164
|
+
clearTimeout(timeoutRef.current);
|
|
165
|
+
};
|
|
166
|
+
}, []);
|
|
167
|
+
return (jsxs("div", __assign({ className: "relative ".concat(className) }, { children: [showToast && (jsx("div", __assign({ className: "fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap\n ".concat(isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800') }, { children: jsx("span", __assign({ className: "text-xs font-bold" }, { children: toastMessage })) }))), jsx("button", __assign({ onClick: function () { setIsOpen(!isOpen); playSound('click'); }, onMouseEnter: function () { return playSound('hover'); }, className: "p-2 md:p-3 rounded-full transition-all duration-300\n ".concat(isOpen
|
|
168
|
+
? (isDark ? "bg-zinc-800 text-blue-400" : "bg-blue-50 text-blue-600") // Defaulting to blue/theme generic
|
|
169
|
+
: (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')), "aria-label": "Open theme menu" }, { children: jsx(Palette, { size: 20, className: "md:w-6 md:h-6" }) })), isOpen && (jsxs("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: "absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] md:w-[300px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50\n ".concat(isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60') }, { children: [jsxs("div", __assign({ className: "flex justify-between items-center mb-4" }, { children: [jsx("span", __assign({ className: "text-xs font-bold uppercase tracking-wider ".concat(isDark ? 'text-zinc-500' : 'text-slate-500') }, { children: "Select Theme" })), jsx("button", __assign({ onClick: function () { setIsOpen(false); playSound('click'); }, onMouseEnter: function () { return playSound('hover'); }, className: "p-1 rounded-full ".concat(isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'), "aria-label": "Close theme menu" }, { children: jsx(X, { size: 14, className: isDark ? 'text-zinc-400' : 'text-slate-400' }) }))] })), jsx("div", __assign({ className: "grid grid-cols-5 gap-2" }, { children: themes.map(function (theme) { return (jsx("button", __assign({ onClick: function () {
|
|
170
|
+
setThemeColor(theme.id);
|
|
171
|
+
playSound('click');
|
|
172
|
+
showNotification("Theme: ".concat(theme.name));
|
|
173
|
+
}, onMouseEnter: function () { return playSound('hover'); }, className: "group relative w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110\n ".concat(themeColor === theme.id ? 'ring-2 ring-offset-2 ring-offset-zinc-900 ring-white scale-110' : ''), style: { backgroundColor: theme.previewColor }, title: theme.name, "aria-label": "Select ".concat(theme.name, " theme") }, { children: themeColor === theme.id && jsx(Check, { size: 14, className: "text-white drop-shadow-md md:w-4 md:h-4" }) }), theme.id)); }) }))] })))] })));
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
export { GlobalThemes };
|
|
177
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/tslib/tslib.es6.mjs","../node_modules/lucide-react/dist/esm/defaultAttributes.mjs","../node_modules/lucide-react/dist/esm/createLucideIcon.mjs","../node_modules/lucide-react/dist/esm/icons/check.mjs","../node_modules/lucide-react/dist/esm/icons/palette.mjs","../node_modules/lucide-react/dist/esm/icons/x.mjs","../src/index.tsx"],"sourcesContent":["/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nvar defaultAttributes = {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n};\n\nexport { defaultAttributes as default };\n//# sourceMappingURL=defaultAttributes.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes.mjs';\n\nconst toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\nconst createLucideIcon = (iconName, iconNode) => {\n const Component = forwardRef(\n ({ color = \"currentColor\", size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => createElement(\n \"svg\",\n {\n ref,\n ...defaultAttributes,\n width: size,\n height: size,\n stroke: color,\n strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,\n className: `lucide lucide-${toKebabCase(iconName)}`,\n ...rest\n },\n [\n ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n ...(Array.isArray(children) ? children : [children]) || []\n ]\n )\n );\n Component.displayName = `${iconName}`;\n return Component;\n};\nvar createLucideIcon$1 = createLucideIcon;\n\nexport { createLucideIcon$1 as default, toKebabCase };\n//# sourceMappingURL=createLucideIcon.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst Check = createLucideIcon(\"Check\", [\n [\"polyline\", { points: \"20 6 9 17 4 12\", key: \"10jjfj\" }]\n]);\n\nexport { Check as default };\n//# sourceMappingURL=check.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst Palette = createLucideIcon(\"Palette\", [\n [\"circle\", { cx: \"13.5\", cy: \"6.5\", r: \".5\", key: \"1xcu5\" }],\n [\"circle\", { cx: \"17.5\", cy: \"10.5\", r: \".5\", key: \"736e4u\" }],\n [\"circle\", { cx: \"8.5\", cy: \"7.5\", r: \".5\", key: \"clrty\" }],\n [\"circle\", { cx: \"6.5\", cy: \"12.5\", r: \".5\", key: \"1s4xz9\" }],\n [\n \"path\",\n {\n d: \"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\",\n key: \"12rzf8\"\n }\n ]\n]);\n\nexport { Palette as default };\n//# sourceMappingURL=palette.mjs.map\n","/**\n * lucide-react v0.0.1 - ISC\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst X = createLucideIcon(\"X\", [\n [\"path\", { d: \"M18 6 6 18\", key: \"1bl5f8\" }],\n [\"path\", { d: \"m6 6 12 12\", key: \"d8bk6v\" }]\n]);\n\nexport { X as default };\n//# sourceMappingURL=x.mjs.map\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Palette, Check, X } from 'lucide-react';\n\nexport interface ThemeColor {\n id: string;\n name: string;\n secondary: string;\n previewColor: string;\n}\n\n// Default themes based on the original file\nconst DEFAULT_THEMES: ThemeColor[] = [\n { id: 'default', name: 'Default', secondary: 'fuchsia', previewColor: '#3b82f6' }, // blue-500\n { id: 'indigo', name: 'Cosmic', secondary: 'purple', previewColor: '#6366f1' },\n { id: 'blue', name: 'Ocean', secondary: 'cyan', previewColor: '#3b82f6' },\n { id: 'sky', name: 'Azure', secondary: 'blue', previewColor: '#0ea5e9' },\n { id: 'cyan', name: 'Aqua', secondary: 'teal', previewColor: '#06b6d4' },\n { id: 'teal', name: 'Teal', secondary: 'emerald', previewColor: '#14b8a6' },\n { id: 'emerald', name: 'Forest', secondary: 'lime', previewColor: '#10b981' },\n { id: 'green', name: 'Nature', secondary: 'emerald', previewColor: '#22c55e' },\n { id: 'lime', name: 'Citrus', secondary: 'green', previewColor: '#84cc16' },\n { id: 'yellow', name: 'Sun', secondary: 'orange', previewColor: '#eab308' },\n { id: 'amber', name: 'Amber', secondary: 'orange', previewColor: '#f59e0b' },\n { id: 'orange', name: 'Sunset', secondary: 'red', previewColor: '#f97316' },\n { id: 'red', name: 'Crimson', secondary: 'rose', previewColor: '#ef4444' },\n { id: 'rose', name: 'Rose', secondary: 'pink', previewColor: '#f43f5e' },\n { id: 'pink', name: 'Candy', secondary: 'fuchsia', previewColor: '#ec4899' },\n { id: 'fuchsia', name: 'Neon', secondary: 'purple', previewColor: '#d946ef' },\n { id: 'purple', name: 'Royal', secondary: 'indigo', previewColor: '#a855f7' },\n { id: 'violet', name: 'Ultra', secondary: 'fuchsia', previewColor: '#8b5cf6' },\n { id: 'slate', name: 'Steel', secondary: 'zinc', previewColor: '#64748b' },\n { id: 'zinc', name: 'Obsidian', secondary: 'slate', previewColor: '#71717a' },\n];\n\nexport interface GlobalThemesProps {\n /** Current active theme ID */\n themeColor: string;\n /** Function to set the theme */\n setThemeColor: (id: string) => void;\n /** Current mode: true for dark, false for light */\n isDark: boolean;\n /** Function to play sounds (optional) */\n playSound?: (sound: 'click' | 'hover' | 'switch') => void;\n /** Optional array of theme objects to override defaults */\n themes?: ThemeColor[];\n /** ClassName for the trigger button container */\n className?: string;\n}\n\nexport const GlobalThemes: React.FC<GlobalThemesProps> = ({\n themeColor,\n setThemeColor,\n isDark,\n playSound = () => { },\n themes = DEFAULT_THEMES,\n className = ''\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [toastMessage, setToastMessage] = useState<string | null>(null);\n const [showToast, setShowToast] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const showNotification = (message: string) => {\n setToastMessage(message);\n setShowToast(true);\n setTimeout(() => setShowToast(false), 2000);\n };\n\n const handleMouseEnter = () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n\n const handleMouseLeave = () => {\n timeoutRef.current = setTimeout(() => {\n setIsOpen(false);\n }, 1000);\n };\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return (\n <div className={`relative ${className}`}>\n {/* Toast Notification */}\n {showToast && (\n <div className={`fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap\n ${isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800'}`}>\n <span className=\"text-xs font-bold\">{toastMessage}</span>\n </div>\n )}\n\n {/* Trigger Button */}\n <button\n onClick={() => { setIsOpen(!isOpen); playSound('click'); }}\n onMouseEnter={() => playSound('hover')}\n className={`p-2 md:p-3 rounded-full transition-all duration-300\n ${isOpen\n ? (isDark ? `bg-zinc-800 text-blue-400` : `bg-blue-50 text-blue-600`) // Defaulting to blue/theme generic\n : (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')\n }`}\n aria-label=\"Open theme menu\"\n >\n <Palette size={20} className=\"md:w-6 md:h-6\" />\n </button>\n\n {/* Popup Menu */}\n {isOpen && (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={`absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] md:w-[300px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50\n ${isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60'}`}>\n\n <div className=\"flex justify-between items-center mb-4\">\n <span className={`text-xs font-bold uppercase tracking-wider ${isDark ? 'text-zinc-500' : 'text-slate-500'}`}>Select Theme</span>\n <button\n onClick={() => { setIsOpen(false); playSound('click'); }}\n onMouseEnter={() => playSound('hover')}\n className={`p-1 rounded-full ${isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'}`}\n aria-label=\"Close theme menu\"\n >\n <X size={14} className={isDark ? 'text-zinc-400' : 'text-slate-400'} />\n </button>\n </div>\n\n <div className=\"grid grid-cols-5 gap-2\">\n {themes.map((theme) => (\n <button\n key={theme.id}\n onClick={() => {\n setThemeColor(theme.id);\n playSound('click');\n showNotification(`Theme: ${theme.name}`);\n }}\n onMouseEnter={() => playSound('hover')}\n className={`group relative w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110\n ${themeColor === theme.id ? 'ring-2 ring-offset-2 ring-offset-zinc-900 ring-white scale-110' : ''}`}\n style={{ backgroundColor: theme.previewColor }}\n title={theme.name}\n aria-label={`Select ${theme.name} theme`}\n >\n {themeColor === theme.id && <Check size={14} className=\"text-white drop-shadow-md md:w-4 md:h-4\" />}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["createLucideIcon","_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@manas-dev/global-themes",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A beautiful, animated theme picker component.",
|
|
5
|
+
"main": "dist/index.cjs.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "rollup -c"
|
|
10
|
+
},
|
|
11
|
+
"peerDependencies": {
|
|
12
|
+
"react": "^18.0.0",
|
|
13
|
+
"react-dom": "^18.0.0"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"lucide-react": "^0.263.1"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"rollup": "^2.79.1",
|
|
20
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
21
|
+
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
22
|
+
"@rollup/plugin-commonjs": "^22.0.0",
|
|
23
|
+
"@rollup/plugin-typescript": "^8.3.3",
|
|
24
|
+
"typescript": "^4.7.4",
|
|
25
|
+
"tslib": "^2.4.0"
|
|
26
|
+
},
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
}
|
|
30
|
+
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import resolve from "@rollup/plugin-node-resolve";
|
|
2
|
+
import commonjs from "@rollup/plugin-commonjs";
|
|
3
|
+
import typescript from "@rollup/plugin-typescript";
|
|
4
|
+
import peerDepsExternal from "rollup-plugin-peer-deps-external";
|
|
5
|
+
import pkg from "./package.json";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
input: "src/index.tsx",
|
|
9
|
+
output: [
|
|
10
|
+
{
|
|
11
|
+
file: pkg.main,
|
|
12
|
+
format: "cjs",
|
|
13
|
+
sourcemap: true,
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
file: pkg.module,
|
|
17
|
+
format: "esm",
|
|
18
|
+
sourcemap: true,
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
plugins: [
|
|
22
|
+
peerDepsExternal(),
|
|
23
|
+
resolve(),
|
|
24
|
+
commonjs(),
|
|
25
|
+
typescript({ tsconfig: "./tsconfig.json" }),
|
|
26
|
+
],
|
|
27
|
+
};
|
package/src/index.tsx
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
+
import { Palette, Check, X } from 'lucide-react';
|
|
3
|
+
|
|
4
|
+
export interface ThemeColor {
|
|
5
|
+
id: string;
|
|
6
|
+
name: string;
|
|
7
|
+
secondary: string;
|
|
8
|
+
previewColor: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Default themes based on the original file
|
|
12
|
+
const DEFAULT_THEMES: ThemeColor[] = [
|
|
13
|
+
{ id: 'default', name: 'Default', secondary: 'fuchsia', previewColor: '#3b82f6' }, // blue-500
|
|
14
|
+
{ id: 'indigo', name: 'Cosmic', secondary: 'purple', previewColor: '#6366f1' },
|
|
15
|
+
{ id: 'blue', name: 'Ocean', secondary: 'cyan', previewColor: '#3b82f6' },
|
|
16
|
+
{ id: 'sky', name: 'Azure', secondary: 'blue', previewColor: '#0ea5e9' },
|
|
17
|
+
{ id: 'cyan', name: 'Aqua', secondary: 'teal', previewColor: '#06b6d4' },
|
|
18
|
+
{ id: 'teal', name: 'Teal', secondary: 'emerald', previewColor: '#14b8a6' },
|
|
19
|
+
{ id: 'emerald', name: 'Forest', secondary: 'lime', previewColor: '#10b981' },
|
|
20
|
+
{ id: 'green', name: 'Nature', secondary: 'emerald', previewColor: '#22c55e' },
|
|
21
|
+
{ id: 'lime', name: 'Citrus', secondary: 'green', previewColor: '#84cc16' },
|
|
22
|
+
{ id: 'yellow', name: 'Sun', secondary: 'orange', previewColor: '#eab308' },
|
|
23
|
+
{ id: 'amber', name: 'Amber', secondary: 'orange', previewColor: '#f59e0b' },
|
|
24
|
+
{ id: 'orange', name: 'Sunset', secondary: 'red', previewColor: '#f97316' },
|
|
25
|
+
{ id: 'red', name: 'Crimson', secondary: 'rose', previewColor: '#ef4444' },
|
|
26
|
+
{ id: 'rose', name: 'Rose', secondary: 'pink', previewColor: '#f43f5e' },
|
|
27
|
+
{ id: 'pink', name: 'Candy', secondary: 'fuchsia', previewColor: '#ec4899' },
|
|
28
|
+
{ id: 'fuchsia', name: 'Neon', secondary: 'purple', previewColor: '#d946ef' },
|
|
29
|
+
{ id: 'purple', name: 'Royal', secondary: 'indigo', previewColor: '#a855f7' },
|
|
30
|
+
{ id: 'violet', name: 'Ultra', secondary: 'fuchsia', previewColor: '#8b5cf6' },
|
|
31
|
+
{ id: 'slate', name: 'Steel', secondary: 'zinc', previewColor: '#64748b' },
|
|
32
|
+
{ id: 'zinc', name: 'Obsidian', secondary: 'slate', previewColor: '#71717a' },
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
export interface GlobalThemesProps {
|
|
36
|
+
/** Current active theme ID */
|
|
37
|
+
themeColor: string;
|
|
38
|
+
/** Function to set the theme */
|
|
39
|
+
setThemeColor: (id: string) => void;
|
|
40
|
+
/** Current mode: true for dark, false for light */
|
|
41
|
+
isDark: boolean;
|
|
42
|
+
/** Function to play sounds (optional) */
|
|
43
|
+
playSound?: (sound: 'click' | 'hover' | 'switch') => void;
|
|
44
|
+
/** Optional array of theme objects to override defaults */
|
|
45
|
+
themes?: ThemeColor[];
|
|
46
|
+
/** ClassName for the trigger button container */
|
|
47
|
+
className?: string;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const GlobalThemes: React.FC<GlobalThemesProps> = ({
|
|
51
|
+
themeColor,
|
|
52
|
+
setThemeColor,
|
|
53
|
+
isDark,
|
|
54
|
+
playSound = () => { },
|
|
55
|
+
themes = DEFAULT_THEMES,
|
|
56
|
+
className = ''
|
|
57
|
+
}) => {
|
|
58
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
59
|
+
const [toastMessage, setToastMessage] = useState<string | null>(null);
|
|
60
|
+
const [showToast, setShowToast] = useState(false);
|
|
61
|
+
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
62
|
+
|
|
63
|
+
const showNotification = (message: string) => {
|
|
64
|
+
setToastMessage(message);
|
|
65
|
+
setShowToast(true);
|
|
66
|
+
setTimeout(() => setShowToast(false), 2000);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const handleMouseEnter = () => {
|
|
70
|
+
if (timeoutRef.current) {
|
|
71
|
+
clearTimeout(timeoutRef.current);
|
|
72
|
+
timeoutRef.current = null;
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const handleMouseLeave = () => {
|
|
77
|
+
timeoutRef.current = setTimeout(() => {
|
|
78
|
+
setIsOpen(false);
|
|
79
|
+
}, 1000);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
return () => {
|
|
84
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
85
|
+
};
|
|
86
|
+
}, []);
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<div className={`relative ${className}`}>
|
|
90
|
+
{/* Toast Notification */}
|
|
91
|
+
{showToast && (
|
|
92
|
+
<div className={`fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap
|
|
93
|
+
${isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800'}`}>
|
|
94
|
+
<span className="text-xs font-bold">{toastMessage}</span>
|
|
95
|
+
</div>
|
|
96
|
+
)}
|
|
97
|
+
|
|
98
|
+
{/* Trigger Button */}
|
|
99
|
+
<button
|
|
100
|
+
onClick={() => { setIsOpen(!isOpen); playSound('click'); }}
|
|
101
|
+
onMouseEnter={() => playSound('hover')}
|
|
102
|
+
className={`p-2 md:p-3 rounded-full transition-all duration-300
|
|
103
|
+
${isOpen
|
|
104
|
+
? (isDark ? `bg-zinc-800 text-blue-400` : `bg-blue-50 text-blue-600`) // Defaulting to blue/theme generic
|
|
105
|
+
: (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')
|
|
106
|
+
}`}
|
|
107
|
+
aria-label="Open theme menu"
|
|
108
|
+
>
|
|
109
|
+
<Palette size={20} className="md:w-6 md:h-6" />
|
|
110
|
+
</button>
|
|
111
|
+
|
|
112
|
+
{/* Popup Menu */}
|
|
113
|
+
{isOpen && (
|
|
114
|
+
<div
|
|
115
|
+
onMouseEnter={handleMouseEnter}
|
|
116
|
+
onMouseLeave={handleMouseLeave}
|
|
117
|
+
className={`absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] md:w-[300px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50
|
|
118
|
+
${isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60'}`}>
|
|
119
|
+
|
|
120
|
+
<div className="flex justify-between items-center mb-4">
|
|
121
|
+
<span className={`text-xs font-bold uppercase tracking-wider ${isDark ? 'text-zinc-500' : 'text-slate-500'}`}>Select Theme</span>
|
|
122
|
+
<button
|
|
123
|
+
onClick={() => { setIsOpen(false); playSound('click'); }}
|
|
124
|
+
onMouseEnter={() => playSound('hover')}
|
|
125
|
+
className={`p-1 rounded-full ${isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'}`}
|
|
126
|
+
aria-label="Close theme menu"
|
|
127
|
+
>
|
|
128
|
+
<X size={14} className={isDark ? 'text-zinc-400' : 'text-slate-400'} />
|
|
129
|
+
</button>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div className="grid grid-cols-5 gap-2">
|
|
133
|
+
{themes.map((theme) => (
|
|
134
|
+
<button
|
|
135
|
+
key={theme.id}
|
|
136
|
+
onClick={() => {
|
|
137
|
+
setThemeColor(theme.id);
|
|
138
|
+
playSound('click');
|
|
139
|
+
showNotification(`Theme: ${theme.name}`);
|
|
140
|
+
}}
|
|
141
|
+
onMouseEnter={() => playSound('hover')}
|
|
142
|
+
className={`group relative w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110
|
|
143
|
+
${themeColor === theme.id ? 'ring-2 ring-offset-2 ring-offset-zinc-900 ring-white scale-110' : ''}`}
|
|
144
|
+
style={{ backgroundColor: theme.previewColor }}
|
|
145
|
+
title={theme.name}
|
|
146
|
+
aria-label={`Select ${theme.name} theme`}
|
|
147
|
+
>
|
|
148
|
+
{themeColor === theme.id && <Check size={14} className="text-white drop-shadow-md md:w-4 md:h-4" />}
|
|
149
|
+
</button>
|
|
150
|
+
))}
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
)}
|
|
154
|
+
</div>
|
|
155
|
+
);
|
|
156
|
+
};
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es5",
|
|
4
|
+
"lib": [
|
|
5
|
+
"dom",
|
|
6
|
+
"dom.iterable",
|
|
7
|
+
"esnext"
|
|
8
|
+
],
|
|
9
|
+
"allowJs": true,
|
|
10
|
+
"skipLibCheck": true,
|
|
11
|
+
"esModuleInterop": true,
|
|
12
|
+
"allowSyntheticDefaultImports": true,
|
|
13
|
+
"strict": true,
|
|
14
|
+
"forceConsistentCasingInFileNames": true,
|
|
15
|
+
"noFallthroughCasesInSwitch": true,
|
|
16
|
+
"module": "esnext",
|
|
17
|
+
"moduleResolution": "node",
|
|
18
|
+
"resolveJsonModule": true,
|
|
19
|
+
"isolatedModules": true,
|
|
20
|
+
"jsx": "react-jsx",
|
|
21
|
+
"declaration": true,
|
|
22
|
+
"rootDir": "src",
|
|
23
|
+
"outDir": "dist"
|
|
24
|
+
},
|
|
25
|
+
"include": [
|
|
26
|
+
"src"
|
|
27
|
+
],
|
|
28
|
+
"exclude": [
|
|
29
|
+
"node_modules",
|
|
30
|
+
"dist"
|
|
31
|
+
]
|
|
32
|
+
}
|