asterui 0.12.24 → 0.12.25
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/Card.d.ts +24 -7
- package/dist/components/Tag.d.ts +8 -4
- package/dist/components/TreeSelect.d.ts +35 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +43 -42
- package/dist/index11.js +55 -55
- package/dist/index11.js.map +1 -1
- package/dist/index13.js +39 -39
- package/dist/index13.js.map +1 -1
- package/dist/index14.js +192 -107
- package/dist/index14.js.map +1 -1
- package/dist/index15.js +1 -1
- package/dist/index15.js.map +1 -1
- package/dist/index30.js +9 -8
- package/dist/index30.js.map +1 -1
- package/dist/index35.js +35 -36
- package/dist/index35.js.map +1 -1
- package/dist/index43.js +19 -20
- package/dist/index43.js.map +1 -1
- package/dist/index44.js +6 -7
- package/dist/index44.js.map +1 -1
- package/dist/index5.js +9 -9
- package/dist/index5.js.map +1 -1
- package/dist/index61.js +7 -7
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +10 -10
- package/dist/index62.js.map +1 -1
- package/dist/index85.js +126 -92
- package/dist/index85.js.map +1 -1
- package/dist/index92.js +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index94.js +478 -385
- package/dist/index94.js.map +1 -1
- package/package.json +1 -1
package/dist/index13.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as N, jsx as
|
|
1
|
+
import { jsxs as N, jsx as d, Fragment as q } from "react/jsx-runtime";
|
|
2
2
|
import { useState as x, useRef as z, useEffect as R, useCallback as D } from "react";
|
|
3
3
|
const G = [
|
|
4
4
|
"#000000",
|
|
@@ -82,47 +82,47 @@ const G = [
|
|
|
82
82
|
"#20124d",
|
|
83
83
|
"#4c1130"
|
|
84
84
|
];
|
|
85
|
-
function J(
|
|
86
|
-
|
|
87
|
-
const i =
|
|
88
|
-
const l = (t +
|
|
85
|
+
function J(r, o, c) {
|
|
86
|
+
o /= 100, c /= 100;
|
|
87
|
+
const i = o * Math.min(c, 1 - c), a = (t) => {
|
|
88
|
+
const l = (t + r / 30) % 12, u = c - i * Math.max(Math.min(l - 3, 9 - l, 1), -1);
|
|
89
89
|
return Math.round(255 * u).toString(16).padStart(2, "0");
|
|
90
90
|
};
|
|
91
91
|
return `#${a(0)}${a(8)}${a(4)}`;
|
|
92
92
|
}
|
|
93
|
-
function w(
|
|
94
|
-
const
|
|
95
|
-
if (!
|
|
96
|
-
let c = parseInt(
|
|
93
|
+
function w(r) {
|
|
94
|
+
const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
|
|
95
|
+
if (!o) return { h: 0, s: 100, l: 50 };
|
|
96
|
+
let c = parseInt(o[1], 16) / 255, i = parseInt(o[2], 16) / 255, a = parseInt(o[3], 16) / 255;
|
|
97
97
|
const t = Math.max(c, i, a), l = Math.min(c, i, a);
|
|
98
98
|
let u = 0, f = 0;
|
|
99
99
|
const p = (t + l) / 2;
|
|
100
100
|
if (t !== l) {
|
|
101
|
-
const
|
|
102
|
-
switch (f = p > 0.5 ?
|
|
101
|
+
const h = t - l;
|
|
102
|
+
switch (f = p > 0.5 ? h / (2 - t - l) : h / (t + l), t) {
|
|
103
103
|
case c:
|
|
104
|
-
u = ((i - a) /
|
|
104
|
+
u = ((i - a) / h + (i < a ? 6 : 0)) / 6;
|
|
105
105
|
break;
|
|
106
106
|
case i:
|
|
107
|
-
u = ((a - c) /
|
|
107
|
+
u = ((a - c) / h + 2) / 6;
|
|
108
108
|
break;
|
|
109
109
|
case a:
|
|
110
|
-
u = ((c - i) /
|
|
110
|
+
u = ((c - i) / h + 4) / 6;
|
|
111
111
|
break;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
return { h: Math.round(u * 360), s: Math.round(f * 100), l: Math.round(p * 100) };
|
|
115
115
|
}
|
|
116
|
-
function E(
|
|
117
|
-
return /^#[0-9A-Fa-f]{6}$/.test(
|
|
116
|
+
function E(r) {
|
|
117
|
+
return /^#[0-9A-Fa-f]{6}$/.test(r);
|
|
118
118
|
}
|
|
119
|
-
function M(
|
|
120
|
-
let
|
|
121
|
-
return
|
|
119
|
+
function M(r) {
|
|
120
|
+
let o = r.trim();
|
|
121
|
+
return o.startsWith("#") || (o = "#" + o), o.toLowerCase();
|
|
122
122
|
}
|
|
123
123
|
function Z({
|
|
124
|
-
value:
|
|
125
|
-
onChange:
|
|
124
|
+
value: r = "#000000",
|
|
125
|
+
onChange: o,
|
|
126
126
|
mode: c = "both",
|
|
127
127
|
presets: i = G,
|
|
128
128
|
size: a = "md",
|
|
@@ -130,15 +130,15 @@ function Z({
|
|
|
130
130
|
className: l = "",
|
|
131
131
|
...u
|
|
132
132
|
}) {
|
|
133
|
-
const [f, p] = x(() => w(
|
|
133
|
+
const [f, p] = x(() => w(r)), [h, m] = x(r), [$, H] = x(!1), [v, I] = x(!1), k = z(null), C = z(null);
|
|
134
134
|
R(() => {
|
|
135
|
-
E(
|
|
136
|
-
}, [
|
|
135
|
+
E(r) && (p(w(r)), m(r));
|
|
136
|
+
}, [r]);
|
|
137
137
|
const g = D((e) => {
|
|
138
138
|
p(e);
|
|
139
139
|
const n = J(e.h, e.s, e.l);
|
|
140
|
-
m(n),
|
|
141
|
-
}, [
|
|
140
|
+
m(n), o?.(n);
|
|
141
|
+
}, [o]), S = D((e, n) => {
|
|
142
142
|
if (!k.current || t) return;
|
|
143
143
|
const s = k.current.getBoundingClientRect(), y = Math.max(0, Math.min(1, (e - s.left) / s.width)), V = Math.max(0, Math.min(1, (n - s.top) / s.height)), W = Math.round(y * 100), _ = Math.round((1 - V) * 100);
|
|
144
144
|
g({ ...f, s: W, l: _ });
|
|
@@ -166,11 +166,11 @@ function Z({
|
|
|
166
166
|
const n = e.target.value;
|
|
167
167
|
m(n);
|
|
168
168
|
const s = M(n);
|
|
169
|
-
E(s) && (p(w(s)),
|
|
169
|
+
E(s) && (p(w(s)), o?.(s));
|
|
170
170
|
}, Y = (e) => {
|
|
171
171
|
if (t) return;
|
|
172
172
|
const n = M(e);
|
|
173
|
-
p(w(n)), m(n),
|
|
173
|
+
p(w(n)), m(n), o?.(n);
|
|
174
174
|
}, b = {
|
|
175
175
|
xs: { panel: "w-32 h-32", hue: "h-3", swatch: "w-4 h-4", input: "input-xs" },
|
|
176
176
|
sm: { panel: "w-40 h-40", hue: "h-4", swatch: "w-5 h-5", input: "input-sm" },
|
|
@@ -179,7 +179,7 @@ function Z({
|
|
|
179
179
|
}[a], F = c === "picker" || c === "both", j = c === "swatches" || c === "both", A = f.s / 100, B = 1 - f.l / 100, U = f.h / 360;
|
|
180
180
|
return /* @__PURE__ */ N("div", { className: `inline-flex flex-col gap-3 ${t ? "opacity-50 pointer-events-none" : ""} ${l}`, ...u, children: [
|
|
181
181
|
F && /* @__PURE__ */ N(q, { children: [
|
|
182
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ d(
|
|
183
183
|
"div",
|
|
184
184
|
{
|
|
185
185
|
ref: k,
|
|
@@ -191,7 +191,7 @@ function Z({
|
|
|
191
191
|
`
|
|
192
192
|
},
|
|
193
193
|
onMouseDown: X,
|
|
194
|
-
children: /* @__PURE__ */
|
|
194
|
+
children: /* @__PURE__ */ d(
|
|
195
195
|
"div",
|
|
196
196
|
{
|
|
197
197
|
className: "absolute w-4 h-4 border-2 border-white rounded-full shadow-md pointer-events-none",
|
|
@@ -204,7 +204,7 @@ function Z({
|
|
|
204
204
|
)
|
|
205
205
|
}
|
|
206
206
|
),
|
|
207
|
-
/* @__PURE__ */
|
|
207
|
+
/* @__PURE__ */ d(
|
|
208
208
|
"div",
|
|
209
209
|
{
|
|
210
210
|
ref: C,
|
|
@@ -213,7 +213,7 @@ function Z({
|
|
|
213
213
|
background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
|
|
214
214
|
},
|
|
215
215
|
onMouseDown: P,
|
|
216
|
-
children: /* @__PURE__ */
|
|
216
|
+
children: /* @__PURE__ */ d(
|
|
217
217
|
"div",
|
|
218
218
|
{
|
|
219
219
|
className: "absolute top-1/2 w-3 h-full border-2 border-white rounded-sm shadow-md pointer-events-none",
|
|
@@ -227,20 +227,20 @@ function Z({
|
|
|
227
227
|
}
|
|
228
228
|
),
|
|
229
229
|
/* @__PURE__ */ N("div", { className: "flex items-center gap-2", children: [
|
|
230
|
-
/* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ d(
|
|
231
231
|
"div",
|
|
232
232
|
{
|
|
233
233
|
className: "w-8 h-8 rounded border border-base-300 flex-shrink-0",
|
|
234
|
-
style: { backgroundColor: E(M(
|
|
234
|
+
style: { backgroundColor: E(M(h)) ? M(h) : r }
|
|
235
235
|
}
|
|
236
236
|
),
|
|
237
|
-
/* @__PURE__ */
|
|
237
|
+
/* @__PURE__ */ d(
|
|
238
238
|
"input",
|
|
239
239
|
{
|
|
240
240
|
type: "text",
|
|
241
|
-
value:
|
|
241
|
+
value: h,
|
|
242
242
|
onChange: T,
|
|
243
|
-
className: `input
|
|
243
|
+
className: `input ${b.input} w-full font-mono uppercase`,
|
|
244
244
|
placeholder: "#000000",
|
|
245
245
|
maxLength: 7,
|
|
246
246
|
disabled: t
|
|
@@ -248,11 +248,11 @@ function Z({
|
|
|
248
248
|
)
|
|
249
249
|
] })
|
|
250
250
|
] }),
|
|
251
|
-
j && /* @__PURE__ */
|
|
251
|
+
j && /* @__PURE__ */ d("div", { className: "grid grid-cols-10 gap-1", children: i.map((e, n) => /* @__PURE__ */ d(
|
|
252
252
|
"button",
|
|
253
253
|
{
|
|
254
254
|
type: "button",
|
|
255
|
-
className: `${b.swatch} rounded border border-base-300 cursor-pointer hover:scale-110 transition-transform ${
|
|
255
|
+
className: `${b.swatch} rounded border border-base-300 cursor-pointer hover:scale-110 transition-transform ${r.toLowerCase() === e.toLowerCase() ? "ring-2 ring-primary ring-offset-1" : ""}`,
|
|
256
256
|
style: { backgroundColor: e },
|
|
257
257
|
onClick: () => Y(e),
|
|
258
258
|
disabled: t,
|
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 input-bordered ${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","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 } 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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"}
|
package/dist/index14.js
CHANGED
|
@@ -1,116 +1,201 @@
|
|
|
1
|
-
import { jsxs as s, jsx as e, Fragment as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
|
|
2
|
+
import P, { forwardRef as u } from "react";
|
|
3
|
+
const Q = {
|
|
4
|
+
xs: "card-xs",
|
|
5
|
+
sm: "card-sm",
|
|
6
|
+
md: "card-md",
|
|
7
|
+
lg: "card-lg",
|
|
8
|
+
xl: "card-xl"
|
|
9
|
+
}, U = {
|
|
10
|
+
default: "shadow-sm",
|
|
11
|
+
border: "card-border",
|
|
12
|
+
dash: "card-dash",
|
|
13
|
+
borderless: ""
|
|
14
|
+
}, $ = {
|
|
15
|
+
start: "justify-start",
|
|
16
|
+
center: "justify-center",
|
|
17
|
+
end: "justify-end"
|
|
18
|
+
}, C = u(
|
|
19
|
+
({ children: i, hoverable: a = !1, className: r = "", "data-testid": t, ...n }, m) => {
|
|
20
|
+
const c = [
|
|
21
|
+
"p-6 border border-base-content/10",
|
|
22
|
+
a && "cursor-pointer hover:shadow-md transition-shadow",
|
|
23
|
+
r
|
|
24
|
+
].filter(Boolean).join(" ");
|
|
25
|
+
return /* @__PURE__ */ e("div", { ref: m, className: c, "data-testid": t, ...n, children: i });
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
C.displayName = "Card.Grid";
|
|
29
|
+
const M = u(
|
|
30
|
+
({ avatar: i, title: a, description: r, className: t = "", "data-testid": n, ...m }, c) => /* @__PURE__ */ s("div", { ref: c, className: `flex gap-4 ${t}`, "data-testid": n, ...m, children: [
|
|
31
|
+
i && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: i }),
|
|
13
32
|
/* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
|
|
14
33
|
a && /* @__PURE__ */ e("div", { className: "font-medium", children: a }),
|
|
15
|
-
|
|
34
|
+
r && /* @__PURE__ */ e("div", { className: "text-sm opacity-70 mt-1", children: r })
|
|
16
35
|
] })
|
|
17
|
-
] })
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
/* @__PURE__ */ e("div", { className: "skeleton h-
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
36
|
+
] })
|
|
37
|
+
);
|
|
38
|
+
M.displayName = "Card.Meta";
|
|
39
|
+
const G = u(
|
|
40
|
+
({
|
|
41
|
+
children: i,
|
|
42
|
+
title: a,
|
|
43
|
+
extra: r,
|
|
44
|
+
cover: t,
|
|
45
|
+
actions: n,
|
|
46
|
+
className: m = "",
|
|
47
|
+
size: c,
|
|
48
|
+
bordered: R,
|
|
49
|
+
variant: T,
|
|
50
|
+
type: A,
|
|
51
|
+
side: B = !1,
|
|
52
|
+
imageFull: v = !1,
|
|
53
|
+
actionsJustify: b = "end",
|
|
54
|
+
loading: I = !1,
|
|
55
|
+
hoverable: K = !1,
|
|
56
|
+
avatar: o,
|
|
57
|
+
description: h,
|
|
58
|
+
tabList: f,
|
|
59
|
+
activeTabKey: y,
|
|
60
|
+
defaultActiveTabKey: _,
|
|
61
|
+
onTabChange: H,
|
|
62
|
+
tabBarExtraContent: w,
|
|
63
|
+
"data-testid": O,
|
|
64
|
+
...x
|
|
65
|
+
}, k) => {
|
|
66
|
+
const l = O ?? "card", [S, V] = P.useState(
|
|
67
|
+
_ ?? f?.[0]?.key
|
|
68
|
+
), g = y ?? S, q = (d) => {
|
|
69
|
+
y === void 0 && V(d), H?.(d);
|
|
70
|
+
}, z = T ?? (R === !1 ? "borderless" : "default"), p = [
|
|
71
|
+
"card",
|
|
72
|
+
"bg-base-100",
|
|
73
|
+
c && Q[c],
|
|
74
|
+
// Don't add variant styling when imageFull is used (it breaks the overlay effect)
|
|
75
|
+
!v && U[z],
|
|
76
|
+
B && "card-side",
|
|
77
|
+
v && "image-full shadow-sm",
|
|
78
|
+
K && "transition-shadow hover:shadow-lg cursor-pointer",
|
|
79
|
+
A === "inner" && "bg-base-200",
|
|
80
|
+
m
|
|
81
|
+
].filter(Boolean).join(" ");
|
|
82
|
+
if (I)
|
|
83
|
+
return /* @__PURE__ */ s(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
ref: k,
|
|
87
|
+
className: p,
|
|
88
|
+
"data-testid": l,
|
|
89
|
+
"data-loading": "true",
|
|
90
|
+
...x,
|
|
91
|
+
children: [
|
|
92
|
+
t && /* @__PURE__ */ e("figure", { children: /* @__PURE__ */ e("div", { className: "skeleton h-48 w-full rounded-none" }) }),
|
|
93
|
+
/* @__PURE__ */ s("div", { className: "card-body", children: [
|
|
94
|
+
(o || a) && /* @__PURE__ */ s("div", { className: "flex gap-4 mb-4", children: [
|
|
95
|
+
o && /* @__PURE__ */ e("div", { className: "skeleton w-12 h-12 rounded-full flex-shrink-0" }),
|
|
96
|
+
/* @__PURE__ */ s("div", { className: "flex-1 space-y-2", children: [
|
|
97
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-6 w-2/3" }),
|
|
98
|
+
h && /* @__PURE__ */ e("div", { className: "skeleton h-4 w-full" })
|
|
99
|
+
] })
|
|
100
|
+
] }),
|
|
101
|
+
!o && !a && /* @__PURE__ */ s(N, { children: [
|
|
102
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-6 w-2/3 mb-4" }),
|
|
103
|
+
/* @__PURE__ */ s("div", { className: "space-y-2", children: [
|
|
104
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-4 w-full" }),
|
|
105
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-4 w-5/6" }),
|
|
106
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-4 w-4/6" })
|
|
107
|
+
] })
|
|
108
|
+
] }),
|
|
109
|
+
n && /* @__PURE__ */ s("div", { className: `card-actions ${$[b]} mt-4`, children: [
|
|
110
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-10 w-20" }),
|
|
111
|
+
/* @__PURE__ */ e("div", { className: "skeleton h-10 w-20" })
|
|
112
|
+
] })
|
|
113
|
+
] })
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
const D = o || a && h, j = () => !a && !r ? null : r ? /* @__PURE__ */ s(
|
|
118
|
+
"div",
|
|
119
|
+
{
|
|
120
|
+
className: "flex justify-between items-start gap-4",
|
|
121
|
+
"data-testid": `${l}-header`,
|
|
122
|
+
children: [
|
|
123
|
+
a && /* @__PURE__ */ e("h2", { className: "card-title", children: a }),
|
|
124
|
+
/* @__PURE__ */ e("div", { className: "flex-shrink-0", "data-testid": `${l}-extra`, children: r })
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
) : a ? /* @__PURE__ */ e("h2", { className: "card-title", children: a }) : null, F = () => !f || f.length === 0 ? null : /* @__PURE__ */ e(
|
|
128
|
+
"div",
|
|
129
|
+
{
|
|
130
|
+
className: "border-b border-base-300 px-4",
|
|
131
|
+
"data-testid": `${l}-tabs`,
|
|
132
|
+
children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
|
|
133
|
+
/* @__PURE__ */ e("div", { role: "tablist", className: "tabs", children: f.map((d) => /* @__PURE__ */ e(
|
|
134
|
+
"button",
|
|
135
|
+
{
|
|
136
|
+
role: "tab",
|
|
137
|
+
className: [
|
|
138
|
+
"tab",
|
|
139
|
+
g === d.key && "tab-active",
|
|
140
|
+
d.disabled && "tab-disabled"
|
|
141
|
+
].filter(Boolean).join(" "),
|
|
142
|
+
onClick: () => !d.disabled && q(d.key),
|
|
143
|
+
disabled: d.disabled,
|
|
144
|
+
"aria-selected": g === d.key,
|
|
145
|
+
"data-testid": `${l}-tab-${d.key}`,
|
|
146
|
+
children: d.label
|
|
147
|
+
},
|
|
148
|
+
d.key
|
|
149
|
+
)) }),
|
|
150
|
+
w && /* @__PURE__ */ e("div", { "data-testid": `${l}-tab-extra`, children: w })
|
|
81
151
|
] })
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
/* @__PURE__ */ s("div", { className: "
|
|
95
|
-
|
|
96
|
-
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
return /* @__PURE__ */ s(
|
|
155
|
+
"div",
|
|
156
|
+
{
|
|
157
|
+
ref: k,
|
|
158
|
+
className: p,
|
|
159
|
+
"data-testid": l,
|
|
160
|
+
...x,
|
|
161
|
+
children: [
|
|
162
|
+
t && /* @__PURE__ */ e("figure", { "data-testid": `${l}-cover`, children: t }),
|
|
163
|
+
F(),
|
|
164
|
+
/* @__PURE__ */ s("div", { className: "card-body", "data-testid": `${l}-body`, children: [
|
|
165
|
+
D ? /* @__PURE__ */ s(N, { children: [
|
|
166
|
+
/* @__PURE__ */ s("div", { className: "flex gap-4", children: [
|
|
167
|
+
o && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: o }),
|
|
168
|
+
/* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
|
|
169
|
+
j(),
|
|
170
|
+
h && /* @__PURE__ */ e("p", { className: "text-sm opacity-70 mt-1", children: h })
|
|
171
|
+
] })
|
|
172
|
+
] }),
|
|
173
|
+
i
|
|
174
|
+
] }) : /* @__PURE__ */ s(N, { children: [
|
|
175
|
+
j(),
|
|
176
|
+
i
|
|
177
|
+
] }),
|
|
178
|
+
n && /* @__PURE__ */ e(
|
|
179
|
+
"div",
|
|
180
|
+
{
|
|
181
|
+
className: `card-actions ${$[b]}`,
|
|
182
|
+
"data-testid": `${l}-actions`,
|
|
183
|
+
children: n
|
|
184
|
+
}
|
|
185
|
+
)
|
|
97
186
|
] })
|
|
98
|
-
]
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
const G = Object.assign(M, {
|
|
109
|
-
Grid: y,
|
|
110
|
-
Meta: C
|
|
187
|
+
]
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
G.displayName = "Card";
|
|
193
|
+
const Y = Object.assign(G, {
|
|
194
|
+
Grid: C,
|
|
195
|
+
Meta: M
|
|
111
196
|
});
|
|
112
197
|
export {
|
|
113
|
-
|
|
114
|
-
|
|
198
|
+
Y as Card,
|
|
199
|
+
Y as default
|
|
115
200
|
};
|
|
116
201
|
//# sourceMappingURL=index14.js.map
|