@aster-ui/prefixed 0.12.52 → 0.12.54
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/QRCode.js +38 -37
- package/dist/components/QRCode.js.map +1 -1
- package/dist/hooks/useTheme.d.ts +29 -0
- package/dist/hooks/useTheme.js +56 -0
- package/dist/hooks/useTheme.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +44 -42
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,60 +1,61 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as Q, useEffect as j } from "react";
|
|
3
|
+
import k from "qrcode";
|
|
4
|
+
import { useTheme as B } from "../hooks/useTheme.js";
|
|
5
|
+
const L = "d-loading", $ = "d-loading-spinner", E = "d-loading-lg", I = "d-btn", M = "d-btn-sm", V = "d-btn-primary", G = ({
|
|
6
|
+
value: d,
|
|
6
7
|
size: t = 160,
|
|
7
|
-
errorLevel:
|
|
8
|
+
errorLevel: h = "M",
|
|
8
9
|
icon: m,
|
|
9
10
|
iconSize: n = 40,
|
|
10
11
|
type: f = "canvas",
|
|
11
|
-
color:
|
|
12
|
-
bgColor:
|
|
12
|
+
color: y,
|
|
13
|
+
bgColor: R,
|
|
13
14
|
bordered: a = !0,
|
|
14
15
|
status: s = "active",
|
|
15
|
-
onRefresh:
|
|
16
|
-
className:
|
|
16
|
+
onRefresh: v,
|
|
17
|
+
className: w = "",
|
|
17
18
|
...r
|
|
18
19
|
}) => {
|
|
19
|
-
const c =
|
|
20
|
-
|
|
21
|
-
if (s !== "active" || !
|
|
20
|
+
const c = Q(null), { colors: x } = B(), p = y ?? x.foreground, g = R ?? x.background;
|
|
21
|
+
j(() => {
|
|
22
|
+
if (s !== "active" || !d || f !== "canvas") return;
|
|
22
23
|
(async () => {
|
|
23
24
|
if (c.current)
|
|
24
25
|
try {
|
|
25
|
-
if (await
|
|
26
|
+
if (await k.toCanvas(c.current, d, {
|
|
26
27
|
width: t,
|
|
27
28
|
margin: 1,
|
|
28
29
|
color: {
|
|
29
|
-
dark:
|
|
30
|
-
light:
|
|
30
|
+
dark: p,
|
|
31
|
+
light: g
|
|
31
32
|
},
|
|
32
|
-
errorCorrectionLevel:
|
|
33
|
+
errorCorrectionLevel: h
|
|
33
34
|
}), m && c.current) {
|
|
34
|
-
const
|
|
35
|
-
if (
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
},
|
|
35
|
+
const l = c.current.getContext("2d");
|
|
36
|
+
if (l) {
|
|
37
|
+
const i = new Image();
|
|
38
|
+
i.crossOrigin = "anonymous", i.onload = () => {
|
|
39
|
+
const b = (t - n) / 2, N = (t - n) / 2;
|
|
40
|
+
l.fillStyle = g, l.fillRect(b - 4, N - 4, n + 8, n + 8), l.drawImage(i, b, N, n, n);
|
|
41
|
+
}, i.src = m;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
|
-
} catch (
|
|
44
|
-
console.error("QR Code generation error:",
|
|
44
|
+
} catch (u) {
|
|
45
|
+
console.error("QR Code generation error:", u);
|
|
45
46
|
}
|
|
46
47
|
})();
|
|
47
|
-
}, [
|
|
48
|
-
const
|
|
48
|
+
}, [d, t, h, m, n, f, p, g, s]);
|
|
49
|
+
const o = [
|
|
49
50
|
"inline-flex items-center justify-center",
|
|
50
51
|
a && "border border-base-content/20 p-3",
|
|
51
52
|
"bg-base-100",
|
|
52
|
-
|
|
53
|
+
w
|
|
53
54
|
].filter(Boolean).join(" ");
|
|
54
|
-
return s === "loading" ? /* @__PURE__ */ e("div", { className:
|
|
55
|
-
/* @__PURE__ */ e("span", { className: `${
|
|
55
|
+
return s === "loading" ? /* @__PURE__ */ e("div", { className: o, style: { width: t + (a ? 24 : 0), height: t + (a ? 24 : 0) }, "data-state": "loading", ...r, children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
56
|
+
/* @__PURE__ */ e("span", { className: `${L} ${$} ${E}` }),
|
|
56
57
|
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", children: "Loading..." })
|
|
57
|
-
] }) }) : s === "expired" ? /* @__PURE__ */ e("div", { className:
|
|
58
|
+
] }) }) : s === "expired" ? /* @__PURE__ */ e("div", { className: o, style: { width: t + (a ? 24 : 0), height: t + (a ? 24 : 0) }, "data-state": "expired", ...r, children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
58
59
|
/* @__PURE__ */ e("svg", { className: "w-12 h-12 text-base-content/30", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
|
|
59
60
|
"path",
|
|
60
61
|
{
|
|
@@ -64,12 +65,12 @@ const Q = "d-loading", j = "d-loading-spinner", F = "d-loading-lg", L = "d-btn",
|
|
|
64
65
|
}
|
|
65
66
|
) }),
|
|
66
67
|
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", children: "QR Code Expired" }),
|
|
67
|
-
|
|
68
|
-
] }) }) : f === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", ...r, children: /* @__PURE__ */ e("div", { className:
|
|
68
|
+
v && /* @__PURE__ */ e("button", { className: `${I} ${M} ${V}`, onClick: v, children: "Refresh" })
|
|
69
|
+
] }) }) : f === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", ...r, children: /* @__PURE__ */ e("div", { className: o, children: /* @__PURE__ */ e("canvas", { ref: c, style: { display: "block" } }) }) }) : /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", ...r, children: /* @__PURE__ */ e("div", { className: o, children: /* @__PURE__ */ e("div", { style: { width: t, height: t }, className: "bg-base-content/5", children: /* @__PURE__ */ e("span", { className: "text-xs text-base-content/50", children: "SVG mode placeholder" }) }) }) });
|
|
69
70
|
};
|
|
70
|
-
|
|
71
|
+
G.displayName = "QRCode";
|
|
71
72
|
export {
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
G as QRCode,
|
|
74
|
+
G as default
|
|
74
75
|
};
|
|
75
76
|
//# sourceMappingURL=QRCode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\n\n// DaisyUI classes\nconst dLoading = 'd-loading'\nconst dLoadingSpinner = 'd-loading-spinner'\nconst dLoadingLg = 'd-loading-lg'\nconst dBtn = 'd-btn'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnPrimary = 'd-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}\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
|
|
1
|
+
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\nimport { useTheme } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dLoading = 'd-loading'\nconst dLoadingSpinner = 'd-loading-spinner'\nconst dLoadingLg = 'd-loading-lg'\nconst dBtn = 'd-btn'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnPrimary = 'd-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}\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 ...rest\n}) => {\n const canvasRef = useRef<HTMLCanvasElement>(null)\n const { colors } = useTheme()\n\n // Theme-aware default colors from DaisyUI CSS variables\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\n if (status === 'loading') {\n return (\n <div className={containerClasses} style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }} data-state=\"loading\" {...rest}>\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\">Loading...</span>\n </div>\n </div>\n )\n }\n\n if (status === 'expired') {\n return (\n <div className={containerClasses} style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }} data-state=\"expired\" {...rest}>\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\">QR Code Expired</span>\n {onRefresh && (\n <button className={`${dBtn} ${dBtnSm} ${dBtnPrimary}`} onClick={onRefresh}>\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\" {...rest}>\n <div className={containerClasses}>\n <canvas ref={canvasRef} style={{ display: 'block' }} />\n </div>\n </div>\n )\n }\n\n return (\n <div className=\"inline-block\" data-state=\"active\" {...rest}>\n <div className={containerClasses}>\n <div style={{ width: size, height: size }} className=\"bg-base-content/5\">\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","rest","canvasRef","useRef","colors","useTheme","effectiveColor","effectiveBgColor","useEffect","QRCodeLib","ctx","img","iconX","iconY","error","containerClasses","jsx","jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface ThemeColors {
|
|
2
|
+
/** Base background color (--b1 / base-100) */
|
|
3
|
+
background: string;
|
|
4
|
+
/** Base content/text color (--bc / base-content) */
|
|
5
|
+
foreground: string;
|
|
6
|
+
/** Primary color (--p / primary) */
|
|
7
|
+
primary: string;
|
|
8
|
+
/** Primary content color (--pc / primary-content) */
|
|
9
|
+
primaryContent: string;
|
|
10
|
+
}
|
|
11
|
+
export interface UseThemeReturn {
|
|
12
|
+
/** Whether dark mode is active */
|
|
13
|
+
isDark: boolean;
|
|
14
|
+
/** Computed theme colors as hex values */
|
|
15
|
+
colors: ThemeColors;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Hook to detect current theme and get computed colors
|
|
19
|
+
*
|
|
20
|
+
* Checks the `data-theme` attribute on the document root (for DaisyUI themes)
|
|
21
|
+
* and falls back to system preference via `prefers-color-scheme`.
|
|
22
|
+
*
|
|
23
|
+
* Returns both the dark mode state and computed theme colors as hex values,
|
|
24
|
+
* useful for canvas-based components that can't use CSS variables directly.
|
|
25
|
+
*
|
|
26
|
+
* Automatically updates when theme changes.
|
|
27
|
+
*/
|
|
28
|
+
export declare function useTheme(): UseThemeReturn;
|
|
29
|
+
export default useTheme;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { useState as m, useEffect as i } from "react";
|
|
2
|
+
function c(t) {
|
|
3
|
+
const r = document.createElement("canvas");
|
|
4
|
+
r.width = r.height = 1;
|
|
5
|
+
const e = r.getContext("2d");
|
|
6
|
+
if (!e) return "#000000";
|
|
7
|
+
e.fillStyle = t, e.fillRect(0, 0, 1, 1);
|
|
8
|
+
const [o, n, a] = e.getImageData(0, 0, 1, 1).data;
|
|
9
|
+
return `#${((1 << 24) + (o << 16) + (n << 8) + a).toString(16).slice(1)}`;
|
|
10
|
+
}
|
|
11
|
+
function u() {
|
|
12
|
+
const t = getComputedStyle(document.documentElement), r = t.getPropertyValue("--b1").trim(), e = t.getPropertyValue("--bc").trim(), o = t.getPropertyValue("--p").trim(), n = t.getPropertyValue("--pc").trim();
|
|
13
|
+
return {
|
|
14
|
+
background: r ? c(`oklch(${r})`) : "#ffffff",
|
|
15
|
+
foreground: e ? c(`oklch(${e})`) : "#000000",
|
|
16
|
+
primary: o ? c(`oklch(${o})`) : "#6366f1",
|
|
17
|
+
primaryContent: n ? c(`oklch(${n})`) : "#ffffff"
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
function d() {
|
|
21
|
+
const [t, r] = m({
|
|
22
|
+
isDark: !1,
|
|
23
|
+
colors: {
|
|
24
|
+
background: "#ffffff",
|
|
25
|
+
foreground: "#000000",
|
|
26
|
+
primary: "#6366f1",
|
|
27
|
+
primaryContent: "#ffffff"
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return i(() => {
|
|
31
|
+
const e = () => {
|
|
32
|
+
const s = document.documentElement.getAttribute("data-theme"), f = s === "dark" || !s && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
33
|
+
requestAnimationFrame(() => {
|
|
34
|
+
r({
|
|
35
|
+
isDark: f,
|
|
36
|
+
colors: u()
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
e();
|
|
41
|
+
const o = new MutationObserver(e);
|
|
42
|
+
o.observe(document.documentElement, {
|
|
43
|
+
attributes: !0,
|
|
44
|
+
attributeFilter: ["data-theme", "class"]
|
|
45
|
+
});
|
|
46
|
+
const n = window.matchMedia("(prefers-color-scheme: dark)");
|
|
47
|
+
return n.addEventListener("change", e), () => {
|
|
48
|
+
o.disconnect(), n.removeEventListener("change", e);
|
|
49
|
+
};
|
|
50
|
+
}, []), t;
|
|
51
|
+
}
|
|
52
|
+
export {
|
|
53
|
+
d as default,
|
|
54
|
+
d as useTheme
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=useTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTheme.js","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nexport interface ThemeColors {\n /** Base background color (--b1 / base-100) */\n background: string\n /** Base content/text color (--bc / base-content) */\n foreground: string\n /** Primary color (--p / primary) */\n primary: string\n /** Primary content color (--pc / primary-content) */\n primaryContent: string\n}\n\nexport interface UseThemeReturn {\n /** Whether dark mode is active */\n isDark: boolean\n /** Computed theme colors as hex values */\n colors: ThemeColors\n}\n\n// Convert any CSS color to hex\nfunction colorToHex(color: string): string {\n const canvas = document.createElement('canvas')\n canvas.width = canvas.height = 1\n const ctx = canvas.getContext('2d')\n if (!ctx) return '#000000'\n ctx.fillStyle = color\n ctx.fillRect(0, 0, 1, 1)\n const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data\n return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`\n}\n\nfunction getThemeColors(): ThemeColors {\n const style = getComputedStyle(document.documentElement)\n\n // Get computed colors from CSS custom properties\n const background = style.getPropertyValue('--b1').trim()\n const foreground = style.getPropertyValue('--bc').trim()\n const primary = style.getPropertyValue('--p').trim()\n const primaryContent = style.getPropertyValue('--pc').trim()\n\n // DaisyUI uses oklch, convert to hex for canvas compatibility\n return {\n background: background ? colorToHex(`oklch(${background})`) : '#ffffff',\n foreground: foreground ? colorToHex(`oklch(${foreground})`) : '#000000',\n primary: primary ? colorToHex(`oklch(${primary})`) : '#6366f1',\n primaryContent: primaryContent ? colorToHex(`oklch(${primaryContent})`) : '#ffffff',\n }\n}\n\n/**\n * Hook to detect current theme and get computed colors\n *\n * Checks the `data-theme` attribute on the document root (for DaisyUI themes)\n * and falls back to system preference via `prefers-color-scheme`.\n *\n * Returns both the dark mode state and computed theme colors as hex values,\n * useful for canvas-based components that can't use CSS variables directly.\n *\n * Automatically updates when theme changes.\n */\nexport function useTheme(): UseThemeReturn {\n const [state, setState] = useState<UseThemeReturn>({\n isDark: false,\n colors: {\n background: '#ffffff',\n foreground: '#000000',\n primary: '#6366f1',\n primaryContent: '#ffffff',\n }\n })\n\n useEffect(() => {\n const checkTheme = () => {\n const html = document.documentElement\n const theme = html.getAttribute('data-theme')\n // Check for explicit dark theme or system preference\n const isDark = theme === 'dark' ||\n (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)\n\n // Small delay to ensure CSS variables are updated\n requestAnimationFrame(() => {\n setState({\n isDark,\n colors: getThemeColors()\n })\n })\n }\n\n checkTheme()\n\n // Watch for theme changes via attribute mutation\n const observer = new MutationObserver(checkTheme)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme', 'class']\n })\n\n // Also watch for system preference changes\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n mediaQuery.addEventListener('change', checkTheme)\n\n return () => {\n observer.disconnect()\n mediaQuery.removeEventListener('change', checkTheme)\n }\n }, [])\n\n return state\n}\n\nexport default useTheme\n"],"names":["colorToHex","color","canvas","ctx","r","g","b","getThemeColors","style","background","foreground","primary","primaryContent","useTheme","state","setState","useState","useEffect","checkTheme","theme","isDark","observer","mediaQuery"],"mappings":";AAqBA,SAASA,EAAWC,GAAuB;AACzC,QAAMC,IAAS,SAAS,cAAc,QAAQ;AAC9C,EAAAA,EAAO,QAAQA,EAAO,SAAS;AAC/B,QAAMC,IAAMD,EAAO,WAAW,IAAI;AAClC,MAAI,CAACC,EAAK,QAAO;AACjB,EAAAA,EAAI,YAAYF,GAChBE,EAAI,SAAS,GAAG,GAAG,GAAG,CAAC;AACvB,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,EAAI,aAAa,GAAG,GAAG,GAAG,CAAC,EAAE;AAC/C,SAAO,MAAM,KAAK,OAAOC,KAAK,OAAOC,KAAK,KAAKC,GAAG,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC;AACzE;AAEA,SAASC,IAA8B;AACrC,QAAMC,IAAQ,iBAAiB,SAAS,eAAe,GAGjDC,IAAaD,EAAM,iBAAiB,MAAM,EAAE,KAAA,GAC5CE,IAAaF,EAAM,iBAAiB,MAAM,EAAE,KAAA,GAC5CG,IAAUH,EAAM,iBAAiB,KAAK,EAAE,KAAA,GACxCI,IAAiBJ,EAAM,iBAAiB,MAAM,EAAE,KAAA;AAGtD,SAAO;AAAA,IACL,YAAYC,IAAaT,EAAW,SAASS,CAAU,GAAG,IAAI;AAAA,IAC9D,YAAYC,IAAaV,EAAW,SAASU,CAAU,GAAG,IAAI;AAAA,IAC9D,SAASC,IAAUX,EAAW,SAASW,CAAO,GAAG,IAAI;AAAA,IACrD,gBAAgBC,IAAiBZ,EAAW,SAASY,CAAc,GAAG,IAAI;AAAA,EAAA;AAE9E;AAaO,SAASC,IAA2B;AACzC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,IAAA;AAAA,EAClB,CACD;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAa,MAAM;AAEvB,YAAMC,IADO,SAAS,gBACH,aAAa,YAAY,GAEtCC,IAASD,MAAU,UACtB,CAACA,KAAS,OAAO,WAAW,8BAA8B,EAAE;AAG/D,4BAAsB,MAAM;AAC1B,QAAAJ,EAAS;AAAA,UACP,QAAAK;AAAA,UACA,QAAQb,EAAA;AAAA,QAAe,CACxB;AAAA,MACH,CAAC;AAAA,IACH;AAEA,IAAAW,EAAA;AAGA,UAAMG,IAAW,IAAI,iBAAiBH,CAAU;AAChD,IAAAG,EAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,OAAO;AAAA,IAAA,CACxC;AAGD,UAAMC,IAAa,OAAO,WAAW,8BAA8B;AACnE,WAAAA,EAAW,iBAAiB,UAAUJ,CAAU,GAEzC,MAAM;AACX,MAAAG,EAAS,WAAA,GACTC,EAAW,oBAAoB,UAAUJ,CAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEJ;AACT;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -214,3 +214,5 @@ export { useKeyPress, useKeyPressCallback } from './hooks/useKeyPress';
|
|
|
214
214
|
export type { UseKeyPressOptions } from './hooks/useKeyPress';
|
|
215
215
|
export { useWindowSize } from './hooks/useWindowSize';
|
|
216
216
|
export type { WindowSize } from './hooks/useWindowSize';
|
|
217
|
+
export { useTheme } from './hooks/useTheme';
|
|
218
|
+
export type { UseThemeReturn, ThemeColors } from './hooks/useTheme';
|
package/dist/index.js
CHANGED
|
@@ -2,14 +2,14 @@ import { Affix as e } from "./components/Affix.js";
|
|
|
2
2
|
import { Anchor as p } from "./components/Anchor.js";
|
|
3
3
|
import { Alert as m } from "./components/Alert.js";
|
|
4
4
|
import { Autocomplete as a } from "./components/Autocomplete.js";
|
|
5
|
-
import { Avatar as
|
|
5
|
+
import { Avatar as n, AvatarGroup as i } from "./components/Avatar.js";
|
|
6
6
|
import { Badge as u } from "./components/Badge.js";
|
|
7
7
|
import { Breadcrumb as C } from "./components/Breadcrumb.js";
|
|
8
8
|
import { Button as g } from "./components/Button.js";
|
|
9
9
|
import { IconSizeContext as S } from "./contexts/IconSizeContext.js";
|
|
10
10
|
import { CopyButton as k } from "./components/CopyButton.js";
|
|
11
11
|
import { Checkbox as b } from "./components/Checkbox.js";
|
|
12
|
-
import { Chat as
|
|
12
|
+
import { Chat as v } from "./components/Chat.js";
|
|
13
13
|
import { ColorPicker as w } from "./components/ColorPicker.js";
|
|
14
14
|
import { Card as B } from "./components/Card.js";
|
|
15
15
|
import { Carousel as M } from "./components/Carousel.js";
|
|
@@ -26,15 +26,15 @@ import { WeekCalendar as ro } from "./components/WeekCalendar.js";
|
|
|
26
26
|
import { Descriptions as to } from "./components/Descriptions.js";
|
|
27
27
|
import { Diff as fo } from "./components/Diff.js";
|
|
28
28
|
import { Dock as xo } from "./components/Dock.js";
|
|
29
|
-
import { Divider as
|
|
29
|
+
import { Divider as so } from "./components/Divider.js";
|
|
30
30
|
import { Drawer as io } from "./components/Drawer.js";
|
|
31
31
|
import { ResponsiveDrawer as uo } from "./components/ResponsiveDrawer.js";
|
|
32
32
|
import { Fieldset as co } from "./components/Fieldset.js";
|
|
33
33
|
import { FileInput as To } from "./components/FileInput.js";
|
|
34
34
|
import { Filter as Po } from "./components/Filter.js";
|
|
35
35
|
import { Flex as Ro } from "./components/Flex.js";
|
|
36
|
-
import { FloatButton as
|
|
37
|
-
import { Footer as
|
|
36
|
+
import { FloatButton as ho } from "./components/FloatButton.js";
|
|
37
|
+
import { Footer as Do } from "./components/Footer.js";
|
|
38
38
|
import { Form as yo, useFormInstance as Bo } from "./components/Form.js";
|
|
39
39
|
import { Col as Mo, Grid as Ao, Row as Io } from "./components/Grid.js";
|
|
40
40
|
import { Hero as Go } from "./components/Hero.js";
|
|
@@ -51,15 +51,15 @@ import { List as er } from "./components/List.js";
|
|
|
51
51
|
import { Loading as pr } from "./components/Loading.js";
|
|
52
52
|
import { Mask as mr } from "./components/Mask.js";
|
|
53
53
|
import { Masonry as ar } from "./components/Masonry.js";
|
|
54
|
-
import { Mention as
|
|
54
|
+
import { Mention as nr } from "./components/Mention.js";
|
|
55
55
|
import { Menu as lr } from "./components/Menu.js";
|
|
56
56
|
import { Browser as dr } from "./components/Browser.js";
|
|
57
57
|
import { Code as cr } from "./components/Code.js";
|
|
58
58
|
import { Phone as Tr } from "./components/Phone.js";
|
|
59
59
|
import { Window as Pr } from "./components/Window.js";
|
|
60
60
|
import { Modal as Rr } from "./components/Modal.js";
|
|
61
|
-
import { Navbar as
|
|
62
|
-
import { notification as
|
|
61
|
+
import { Navbar as hr } from "./components/Navbar.js";
|
|
62
|
+
import { notification as Dr } from "./components/Notification.js";
|
|
63
63
|
import { MessageManager as yr, message as Br } from "./components/Message.js";
|
|
64
64
|
import { OTPInput as Mr } from "./components/OTPInput.js";
|
|
65
65
|
import { Pagination as Ir } from "./components/Pagination.js";
|
|
@@ -77,14 +77,14 @@ import { Skeleton as re } from "./components/Skeleton.js";
|
|
|
77
77
|
import { Space as te } from "./components/Space.js";
|
|
78
78
|
import { Splitter as fe } from "./components/Splitter.js";
|
|
79
79
|
import { Stats as xe } from "./components/Stat.js";
|
|
80
|
-
import { Status as
|
|
80
|
+
import { Status as se } from "./components/Status.js";
|
|
81
81
|
import { Steps as ie } from "./components/Steps.js";
|
|
82
82
|
import { Table as ue } from "./components/Table.js";
|
|
83
83
|
import { Tabs as Ce } from "./components/Tabs.js";
|
|
84
84
|
import { Textarea as ge } from "./components/Textarea.js";
|
|
85
85
|
import { TextRotate as Se } from "./components/TextRotate.js";
|
|
86
86
|
import { CheckableTag as ke, Tag as Re, TagLiveRegion as be } from "./components/Tag.js";
|
|
87
|
-
import { ThemeController as
|
|
87
|
+
import { ThemeController as ve } from "./components/ThemeController.js";
|
|
88
88
|
import { TimePicker as we } from "./components/TimePicker.js";
|
|
89
89
|
import { Timeline as Be } from "./components/Timeline.js";
|
|
90
90
|
import { Toggle as Me } from "./components/Toggle.js";
|
|
@@ -102,27 +102,28 @@ import { useDisclosure as rt } from "./hooks/useDisclosure.js";
|
|
|
102
102
|
import { useClipboard as tt } from "./hooks/useClipboard.js";
|
|
103
103
|
import { useLocalStorage as ft } from "./hooks/useLocalStorage.js";
|
|
104
104
|
import { useDebounce as xt } from "./hooks/useDebounce.js";
|
|
105
|
-
import { useClickOutside as
|
|
105
|
+
import { useClickOutside as st } from "./hooks/useClickOutside.js";
|
|
106
106
|
import { usePrevious as it } from "./hooks/usePrevious.js";
|
|
107
107
|
import { useHover as ut } from "./hooks/useHover.js";
|
|
108
108
|
import { useKeyPress as Ct, useKeyPressCallback as ct } from "./hooks/useKeyPress.js";
|
|
109
109
|
import { useWindowSize as Tt } from "./hooks/useWindowSize.js";
|
|
110
|
-
import {
|
|
111
|
-
import { default as Rt } from "./locale/en-
|
|
112
|
-
import { default as
|
|
113
|
-
import { default as
|
|
114
|
-
import { default as yt } from "./locale/
|
|
115
|
-
import { default as Ft } from "./locale/
|
|
116
|
-
import { default as At } from "./locale/
|
|
117
|
-
import { default as Lt } from "./locale/
|
|
118
|
-
import { default as Ht } from "./locale/
|
|
119
|
-
import { default as Wt } from "./locale/
|
|
110
|
+
import { useTheme as Pt } from "./hooks/useTheme.js";
|
|
111
|
+
import { default as Rt } from "./locale/en-US.js";
|
|
112
|
+
import { default as ht } from "./locale/en-GB.js";
|
|
113
|
+
import { default as Dt } from "./locale/en-CA.js";
|
|
114
|
+
import { default as yt } from "./locale/zh-CN.js";
|
|
115
|
+
import { default as Ft } from "./locale/es-ES.js";
|
|
116
|
+
import { default as At } from "./locale/ja-JP.js";
|
|
117
|
+
import { default as Lt } from "./locale/pt-BR.js";
|
|
118
|
+
import { default as Ht } from "./locale/de-DE.js";
|
|
119
|
+
import { default as Wt } from "./locale/fr-FR.js";
|
|
120
|
+
import { default as Et } from "./locale/ko-KR.js";
|
|
120
121
|
export {
|
|
121
122
|
e as Affix,
|
|
122
123
|
m as Alert,
|
|
123
124
|
p as Anchor,
|
|
124
125
|
a as Autocomplete,
|
|
125
|
-
|
|
126
|
+
n as Avatar,
|
|
126
127
|
i as AvatarGroup,
|
|
127
128
|
u as Badge,
|
|
128
129
|
C as Breadcrumb,
|
|
@@ -131,7 +132,7 @@ export {
|
|
|
131
132
|
B as Card,
|
|
132
133
|
M as Carousel,
|
|
133
134
|
I as Cascader,
|
|
134
|
-
|
|
135
|
+
v as Chat,
|
|
135
136
|
ke as CheckableTag,
|
|
136
137
|
b as Checkbox,
|
|
137
138
|
cr as Code,
|
|
@@ -148,7 +149,7 @@ export {
|
|
|
148
149
|
Z as DatePicker,
|
|
149
150
|
to as Descriptions,
|
|
150
151
|
fo as Diff,
|
|
151
|
-
|
|
152
|
+
so as Divider,
|
|
152
153
|
xo as Dock,
|
|
153
154
|
io as Drawer,
|
|
154
155
|
No as Dropdown,
|
|
@@ -157,8 +158,8 @@ export {
|
|
|
157
158
|
To as FileInput,
|
|
158
159
|
Po as Filter,
|
|
159
160
|
Ro as Flex,
|
|
160
|
-
|
|
161
|
-
|
|
161
|
+
ho as FloatButton,
|
|
162
|
+
Do as Footer,
|
|
162
163
|
yo as Form,
|
|
163
164
|
Ao as Grid,
|
|
164
165
|
Go as Hero,
|
|
@@ -175,12 +176,12 @@ export {
|
|
|
175
176
|
pr as Loading,
|
|
176
177
|
mr as Mask,
|
|
177
178
|
ar as Masonry,
|
|
178
|
-
|
|
179
|
+
nr as Mention,
|
|
179
180
|
lr as Menu,
|
|
180
181
|
yr as MessageManager,
|
|
181
182
|
Rr as Modal,
|
|
182
183
|
$ as MonthCalendar,
|
|
183
|
-
|
|
184
|
+
hr as Navbar,
|
|
184
185
|
Mr as OTPInput,
|
|
185
186
|
Ir as Pagination,
|
|
186
187
|
Tr as Phone,
|
|
@@ -201,7 +202,7 @@ export {
|
|
|
201
202
|
te as Space,
|
|
202
203
|
fe as Splitter,
|
|
203
204
|
xe as Stats,
|
|
204
|
-
|
|
205
|
+
se as Status,
|
|
205
206
|
ie as Steps,
|
|
206
207
|
ue as Table,
|
|
207
208
|
Ce as Tabs,
|
|
@@ -209,7 +210,7 @@ export {
|
|
|
209
210
|
be as TagLiveRegion,
|
|
210
211
|
Se as TextRotate,
|
|
211
212
|
ge as Textarea,
|
|
212
|
-
|
|
213
|
+
ve as ThemeController,
|
|
213
214
|
we as TimePicker,
|
|
214
215
|
Be as Timeline,
|
|
215
216
|
Me as Toggle,
|
|
@@ -224,19 +225,19 @@ export {
|
|
|
224
225
|
Ve as Watermark,
|
|
225
226
|
ro as WeekCalendar,
|
|
226
227
|
Pr as Window,
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
228
|
+
Ht as deDE,
|
|
229
|
+
Dt as enCA,
|
|
230
|
+
ht as enGB,
|
|
231
|
+
Rt as enUS,
|
|
232
|
+
Ft as esES,
|
|
233
|
+
Wt as frFR,
|
|
234
|
+
At as jaJP,
|
|
235
|
+
Et as koKR,
|
|
235
236
|
Br as message,
|
|
236
|
-
|
|
237
|
-
|
|
237
|
+
Dr as notification,
|
|
238
|
+
Lt as ptBR,
|
|
238
239
|
$e as useBreakpoint,
|
|
239
|
-
|
|
240
|
+
st as useClickOutside,
|
|
240
241
|
tt as useClipboard,
|
|
241
242
|
K as useComponentLocale,
|
|
242
243
|
W as useConfig,
|
|
@@ -250,7 +251,8 @@ export {
|
|
|
250
251
|
z as useLocale,
|
|
251
252
|
it as usePrevious,
|
|
252
253
|
or as useSiderContext,
|
|
254
|
+
Pt as useTheme,
|
|
253
255
|
Tt as useWindowSize,
|
|
254
|
-
|
|
256
|
+
yt as zhCN
|
|
255
257
|
};
|
|
256
258
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|