asterui 0.12.88 → 0.12.90
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/Chart.js +91 -88
- package/dist/components/Chart.js.map +1 -1
- package/dist/components/QRCode.js +14 -14
- package/dist/components/QRCode.js.map +1 -1
- package/dist/components/Terminal.js +96 -93
- package/dist/components/Terminal.js.map +1 -1
- package/dist/components/ThemeController.js +1 -1
- package/dist/components/ThemeController.js.map +1 -1
- package/dist/components/Watermark.js +12 -12
- package/dist/components/Watermark.js.map +1 -1
- package/dist/hooks/useTheme.d.ts +11 -21
- package/dist/hooks/useTheme.js +43 -88
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +45 -44
- package/dist/providers/ThemeProvider.d.ts +5 -13
- package/dist/providers/ThemeProvider.js +61 -64
- package/dist/providers/ThemeProvider.js.map +1 -1
- package/package.json +1 -1
package/dist/components/Chart.js
CHANGED
|
@@ -1,123 +1,126 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as p, useEffect as m } from "react";
|
|
3
|
-
import
|
|
4
|
-
import { useTheme as
|
|
5
|
-
function
|
|
6
|
-
const
|
|
3
|
+
import x from "apexcharts";
|
|
4
|
+
import { useTheme as k, getThemeColors as C } from "../hooks/useTheme.js";
|
|
5
|
+
function l(t, o) {
|
|
6
|
+
const s = { ...t };
|
|
7
7
|
for (const e in o)
|
|
8
|
-
o[e] !== void 0 && (typeof o[e] == "object" && o[e] !== null && !Array.isArray(o[e]) && typeof t[e] == "object" && t[e] !== null && !Array.isArray(t[e]) ?
|
|
8
|
+
o[e] !== void 0 && (typeof o[e] == "object" && o[e] !== null && !Array.isArray(o[e]) && typeof t[e] == "object" && t[e] !== null && !Array.isArray(t[e]) ? s[e] = l(
|
|
9
9
|
t[e],
|
|
10
10
|
o[e]
|
|
11
|
-
) :
|
|
12
|
-
return
|
|
11
|
+
) : s[e] = o[e]);
|
|
12
|
+
return s;
|
|
13
13
|
}
|
|
14
|
-
const
|
|
14
|
+
const j = ({
|
|
15
15
|
type: t,
|
|
16
16
|
series: o,
|
|
17
|
-
width:
|
|
17
|
+
width: s = "100%",
|
|
18
18
|
height: e = 350,
|
|
19
19
|
options: c = {},
|
|
20
|
-
themed:
|
|
21
|
-
className:
|
|
22
|
-
"data-testid":
|
|
20
|
+
themed: d = !0,
|
|
21
|
+
className: h = "",
|
|
22
|
+
"data-testid": y
|
|
23
23
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
background: "transparent",
|
|
39
|
-
foreColor: r.foreground
|
|
40
|
-
},
|
|
41
|
-
grid: {
|
|
42
|
-
borderColor: r.foreground + "20"
|
|
43
|
-
// 12.5% opacity
|
|
44
|
-
},
|
|
45
|
-
xaxis: {
|
|
46
|
-
labels: {
|
|
47
|
-
style: {
|
|
48
|
-
colors: r.foreground
|
|
49
|
-
}
|
|
24
|
+
const a = p(null), n = p(null), { isDark: u } = k(), b = () => {
|
|
25
|
+
const r = C();
|
|
26
|
+
return {
|
|
27
|
+
colors: [
|
|
28
|
+
r.primary,
|
|
29
|
+
r.secondary,
|
|
30
|
+
r.accent,
|
|
31
|
+
r.info,
|
|
32
|
+
r.success,
|
|
33
|
+
r.warning,
|
|
34
|
+
r.error
|
|
35
|
+
],
|
|
36
|
+
theme: {
|
|
37
|
+
mode: u ? "dark" : "light"
|
|
50
38
|
},
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
chart: {
|
|
40
|
+
background: "transparent",
|
|
41
|
+
foreColor: r.foreground
|
|
53
42
|
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
grid: {
|
|
44
|
+
borderColor: r.foreground + "20"
|
|
45
|
+
// 12.5% opacity
|
|
46
|
+
},
|
|
47
|
+
xaxis: {
|
|
48
|
+
labels: {
|
|
49
|
+
style: {
|
|
50
|
+
colors: r.foreground
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
axisBorder: {
|
|
54
|
+
color: r.foreground + "20"
|
|
55
|
+
},
|
|
56
|
+
axisTicks: {
|
|
57
|
+
color: r.foreground + "20"
|
|
62
58
|
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
legend: {
|
|
66
|
-
labels: {
|
|
67
|
-
colors: r.foreground
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
tooltip: {
|
|
71
|
-
theme: d ? "dark" : "light",
|
|
72
|
-
style: {
|
|
73
|
-
fontSize: "12px"
|
|
74
59
|
},
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
yaxis: {
|
|
61
|
+
labels: {
|
|
62
|
+
style: {
|
|
63
|
+
colors: r.foreground
|
|
64
|
+
}
|
|
65
|
+
}
|
|
77
66
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
dataLabels: {
|
|
83
|
-
style: {
|
|
84
|
-
colors: Array(7).fill(r.foreground)
|
|
67
|
+
legend: {
|
|
68
|
+
labels: {
|
|
69
|
+
colors: r.foreground
|
|
70
|
+
}
|
|
85
71
|
},
|
|
86
|
-
|
|
87
|
-
|
|
72
|
+
tooltip: {
|
|
73
|
+
theme: u ? "dark" : "light",
|
|
74
|
+
style: {
|
|
75
|
+
fontSize: "12px"
|
|
76
|
+
},
|
|
77
|
+
x: {
|
|
78
|
+
show: !0
|
|
79
|
+
},
|
|
80
|
+
marker: {
|
|
81
|
+
show: !0
|
|
82
|
+
}
|
|
88
83
|
},
|
|
89
|
-
|
|
90
|
-
|
|
84
|
+
dataLabels: {
|
|
85
|
+
style: {
|
|
86
|
+
colors: Array(7).fill(r.foreground)
|
|
87
|
+
},
|
|
88
|
+
background: {
|
|
89
|
+
enabled: !1
|
|
90
|
+
},
|
|
91
|
+
dropShadow: {
|
|
92
|
+
enabled: !1
|
|
93
|
+
}
|
|
91
94
|
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
const
|
|
95
|
+
};
|
|
96
|
+
}, f = () => {
|
|
97
|
+
const r = {
|
|
95
98
|
chart: {
|
|
96
99
|
type: t,
|
|
97
|
-
width:
|
|
100
|
+
width: s,
|
|
98
101
|
height: e
|
|
99
102
|
},
|
|
100
103
|
series: o
|
|
101
104
|
};
|
|
102
|
-
if (
|
|
103
|
-
const
|
|
104
|
-
return
|
|
105
|
+
if (d) {
|
|
106
|
+
const i = b();
|
|
107
|
+
return l(l(r, i), c);
|
|
105
108
|
}
|
|
106
|
-
return
|
|
109
|
+
return l(r, c);
|
|
107
110
|
};
|
|
108
111
|
return m(() => {
|
|
109
|
-
if (!
|
|
110
|
-
const
|
|
111
|
-
return n.current = new
|
|
112
|
+
if (!a.current) return;
|
|
113
|
+
const r = f();
|
|
114
|
+
return n.current = new x(a.current, r), n.current.render(), () => {
|
|
112
115
|
n.current && (n.current.destroy(), n.current = null);
|
|
113
116
|
};
|
|
114
117
|
}, []), m(() => {
|
|
115
118
|
if (!n.current) return;
|
|
116
|
-
const
|
|
117
|
-
n.current.updateOptions(
|
|
118
|
-
}, [t, o,
|
|
119
|
+
const r = f();
|
|
120
|
+
n.current.updateOptions(r, !0, !0);
|
|
121
|
+
}, [t, o, s, e, c, d, u]), /* @__PURE__ */ g("div", { ref: a, className: h, "data-testid": y });
|
|
119
122
|
};
|
|
120
123
|
export {
|
|
121
|
-
|
|
124
|
+
j as Chart
|
|
122
125
|
};
|
|
123
126
|
//# sourceMappingURL=Chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","sources":["../../src/components/Chart.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport ApexCharts from 'apexcharts'\nimport type { ApexOptions } from 'apexcharts'\nimport { useTheme } from '../hooks/useTheme'\n\nexport interface ChartProps {\n /** Chart type */\n type: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap'\n /** Chart series data */\n series: ApexAxisChartSeries | ApexNonAxisChartSeries\n /** Chart width */\n width?: string | number\n /** Chart height */\n height?: string | number\n /** ApexCharts options (merged with theme defaults) */\n options?: ApexOptions\n /** Use daisyUI theme colors */\n themed?: boolean\n /** Additional CSS classes */\n className?: string\n 'data-testid'?: string\n}\n\n// Deep merge objects\nfunction deepMerge<T extends Record<string, unknown>>(target: T, source: Partial<T>): T {\n const result = { ...target }\n\n for (const key in source) {\n if (source[key] !== undefined) {\n if (\n typeof source[key] === 'object' &&\n source[key] !== null &&\n !Array.isArray(source[key]) &&\n typeof target[key] === 'object' &&\n target[key] !== null &&\n !Array.isArray(target[key])\n ) {\n result[key] = deepMerge(\n target[key] as Record<string, unknown>,\n source[key] as Record<string, unknown>\n ) as T[Extract<keyof T, string>]\n } else {\n result[key] = source[key] as T[Extract<keyof T, string>]\n }\n }\n }\n\n return result\n}\n\nexport const Chart: React.FC<ChartProps> = ({\n type,\n series,\n width = '100%',\n height = 350,\n options = {},\n themed = true,\n className = '',\n 'data-testid': testId,\n}) => {\n const chartRef = useRef<HTMLDivElement>(null)\n const chartInstance = useRef<ApexCharts | null>(null)\n const { isDark
|
|
1
|
+
{"version":3,"file":"Chart.js","sources":["../../src/components/Chart.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport ApexCharts from 'apexcharts'\nimport type { ApexOptions } from 'apexcharts'\nimport { useTheme, getThemeColors } from '../hooks/useTheme'\n\nexport interface ChartProps {\n /** Chart type */\n type: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap'\n /** Chart series data */\n series: ApexAxisChartSeries | ApexNonAxisChartSeries\n /** Chart width */\n width?: string | number\n /** Chart height */\n height?: string | number\n /** ApexCharts options (merged with theme defaults) */\n options?: ApexOptions\n /** Use daisyUI theme colors */\n themed?: boolean\n /** Additional CSS classes */\n className?: string\n 'data-testid'?: string\n}\n\n// Deep merge objects\nfunction deepMerge<T extends Record<string, unknown>>(target: T, source: Partial<T>): T {\n const result = { ...target }\n\n for (const key in source) {\n if (source[key] !== undefined) {\n if (\n typeof source[key] === 'object' &&\n source[key] !== null &&\n !Array.isArray(source[key]) &&\n typeof target[key] === 'object' &&\n target[key] !== null &&\n !Array.isArray(target[key])\n ) {\n result[key] = deepMerge(\n target[key] as Record<string, unknown>,\n source[key] as Record<string, unknown>\n ) as T[Extract<keyof T, string>]\n } else {\n result[key] = source[key] as T[Extract<keyof T, string>]\n }\n }\n }\n\n return result\n}\n\nexport const Chart: React.FC<ChartProps> = ({\n type,\n series,\n width = '100%',\n height = 350,\n options = {},\n themed = true,\n className = '',\n 'data-testid': testId,\n}) => {\n const chartRef = useRef<HTMLDivElement>(null)\n const chartInstance = useRef<ApexCharts | null>(null)\n const { isDark } = useTheme()\n\n // Build theme-aware chart options\n const getThemedOptions = (): Partial<ApexOptions> => {\n const colors = getThemeColors()\n const chartColors = [\n colors.primary,\n colors.secondary,\n colors.accent,\n colors.info,\n colors.success,\n colors.warning,\n colors.error,\n ]\n\n return {\n colors: chartColors,\n theme: {\n mode: isDark ? 'dark' : 'light',\n },\n chart: {\n background: 'transparent',\n foreColor: colors.foreground,\n },\n grid: {\n borderColor: colors.foreground + '20', // 12.5% opacity\n },\n xaxis: {\n labels: {\n style: {\n colors: colors.foreground,\n },\n },\n axisBorder: {\n color: colors.foreground + '20',\n },\n axisTicks: {\n color: colors.foreground + '20',\n },\n },\n yaxis: {\n labels: {\n style: {\n colors: colors.foreground,\n },\n },\n },\n legend: {\n labels: {\n colors: colors.foreground,\n },\n },\n tooltip: {\n theme: isDark ? 'dark' : 'light',\n style: {\n fontSize: '12px',\n },\n x: {\n show: true,\n },\n marker: {\n show: true,\n },\n },\n dataLabels: {\n style: {\n colors: Array(7).fill(colors.foreground),\n },\n background: {\n enabled: false,\n },\n dropShadow: {\n enabled: false,\n },\n },\n }\n }\n\n // Build final options\n const buildOptions = (): ApexOptions => {\n const baseOptions: ApexOptions = {\n chart: {\n type,\n width,\n height,\n },\n series,\n }\n\n if (themed) {\n const themedOpts = getThemedOptions()\n return deepMerge(deepMerge(baseOptions as unknown as Record<string, unknown>, themedOpts as unknown as Record<string, unknown>), options as unknown as Record<string, unknown>) as ApexOptions\n }\n\n return deepMerge(baseOptions as unknown as Record<string, unknown>, options as unknown as Record<string, unknown>) as ApexOptions\n }\n\n // Initialize chart\n useEffect(() => {\n if (!chartRef.current) return\n\n const opts = buildOptions()\n chartInstance.current = new ApexCharts(chartRef.current, opts)\n chartInstance.current.render()\n\n return () => {\n if (chartInstance.current) {\n chartInstance.current.destroy()\n chartInstance.current = null\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n // Update chart when props or theme change\n useEffect(() => {\n if (!chartInstance.current) return\n\n const opts = buildOptions()\n chartInstance.current.updateOptions(opts, true, true)\n }, [type, series, width, height, options, themed, isDark]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return <div ref={chartRef} className={className} data-testid={testId} />\n}\n"],"names":["deepMerge","target","source","result","key","Chart","type","series","width","height","options","themed","className","testId","chartRef","useRef","chartInstance","isDark","useTheme","getThemedOptions","colors","getThemeColors","buildOptions","baseOptions","themedOpts","useEffect","opts","ApexCharts"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e, jsxs as w } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as k, useEffect as B } from "react";
|
|
3
3
|
import L from "qrcode";
|
|
4
|
-
import {
|
|
4
|
+
import { getThemeColors as E } from "../hooks/useTheme.js";
|
|
5
5
|
const M = "loading", T = "loading-spinner", V = "loading-lg", G = "btn", O = "btn-sm", P = "btn-primary", X = ({
|
|
6
6
|
value: f,
|
|
7
7
|
size: t = 160,
|
|
@@ -12,15 +12,15 @@ const M = "loading", T = "loading-spinner", V = "loading-lg", G = "btn", O = "bt
|
|
|
12
12
|
color: $,
|
|
13
13
|
bgColor: Q,
|
|
14
14
|
bordered: s = !0,
|
|
15
|
-
status:
|
|
15
|
+
status: o = "active",
|
|
16
16
|
onRefresh: p,
|
|
17
17
|
className: j = "",
|
|
18
18
|
"data-testid": n,
|
|
19
|
-
...
|
|
19
|
+
...i
|
|
20
20
|
}) => {
|
|
21
|
-
const c = k(null),
|
|
21
|
+
const c = k(null), u = E(), b = $ ?? u.foreground, v = Q ?? u.background;
|
|
22
22
|
B(() => {
|
|
23
|
-
if (
|
|
23
|
+
if (o !== "active" || !f || h !== "canvas") return;
|
|
24
24
|
(async () => {
|
|
25
25
|
if (c.current)
|
|
26
26
|
try {
|
|
@@ -42,38 +42,38 @@ const M = "loading", T = "loading-spinner", V = "loading-lg", G = "btn", O = "bt
|
|
|
42
42
|
}, m.src = g;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
} catch (
|
|
46
|
-
console.error("QR Code generation error:",
|
|
45
|
+
} catch (N) {
|
|
46
|
+
console.error("QR Code generation error:", N);
|
|
47
47
|
}
|
|
48
48
|
})();
|
|
49
|
-
}, [f, t, x, g, a, h, b, v,
|
|
49
|
+
}, [f, t, x, g, a, h, b, v, o]);
|
|
50
50
|
const d = [
|
|
51
51
|
"inline-flex items-center justify-center",
|
|
52
52
|
s && "border border-base-content/20 p-3",
|
|
53
53
|
"bg-base-100",
|
|
54
54
|
j
|
|
55
|
-
].filter(Boolean).join(" "), r = (
|
|
56
|
-
return
|
|
55
|
+
].filter(Boolean).join(" "), r = (C) => n ? `${n}-${C}` : void 0;
|
|
56
|
+
return o === "loading" ? /* @__PURE__ */ e(
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
59
|
className: d,
|
|
60
60
|
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
61
61
|
"data-state": "loading",
|
|
62
62
|
"data-testid": n,
|
|
63
|
-
...
|
|
63
|
+
...i,
|
|
64
64
|
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
65
65
|
/* @__PURE__ */ e("span", { className: `${M} ${T} ${V}` }),
|
|
66
66
|
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", "data-testid": r("loading-text"), children: "Loading..." })
|
|
67
67
|
] })
|
|
68
68
|
}
|
|
69
|
-
) :
|
|
69
|
+
) : o === "expired" ? /* @__PURE__ */ e(
|
|
70
70
|
"div",
|
|
71
71
|
{
|
|
72
72
|
className: d,
|
|
73
73
|
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
74
74
|
"data-state": "expired",
|
|
75
75
|
"data-testid": n,
|
|
76
|
-
...
|
|
76
|
+
...i,
|
|
77
77
|
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
78
78
|
/* @__PURE__ */ e("svg", { className: "w-12 h-12 text-base-content/30", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
|
|
79
79
|
"path",
|
|
@@ -95,7 +95,7 @@ const M = "loading", T = "loading-spinner", V = "loading-lg", G = "btn", O = "bt
|
|
|
95
95
|
)
|
|
96
96
|
] })
|
|
97
97
|
}
|
|
98
|
-
) : h === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...
|
|
98
|
+
) : h === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...i, children: /* @__PURE__ */ e("div", { className: d, children: /* @__PURE__ */ e("canvas", { ref: c, style: { display: "block" }, "data-testid": r("canvas") }) }) }) : /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...i, children: /* @__PURE__ */ e("div", { className: d, children: /* @__PURE__ */ e("div", { style: { width: t, height: t }, className: "bg-base-content/5", "data-testid": r("svg"), children: /* @__PURE__ */ e("span", { className: "text-xs text-base-content/50", children: "SVG mode placeholder" }) }) }) });
|
|
99
99
|
};
|
|
100
100
|
X.displayName = "QRCode";
|
|
101
101
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\nimport {
|
|
1
|
+
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\nimport { getThemeColors } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dLoading = 'loading'\nconst dLoadingSpinner = 'loading-spinner'\nconst dLoadingLg = 'loading-lg'\nconst dBtn = 'btn'\nconst dBtnSm = 'btn-sm'\nconst dBtnPrimary = 'btn-primary'\n\nexport type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'\nexport type QRCodeType = 'canvas' | 'svg'\nexport type QRCodeStatus = 'active' | 'loading' | 'expired'\n\nexport interface QRCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n value: string\n size?: number\n errorLevel?: QRCodeErrorLevel\n icon?: string\n iconSize?: number\n type?: QRCodeType\n color?: string\n bgColor?: string\n bordered?: boolean\n status?: QRCodeStatus\n onRefresh?: () => void\n 'data-testid'?: string\n}\n\nexport const QRCode: React.FC<QRCodeProps> = ({\n value,\n size = 160,\n errorLevel = 'M',\n icon,\n iconSize = 40,\n type = 'canvas',\n color,\n bgColor,\n bordered = true,\n status = 'active',\n onRefresh,\n className = '',\n 'data-testid': testId,\n ...rest\n}) => {\n const canvasRef = useRef<HTMLCanvasElement>(null)\n // Theme-aware default colors from DaisyUI CSS variables\n const colors = getThemeColors()\n const effectiveColor = color ?? colors.foreground\n const effectiveBgColor = bgColor ?? colors.background\n\n useEffect(() => {\n if (status !== 'active' || !value || type !== 'canvas') return\n\n const generateQRCode = async () => {\n if (!canvasRef.current) return\n\n try {\n await QRCodeLib.toCanvas(canvasRef.current, value, {\n width: size,\n margin: 1,\n color: {\n dark: effectiveColor,\n light: effectiveBgColor,\n },\n errorCorrectionLevel: errorLevel,\n })\n\n if (icon && canvasRef.current) {\n const canvas = canvasRef.current\n const ctx = canvas.getContext('2d')\n if (ctx) {\n const img = new Image()\n img.crossOrigin = 'anonymous'\n img.onload = () => {\n const iconX = (size - iconSize) / 2\n const iconY = (size - iconSize) / 2\n ctx.fillStyle = effectiveBgColor\n ctx.fillRect(iconX - 4, iconY - 4, iconSize + 8, iconSize + 8)\n ctx.drawImage(img, iconX, iconY, iconSize, iconSize)\n }\n img.src = icon\n }\n }\n } catch (error) {\n console.error('QR Code generation error:', error)\n }\n }\n\n generateQRCode()\n }, [value, size, errorLevel, icon, iconSize, type, effectiveColor, effectiveBgColor, status])\n\n // Download functionality can be implemented by consumers\n // by accessing the canvas ref and converting to data URL\n\n const containerClasses = [\n 'inline-flex items-center justify-center',\n bordered && 'border border-base-content/20 p-3',\n 'bg-base-100',\n className,\n ]\n .filter(Boolean)\n .join(' ')\n const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n if (status === 'loading') {\n return (\n <div\n className={containerClasses}\n style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }}\n data-state=\"loading\"\n data-testid={testId}\n {...rest}\n >\n <div className=\"flex flex-col items-center justify-center gap-2\">\n <span className={`${dLoading} ${dLoadingSpinner} ${dLoadingLg}`}></span>\n <span className=\"text-sm text-base-content/70\" data-testid={getTestId('loading-text')}>Loading...</span>\n </div>\n </div>\n )\n }\n\n if (status === 'expired') {\n return (\n <div\n className={containerClasses}\n style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }}\n data-state=\"expired\"\n data-testid={testId}\n {...rest}\n >\n <div className=\"flex flex-col items-center justify-center gap-2\">\n <svg className=\"w-12 h-12 text-base-content/30\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n clipRule=\"evenodd\"\n />\n </svg>\n <span className=\"text-sm text-base-content/70\" data-testid={getTestId('expired-text')}>QR Code Expired</span>\n {onRefresh && (\n <button\n className={`${dBtn} ${dBtnSm} ${dBtnPrimary}`}\n onClick={onRefresh}\n data-testid={getTestId('refresh')}\n >\n Refresh\n </button>\n )}\n </div>\n </div>\n )\n }\n\n if (type === 'canvas') {\n return (\n <div className=\"inline-block\" data-state=\"active\" data-testid={testId} {...rest}>\n <div className={containerClasses}>\n <canvas ref={canvasRef} style={{ display: 'block' }} data-testid={getTestId('canvas')} />\n </div>\n </div>\n )\n }\n\n return (\n <div className=\"inline-block\" data-state=\"active\" data-testid={testId} {...rest}>\n <div className={containerClasses}>\n <div style={{ width: size, height: size }} className=\"bg-base-content/5\" data-testid={getTestId('svg')}>\n <span className=\"text-xs text-base-content/50\">SVG mode placeholder</span>\n </div>\n </div>\n </div>\n )\n}\n\nQRCode.displayName = 'QRCode'\n\nexport default QRCode\n"],"names":["dLoading","dLoadingSpinner","dLoadingLg","dBtn","dBtnSm","dBtnPrimary","QRCode","value","size","errorLevel","icon","iconSize","type","color","bgColor","bordered","status","onRefresh","className","testId","rest","canvasRef","useRef","colors","getThemeColors","effectiveColor","effectiveBgColor","useEffect","QRCodeLib","ctx","img","iconX","iconY","error","containerClasses","getTestId","suffix","jsx","jsxs"],"mappings":"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"}
|