asterui 0.12.29 → 0.12.30
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/dist/components/ColorPicker.d.ts +8 -2
- package/dist/index.d.ts +1 -1
- package/dist/index13.js +249 -151
- package/dist/index13.js.map +1 -1
- package/dist/index75.js +27 -27
- package/dist/index75.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
2
|
+
export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
3
3
|
value?: string;
|
|
4
|
+
defaultValue?: string;
|
|
4
5
|
onChange?: (color: string) => void;
|
|
5
6
|
mode?: 'swatches' | 'picker' | 'both';
|
|
6
7
|
presets?: string[];
|
|
7
8
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
8
9
|
disabled?: boolean;
|
|
10
|
+
showText?: boolean;
|
|
11
|
+
allowClear?: boolean;
|
|
12
|
+
open?: boolean;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
'data-testid'?: string;
|
|
9
15
|
}
|
|
10
|
-
export declare
|
|
16
|
+
export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/index.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ export type { ChartProps } from './components/Chart';
|
|
|
31
31
|
export { Carousel } from './components/Carousel';
|
|
32
32
|
export type { CarouselProps, CarouselItemProps } from './components/Carousel';
|
|
33
33
|
export { Collapse } from './components/Collapse';
|
|
34
|
-
export type { CollapseProps,
|
|
34
|
+
export type { CollapseProps, CollapseItemType, CollapseSize, CollapseIconPosition, CollapseCollapsible } from './components/Collapse';
|
|
35
35
|
export { Container } from './components/Container';
|
|
36
36
|
export type { ContainerProps } from './components/Container';
|
|
37
37
|
export { ContextMenu } from './components/ContextMenu';
|
package/dist/index13.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
const
|
|
1
|
+
import { jsxs as P, jsx as f, Fragment as le } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as fe, useState as g, useRef as U, useEffect as V, useCallback as C } from "react";
|
|
3
|
+
const de = [
|
|
4
4
|
"#000000",
|
|
5
5
|
"#434343",
|
|
6
6
|
"#666666",
|
|
@@ -82,187 +82,285 @@ const G = [
|
|
|
82
82
|
"#20124d",
|
|
83
83
|
"#4c1130"
|
|
84
84
|
];
|
|
85
|
-
function
|
|
86
|
-
|
|
87
|
-
const i =
|
|
88
|
-
const
|
|
89
|
-
return Math.round(255 *
|
|
85
|
+
function ue(a, c, s) {
|
|
86
|
+
c /= 100, s /= 100;
|
|
87
|
+
const i = c * Math.min(s, 1 - s), l = (u) => {
|
|
88
|
+
const t = (u + a / 30) % 12, p = s - i * Math.max(Math.min(t - 3, 9 - t, 1), -1);
|
|
89
|
+
return Math.round(255 * p).toString(16).padStart(2, "0");
|
|
90
90
|
};
|
|
91
|
-
return `#${
|
|
91
|
+
return `#${l(0)}${l(8)}${l(4)}`;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
94
|
-
const
|
|
95
|
-
if (!
|
|
96
|
-
let
|
|
97
|
-
const
|
|
98
|
-
let
|
|
99
|
-
const
|
|
100
|
-
if (
|
|
101
|
-
const
|
|
102
|
-
switch (
|
|
103
|
-
case
|
|
104
|
-
|
|
93
|
+
function $(a) {
|
|
94
|
+
const c = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
|
|
95
|
+
if (!c) return { h: 0, s: 100, l: 50 };
|
|
96
|
+
let s = parseInt(c[1], 16) / 255, i = parseInt(c[2], 16) / 255, l = parseInt(c[3], 16) / 255;
|
|
97
|
+
const u = Math.max(s, i, l), t = Math.min(s, i, l);
|
|
98
|
+
let p = 0, L = 0;
|
|
99
|
+
const H = (u + t) / 2;
|
|
100
|
+
if (u !== t) {
|
|
101
|
+
const w = u - t;
|
|
102
|
+
switch (L = H > 0.5 ? w / (2 - u - t) : w / (u + t), u) {
|
|
103
|
+
case s:
|
|
104
|
+
p = ((i - l) / w + (i < l ? 6 : 0)) / 6;
|
|
105
105
|
break;
|
|
106
106
|
case i:
|
|
107
|
-
|
|
107
|
+
p = ((l - s) / w + 2) / 6;
|
|
108
108
|
break;
|
|
109
|
-
case
|
|
110
|
-
|
|
109
|
+
case l:
|
|
110
|
+
p = ((s - i) / w + 4) / 6;
|
|
111
111
|
break;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
return { h: Math.round(
|
|
114
|
+
return { h: Math.round(p * 360), s: Math.round(L * 100), l: Math.round(H * 100) };
|
|
115
115
|
}
|
|
116
|
-
function
|
|
117
|
-
return /^#[0-9A-Fa-f]{6}$/.test(
|
|
116
|
+
function z(a) {
|
|
117
|
+
return /^#[0-9A-Fa-f]{6}$/.test(a);
|
|
118
118
|
}
|
|
119
|
-
function
|
|
120
|
-
let
|
|
121
|
-
return
|
|
119
|
+
function N(a) {
|
|
120
|
+
let c = a.trim();
|
|
121
|
+
return c.startsWith("#") || (c = "#" + c), c.toLowerCase();
|
|
122
122
|
}
|
|
123
|
-
|
|
124
|
-
value:
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
123
|
+
const he = fe(({
|
|
124
|
+
value: a,
|
|
125
|
+
defaultValue: c = "#000000",
|
|
126
|
+
onChange: s,
|
|
127
|
+
mode: i = "both",
|
|
128
|
+
presets: l = de,
|
|
129
|
+
size: u = "md",
|
|
129
130
|
disabled: t = !1,
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}, [
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
131
|
+
showText: p = !1,
|
|
132
|
+
allowClear: L = !1,
|
|
133
|
+
open: H,
|
|
134
|
+
onOpenChange: w,
|
|
135
|
+
className: Y,
|
|
136
|
+
"data-testid": O,
|
|
137
|
+
...W
|
|
138
|
+
}, _) => {
|
|
139
|
+
const q = a !== void 0 ? a : c, [G, y] = g(q), b = a !== void 0 ? a : G, [r, x] = g(() => $(b)), [v, M] = g(b), h = O || "colorpicker", [I, F] = g(!1), [B, X] = g(!1), R = U(null), j = U(null);
|
|
140
|
+
V(() => {
|
|
141
|
+
a !== void 0 && z(a) && (x($(a)), M(a));
|
|
142
|
+
}, [a]);
|
|
143
|
+
const [T, D] = g(null), m = C((e) => {
|
|
144
|
+
x(e);
|
|
145
|
+
const n = ue(e.h, e.s, e.l);
|
|
146
|
+
M(n), a === void 0 && y(n), s?.(n);
|
|
147
|
+
}, [s, a]), K = C((e, n) => {
|
|
148
|
+
if (t) return;
|
|
149
|
+
const o = e.shiftKey ? 10 : 1;
|
|
150
|
+
if (n === "sl") {
|
|
151
|
+
let d = r.s, k = r.l;
|
|
152
|
+
switch (e.key) {
|
|
153
|
+
case "ArrowLeft":
|
|
154
|
+
e.preventDefault(), d = Math.max(0, r.s - o);
|
|
155
|
+
break;
|
|
156
|
+
case "ArrowRight":
|
|
157
|
+
e.preventDefault(), d = Math.min(100, r.s + o);
|
|
158
|
+
break;
|
|
159
|
+
case "ArrowUp":
|
|
160
|
+
e.preventDefault(), k = Math.min(100, r.l + o);
|
|
161
|
+
break;
|
|
162
|
+
case "ArrowDown":
|
|
163
|
+
e.preventDefault(), k = Math.max(0, r.l - o);
|
|
164
|
+
break;
|
|
165
|
+
default:
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
m({ ...r, s: d, l: k });
|
|
169
|
+
} else if (n === "hue") {
|
|
170
|
+
let d = r.h;
|
|
171
|
+
switch (e.key) {
|
|
172
|
+
case "ArrowLeft":
|
|
173
|
+
e.preventDefault(), d = (r.h - o + 360) % 360;
|
|
174
|
+
break;
|
|
175
|
+
case "ArrowRight":
|
|
176
|
+
e.preventDefault(), d = (r.h + o) % 360;
|
|
177
|
+
break;
|
|
178
|
+
default:
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
m({ ...r, h: d });
|
|
182
|
+
}
|
|
183
|
+
}, [t, r, m]), A = C((e, n) => {
|
|
184
|
+
if (!R.current || t) return;
|
|
185
|
+
const o = R.current.getBoundingClientRect(), d = Math.max(0, Math.min(1, (e - o.left) / o.width)), k = Math.max(0, Math.min(1, (n - o.top) / o.height)), ce = Math.round(d * 100), ie = Math.round((1 - k) * 100);
|
|
186
|
+
m({ ...r, s: ce, l: ie });
|
|
187
|
+
}, [r, m, t]), J = (e) => {
|
|
188
|
+
t || (F(!0), A(e.clientX, e.clientY));
|
|
189
|
+
}, E = C((e) => {
|
|
190
|
+
if (!j.current || t) return;
|
|
191
|
+
const n = j.current.getBoundingClientRect(), o = Math.max(0, Math.min(1, (e - n.left) / n.width)), d = Math.round(o * 360);
|
|
192
|
+
m({ ...r, h: d });
|
|
193
|
+
}, [r, m, t]), Q = (e) => {
|
|
194
|
+
t || (X(!0), E(e.clientX));
|
|
153
195
|
};
|
|
154
|
-
|
|
155
|
-
const e = (
|
|
156
|
-
|
|
196
|
+
V(() => {
|
|
197
|
+
const e = (o) => {
|
|
198
|
+
I ? A(o.clientX, o.clientY) : B && E(o.clientX);
|
|
157
199
|
}, n = () => {
|
|
158
|
-
|
|
200
|
+
F(!1), X(!1);
|
|
159
201
|
};
|
|
160
|
-
if (
|
|
202
|
+
if (I || B)
|
|
161
203
|
return document.addEventListener("mousemove", e), document.addEventListener("mouseup", n), () => {
|
|
162
204
|
document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", n);
|
|
163
205
|
};
|
|
164
|
-
}, [
|
|
165
|
-
const
|
|
206
|
+
}, [I, B, A, E]);
|
|
207
|
+
const Z = (e) => {
|
|
166
208
|
const n = e.target.value;
|
|
167
|
-
|
|
168
|
-
const
|
|
169
|
-
|
|
170
|
-
},
|
|
209
|
+
M(n);
|
|
210
|
+
const o = N(n);
|
|
211
|
+
z(o) && (x($(o)), a === void 0 && y(o), s?.(o));
|
|
212
|
+
}, ee = (e) => {
|
|
213
|
+
if (t) return;
|
|
214
|
+
const n = N(e);
|
|
215
|
+
x($(n)), M(n), a === void 0 && y(n), s?.(n);
|
|
216
|
+
}, te = C(() => {
|
|
171
217
|
if (t) return;
|
|
172
|
-
const
|
|
173
|
-
|
|
174
|
-
},
|
|
218
|
+
const e = c;
|
|
219
|
+
x($(e)), M(e), a === void 0 && y(e), s?.(e);
|
|
220
|
+
}, [t, c, a, s]), S = {
|
|
175
221
|
xs: { panel: "w-32 h-32", hue: "h-3", swatch: "w-4 h-4", input: "input-xs" },
|
|
176
222
|
sm: { panel: "w-40 h-40", hue: "h-4", swatch: "w-5 h-5", input: "input-sm" },
|
|
177
223
|
md: { panel: "w-48 h-48", hue: "h-5", swatch: "w-6 h-6", input: "input-md" },
|
|
178
224
|
lg: { panel: "w-56 h-56", hue: "h-6", swatch: "w-7 h-7", input: "input-lg" }
|
|
179
|
-
}[
|
|
180
|
-
return /* @__PURE__ */
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
linear-gradient(to right, #fff, hsl(${f.h}, 100%, 50%))
|
|
191
|
-
`
|
|
192
|
-
},
|
|
193
|
-
onMouseDown: X,
|
|
194
|
-
children: /* @__PURE__ */ d(
|
|
225
|
+
}[u], ne = i === "picker" || i === "both", re = i === "swatches" || i === "both", ae = r.s / 100, oe = 1 - r.l / 100, se = r.h / 360;
|
|
226
|
+
return /* @__PURE__ */ P(
|
|
227
|
+
"div",
|
|
228
|
+
{
|
|
229
|
+
ref: _,
|
|
230
|
+
className: ["inline-flex flex-col gap-3", t ? "opacity-50 pointer-events-none" : "", Y].filter(Boolean).join(" "),
|
|
231
|
+
"data-testid": h,
|
|
232
|
+
...W,
|
|
233
|
+
children: [
|
|
234
|
+
ne && /* @__PURE__ */ P(le, { children: [
|
|
235
|
+
/* @__PURE__ */ f(
|
|
195
236
|
"div",
|
|
196
237
|
{
|
|
197
|
-
|
|
238
|
+
ref: R,
|
|
239
|
+
className: [S.panel, "relative rounded cursor-crosshair select-none", T === "sl" ? "ring-2 ring-primary" : ""].filter(Boolean).join(" "),
|
|
198
240
|
style: {
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
241
|
+
background: `
|
|
242
|
+
linear-gradient(to top, #000, transparent),
|
|
243
|
+
linear-gradient(to right, #fff, hsl(${r.h}, 100%, 50%))
|
|
244
|
+
`
|
|
245
|
+
},
|
|
246
|
+
onMouseDown: J,
|
|
247
|
+
onKeyDown: (e) => K(e, "sl"),
|
|
248
|
+
onFocus: () => D("sl"),
|
|
249
|
+
onBlur: () => D(null),
|
|
250
|
+
tabIndex: t ? -1 : 0,
|
|
251
|
+
role: "slider",
|
|
252
|
+
"aria-label": "Color saturation and lightness",
|
|
253
|
+
"aria-valuetext": `Saturation ${r.s}%, Lightness ${r.l}%`,
|
|
254
|
+
"data-testid": `${h}-sl-panel`,
|
|
255
|
+
children: /* @__PURE__ */ f(
|
|
256
|
+
"div",
|
|
257
|
+
{
|
|
258
|
+
className: "absolute w-4 h-4 border-2 border-white rounded-full shadow-md pointer-events-none",
|
|
259
|
+
style: {
|
|
260
|
+
left: `calc(${ae * 100}% - 8px)`,
|
|
261
|
+
top: `calc(${oe * 100}% - 8px)`,
|
|
262
|
+
boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)"
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
)
|
|
203
266
|
}
|
|
204
|
-
)
|
|
205
|
-
|
|
206
|
-
),
|
|
207
|
-
/* @__PURE__ */ d(
|
|
208
|
-
"div",
|
|
209
|
-
{
|
|
210
|
-
ref: C,
|
|
211
|
-
className: `${b.hue} w-full relative rounded cursor-pointer select-none`,
|
|
212
|
-
style: {
|
|
213
|
-
background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
|
|
214
|
-
},
|
|
215
|
-
onMouseDown: P,
|
|
216
|
-
children: /* @__PURE__ */ d(
|
|
267
|
+
),
|
|
268
|
+
/* @__PURE__ */ f(
|
|
217
269
|
"div",
|
|
218
270
|
{
|
|
219
|
-
|
|
271
|
+
ref: j,
|
|
272
|
+
className: [S.hue, "w-full relative rounded cursor-pointer select-none", T === "hue" ? "ring-2 ring-primary" : ""].filter(Boolean).join(" "),
|
|
220
273
|
style: {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
274
|
+
background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
|
|
275
|
+
},
|
|
276
|
+
onMouseDown: Q,
|
|
277
|
+
onKeyDown: (e) => K(e, "hue"),
|
|
278
|
+
onFocus: () => D("hue"),
|
|
279
|
+
onBlur: () => D(null),
|
|
280
|
+
tabIndex: t ? -1 : 0,
|
|
281
|
+
role: "slider",
|
|
282
|
+
"aria-label": "Color hue",
|
|
283
|
+
"aria-valuemin": 0,
|
|
284
|
+
"aria-valuemax": 360,
|
|
285
|
+
"aria-valuenow": r.h,
|
|
286
|
+
"aria-valuetext": `Hue ${r.h} degrees`,
|
|
287
|
+
"data-testid": `${h}-hue-slider`,
|
|
288
|
+
children: /* @__PURE__ */ f(
|
|
289
|
+
"div",
|
|
290
|
+
{
|
|
291
|
+
className: "absolute top-1/2 w-3 h-full border-2 border-white rounded-sm shadow-md pointer-events-none",
|
|
292
|
+
style: {
|
|
293
|
+
left: `calc(${se * 100}% - 6px)`,
|
|
294
|
+
transform: "translateY(-50%)",
|
|
295
|
+
boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)"
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
)
|
|
225
299
|
}
|
|
226
|
-
)
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
300
|
+
),
|
|
301
|
+
/* @__PURE__ */ P("div", { className: "flex items-center gap-2", children: [
|
|
302
|
+
/* @__PURE__ */ f(
|
|
303
|
+
"div",
|
|
304
|
+
{
|
|
305
|
+
className: "w-8 h-8 rounded border border-base-300 flex-shrink-0",
|
|
306
|
+
style: { backgroundColor: z(N(v)) ? N(v) : b },
|
|
307
|
+
"data-testid": `${h}-preview`,
|
|
308
|
+
"aria-label": `Color preview: ${v}`
|
|
309
|
+
}
|
|
310
|
+
),
|
|
311
|
+
/* @__PURE__ */ f(
|
|
312
|
+
"input",
|
|
313
|
+
{
|
|
314
|
+
type: "text",
|
|
315
|
+
value: v,
|
|
316
|
+
onChange: Z,
|
|
317
|
+
className: ["input", S.input, "w-full font-mono uppercase"].join(" "),
|
|
318
|
+
placeholder: "#000000",
|
|
319
|
+
maxLength: 7,
|
|
320
|
+
disabled: t,
|
|
321
|
+
"aria-label": "Hex color value",
|
|
322
|
+
"data-testid": `${h}-input`
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
L && !t && /* @__PURE__ */ f(
|
|
326
|
+
"button",
|
|
327
|
+
{
|
|
328
|
+
type: "button",
|
|
329
|
+
onClick: te,
|
|
330
|
+
className: "btn btn-ghost btn-xs btn-circle",
|
|
331
|
+
"aria-label": "Clear color",
|
|
332
|
+
"data-testid": `${h}-clear`,
|
|
333
|
+
children: /* @__PURE__ */ f("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ f("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
334
|
+
}
|
|
335
|
+
)
|
|
336
|
+
] }),
|
|
337
|
+
p && /* @__PURE__ */ f("div", { className: "text-sm font-mono text-base-content/70", "data-testid": `${h}-text`, children: v.toUpperCase() })
|
|
338
|
+
] }),
|
|
339
|
+
re && /* @__PURE__ */ f("div", { className: "grid grid-cols-10 gap-1", role: "listbox", "aria-label": "Color presets", "data-testid": `${h}-swatches`, children: l.map((e, n) => /* @__PURE__ */ f(
|
|
340
|
+
"button",
|
|
239
341
|
{
|
|
240
|
-
type: "
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
className:
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
`${e}-${n}`
|
|
262
|
-
)) })
|
|
263
|
-
] });
|
|
264
|
-
}
|
|
342
|
+
type: "button",
|
|
343
|
+
role: "option",
|
|
344
|
+
"aria-selected": b.toLowerCase() === e.toLowerCase(),
|
|
345
|
+
className: [
|
|
346
|
+
S.swatch,
|
|
347
|
+
"rounded border border-base-300 cursor-pointer hover:scale-110 transition-transform",
|
|
348
|
+
b.toLowerCase() === e.toLowerCase() ? "ring-2 ring-primary ring-offset-1" : ""
|
|
349
|
+
].filter(Boolean).join(" "),
|
|
350
|
+
style: { backgroundColor: e },
|
|
351
|
+
onClick: () => ee(e),
|
|
352
|
+
disabled: t,
|
|
353
|
+
"aria-label": `Select color ${e}`,
|
|
354
|
+
"data-testid": `${h}-swatch-${n}`
|
|
355
|
+
},
|
|
356
|
+
`${e}-${n}`
|
|
357
|
+
)) })
|
|
358
|
+
]
|
|
359
|
+
}
|
|
360
|
+
);
|
|
361
|
+
});
|
|
362
|
+
he.displayName = "ColorPicker";
|
|
265
363
|
export {
|
|
266
|
-
|
|
364
|
+
he as ColorPicker
|
|
267
365
|
};
|
|
268
366
|
//# sourceMappingURL=index13.js.map
|
package/dist/index13.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index13.js","sources":["../src/components/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react'\n\nexport interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n value?: string\n onChange?: (color: string) => void\n mode?: 'swatches' | 'picker' | 'both'\n presets?: string[]\n size?: 'xs' | 'sm' | 'md' | 'lg'\n disabled?: boolean\n}\n\nconst DEFAULT_PRESETS = [\n '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n '#dd7e6b', '#ea9999', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#a4c2f4', '#9fc5e8', '#b4a7d6', '#d5a6bd',\n '#cc4125', '#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6d9eeb', '#6fa8dc', '#8e7cc3', '#c27ba0',\n '#a61c00', '#cc0000', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3c78d8', '#3d85c6', '#674ea7', '#a64d79',\n '#85200c', '#990000', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#1155cc', '#0b5394', '#351c75', '#741b47',\n '#5b0f00', '#660000', '#783f04', '#7f6000', '#274e13', '#0c343d', '#1c4587', '#073763', '#20124d', '#4c1130',\n]\n\n// Convert HSL to Hex\nfunction hslToHex(h: number, s: number, l: number): string {\n s /= 100\n l /= 100\n const a = s * Math.min(l, 1 - l)\n const f = (n: number) => {\n const k = (n + h / 30) % 12\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n return Math.round(255 * color).toString(16).padStart(2, '0')\n }\n return `#${f(0)}${f(8)}${f(4)}`\n}\n\n// Convert Hex to HSL\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n if (!result) return { h: 0, s: 100, l: 50 }\n\n let r = parseInt(result[1], 16) / 255\n let g = parseInt(result[2], 16) / 255\n let b = parseInt(result[3], 16) / 255\n\n const max = Math.max(r, g, b)\n const min = Math.min(r, g, b)\n let h = 0\n let s = 0\n const l = (max + min) / 2\n\n if (max !== min) {\n const d = max - min\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min)\n switch (max) {\n case r:\n h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n break\n case g:\n h = ((b - r) / d + 2) / 6\n break\n case b:\n h = ((r - g) / d + 4) / 6\n break\n }\n }\n\n return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\n// Validate hex color\nfunction isValidHex(hex: string): boolean {\n return /^#[0-9A-Fa-f]{6}$/.test(hex)\n}\n\n// Normalize hex (add # if missing, uppercase)\nfunction normalizeHex(hex: string): string {\n let normalized = hex.trim()\n if (!normalized.startsWith('#')) {\n normalized = '#' + normalized\n }\n return normalized.toLowerCase()\n}\n\nexport function ColorPicker({\n value = '#000000',\n onChange,\n mode = 'both',\n presets = DEFAULT_PRESETS,\n size = 'md',\n disabled = false,\n className = '',\n ...rest\n}: ColorPickerProps) {\n const [hsl, setHsl] = useState(() => hexToHsl(value))\n const [hexInput, setHexInput] = useState(value)\n const [isDraggingSL, setIsDraggingSL] = useState(false)\n const [isDraggingHue, setIsDraggingHue] = useState(false)\n const slPanelRef = useRef<HTMLDivElement>(null)\n const hueSliderRef = useRef<HTMLDivElement>(null)\n\n // Sync internal state when value prop changes\n useEffect(() => {\n if (isValidHex(value)) {\n setHsl(hexToHsl(value))\n setHexInput(value)\n }\n }, [value])\n\n const updateColor = useCallback((newHsl: { h: number; s: number; l: number }) => {\n setHsl(newHsl)\n const hex = hslToHex(newHsl.h, newHsl.s, newHsl.l)\n setHexInput(hex)\n onChange?.(hex)\n }, [onChange])\n\n // Saturation/Lightness panel handlers\n const handleSLChange = useCallback((clientX: number, clientY: number) => {\n if (!slPanelRef.current || disabled) return\n const rect = slPanelRef.current.getBoundingClientRect()\n const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height))\n\n // Convert x,y to saturation and lightness\n // x = saturation (0-100), y = lightness (100-0)\n const s = Math.round(x * 100)\n const l = Math.round((1 - y) * 100)\n updateColor({ ...hsl, s, l })\n }, [hsl, updateColor, disabled])\n\n const handleSLMouseDown = (e: React.MouseEvent) => {\n if (disabled) return\n setIsDraggingSL(true)\n handleSLChange(e.clientX, e.clientY)\n }\n\n // Hue slider handlers\n const handleHueChange = useCallback((clientX: number) => {\n if (!hueSliderRef.current || disabled) return\n const rect = hueSliderRef.current.getBoundingClientRect()\n const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n const h = Math.round(x * 360)\n updateColor({ ...hsl, h })\n }, [hsl, updateColor, disabled])\n\n const handleHueMouseDown = (e: React.MouseEvent) => {\n if (disabled) return\n setIsDraggingHue(true)\n handleHueChange(e.clientX)\n }\n\n // Global mouse handlers for dragging\n useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (isDraggingSL) {\n handleSLChange(e.clientX, e.clientY)\n } else if (isDraggingHue) {\n handleHueChange(e.clientX)\n }\n }\n\n const handleMouseUp = () => {\n setIsDraggingSL(false)\n setIsDraggingHue(false)\n }\n\n if (isDraggingSL || isDraggingHue) {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n }\n }\n }, [isDraggingSL, isDraggingHue, handleSLChange, handleHueChange])\n\n // Hex input handler\n const handleHexChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n setHexInput(newValue)\n const normalized = normalizeHex(newValue)\n if (isValidHex(normalized)) {\n setHsl(hexToHsl(normalized))\n onChange?.(normalized)\n }\n }\n\n // Preset click handler\n const handlePresetClick = (color: string) => {\n if (disabled) return\n const normalized = normalizeHex(color)\n setHsl(hexToHsl(normalized))\n setHexInput(normalized)\n onChange?.(normalized)\n }\n\n // Size configurations\n const sizeConfig = {\n xs: { panel: 'w-32 h-32', hue: 'h-3', swatch: 'w-4 h-4', input: 'input-xs' },\n sm: { panel: 'w-40 h-40', hue: 'h-4', swatch: 'w-5 h-5', input: 'input-sm' },\n md: { panel: 'w-48 h-48', hue: 'h-5', swatch: 'w-6 h-6', input: 'input-md' },\n lg: { panel: 'w-56 h-56', hue: 'h-6', swatch: 'w-7 h-7', input: 'input-lg' },\n }\n\n const config = sizeConfig[size]\n const showPicker = mode === 'picker' || mode === 'both'\n const showSwatches = mode === 'swatches' || mode === 'both'\n\n // Calculate picker position\n const slX = hsl.s / 100\n const slY = 1 - hsl.l / 100\n const hueX = hsl.h / 360\n\n return (\n <div className={`inline-flex flex-col gap-3 ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className}`} {...rest}>\n {showPicker && (\n <>\n {/* Saturation/Lightness Panel */}\n <div\n ref={slPanelRef}\n className={`${config.panel} relative rounded cursor-crosshair select-none`}\n style={{\n background: `\n linear-gradient(to top, #000, transparent),\n linear-gradient(to right, #fff, hsl(${hsl.h}, 100%, 50%))\n `,\n }}\n onMouseDown={handleSLMouseDown}\n >\n {/* Picker indicator */}\n <div\n className=\"absolute w-4 h-4 border-2 border-white rounded-full shadow-md pointer-events-none\"\n style={{\n left: `calc(${slX * 100}% - 8px)`,\n top: `calc(${slY * 100}% - 8px)`,\n boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)',\n }}\n />\n </div>\n\n {/* Hue Slider */}\n <div\n ref={hueSliderRef}\n className={`${config.hue} w-full relative rounded cursor-pointer select-none`}\n style={{\n background: 'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',\n }}\n onMouseDown={handleHueMouseDown}\n >\n {/* Hue indicator */}\n <div\n className=\"absolute top-1/2 w-3 h-full border-2 border-white rounded-sm shadow-md pointer-events-none\"\n style={{\n left: `calc(${hueX * 100}% - 6px)`,\n transform: 'translateY(-50%)',\n boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)',\n }}\n />\n </div>\n\n {/* Hex Input and Preview */}\n <div className=\"flex items-center gap-2\">\n <div\n className=\"w-8 h-8 rounded border border-base-300 flex-shrink-0\"\n style={{ backgroundColor: isValidHex(normalizeHex(hexInput)) ? normalizeHex(hexInput) : value }}\n />\n <input\n type=\"text\"\n value={hexInput}\n onChange={handleHexChange}\n className={`input ${config.input} w-full font-mono uppercase`}\n placeholder=\"#000000\"\n maxLength={7}\n disabled={disabled}\n />\n </div>\n </>\n )}\n\n {showSwatches && (\n <div className=\"grid grid-cols-10 gap-1\">\n {presets.map((color, index) => (\n <button\n key={`${color}-${index}`}\n type=\"button\"\n className={`${config.swatch} rounded border border-base-300 cursor-pointer hover:scale-110 transition-transform ${\n value.toLowerCase() === color.toLowerCase() ? 'ring-2 ring-primary ring-offset-1' : ''\n }`}\n style={{ backgroundColor: color }}\n onClick={() => handlePresetClick(color)}\n disabled={disabled}\n aria-label={`Select color ${color}`}\n />\n ))}\n </div>\n )}\n </div>\n )\n}\n"],"names":["DEFAULT_PRESETS","hslToHex","h","s","l","a","f","n","k","color","hexToHsl","hex","result","r","g","b","max","min","d","isValidHex","normalizeHex","normalized","ColorPicker","value","onChange","mode","presets","size","disabled","className","rest","hsl","setHsl","useState","hexInput","setHexInput","isDraggingSL","setIsDraggingSL","isDraggingHue","setIsDraggingHue","slPanelRef","useRef","hueSliderRef","useEffect","updateColor","useCallback","newHsl","handleSLChange","clientX","clientY","rect","x","y","handleSLMouseDown","handleHueChange","handleHueMouseDown","handleMouseMove","e","handleMouseUp","handleHexChange","newValue","handlePresetClick","config","showPicker","showSwatches","slX","slY","hueX","jsxs","Fragment","jsx","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index13.js","sources":["../src/components/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback, forwardRef } from 'react'\n\nexport interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n value?: string\n defaultValue?: string\n onChange?: (color: string) => void\n mode?: 'swatches' | 'picker' | 'both'\n presets?: string[]\n size?: 'xs' | 'sm' | 'md' | 'lg'\n disabled?: boolean\n showText?: boolean\n allowClear?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n 'data-testid'?: string\n}\n\nconst DEFAULT_PRESETS = [\n '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',\n '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',\n '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',\n '#dd7e6b', '#ea9999', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#a4c2f4', '#9fc5e8', '#b4a7d6', '#d5a6bd',\n '#cc4125', '#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6d9eeb', '#6fa8dc', '#8e7cc3', '#c27ba0',\n '#a61c00', '#cc0000', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3c78d8', '#3d85c6', '#674ea7', '#a64d79',\n '#85200c', '#990000', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#1155cc', '#0b5394', '#351c75', '#741b47',\n '#5b0f00', '#660000', '#783f04', '#7f6000', '#274e13', '#0c343d', '#1c4587', '#073763', '#20124d', '#4c1130',\n]\n\n// Convert HSL to Hex\nfunction hslToHex(h: number, s: number, l: number): string {\n s /= 100\n l /= 100\n const a = s * Math.min(l, 1 - l)\n const f = (n: number) => {\n const k = (n + h / 30) % 12\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n return Math.round(255 * color).toString(16).padStart(2, '0')\n }\n return `#${f(0)}${f(8)}${f(4)}`\n}\n\n// Convert Hex to HSL\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n if (!result) return { h: 0, s: 100, l: 50 }\n\n let r = parseInt(result[1], 16) / 255\n let g = parseInt(result[2], 16) / 255\n let b = parseInt(result[3], 16) / 255\n\n const max = Math.max(r, g, b)\n const min = Math.min(r, g, b)\n let h = 0\n let s = 0\n const l = (max + min) / 2\n\n if (max !== min) {\n const d = max - min\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min)\n switch (max) {\n case r:\n h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n break\n case g:\n h = ((b - r) / d + 2) / 6\n break\n case b:\n h = ((r - g) / d + 4) / 6\n break\n }\n }\n\n return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\n// Validate hex color\nfunction isValidHex(hex: string): boolean {\n return /^#[0-9A-Fa-f]{6}$/.test(hex)\n}\n\n// Normalize hex (add # if missing, uppercase)\nfunction normalizeHex(hex: string): string {\n let normalized = hex.trim()\n if (!normalized.startsWith('#')) {\n normalized = '#' + normalized\n }\n return normalized.toLowerCase()\n}\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(({\n value,\n defaultValue = '#000000',\n onChange,\n mode = 'both',\n presets = DEFAULT_PRESETS,\n size = 'md',\n disabled = false,\n showText = false,\n allowClear = false,\n open: controlledOpen,\n onOpenChange,\n className,\n 'data-testid': testId,\n ...rest\n}, ref) => {\n const initialValue = value !== undefined ? value : defaultValue\n const [internalValue, setInternalValue] = useState(initialValue)\n const currentValue = value !== undefined ? value : internalValue\n\n const [hsl, setHsl] = useState(() => hexToHsl(currentValue))\n const [hexInput, setHexInput] = useState(currentValue)\n const baseTestId = testId || 'colorpicker'\n const [isDraggingSL, setIsDraggingSL] = useState(false)\n const [isDraggingHue, setIsDraggingHue] = useState(false)\n const slPanelRef = useRef<HTMLDivElement>(null)\n const hueSliderRef = useRef<HTMLDivElement>(null)\n\n // Sync internal state when value prop changes\n useEffect(() => {\n if (value !== undefined && isValidHex(value)) {\n setHsl(hexToHsl(value))\n setHexInput(value)\n }\n }, [value])\n\n // Keyboard navigation state\n const [focusedPanel, setFocusedPanel] = useState<'sl' | 'hue' | null>(null)\n\n const updateColor = useCallback((newHsl: { h: number; s: number; l: number }) => {\n setHsl(newHsl)\n const hex = hslToHex(newHsl.h, newHsl.s, newHsl.l)\n setHexInput(hex)\n if (value === undefined) {\n setInternalValue(hex)\n }\n onChange?.(hex)\n }, [onChange, value])\n\n // Keyboard navigation for panels\n const handleKeyDown = useCallback((e: React.KeyboardEvent, panel: 'sl' | 'hue') => {\n if (disabled) return\n const step = e.shiftKey ? 10 : 1\n\n if (panel === 'sl') {\n let newS = hsl.s\n let newL = hsl.l\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault()\n newS = Math.max(0, hsl.s - step)\n break\n case 'ArrowRight':\n e.preventDefault()\n newS = Math.min(100, hsl.s + step)\n break\n case 'ArrowUp':\n e.preventDefault()\n newL = Math.min(100, hsl.l + step)\n break\n case 'ArrowDown':\n e.preventDefault()\n newL = Math.max(0, hsl.l - step)\n break\n default:\n return\n }\n updateColor({ ...hsl, s: newS, l: newL })\n } else if (panel === 'hue') {\n let newH = hsl.h\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault()\n newH = (hsl.h - step + 360) % 360\n break\n case 'ArrowRight':\n e.preventDefault()\n newH = (hsl.h + step) % 360\n break\n default:\n return\n }\n updateColor({ ...hsl, h: newH })\n }\n }, [disabled, hsl, updateColor])\n\n // Saturation/Lightness panel handlers\n const handleSLChange = useCallback((clientX: number, clientY: number) => {\n if (!slPanelRef.current || disabled) return\n const rect = slPanelRef.current.getBoundingClientRect()\n const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height))\n\n // Convert x,y to saturation and lightness\n // x = saturation (0-100), y = lightness (100-0)\n const s = Math.round(x * 100)\n const l = Math.round((1 - y) * 100)\n updateColor({ ...hsl, s, l })\n }, [hsl, updateColor, disabled])\n\n const handleSLMouseDown = (e: React.MouseEvent) => {\n if (disabled) return\n setIsDraggingSL(true)\n handleSLChange(e.clientX, e.clientY)\n }\n\n // Hue slider handlers\n const handleHueChange = useCallback((clientX: number) => {\n if (!hueSliderRef.current || disabled) return\n const rect = hueSliderRef.current.getBoundingClientRect()\n const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n const h = Math.round(x * 360)\n updateColor({ ...hsl, h })\n }, [hsl, updateColor, disabled])\n\n const handleHueMouseDown = (e: React.MouseEvent) => {\n if (disabled) return\n setIsDraggingHue(true)\n handleHueChange(e.clientX)\n }\n\n // Global mouse handlers for dragging\n useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (isDraggingSL) {\n handleSLChange(e.clientX, e.clientY)\n } else if (isDraggingHue) {\n handleHueChange(e.clientX)\n }\n }\n\n const handleMouseUp = () => {\n setIsDraggingSL(false)\n setIsDraggingHue(false)\n }\n\n if (isDraggingSL || isDraggingHue) {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n }\n }\n }, [isDraggingSL, isDraggingHue, handleSLChange, handleHueChange])\n\n // Hex input handler\n const handleHexChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n setHexInput(newValue)\n const normalized = normalizeHex(newValue)\n if (isValidHex(normalized)) {\n setHsl(hexToHsl(normalized))\n if (value === undefined) {\n setInternalValue(normalized)\n }\n onChange?.(normalized)\n }\n }\n\n // Preset click handler\n const handlePresetClick = (color: string) => {\n if (disabled) return\n const normalized = normalizeHex(color)\n setHsl(hexToHsl(normalized))\n setHexInput(normalized)\n if (value === undefined) {\n setInternalValue(normalized)\n }\n onChange?.(normalized)\n }\n\n // Clear handler\n const handleClear = useCallback(() => {\n if (disabled) return\n const cleared = defaultValue\n setHsl(hexToHsl(cleared))\n setHexInput(cleared)\n if (value === undefined) {\n setInternalValue(cleared)\n }\n onChange?.(cleared)\n }, [disabled, defaultValue, value, onChange])\n\n // Size configurations\n const sizeConfig = {\n xs: { panel: 'w-32 h-32', hue: 'h-3', swatch: 'w-4 h-4', input: 'input-xs' },\n sm: { panel: 'w-40 h-40', hue: 'h-4', swatch: 'w-5 h-5', input: 'input-sm' },\n md: { panel: 'w-48 h-48', hue: 'h-5', swatch: 'w-6 h-6', input: 'input-md' },\n lg: { panel: 'w-56 h-56', hue: 'h-6', swatch: 'w-7 h-7', input: 'input-lg' },\n }\n\n const config = sizeConfig[size]\n const showPicker = mode === 'picker' || mode === 'both'\n const showSwatches = mode === 'swatches' || mode === 'both'\n\n // Calculate picker position\n const slX = hsl.s / 100\n const slY = 1 - hsl.l / 100\n const hueX = hsl.h / 360\n\n return (\n <div\n ref={ref}\n className={['inline-flex flex-col gap-3', disabled ? 'opacity-50 pointer-events-none' : '', className].filter(Boolean).join(' ')}\n data-testid={baseTestId}\n {...rest}\n >\n {showPicker && (\n <>\n {/* Saturation/Lightness Panel */}\n <div\n ref={slPanelRef}\n className={[config.panel, 'relative rounded cursor-crosshair select-none', focusedPanel === 'sl' ? 'ring-2 ring-primary' : ''].filter(Boolean).join(' ')}\n style={{\n background: `\n linear-gradient(to top, #000, transparent),\n linear-gradient(to right, #fff, hsl(${hsl.h}, 100%, 50%))\n `,\n }}\n onMouseDown={handleSLMouseDown}\n onKeyDown={(e) => handleKeyDown(e, 'sl')}\n onFocus={() => setFocusedPanel('sl')}\n onBlur={() => setFocusedPanel(null)}\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label=\"Color saturation and lightness\"\n aria-valuetext={`Saturation ${hsl.s}%, Lightness ${hsl.l}%`}\n data-testid={`${baseTestId}-sl-panel`}\n >\n {/* Picker indicator */}\n <div\n className=\"absolute w-4 h-4 border-2 border-white rounded-full shadow-md pointer-events-none\"\n style={{\n left: `calc(${slX * 100}% - 8px)`,\n top: `calc(${slY * 100}% - 8px)`,\n boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)',\n }}\n />\n </div>\n\n {/* Hue Slider */}\n <div\n ref={hueSliderRef}\n className={[config.hue, 'w-full relative rounded cursor-pointer select-none', focusedPanel === 'hue' ? 'ring-2 ring-primary' : ''].filter(Boolean).join(' ')}\n style={{\n background: 'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',\n }}\n onMouseDown={handleHueMouseDown}\n onKeyDown={(e) => handleKeyDown(e, 'hue')}\n onFocus={() => setFocusedPanel('hue')}\n onBlur={() => setFocusedPanel(null)}\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label=\"Color hue\"\n aria-valuemin={0}\n aria-valuemax={360}\n aria-valuenow={hsl.h}\n aria-valuetext={`Hue ${hsl.h} degrees`}\n data-testid={`${baseTestId}-hue-slider`}\n >\n {/* Hue indicator */}\n <div\n className=\"absolute top-1/2 w-3 h-full border-2 border-white rounded-sm shadow-md pointer-events-none\"\n style={{\n left: `calc(${hueX * 100}% - 6px)`,\n transform: 'translateY(-50%)',\n boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3)',\n }}\n />\n </div>\n\n {/* Hex Input and Preview */}\n <div className=\"flex items-center gap-2\">\n <div\n className=\"w-8 h-8 rounded border border-base-300 flex-shrink-0\"\n style={{ backgroundColor: isValidHex(normalizeHex(hexInput)) ? normalizeHex(hexInput) : currentValue }}\n data-testid={`${baseTestId}-preview`}\n aria-label={`Color preview: ${hexInput}`}\n />\n <input\n type=\"text\"\n value={hexInput}\n onChange={handleHexChange}\n className={['input', config.input, 'w-full font-mono uppercase'].join(' ')}\n placeholder=\"#000000\"\n maxLength={7}\n disabled={disabled}\n aria-label=\"Hex color value\"\n data-testid={`${baseTestId}-input`}\n />\n {allowClear && !disabled && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"btn btn-ghost btn-xs btn-circle\"\n aria-label=\"Clear color\"\n data-testid={`${baseTestId}-clear`}\n >\n <svg className=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n </div>\n\n {/* Show text display */}\n {showText && (\n <div className=\"text-sm font-mono text-base-content/70\" data-testid={`${baseTestId}-text`}>\n {hexInput.toUpperCase()}\n </div>\n )}\n </>\n )}\n\n {showSwatches && (\n <div className=\"grid grid-cols-10 gap-1\" role=\"listbox\" aria-label=\"Color presets\" data-testid={`${baseTestId}-swatches`}>\n {presets.map((color, index) => (\n <button\n key={`${color}-${index}`}\n type=\"button\"\n role=\"option\"\n aria-selected={currentValue.toLowerCase() === color.toLowerCase()}\n className={[\n config.swatch,\n 'rounded border border-base-300 cursor-pointer hover:scale-110 transition-transform',\n currentValue.toLowerCase() === color.toLowerCase() ? 'ring-2 ring-primary ring-offset-1' : ''\n ].filter(Boolean).join(' ')}\n style={{ backgroundColor: color }}\n onClick={() => handlePresetClick(color)}\n disabled={disabled}\n aria-label={`Select color ${color}`}\n data-testid={`${baseTestId}-swatch-${index}`}\n />\n ))}\n </div>\n )}\n </div>\n )\n})\n\nColorPicker.displayName = 'ColorPicker'\n"],"names":["DEFAULT_PRESETS","hslToHex","h","s","l","a","f","n","k","color","hexToHsl","hex","result","r","g","b","max","min","d","isValidHex","normalizeHex","normalized","ColorPicker","forwardRef","value","defaultValue","onChange","mode","presets","size","disabled","showText","allowClear","controlledOpen","onOpenChange","className","testId","rest","ref","initialValue","internalValue","setInternalValue","useState","currentValue","hsl","setHsl","hexInput","setHexInput","baseTestId","isDraggingSL","setIsDraggingSL","isDraggingHue","setIsDraggingHue","slPanelRef","useRef","hueSliderRef","useEffect","focusedPanel","setFocusedPanel","updateColor","useCallback","newHsl","handleKeyDown","panel","step","newS","newL","newH","handleSLChange","clientX","clientY","rect","x","y","handleSLMouseDown","handleHueChange","handleHueMouseDown","handleMouseMove","e","handleMouseUp","handleHexChange","newValue","handlePresetClick","handleClear","cleared","config","showPicker","showSwatches","slX","slY","hueX","jsxs","Fragment","jsx","index"],"mappings":"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"}
|
package/dist/index75.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import v from "react";
|
|
3
3
|
const w = {
|
|
4
4
|
xs: "gap-1",
|
|
5
5
|
sm: "gap-2",
|
|
6
6
|
md: "gap-4",
|
|
7
7
|
lg: "gap-6",
|
|
8
8
|
xl: "gap-8"
|
|
9
|
-
},
|
|
9
|
+
}, A = {
|
|
10
10
|
start: "items-start",
|
|
11
11
|
end: "items-end",
|
|
12
12
|
center: "items-center",
|
|
@@ -19,43 +19,43 @@ const w = {
|
|
|
19
19
|
between: "justify-between",
|
|
20
20
|
around: "justify-around",
|
|
21
21
|
evenly: "justify-evenly"
|
|
22
|
-
},
|
|
23
|
-
direction:
|
|
24
|
-
size:
|
|
25
|
-
align:
|
|
22
|
+
}, z = ({
|
|
23
|
+
direction: r = "horizontal",
|
|
24
|
+
size: e = "md",
|
|
25
|
+
align: p,
|
|
26
26
|
justify: a,
|
|
27
|
-
wrap:
|
|
27
|
+
wrap: u = !1,
|
|
28
28
|
split: l,
|
|
29
|
-
className:
|
|
30
|
-
style:
|
|
31
|
-
children:
|
|
32
|
-
...
|
|
29
|
+
className: d = "",
|
|
30
|
+
style: m,
|
|
31
|
+
children: s,
|
|
32
|
+
...g
|
|
33
33
|
}) => {
|
|
34
|
-
const o = typeof
|
|
34
|
+
const o = typeof e == "number", h = o ? "" : w[e], i = p ?? (r === "vertical" ? "start" : void 0), y = i ? A[i] : "", C = a ? N[a] : "", j = [
|
|
35
35
|
"flex",
|
|
36
|
-
|
|
36
|
+
r === "horizontal" ? "flex-row" : "flex-col",
|
|
37
37
|
h,
|
|
38
38
|
y,
|
|
39
39
|
C,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
].filter(Boolean).join(" "),
|
|
43
|
-
...
|
|
44
|
-
...o ? { gap: `${
|
|
40
|
+
u ? "flex-wrap" : "",
|
|
41
|
+
d
|
|
42
|
+
].filter(Boolean).join(" "), x = {
|
|
43
|
+
...m,
|
|
44
|
+
...o ? { gap: `${e}px` } : {}
|
|
45
45
|
};
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
if (!l) return
|
|
48
|
-
const t =
|
|
49
|
-
if (t.length <= 1) return
|
|
46
|
+
return /* @__PURE__ */ f("div", { className: j, style: x, ...g, children: (() => {
|
|
47
|
+
if (!l) return s;
|
|
48
|
+
const t = v.Children.toArray(s).filter(Boolean);
|
|
49
|
+
if (t.length <= 1) return s;
|
|
50
50
|
const n = [];
|
|
51
|
-
return t.forEach((
|
|
52
|
-
n.push(
|
|
53
|
-
/* @__PURE__ */
|
|
51
|
+
return t.forEach((b, c) => {
|
|
52
|
+
n.push(b), c < t.length - 1 && n.push(
|
|
53
|
+
/* @__PURE__ */ f("span", { className: "flex-shrink-0", children: l }, `split-${c}`)
|
|
54
54
|
);
|
|
55
55
|
}), n;
|
|
56
56
|
})() });
|
|
57
57
|
};
|
|
58
58
|
export {
|
|
59
|
-
|
|
59
|
+
z as Space
|
|
60
60
|
};
|
|
61
61
|
//# sourceMappingURL=index75.js.map
|
package/dist/index75.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index75.js","sources":["../src/components/Space.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {\n direction?: 'horizontal' | 'vertical'\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\n wrap?: boolean\n split?: React.ReactNode\n children: React.ReactNode\n}\n\nconst gapClasses = {\n xs: 'gap-1',\n sm: 'gap-2',\n md: 'gap-4',\n lg: 'gap-6',\n xl: 'gap-8',\n} as const\n\nconst alignClasses = {\n start: 'items-start',\n end: 'items-end',\n center: 'items-center',\n baseline: 'items-baseline',\n stretch: 'items-stretch',\n} as const\n\nconst justifyClasses = {\n start: 'justify-start',\n end: 'justify-end',\n center: 'justify-center',\n between: 'justify-between',\n around: 'justify-around',\n evenly: 'justify-evenly',\n} as const\n\nexport const Space: React.FC<SpaceProps> = ({\n direction = 'horizontal',\n size = 'md',\n align,\n justify,\n wrap = false,\n split,\n className = '',\n style,\n children,\n ...rest\n}) => {\n const isNumericSize = typeof size === 'number'\n const gapClass = isNumericSize ? '' : gapClasses[size]\n const
|
|
1
|
+
{"version":3,"file":"index75.js","sources":["../src/components/Space.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {\n direction?: 'horizontal' | 'vertical'\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\n wrap?: boolean\n split?: React.ReactNode\n children: React.ReactNode\n}\n\nconst gapClasses = {\n xs: 'gap-1',\n sm: 'gap-2',\n md: 'gap-4',\n lg: 'gap-6',\n xl: 'gap-8',\n} as const\n\nconst alignClasses = {\n start: 'items-start',\n end: 'items-end',\n center: 'items-center',\n baseline: 'items-baseline',\n stretch: 'items-stretch',\n} as const\n\nconst justifyClasses = {\n start: 'justify-start',\n end: 'justify-end',\n center: 'justify-center',\n between: 'justify-between',\n around: 'justify-around',\n evenly: 'justify-evenly',\n} as const\n\nexport const Space: React.FC<SpaceProps> = ({\n direction = 'horizontal',\n size = 'md',\n align,\n justify,\n wrap = false,\n split,\n className = '',\n style,\n children,\n ...rest\n}) => {\n const isNumericSize = typeof size === 'number'\n const gapClass = isNumericSize ? '' : gapClasses[size]\n const effectiveAlign = align ?? (direction === 'vertical' ? 'start' : undefined)\n const alignClass = effectiveAlign ? alignClasses[effectiveAlign] : ''\n const justifyClass = justify ? justifyClasses[justify] : ''\n const wrapClass = wrap ? 'flex-wrap' : ''\n const directionClass = direction === 'horizontal' ? 'flex-row' : 'flex-col'\n\n const classes = [\n 'flex',\n directionClass,\n gapClass,\n alignClass,\n justifyClass,\n wrapClass,\n className\n ].filter(Boolean).join(' ')\n\n const combinedStyle: React.CSSProperties = {\n ...style,\n ...(isNumericSize ? { gap: `${size}px` } : {}),\n }\n\n // If split is provided, interleave separator between children\n const renderChildren = () => {\n if (!split) return children\n\n const childArray = React.Children.toArray(children).filter(Boolean)\n if (childArray.length <= 1) return children\n\n const result: React.ReactNode[] = []\n childArray.forEach((child, index) => {\n result.push(child)\n if (index < childArray.length - 1) {\n result.push(\n <span key={`split-${index}`} className=\"flex-shrink-0\">\n {split}\n </span>\n )\n }\n })\n return result\n }\n\n return <div className={classes} style={combinedStyle} {...rest}>{renderChildren()}</div>\n}\n"],"names":["gapClasses","alignClasses","justifyClasses","Space","direction","size","align","justify","wrap","split","className","style","children","rest","isNumericSize","gapClass","effectiveAlign","alignClass","justifyClass","classes","combinedStyle","jsx","childArray","React","result","child","index"],"mappings":";;AAYA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAEMC,IAAiB;AAAA,EACrB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAA8B,CAAC;AAAA,EAC1C,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgB,OAAOT,KAAS,UAChCU,IAAWD,IAAgB,KAAKd,EAAWK,CAAI,GAC/CW,IAAiBV,MAAUF,MAAc,aAAa,UAAU,SAChEa,IAAaD,IAAiBf,EAAae,CAAc,IAAI,IAC7DE,IAAeX,IAAUL,EAAeK,CAAO,IAAI,IAInDY,IAAU;AAAA,IACd;AAAA,IAHqBf,MAAc,eAAe,aAAa;AAAA,IAK/DW;AAAA,IACAE;AAAA,IACAC;AAAA,IARgBV,IAAO,cAAc;AAAA,IAUrCE;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG,GAEpBU,IAAqC;AAAA,IACzC,GAAGT;AAAA,IACH,GAAIG,IAAgB,EAAE,KAAK,GAAGT,CAAI,SAAS,CAAA;AAAA,EAAC;AAwB9C,SAAO,gBAAAgB,EAAC,SAAI,WAAWF,GAAS,OAAOC,GAAgB,GAAGP,GAAO,WApB1C,MAAM;AAC3B,QAAI,CAACJ,EAAO,QAAOG;AAEnB,UAAMU,IAAaC,EAAM,SAAS,QAAQX,CAAQ,EAAE,OAAO,OAAO;AAClE,QAAIU,EAAW,UAAU,EAAG,QAAOV;AAEnC,UAAMY,IAA4B,CAAA;AAClC,WAAAF,EAAW,QAAQ,CAACG,GAAOC,MAAU;AACnC,MAAAF,EAAO,KAAKC,CAAK,GACbC,IAAQJ,EAAW,SAAS,KAC9BE,EAAO;AAAA,0BACJ,QAAA,EAA4B,WAAU,iBACpC,UAAAf,KADQ,SAASiB,CAAK,EAEzB;AAAA,MAAA;AAAA,IAGN,CAAC,GACMF;AAAA,EACT,GAEiE,EAAe,CAAE;AACpF;"}
|