@fangxinyan/lumina 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +15 -0
- package/README.md +110 -0
- package/dist/Accordion-GSBY5T5U.css +38 -0
- package/dist/Accordion.cjs +13 -0
- package/dist/Accordion.cjs.map +1 -0
- package/dist/Accordion.d.cts +21 -0
- package/dist/Accordion.d.ts +21 -0
- package/dist/Accordion.js +4 -0
- package/dist/Accordion.js.map +1 -0
- package/dist/Alert-LSKBYDRI.css +35 -0
- package/dist/Alert.cjs +13 -0
- package/dist/Alert.cjs.map +1 -0
- package/dist/Alert.d.cts +17 -0
- package/dist/Alert.d.ts +17 -0
- package/dist/Alert.js +4 -0
- package/dist/Alert.js.map +1 -0
- package/dist/AppShell-RCALXUCZ.css +162 -0
- package/dist/AppShell.cjs +24 -0
- package/dist/AppShell.cjs.map +1 -0
- package/dist/AppShell.d.cts +68 -0
- package/dist/AppShell.d.ts +68 -0
- package/dist/AppShell.js +3 -0
- package/dist/AppShell.js.map +1 -0
- package/dist/Avatar-OXDSG5Q6.css +36 -0
- package/dist/Avatar.cjs +12 -0
- package/dist/Avatar.cjs.map +1 -0
- package/dist/Avatar.d.cts +15 -0
- package/dist/Avatar.d.ts +15 -0
- package/dist/Avatar.js +3 -0
- package/dist/Avatar.js.map +1 -0
- package/dist/Button-5UI7QXGU.css +96 -0
- package/dist/Button.cjs +17 -0
- package/dist/Button.cjs.map +1 -0
- package/dist/Button.d.cts +41 -0
- package/dist/Button.d.ts +41 -0
- package/dist/Button.js +4 -0
- package/dist/Button.js.map +1 -0
- package/dist/Calendar-LHZELUDL.css +65 -0
- package/dist/Calendar.cjs +13 -0
- package/dist/Calendar.cjs.map +1 -0
- package/dist/Calendar.d.cts +16 -0
- package/dist/Calendar.d.ts +16 -0
- package/dist/Calendar.js +4 -0
- package/dist/Calendar.js.map +1 -0
- package/dist/Card-2CHHFD4Y.css +28 -0
- package/dist/Card.cjs +16 -0
- package/dist/Card.cjs.map +1 -0
- package/dist/Card.d.cts +25 -0
- package/dist/Card.d.ts +25 -0
- package/dist/Card.js +3 -0
- package/dist/Card.js.map +1 -0
- package/dist/Cascader-TO2QMSLJ.css +76 -0
- package/dist/Cascader.cjs +13 -0
- package/dist/Cascader.cjs.map +1 -0
- package/dist/Cascader.d.cts +23 -0
- package/dist/Cascader.d.ts +23 -0
- package/dist/Cascader.js +4 -0
- package/dist/Cascader.js.map +1 -0
- package/dist/Checkbox-SKJATVSN.css +72 -0
- package/dist/Checkbox.cjs +17 -0
- package/dist/Checkbox.cjs.map +1 -0
- package/dist/Checkbox.d.cts +33 -0
- package/dist/Checkbox.d.ts +33 -0
- package/dist/Checkbox.js +4 -0
- package/dist/Checkbox.js.map +1 -0
- package/dist/Divider-Z37INS5E.css +49 -0
- package/dist/Divider.cjs +12 -0
- package/dist/Divider.cjs.map +1 -0
- package/dist/Divider.d.cts +12 -0
- package/dist/Divider.d.ts +12 -0
- package/dist/Divider.js +3 -0
- package/dist/Divider.js.map +1 -0
- package/dist/Empty-VM23UNLQ.css +138 -0
- package/dist/Empty.cjs +20 -0
- package/dist/Empty.cjs.map +1 -0
- package/dist/Empty.d.cts +37 -0
- package/dist/Empty.d.ts +37 -0
- package/dist/Empty.js +3 -0
- package/dist/Empty.js.map +1 -0
- package/dist/Icon.cjs +16 -0
- package/dist/Icon.cjs.map +1 -0
- package/dist/Icon.d.cts +21 -0
- package/dist/Icon.d.ts +21 -0
- package/dist/Icon.js +3 -0
- package/dist/Icon.js.map +1 -0
- package/dist/Image-WYWORJT4.css +106 -0
- package/dist/Image.cjs +17 -0
- package/dist/Image.cjs.map +1 -0
- package/dist/Image.d.cts +30 -0
- package/dist/Image.d.ts +30 -0
- package/dist/Image.js +4 -0
- package/dist/Image.js.map +1 -0
- package/dist/Input-Z526ARZP.css +66 -0
- package/dist/Input.cjs +17 -0
- package/dist/Input.cjs.map +1 -0
- package/dist/Input.d.cts +36 -0
- package/dist/Input.d.ts +36 -0
- package/dist/Input.js +4 -0
- package/dist/Input.js.map +1 -0
- package/dist/List-W5BW4D2P.css +26 -0
- package/dist/List.cjs +12 -0
- package/dist/List.cjs.map +1 -0
- package/dist/List.d.cts +20 -0
- package/dist/List.d.ts +20 -0
- package/dist/List.js +3 -0
- package/dist/List.js.map +1 -0
- package/dist/Modal-AYKNIWWQ.css +79 -0
- package/dist/Modal.cjs +18 -0
- package/dist/Modal.cjs.map +1 -0
- package/dist/Modal.d.cts +27 -0
- package/dist/Modal.d.ts +27 -0
- package/dist/Modal.js +5 -0
- package/dist/Modal.js.map +1 -0
- package/dist/Pagination-6FFOI4NM.css +35 -0
- package/dist/Pagination.cjs +13 -0
- package/dist/Pagination.cjs.map +1 -0
- package/dist/Pagination.d.cts +19 -0
- package/dist/Pagination.d.ts +19 -0
- package/dist/Pagination.js +4 -0
- package/dist/Pagination.js.map +1 -0
- package/dist/Popover-WXEVUYBG.css +15 -0
- package/dist/Popover.cjs +12 -0
- package/dist/Popover.cjs.map +1 -0
- package/dist/Popover.d.cts +16 -0
- package/dist/Popover.d.ts +16 -0
- package/dist/Popover.js +3 -0
- package/dist/Popover.js.map +1 -0
- package/dist/Progress-IXRSO5TW.css +63 -0
- package/dist/Progress.cjs +16 -0
- package/dist/Progress.cjs.map +1 -0
- package/dist/Progress.d.cts +26 -0
- package/dist/Progress.d.ts +26 -0
- package/dist/Progress.js +3 -0
- package/dist/Progress.js.map +1 -0
- package/dist/Select-DDJJBQEL.css +263 -0
- package/dist/Select.cjs +14 -0
- package/dist/Select.cjs.map +1 -0
- package/dist/Select.d.cts +68 -0
- package/dist/Select.d.ts +68 -0
- package/dist/Select.js +5 -0
- package/dist/Select.js.map +1 -0
- package/dist/Slider-RE4HZQKF.css +59 -0
- package/dist/Slider.cjs +12 -0
- package/dist/Slider.cjs.map +1 -0
- package/dist/Slider.d.cts +18 -0
- package/dist/Slider.d.ts +18 -0
- package/dist/Slider.js +3 -0
- package/dist/Slider.js.map +1 -0
- package/dist/Switch-NP7KKJOX.css +44 -0
- package/dist/Switch.cjs +12 -0
- package/dist/Switch.cjs.map +1 -0
- package/dist/Switch.d.cts +18 -0
- package/dist/Switch.d.ts +18 -0
- package/dist/Switch.js +3 -0
- package/dist/Switch.js.map +1 -0
- package/dist/Table-ZDPGWLH3.css +139 -0
- package/dist/Table.cjs +18 -0
- package/dist/Table.cjs.map +1 -0
- package/dist/Table.d.cts +57 -0
- package/dist/Table.d.ts +57 -0
- package/dist/Table.js +5 -0
- package/dist/Table.js.map +1 -0
- package/dist/Tabs-A27TSZOP.css +95 -0
- package/dist/Tabs.cjs +16 -0
- package/dist/Tabs.cjs.map +1 -0
- package/dist/Tabs.d.cts +35 -0
- package/dist/Tabs.d.ts +35 -0
- package/dist/Tabs.js +3 -0
- package/dist/Tabs.js.map +1 -0
- package/dist/Tag-EYOY3UWG.css +49 -0
- package/dist/Tag.cjs +17 -0
- package/dist/Tag.cjs.map +1 -0
- package/dist/Tag.d.cts +27 -0
- package/dist/Tag.d.ts +27 -0
- package/dist/Tag.js +4 -0
- package/dist/Tag.js.map +1 -0
- package/dist/Theme.cjs +44 -0
- package/dist/Theme.cjs.map +1 -0
- package/dist/Theme.d.cts +127 -0
- package/dist/Theme.d.ts +127 -0
- package/dist/Theme.js +3 -0
- package/dist/Theme.js.map +1 -0
- package/dist/Toast-ERHDN3WG.css +45 -0
- package/dist/Toast.cjs +17 -0
- package/dist/Toast.cjs.map +1 -0
- package/dist/Toast.d.cts +26 -0
- package/dist/Toast.d.ts +26 -0
- package/dist/Toast.js +4 -0
- package/dist/Toast.js.map +1 -0
- package/dist/Tooltip-RT4BOVTD.css +23 -0
- package/dist/Tooltip.cjs +12 -0
- package/dist/Tooltip.cjs.map +1 -0
- package/dist/Tooltip.d.cts +13 -0
- package/dist/Tooltip.d.ts +13 -0
- package/dist/Tooltip.js +3 -0
- package/dist/Tooltip.js.map +1 -0
- package/dist/chunk-2VA2HSL4.cjs +121 -0
- package/dist/chunk-2VA2HSL4.cjs.map +1 -0
- package/dist/chunk-2W2AJUZW.js +118 -0
- package/dist/chunk-2W2AJUZW.js.map +1 -0
- package/dist/chunk-3QWHDCHJ.js +53 -0
- package/dist/chunk-3QWHDCHJ.js.map +1 -0
- package/dist/chunk-3WAFIUDQ.js +85 -0
- package/dist/chunk-3WAFIUDQ.js.map +1 -0
- package/dist/chunk-4AA22BOG.js +63 -0
- package/dist/chunk-4AA22BOG.js.map +1 -0
- package/dist/chunk-4GT5TOHP.js +18 -0
- package/dist/chunk-4GT5TOHP.js.map +1 -0
- package/dist/chunk-5EYI27B6.js +64 -0
- package/dist/chunk-5EYI27B6.js.map +1 -0
- package/dist/chunk-6YVW3VYL.js +51 -0
- package/dist/chunk-6YVW3VYL.js.map +1 -0
- package/dist/chunk-77NP67ML.cjs +70 -0
- package/dist/chunk-77NP67ML.cjs.map +1 -0
- package/dist/chunk-7CKHWCEA.cjs +110 -0
- package/dist/chunk-7CKHWCEA.cjs.map +1 -0
- package/dist/chunk-7H453VPW.cjs +20 -0
- package/dist/chunk-7H453VPW.cjs.map +1 -0
- package/dist/chunk-7NM5BRUX.js +91 -0
- package/dist/chunk-7NM5BRUX.js.map +1 -0
- package/dist/chunk-7U6I44RV.cjs +283 -0
- package/dist/chunk-7U6I44RV.cjs.map +1 -0
- package/dist/chunk-AAMYURWQ.cjs +87 -0
- package/dist/chunk-AAMYURWQ.cjs.map +1 -0
- package/dist/chunk-ALFDP5WX.cjs +70 -0
- package/dist/chunk-ALFDP5WX.cjs.map +1 -0
- package/dist/chunk-C5TGQ7CV.cjs +114 -0
- package/dist/chunk-C5TGQ7CV.cjs.map +1 -0
- package/dist/chunk-F3NHM4GX.js +20 -0
- package/dist/chunk-F3NHM4GX.js.map +1 -0
- package/dist/chunk-FI7QO3I5.cjs +90 -0
- package/dist/chunk-FI7QO3I5.cjs.map +1 -0
- package/dist/chunk-FMG3ZPGK.js +88 -0
- package/dist/chunk-FMG3ZPGK.js.map +1 -0
- package/dist/chunk-G3UWXSNQ.js +71 -0
- package/dist/chunk-G3UWXSNQ.js.map +1 -0
- package/dist/chunk-GEYMWUW6.js +146 -0
- package/dist/chunk-GEYMWUW6.js.map +1 -0
- package/dist/chunk-HTP6UEVR.js +48 -0
- package/dist/chunk-HTP6UEVR.js.map +1 -0
- package/dist/chunk-I2ERCHFV.cjs +58 -0
- package/dist/chunk-I2ERCHFV.cjs.map +1 -0
- package/dist/chunk-I7SSCSFH.js +253 -0
- package/dist/chunk-I7SSCSFH.js.map +1 -0
- package/dist/chunk-IGHLSNXT.cjs +109 -0
- package/dist/chunk-IGHLSNXT.cjs.map +1 -0
- package/dist/chunk-IKI5CS4L.cjs +91 -0
- package/dist/chunk-IKI5CS4L.cjs.map +1 -0
- package/dist/chunk-ITGCHU3Y.cjs +94 -0
- package/dist/chunk-ITGCHU3Y.cjs.map +1 -0
- package/dist/chunk-JNFCTYJT.cjs +31 -0
- package/dist/chunk-JNFCTYJT.cjs.map +1 -0
- package/dist/chunk-JWFVSBVX.cjs +30 -0
- package/dist/chunk-JWFVSBVX.cjs.map +1 -0
- package/dist/chunk-K5MHL732.js +81 -0
- package/dist/chunk-K5MHL732.js.map +1 -0
- package/dist/chunk-K67KIKX4.cjs +67 -0
- package/dist/chunk-K67KIKX4.cjs.map +1 -0
- package/dist/chunk-KF4MCHZL.cjs +105 -0
- package/dist/chunk-KF4MCHZL.cjs.map +1 -0
- package/dist/chunk-M6CGYGEO.js +91 -0
- package/dist/chunk-M6CGYGEO.js.map +1 -0
- package/dist/chunk-M6OTFXZA.js +48 -0
- package/dist/chunk-M6OTFXZA.js.map +1 -0
- package/dist/chunk-NWJW5KLN.js +29 -0
- package/dist/chunk-NWJW5KLN.js.map +1 -0
- package/dist/chunk-NXOAYNG2.cjs +52 -0
- package/dist/chunk-NXOAYNG2.cjs.map +1 -0
- package/dist/chunk-NZPJ7BUB.cjs +22 -0
- package/dist/chunk-NZPJ7BUB.cjs.map +1 -0
- package/dist/chunk-OUJBCNWD.js +52 -0
- package/dist/chunk-OUJBCNWD.js.map +1 -0
- package/dist/chunk-OXYFB2ZI.js +35 -0
- package/dist/chunk-OXYFB2ZI.js.map +1 -0
- package/dist/chunk-Q33V7MSK.js +79 -0
- package/dist/chunk-Q33V7MSK.js.map +1 -0
- package/dist/chunk-QESLHLTG.cjs +107 -0
- package/dist/chunk-QESLHLTG.cjs.map +1 -0
- package/dist/chunk-QPZZNSRB.js +65 -0
- package/dist/chunk-QPZZNSRB.js.map +1 -0
- package/dist/chunk-QT7SJITQ.cjs +114 -0
- package/dist/chunk-QT7SJITQ.cjs.map +1 -0
- package/dist/chunk-RMD6KQ4H.cjs +56 -0
- package/dist/chunk-RMD6KQ4H.cjs.map +1 -0
- package/dist/chunk-T5AH4FCV.js +280 -0
- package/dist/chunk-T5AH4FCV.js.map +1 -0
- package/dist/chunk-U6ODMPTI.cjs +74 -0
- package/dist/chunk-U6ODMPTI.cjs.map +1 -0
- package/dist/chunk-V2ZUOEXM.cjs +73 -0
- package/dist/chunk-V2ZUOEXM.cjs.map +1 -0
- package/dist/chunk-VJN637MT.js +49 -0
- package/dist/chunk-VJN637MT.js.map +1 -0
- package/dist/chunk-VMHNKD3N.cjs +56 -0
- package/dist/chunk-VMHNKD3N.cjs.map +1 -0
- package/dist/chunk-VXITDXLW.js +28 -0
- package/dist/chunk-VXITDXLW.js.map +1 -0
- package/dist/chunk-XFRP2MBR.js +87 -0
- package/dist/chunk-XFRP2MBR.js.map +1 -0
- package/dist/chunk-XRZ5OKZH.js +101 -0
- package/dist/chunk-XRZ5OKZH.js.map +1 -0
- package/dist/chunk-Y6FVCCUE.js +34 -0
- package/dist/chunk-Y6FVCCUE.js.map +1 -0
- package/dist/chunk-YVO7XO4W.cjs +149 -0
- package/dist/chunk-YVO7XO4W.cjs.map +1 -0
- package/dist/chunk-ZMDVK2U3.cjs +302 -0
- package/dist/chunk-ZMDVK2U3.cjs.map +1 -0
- package/dist/chunk-ZXM247EM.cjs +123 -0
- package/dist/chunk-ZXM247EM.cjs.map +1 -0
- package/dist/index.cjs +249 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +35 -0
- package/dist/index.d.ts +35 -0
- package/dist/index.js +35 -0
- package/dist/index.js.map +1 -0
- package/dist/shared-NJHRNLRH.css +4 -0
- package/dist/styles.css +2068 -0
- package/dist/tokens-HWQ7KWPG.css +153 -0
- package/dist/tokens.css +153 -0
- package/package.json +77 -0
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { Icon } from './chunk-GEYMWUW6.js';
|
|
2
|
+
import './tokens-HWQ7KWPG.css';
|
|
3
|
+
import './shared-NJHRNLRH.css';
|
|
4
|
+
import './Checkbox-SKJATVSN.css';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var Checkbox = ({
|
|
9
|
+
checked,
|
|
10
|
+
defaultChecked,
|
|
11
|
+
indeterminate,
|
|
12
|
+
onChange,
|
|
13
|
+
disabled,
|
|
14
|
+
label,
|
|
15
|
+
className = "",
|
|
16
|
+
id
|
|
17
|
+
}) => {
|
|
18
|
+
const [inner, setInner] = React.useState(defaultChecked ?? false);
|
|
19
|
+
const isControlled = checked !== void 0;
|
|
20
|
+
const value = isControlled ? checked : inner;
|
|
21
|
+
const toggle = () => {
|
|
22
|
+
if (disabled) return;
|
|
23
|
+
const next = !value;
|
|
24
|
+
if (!isControlled) setInner(next);
|
|
25
|
+
onChange?.(next);
|
|
26
|
+
};
|
|
27
|
+
const cls = [
|
|
28
|
+
"checkbox",
|
|
29
|
+
value && "checked",
|
|
30
|
+
indeterminate && "indeterminate",
|
|
31
|
+
disabled && "disabled",
|
|
32
|
+
className
|
|
33
|
+
].filter(Boolean).join(" ");
|
|
34
|
+
return /* @__PURE__ */ jsxs("label", { className: cls, children: [
|
|
35
|
+
/* @__PURE__ */ jsx(
|
|
36
|
+
"button",
|
|
37
|
+
{
|
|
38
|
+
type: "button",
|
|
39
|
+
role: "checkbox",
|
|
40
|
+
"aria-checked": indeterminate ? "mixed" : value,
|
|
41
|
+
disabled,
|
|
42
|
+
onClick: toggle,
|
|
43
|
+
id,
|
|
44
|
+
className: "checkbox-box",
|
|
45
|
+
children: indeterminate ? /* @__PURE__ */ jsx(Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 11 }) : null
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
label && /* @__PURE__ */ jsx("span", { className: "checkbox-label", children: label })
|
|
49
|
+
] });
|
|
50
|
+
};
|
|
51
|
+
function RadioGroup({
|
|
52
|
+
options,
|
|
53
|
+
value,
|
|
54
|
+
defaultValue,
|
|
55
|
+
onChange,
|
|
56
|
+
direction = "vertical",
|
|
57
|
+
className = ""
|
|
58
|
+
}) {
|
|
59
|
+
const [inner, setInner] = React.useState(defaultValue);
|
|
60
|
+
const isControlled = value !== void 0;
|
|
61
|
+
const current = isControlled ? value : inner;
|
|
62
|
+
const pick = (v) => {
|
|
63
|
+
if (!isControlled) setInner(v);
|
|
64
|
+
onChange?.(v);
|
|
65
|
+
};
|
|
66
|
+
return /* @__PURE__ */ jsx("div", { className: `radio-group ${direction} ${className}`, children: options.map((opt) => /* @__PURE__ */ jsxs(
|
|
67
|
+
"label",
|
|
68
|
+
{
|
|
69
|
+
className: `radio ${current === opt.value ? "checked" : ""} ${opt.disabled ? "disabled" : ""}`,
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(
|
|
72
|
+
"button",
|
|
73
|
+
{
|
|
74
|
+
type: "button",
|
|
75
|
+
role: "radio",
|
|
76
|
+
"aria-checked": current === opt.value,
|
|
77
|
+
disabled: opt.disabled,
|
|
78
|
+
onClick: () => pick(opt.value),
|
|
79
|
+
className: "radio-dot"
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ jsx("span", { className: "radio-label", children: opt.label })
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
String(opt.value)
|
|
86
|
+
)) });
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export { Checkbox, RadioGroup };
|
|
90
|
+
//# sourceMappingURL=chunk-M6CGYGEO.js.map
|
|
91
|
+
//# sourceMappingURL=chunk-M6CGYGEO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-M6CGYGEO.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Checkbox.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface CheckboxProps {\n checked?: boolean;\n defaultChecked?: boolean;\n indeterminate?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n label?: React.ReactNode;\n className?: string;\n id?: string;\n}\n\n/** `Checkbox` — binary choice, supports indeterminate state. */\nexport const Checkbox: React.FC<CheckboxProps> = ({\n checked,\n defaultChecked,\n indeterminate,\n onChange,\n disabled,\n label,\n className = \"\",\n id,\n}) => {\n const [inner, setInner] = React.useState(defaultChecked ?? false);\n const isControlled = checked !== undefined;\n const value = isControlled ? checked : inner;\n\n const toggle = () => {\n if (disabled) return;\n const next = !value;\n if (!isControlled) setInner(next);\n onChange?.(next);\n };\n\n const cls = [\n \"checkbox\",\n value && \"checked\",\n indeterminate && \"indeterminate\",\n disabled && \"disabled\",\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <label className={cls}>\n <button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={indeterminate ? \"mixed\" : value}\n disabled={disabled}\n onClick={toggle}\n id={id}\n className=\"checkbox-box\"\n >\n {indeterminate ? <Icon name=\"minus\" size={11} /> : value ? <Icon name=\"check\" size={11} /> : null}\n </button>\n {label && <span className=\"checkbox-label\">{label}</span>}\n </label>\n );\n};\n\nexport interface RadioOption<T extends string | number = string> {\n value: T;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface RadioGroupProps<T extends string | number = string> {\n options: RadioOption<T>[];\n value?: T;\n defaultValue?: T;\n onChange?: (value: T) => void;\n name?: string;\n direction?: \"vertical\" | \"horizontal\";\n className?: string;\n}\n\n/** `RadioGroup` — mutually exclusive options. */\nexport function RadioGroup<T extends string | number = string>({\n options,\n value,\n defaultValue,\n onChange,\n direction = \"vertical\",\n className = \"\",\n}: RadioGroupProps<T>) {\n const [inner, setInner] = React.useState<T | undefined>(defaultValue);\n const isControlled = value !== undefined;\n const current = isControlled ? value : inner;\n\n const pick = (v: T) => {\n if (!isControlled) setInner(v);\n onChange?.(v);\n };\n\n return (\n <div className={`radio-group ${direction} ${className}`}>\n {options.map((opt) => (\n <label\n key={String(opt.value)}\n className={`radio ${current === opt.value ? \"checked\" : \"\"} ${opt.disabled ? \"disabled\" : \"\"}`}\n >\n <button\n type=\"button\"\n role=\"radio\"\n aria-checked={current === opt.value}\n disabled={opt.disabled}\n onClick={() => pick(opt.value)}\n className=\"radio-dot\"\n />\n <span className=\"radio-label\">{opt.label}</span>\n </label>\n ))}\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Icon } from './chunk-GEYMWUW6.js';
|
|
2
|
+
import './tokens-HWQ7KWPG.css';
|
|
3
|
+
import './shared-NJHRNLRH.css';
|
|
4
|
+
import './Accordion-GSBY5T5U.css';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var Accordion = ({
|
|
9
|
+
items,
|
|
10
|
+
multiple = false,
|
|
11
|
+
activeKeys,
|
|
12
|
+
defaultActiveKeys = [],
|
|
13
|
+
onChange,
|
|
14
|
+
className = ""
|
|
15
|
+
}) => {
|
|
16
|
+
const [inner, setInner] = React.useState(defaultActiveKeys);
|
|
17
|
+
const isControlled = activeKeys !== void 0;
|
|
18
|
+
const keys = isControlled ? activeKeys : inner;
|
|
19
|
+
const toggle = (k) => {
|
|
20
|
+
const next = keys.includes(k) ? keys.filter((x) => x !== k) : multiple ? [...keys, k] : [k];
|
|
21
|
+
if (!isControlled) setInner(next);
|
|
22
|
+
onChange?.(next);
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsx("div", { className: `accordion ${className}`, children: items.map((it) => {
|
|
25
|
+
const open = keys.includes(it.key);
|
|
26
|
+
return /* @__PURE__ */ jsxs("div", { className: `accordion-item ${open ? "open" : ""}`, children: [
|
|
27
|
+
/* @__PURE__ */ jsxs(
|
|
28
|
+
"button",
|
|
29
|
+
{
|
|
30
|
+
type: "button",
|
|
31
|
+
className: "accordion-head",
|
|
32
|
+
disabled: it.disabled,
|
|
33
|
+
onClick: () => toggle(it.key),
|
|
34
|
+
"aria-expanded": open,
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ jsx("span", { children: it.title }),
|
|
37
|
+
/* @__PURE__ */ jsx("span", { className: "accordion-chev", children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 16 }) })
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
/* @__PURE__ */ jsx("div", { className: "accordion-body", children: /* @__PURE__ */ jsx("div", { className: "accordion-body-inner", children: it.content }) })
|
|
42
|
+
] }, it.key);
|
|
43
|
+
}) });
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export { Accordion };
|
|
47
|
+
//# sourceMappingURL=chunk-M6OTFXZA.js.map
|
|
48
|
+
//# sourceMappingURL=chunk-M6OTFXZA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;AAwBO,IAAM,YAAsC,CAAC;AAAA,EAClD,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA;AAAA,EACA,oBAAoB,EAAC;AAAA,EACrB,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAmB,iBAAiB,CAAA;AACpE,EAAA,MAAM,eAAe,UAAA,KAAe,MAAA;AACpC,EAAA,MAAM,IAAA,GAAO,eAAe,UAAA,GAAc,KAAA;AAE1C,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAc;AAC5B,IAAA,MAAM,OAAO,IAAA,CAAK,QAAA,CAAS,CAAC,CAAA,GACxB,IAAA,CAAK,OAAO,CAAC,CAAA,KAAM,MAAM,CAAC,CAAA,GAC1B,WACA,CAAC,GAAG,MAAM,CAAC,CAAA,GACX,CAAC,CAAC,CAAA;AACN,IAAA,IAAI,CAAC,YAAA,EAAc,QAAA,CAAS,IAAI,CAAA;AAChC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,CAAA,UAAA,EAAa,SAAS,CAAA,CAAA,EACnC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAA,KAAO;AACjB,IAAA,MAAM,IAAA,GAAO,IAAA,CAAK,QAAA,CAAS,EAAA,CAAG,GAAG,CAAA;AACjC,IAAA,4BACG,KAAA,EAAA,EAAiB,SAAA,EAAW,kBAAkB,IAAA,GAAO,MAAA,GAAS,EAAE,CAAA,CAAA,EAC/D,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,gBAAA;AAAA,UACV,UAAU,EAAA,CAAG,QAAA;AAAA,UACb,OAAA,EAAS,MAAM,MAAA,CAAO,EAAA,CAAG,GAAG,CAAA;AAAA,UAC5B,eAAA,EAAe,IAAA;AAAA,UAEf,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAM,aAAG,KAAA,EAAM,CAAA;AAAA,4BAChB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAK,UAAA,EAAW,IAAA,EAAM,EAAA,EAAI,CAAA,EAClC;AAAA;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,sBAAA,EAAwB,QAAA,EAAA,EAAA,CAAG,OAAA,EAAQ,CAAA,EACpD;AAAA,KAAA,EAAA,EAfQ,GAAG,GAgBb,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ","file":"chunk-M6OTFXZA.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Accordion.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface AccordionItem {\n key: string;\n title: React.ReactNode;\n content: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface AccordionProps {\n items: AccordionItem[];\n /** If true, multiple sections can be open at once. */\n multiple?: boolean;\n activeKeys?: string[];\n defaultActiveKeys?: string[];\n onChange?: (keys: string[]) => void;\n className?: string;\n}\n\n/** `Accordion` — collapsible sections. */\nexport const Accordion: React.FC<AccordionProps> = ({\n items,\n multiple = false,\n activeKeys,\n defaultActiveKeys = [],\n onChange,\n className = \"\",\n}) => {\n const [inner, setInner] = React.useState<string[]>(defaultActiveKeys);\n const isControlled = activeKeys !== undefined;\n const keys = isControlled ? activeKeys! : inner;\n\n const toggle = (k: string) => {\n const next = keys.includes(k)\n ? keys.filter((x) => x !== k)\n : multiple\n ? [...keys, k]\n : [k];\n if (!isControlled) setInner(next);\n onChange?.(next);\n };\n\n return (\n <div className={`accordion ${className}`}>\n {items.map((it) => {\n const open = keys.includes(it.key);\n return (\n <div key={it.key} className={`accordion-item ${open ? \"open\" : \"\"}`}>\n <button\n type=\"button\"\n className=\"accordion-head\"\n disabled={it.disabled}\n onClick={() => toggle(it.key)}\n aria-expanded={open}\n >\n <span>{it.title}</span>\n <span className=\"accordion-chev\">\n <Icon name=\"chevDown\" size={16} />\n </span>\n </button>\n <div className=\"accordion-body\">\n <div className=\"accordion-body-inner\">{it.content}</div>\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Icon } from './chunk-GEYMWUW6.js';
|
|
2
|
+
import './tokens-HWQ7KWPG.css';
|
|
3
|
+
import './shared-NJHRNLRH.css';
|
|
4
|
+
import './Alert-LSKBYDRI.css';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var Alert = ({
|
|
8
|
+
tone = "info",
|
|
9
|
+
title,
|
|
10
|
+
children,
|
|
11
|
+
icon,
|
|
12
|
+
closable,
|
|
13
|
+
onClose,
|
|
14
|
+
className = ""
|
|
15
|
+
}) => {
|
|
16
|
+
const iconName = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
|
|
17
|
+
return /* @__PURE__ */ jsxs("div", { className: `alert ${tone} ${title ? "" : "no-title"} ${className}`, role: "alert", children: [
|
|
18
|
+
/* @__PURE__ */ jsx("span", { className: "alert-ico", children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 14 }) }),
|
|
19
|
+
/* @__PURE__ */ jsxs("div", { className: "alert-body", children: [
|
|
20
|
+
title && /* @__PURE__ */ jsx("div", { className: "alert-title", children: title }),
|
|
21
|
+
children && /* @__PURE__ */ jsx("div", { className: "alert-desc", children })
|
|
22
|
+
] }),
|
|
23
|
+
closable && /* @__PURE__ */ jsx("button", { type: "button", className: "alert-close", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 }) })
|
|
24
|
+
] });
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { Alert };
|
|
28
|
+
//# sourceMappingURL=chunk-NWJW5KLN.js.map
|
|
29
|
+
//# sourceMappingURL=chunk-NWJW5KLN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;AAmBO,IAAM,QAA8B,CAAC;AAAA,EAC1C,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,QAAA,GACJ,SAAS,IAAA,KAAS,SAAA,GAAY,WAAW,IAAA,KAAS,SAAA,IAAa,IAAA,KAAS,QAAA,GAAW,OAAA,GAAU,MAAA,CAAA;AAC/F,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,KAAA,GAAQ,EAAA,GAAK,UAAU,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,MAAK,OAAA,EAC5E,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,WAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,EAAA,EAAI,CAAA,EAClC,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC7C,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAc,QAAA,EAAS;AAAA,KAAA,EACrD,CAAA;AAAA,IACC,4BACC,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,WAAU,aAAA,EAAc,OAAA,EAAS,OAAA,EAAS,YAAA,EAAW,WACzE,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,GAAA,EAAI,IAAA,EAAM,IAAI,CAAA,EAC3B;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-NWJW5KLN.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Alert.css\";\nimport * as React from \"react\";\nimport { Icon, type IconName } from \"../Icon\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface AlertProps {\n tone?: AlertTone;\n title?: React.ReactNode;\n children?: React.ReactNode;\n icon?: IconName;\n closable?: boolean;\n onClose?: () => void;\n className?: string;\n}\n\n/** `Alert` — inline contextual message. */\nexport const Alert: React.FC<AlertProps> = ({\n tone = \"info\",\n title,\n children,\n icon,\n closable,\n onClose,\n className = \"\",\n}) => {\n const iconName: IconName =\n icon ?? (tone === \"success\" ? \"check2\" : tone === \"warning\" || tone === \"danger\" ? \"alert\" : \"info\");\n return (\n <div className={`alert ${tone} ${title ? \"\" : \"no-title\"} ${className}`} role=\"alert\">\n <span className=\"alert-ico\">\n <Icon name={iconName} size={14} />\n </span>\n <div className=\"alert-body\">\n {title && <div className=\"alert-title\">{title}</div>}\n {children && <div className=\"alert-desc\">{children}</div>}\n </div>\n {closable && (\n <button type=\"button\" className=\"alert-close\" onClick={onClose} aria-label=\"Dismiss\">\n <Icon name=\"x\" size={12} />\n </button>\n )}\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./tokens-HWQ7KWPG.css');
|
|
4
|
+
require('./shared-NJHRNLRH.css');
|
|
5
|
+
require('./Progress-IXRSO5TW.css');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
// src/components/Progress/Progress.tsx
|
|
9
|
+
var Progress = ({
|
|
10
|
+
value,
|
|
11
|
+
max = 100,
|
|
12
|
+
label,
|
|
13
|
+
showValue,
|
|
14
|
+
tone = "accent",
|
|
15
|
+
size = "md",
|
|
16
|
+
className = ""
|
|
17
|
+
}) => {
|
|
18
|
+
const pct = Math.max(0, Math.min(100, value / max * 100));
|
|
19
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `progress ${size} ${tone} ${className}`, children: [
|
|
20
|
+
(label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "progress-label", children: [
|
|
21
|
+
label ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
|
|
22
|
+
showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "v", children: [
|
|
23
|
+
Math.round(pct),
|
|
24
|
+
"%"
|
|
25
|
+
] })
|
|
26
|
+
] }),
|
|
27
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "progress-track", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "progress-bar", style: { width: `${pct}%` } }) })
|
|
28
|
+
] });
|
|
29
|
+
};
|
|
30
|
+
var Ring = ({
|
|
31
|
+
value,
|
|
32
|
+
max = 100,
|
|
33
|
+
size = 72,
|
|
34
|
+
tone = "accent",
|
|
35
|
+
children,
|
|
36
|
+
className = ""
|
|
37
|
+
}) => {
|
|
38
|
+
const pct = Math.max(0, Math.min(100, value / max * 100));
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
className: `ring ${tone} ${className}`,
|
|
43
|
+
style: { ["--size"]: `${size}px`, ["--val"]: pct },
|
|
44
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ring-label", children: children ?? `${Math.round(pct)}%` })
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
exports.Progress = Progress;
|
|
50
|
+
exports.Ring = Ring;
|
|
51
|
+
//# sourceMappingURL=chunk-NXOAYNG2.cjs.map
|
|
52
|
+
//# sourceMappingURL=chunk-NXOAYNG2.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Progress/Progress.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;;;;AAiBO,IAAM,WAAoC,CAAC;AAAA,EAChD,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,IAAI,GAAA,EAAM,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA;AAC1D,EAAA,uBACEA,eAAA,CAAC,SAAI,SAAA,EAAW,CAAA,SAAA,EAAY,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EACjD,QAAA,EAAA;AAAA,IAAA,CAAA,KAAA,IAAS,SAAA,qBACTA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQC,cAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,KAAA,EAAM,CAAA,kCAAW,MAAA,EAAA,EAAK,CAAA;AAAA,MACrC,SAAA,oBAAaD,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,GAAA,EAAK,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,MAAM,GAAG,CAAA;AAAA,QAAE;AAAA,OAAA,EAAC;AAAA,KAAA,EACtD,CAAA;AAAA,oBAEFC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,IAAO,CAAA,EAC7D;AAAA,GAAA,EACF,CAAA;AAEJ;AAYO,IAAM,OAA4B,CAAC;AAAA,EACxC,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,IAAA,GAAO,EAAA;AAAA,EACP,IAAA,GAAO,QAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,IAAI,GAAA,EAAM,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA;AAC1D,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MACpC,KAAA,EAAO,EAAE,CAAC,QAAiB,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,EAAM,CAAC,OAAgB,GAAG,GAAA,EAAI;AAAA,MAEnE,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EAAc,QAAA,EAAA,QAAA,IAAY,GAAG,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA;AAAA,GAClE;AAEJ","file":"chunk-NXOAYNG2.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Progress.css\";\nimport * as React from \"react\";\n\nexport interface ProgressProps {\n /** 0–100 */\n value: number;\n max?: number;\n label?: React.ReactNode;\n showValue?: boolean;\n tone?: \"accent\" | \"success\" | \"warning\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n className?: string;\n}\n\n/** `Progress` — horizontal progress bar with neumorphic track. */\nexport const Progress: React.FC<ProgressProps> = ({\n value,\n max = 100,\n label,\n showValue,\n tone = \"accent\",\n size = \"md\",\n className = \"\",\n}) => {\n const pct = Math.max(0, Math.min(100, (value / max) * 100));\n return (\n <div className={`progress ${size} ${tone} ${className}`}>\n {(label || showValue) && (\n <div className=\"progress-label\">\n {label ? <span>{label}</span> : <span />}\n {showValue && <span className=\"v\">{Math.round(pct)}%</span>}\n </div>\n )}\n <div className=\"progress-track\">\n <div className=\"progress-bar\" style={{ width: `${pct}%` }} />\n </div>\n </div>\n );\n};\n\nexport interface RingProps {\n value: number;\n max?: number;\n size?: number;\n tone?: \"accent\" | \"success\" | \"warning\" | \"danger\";\n children?: React.ReactNode;\n className?: string;\n}\n\n/** `Ring` — circular progress indicator. */\nexport const Ring: React.FC<RingProps> = ({\n value,\n max = 100,\n size = 72,\n tone = \"accent\",\n children,\n className = \"\",\n}) => {\n const pct = Math.max(0, Math.min(100, (value / max) * 100));\n return (\n <div\n className={`ring ${tone} ${className}`}\n style={{ [\"--size\" as never]: `${size}px`, [\"--val\" as never]: pct }}\n >\n <span className=\"ring-label\">{children ?? `${Math.round(pct)}%`}</span>\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./tokens-HWQ7KWPG.css');
|
|
4
|
+
require('./shared-NJHRNLRH.css');
|
|
5
|
+
require('./Divider-Z37INS5E.css');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
// src/components/Divider/Divider.tsx
|
|
9
|
+
var Divider = ({
|
|
10
|
+
direction = "horizontal",
|
|
11
|
+
label,
|
|
12
|
+
sunken,
|
|
13
|
+
className = "",
|
|
14
|
+
...rest
|
|
15
|
+
}) => {
|
|
16
|
+
const cls = ["divider", direction, sunken && "sunken", className].filter(Boolean).join(" ");
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, role: "separator", ...rest, children: label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "divider-label", children: label }) });
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
exports.Divider = Divider;
|
|
21
|
+
//# sourceMappingURL=chunk-NZPJ7BUB.cjs.map
|
|
22
|
+
//# sourceMappingURL=chunk-NZPJ7BUB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Divider/Divider.tsx"],"names":["jsx"],"mappings":";;;;;;;;AAaO,IAAM,UAAkC,CAAC;AAAA,EAC9C,SAAA,GAAY,YAAA;AAAA,EACZ,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,GAAA,GAAM,CAAC,SAAA,EAAW,SAAA,EAAW,MAAA,IAAU,QAAA,EAAU,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC1F,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAA,EAAK,MAAK,WAAA,EAAa,GAAG,IAAA,EACvC,QAAA,EAAA,KAAA,oBAASA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAA,EAAiB,iBAAM,CAAA,EACnD,CAAA;AAEJ","file":"chunk-NZPJ7BUB.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Divider.css\";\nimport * as React from \"react\";\n\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n direction?: \"horizontal\" | \"vertical\";\n label?: React.ReactNode;\n /** Use recessed groove styling. */\n sunken?: boolean;\n}\n\n/** `Divider` — visual separator, horizontal or vertical. */\nexport const Divider: React.FC<DividerProps> = ({\n direction = \"horizontal\",\n label,\n sunken,\n className = \"\",\n ...rest\n}) => {\n const cls = [\"divider\", direction, sunken && \"sunken\", className].filter(Boolean).join(\" \");\n return (\n <div className={cls} role=\"separator\" {...rest}>\n {label && <span className=\"divider-label\">{label}</span>}\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import './tokens-HWQ7KWPG.css';
|
|
2
|
+
import './shared-NJHRNLRH.css';
|
|
3
|
+
import './Popover-WXEVUYBG.css';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
// src/components/Popover/Popover.tsx
|
|
8
|
+
var Popover = ({
|
|
9
|
+
content,
|
|
10
|
+
placement = "bottom",
|
|
11
|
+
trigger = "click",
|
|
12
|
+
defaultOpen = false,
|
|
13
|
+
open,
|
|
14
|
+
onOpenChange,
|
|
15
|
+
children,
|
|
16
|
+
className = ""
|
|
17
|
+
}) => {
|
|
18
|
+
const [inner, setInner] = React.useState(defaultOpen);
|
|
19
|
+
const isControlled = open !== void 0;
|
|
20
|
+
const show = isControlled ? open : inner;
|
|
21
|
+
const ref = React.useRef(null);
|
|
22
|
+
const set = (v) => {
|
|
23
|
+
if (!isControlled) setInner(v);
|
|
24
|
+
onOpenChange?.(v);
|
|
25
|
+
};
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
if (trigger !== "click" || !show) return;
|
|
28
|
+
const h = (e) => {
|
|
29
|
+
if (ref.current && !ref.current.contains(e.target)) set(false);
|
|
30
|
+
};
|
|
31
|
+
document.addEventListener("mousedown", h);
|
|
32
|
+
return () => document.removeEventListener("mousedown", h);
|
|
33
|
+
}, [show, trigger]);
|
|
34
|
+
const interact = trigger === "hover" ? { onMouseEnter: () => set(true), onMouseLeave: () => set(false) } : { onClick: () => set(!show) };
|
|
35
|
+
return /* @__PURE__ */ jsxs(
|
|
36
|
+
"span",
|
|
37
|
+
{
|
|
38
|
+
ref,
|
|
39
|
+
className: `popover-anchor ${className}`,
|
|
40
|
+
style: { position: "relative", display: "inline-flex" },
|
|
41
|
+
...interact,
|
|
42
|
+
children: [
|
|
43
|
+
children,
|
|
44
|
+
show && /* @__PURE__ */ jsx("span", { className: `popover ${placement}`, children: content })
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export { Popover };
|
|
51
|
+
//# sourceMappingURL=chunk-OUJBCNWD.js.map
|
|
52
|
+
//# sourceMappingURL=chunk-OUJBCNWD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"names":[],"mappings":";;;;;;;AAiBO,IAAM,UAAkC,CAAC;AAAA,EAC9C,OAAA;AAAA,EACA,SAAA,GAAY,QAAA;AAAA,EACZ,OAAA,GAAU,OAAA;AAAA,EACV,WAAA,GAAc,KAAA;AAAA,EACd,IAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAS,WAAW,CAAA;AACpD,EAAA,MAAM,eAAe,IAAA,KAAS,MAAA;AAC9B,EAAA,MAAM,IAAA,GAAO,eAAe,IAAA,GAAQ,KAAA;AACpC,EAAA,MAAM,GAAA,GAAY,aAAwB,IAAI,CAAA;AAE9C,EAAA,MAAM,GAAA,GAAM,CAAC,CAAA,KAAe;AAC1B,IAAA,IAAI,CAAC,YAAA,EAAc,QAAA,CAAS,CAAC,CAAA;AAC7B,IAAA,YAAA,GAAe,CAAC,CAAA;AAAA,EAClB,CAAA;AAEA,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,OAAA,KAAY,OAAA,IAAW,CAAC,IAAA,EAAM;AAClC,IAAA,MAAM,CAAA,GAAI,CAAC,CAAA,KAAkB;AAC3B,MAAA,IAAI,GAAA,CAAI,OAAA,IAAW,CAAC,GAAA,CAAI,OAAA,CAAQ,SAAS,CAAA,CAAE,MAAc,CAAA,EAAG,GAAA,CAAI,KAAK,CAAA;AAAA,IACvE,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,CAAC,CAAA;AACxC,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,WAAA,EAAa,CAAC,CAAA;AAAA,EAC1D,CAAA,EAAG,CAAC,IAAA,EAAM,OAAO,CAAC,CAAA;AAElB,EAAA,MAAM,QAAA,GACJ,YAAY,OAAA,GACR,EAAE,cAAc,MAAM,GAAA,CAAI,IAAI,CAAA,EAAG,YAAA,EAAc,MAAM,GAAA,CAAI,KAAK,GAAE,GAChE,EAAE,SAAS,MAAM,GAAA,CAAI,CAAC,IAAI,CAAA,EAAE;AAElC,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,kBAAkB,SAAS,CAAA,CAAA;AAAA,MACtC,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,SAAS,aAAA,EAAc;AAAA,MACrD,GAAG,QAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,wBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,QAAA,EAAW,SAAS,IAAK,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC7D;AAEJ","file":"chunk-OUJBCNWD.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Popover.css\";\nimport * as React from \"react\";\n\nexport interface PopoverProps {\n content: React.ReactNode;\n placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n trigger?: \"click\" | \"hover\";\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n children: React.ReactElement;\n className?: string;\n}\n\n/** `Popover` — rich content bubble. */\nexport const Popover: React.FC<PopoverProps> = ({\n content,\n placement = \"bottom\",\n trigger = \"click\",\n defaultOpen = false,\n open,\n onOpenChange,\n children,\n className = \"\",\n}) => {\n const [inner, setInner] = React.useState(defaultOpen);\n const isControlled = open !== undefined;\n const show = isControlled ? open! : inner;\n const ref = React.useRef<HTMLSpanElement>(null);\n\n const set = (v: boolean) => {\n if (!isControlled) setInner(v);\n onOpenChange?.(v);\n };\n\n React.useEffect(() => {\n if (trigger !== \"click\" || !show) return;\n const h = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) set(false);\n };\n document.addEventListener(\"mousedown\", h);\n return () => document.removeEventListener(\"mousedown\", h);\n }, [show, trigger]);\n\n const interact =\n trigger === \"hover\"\n ? { onMouseEnter: () => set(true), onMouseLeave: () => set(false) }\n : { onClick: () => set(!show) };\n\n return (\n <span\n ref={ref}\n className={`popover-anchor ${className}`}\n style={{ position: \"relative\", display: \"inline-flex\" }}\n {...interact}\n >\n {children}\n {show && <span className={`popover ${placement}`}>{content}</span>}\n </span>\n );\n};\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import './tokens-HWQ7KWPG.css';
|
|
2
|
+
import './shared-NJHRNLRH.css';
|
|
3
|
+
import './Card-2CHHFD4Y.css';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
// src/components/Card/Card.tsx
|
|
8
|
+
var Card = React.forwardRef(
|
|
9
|
+
({ variant = "raised", padding = "md", className = "", children, ...rest }, ref) => {
|
|
10
|
+
const cls = ["card", variant, padding !== "md" && `pad-${padding}`, className].filter(Boolean).join(" ");
|
|
11
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cls, ...rest, children });
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
Card.displayName = "Card";
|
|
15
|
+
var Panel = ({
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
actions,
|
|
19
|
+
children,
|
|
20
|
+
className = "",
|
|
21
|
+
...rest
|
|
22
|
+
}) => /* @__PURE__ */ jsxs("div", { className: `panel ${className}`, ...rest, children: [
|
|
23
|
+
(title || actions) && /* @__PURE__ */ jsxs("div", { className: "panel-head", children: [
|
|
24
|
+
/* @__PURE__ */ jsxs("div", { className: "panel-titles", children: [
|
|
25
|
+
title && /* @__PURE__ */ jsx("div", { className: "panel-title", children: title }),
|
|
26
|
+
description && /* @__PURE__ */ jsx("div", { className: "panel-desc", children: description })
|
|
27
|
+
] }),
|
|
28
|
+
actions && /* @__PURE__ */ jsx("div", { className: "panel-actions", children: actions })
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ jsx("div", { className: "panel-body", children })
|
|
31
|
+
] });
|
|
32
|
+
|
|
33
|
+
export { Card, Panel };
|
|
34
|
+
//# sourceMappingURL=chunk-OXYFB2ZI.js.map
|
|
35
|
+
//# sourceMappingURL=chunk-OXYFB2ZI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAgBO,IAAM,IAAA,GAAa,KAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,OAAA,GAAU,QAAA,EAAU,OAAA,GAAU,IAAA,EAAM,SAAA,GAAY,EAAA,EAAI,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AAClF,IAAA,MAAM,GAAA,GAAM,CAAC,MAAA,EAAQ,OAAA,EAAS,YAAY,IAAA,IAAQ,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,SAAS,CAAA,CAC1E,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,IAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,GAAA,EAAM,GAAG,MAChC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;AAYZ,IAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,0BACG,KAAA,EAAA,EAAI,SAAA,EAAW,SAAS,SAAS,CAAA,CAAA,EAAK,GAAG,IAAA,EACtC,QAAA,EAAA;AAAA,EAAA,CAAA,KAAA,IAAS,OAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,cAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC7C,WAAA,oBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAc,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAC3D,CAAA;AAAA,IACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAiB,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EACtD,CAAA;AAAA,kBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EAAc,QAAA,EAAS;AAAA,CAAA,EACxC","file":"chunk-OXYFB2ZI.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Card.css\";\nimport * as React from \"react\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Visual variant. `raised` protrudes; `sunken` recesses; `flat` is subtle. */\n variant?: \"raised\" | \"sunken\" | \"flat\";\n /** Inner padding. */\n padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n children?: React.ReactNode;\n}\n\n/**\n * `Card` — neumorphic surface container. Use to group related content.\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ variant = \"raised\", padding = \"md\", className = \"\", children, ...rest }, ref) => {\n const cls = [\"card\", variant, padding !== \"md\" && `pad-${padding}`, className]\n .filter(Boolean)\n .join(\" \");\n return (\n <div ref={ref} className={cls} {...rest}>\n {children}\n </div>\n );\n }\n);\nCard.displayName = \"Card\";\n\nexport interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n title?: React.ReactNode;\n description?: React.ReactNode;\n actions?: React.ReactNode;\n children?: React.ReactNode;\n}\n\n/**\n * `Panel` — a titled `Card` with optional actions row.\n */\nexport const Panel: React.FC<PanelProps> = ({\n title,\n description,\n actions,\n children,\n className = \"\",\n ...rest\n}) => (\n <div className={`panel ${className}`} {...rest}>\n {(title || actions) && (\n <div className=\"panel-head\">\n <div className=\"panel-titles\">\n {title && <div className=\"panel-title\">{title}</div>}\n {description && <div className=\"panel-desc\">{description}</div>}\n </div>\n {actions && <div className=\"panel-actions\">{actions}</div>}\n </div>\n )}\n <div className=\"panel-body\">{children}</div>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Button } from './chunk-5EYI27B6.js';
|
|
2
|
+
import { Icon } from './chunk-GEYMWUW6.js';
|
|
3
|
+
import './tokens-HWQ7KWPG.css';
|
|
4
|
+
import './shared-NJHRNLRH.css';
|
|
5
|
+
import './Modal-AYKNIWWQ.css';
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import ReactDOM from 'react-dom';
|
|
8
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
var Modal = ({
|
|
11
|
+
open,
|
|
12
|
+
onClose,
|
|
13
|
+
title,
|
|
14
|
+
description,
|
|
15
|
+
footer,
|
|
16
|
+
children,
|
|
17
|
+
width = 440,
|
|
18
|
+
maskClosable = true,
|
|
19
|
+
escClosable = true,
|
|
20
|
+
className = ""
|
|
21
|
+
}) => {
|
|
22
|
+
React.useEffect(() => {
|
|
23
|
+
if (!open || !escClosable) return;
|
|
24
|
+
const h = (e) => e.key === "Escape" && onClose?.();
|
|
25
|
+
window.addEventListener("keydown", h);
|
|
26
|
+
return () => window.removeEventListener("keydown", h);
|
|
27
|
+
}, [open, escClosable, onClose]);
|
|
28
|
+
if (!open || typeof document === "undefined") return null;
|
|
29
|
+
return ReactDOM.createPortal(
|
|
30
|
+
/* @__PURE__ */ jsx("div", { className: `modal-overlay ${className}`, onClick: () => maskClosable && onClose?.(), children: /* @__PURE__ */ jsxs("div", { className: "modal", style: { width }, onClick: (e) => e.stopPropagation(), children: [
|
|
31
|
+
/* @__PURE__ */ jsxs("div", { className: "modal-head", children: [
|
|
32
|
+
/* @__PURE__ */ jsxs("div", { className: "modal-titles", children: [
|
|
33
|
+
title && /* @__PURE__ */ jsx("div", { className: "modal-title", children: title }),
|
|
34
|
+
description && /* @__PURE__ */ jsx("div", { className: "modal-desc", children: description })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) })
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ jsx("div", { className: "modal-body", children }),
|
|
39
|
+
footer !== void 0 ? /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer }) : /* @__PURE__ */ jsxs("div", { className: "modal-foot", children: [
|
|
40
|
+
/* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: "\u53D6\u6D88" }),
|
|
41
|
+
/* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onClose, children: "\u786E\u5B9A" })
|
|
42
|
+
] })
|
|
43
|
+
] }) }),
|
|
44
|
+
document.body
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
var Drawer = ({
|
|
48
|
+
open,
|
|
49
|
+
onClose,
|
|
50
|
+
placement = "right",
|
|
51
|
+
size = 380,
|
|
52
|
+
title,
|
|
53
|
+
footer,
|
|
54
|
+
children,
|
|
55
|
+
maskClosable = true,
|
|
56
|
+
className = ""
|
|
57
|
+
}) => {
|
|
58
|
+
if (!open || typeof document === "undefined") return null;
|
|
59
|
+
const isV = placement === "left" || placement === "right";
|
|
60
|
+
const style = isV ? { width: size } : { height: size };
|
|
61
|
+
return ReactDOM.createPortal(
|
|
62
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
|
+
/* @__PURE__ */ jsx("div", { className: "drawer-overlay", onClick: () => maskClosable && onClose?.() }),
|
|
64
|
+
/* @__PURE__ */ jsxs("div", { className: `drawer ${placement} ${className}`, style, onClick: (e) => e.stopPropagation(), children: [
|
|
65
|
+
title && /* @__PURE__ */ jsxs("div", { className: "drawer-head", children: [
|
|
66
|
+
/* @__PURE__ */ jsx("div", { className: "drawer-title", children: title }),
|
|
67
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) })
|
|
68
|
+
] }),
|
|
69
|
+
/* @__PURE__ */ jsx("div", { className: "drawer-body", children }),
|
|
70
|
+
footer && /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer })
|
|
71
|
+
] })
|
|
72
|
+
] }),
|
|
73
|
+
document.body
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export { Drawer, Modal };
|
|
78
|
+
//# sourceMappingURL=chunk-Q33V7MSK.js.map
|
|
79
|
+
//# sourceMappingURL=chunk-Q33V7MSK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-Q33V7MSK.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Modal.css\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\n\nexport interface ModalProps {\n open: boolean;\n onClose?: () => void;\n title?: React.ReactNode;\n description?: React.ReactNode;\n footer?: React.ReactNode;\n children?: React.ReactNode;\n width?: number | string;\n /** Close when clicking the mask. Default true. */\n maskClosable?: boolean;\n /** Close on Escape key. Default true. */\n escClosable?: boolean;\n className?: string;\n}\n\n/** `Modal` — centered dialog with mask. Renders into `document.body`. */\nexport const Modal: React.FC<ModalProps> = ({\n open,\n onClose,\n title,\n description,\n footer,\n children,\n width = 440,\n maskClosable = true,\n escClosable = true,\n className = \"\",\n}) => {\n React.useEffect(() => {\n if (!open || !escClosable) return;\n const h = (e: KeyboardEvent) => e.key === \"Escape\" && onClose?.();\n window.addEventListener(\"keydown\", h);\n return () => window.removeEventListener(\"keydown\", h);\n }, [open, escClosable, onClose]);\n\n if (!open || typeof document === \"undefined\") return null;\n return ReactDOM.createPortal(\n <div className={`modal-overlay ${className}`} onClick={() => maskClosable && onClose?.()}>\n <div className=\"modal\" style={{ width }} onClick={(e) => e.stopPropagation()}>\n <div className=\"modal-head\">\n <div className=\"modal-titles\">\n {title && <div className=\"modal-title\">{title}</div>}\n {description && <div className=\"modal-desc\">{description}</div>}\n </div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n <div className=\"modal-body\">{children}</div>\n {footer !== undefined ? (\n <div className=\"modal-foot\">{footer}</div>\n ) : (\n <div className=\"modal-foot\">\n <Button variant=\"ghost\" onClick={onClose}>取消</Button>\n <Button variant=\"primary\" onClick={onClose}>确定</Button>\n </div>\n )}\n </div>\n </div>,\n document.body\n );\n};\n\nexport interface DrawerProps extends Omit<ModalProps, \"width\"> {\n /** Edge the drawer slides from. */\n placement?: \"left\" | \"right\" | \"top\" | \"bottom\";\n size?: number | string;\n}\n\n/** `Drawer` — slide-in panel from an edge. */\nexport const Drawer: React.FC<DrawerProps> = ({\n open,\n onClose,\n placement = \"right\",\n size = 380,\n title,\n footer,\n children,\n maskClosable = true,\n className = \"\",\n}) => {\n if (!open || typeof document === \"undefined\") return null;\n const isV = placement === \"left\" || placement === \"right\";\n const style: React.CSSProperties = isV ? { width: size } : { height: size };\n return ReactDOM.createPortal(\n <>\n <div className=\"drawer-overlay\" onClick={() => maskClosable && onClose?.()} />\n <div className={`drawer ${placement} ${className}`} style={style} onClick={(e) => e.stopPropagation()}>\n {title && (\n <div className=\"drawer-head\">\n <div className=\"drawer-title\">{title}</div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n )}\n <div className=\"drawer-body\">{children}</div>\n {footer && <div className=\"modal-foot\">{footer}</div>}\n </div>\n </>,\n document.body\n );\n};\n"]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkYVO7XO4W_cjs = require('./chunk-YVO7XO4W.cjs');
|
|
4
|
+
require('./tokens-HWQ7KWPG.css');
|
|
5
|
+
require('./shared-NJHRNLRH.css');
|
|
6
|
+
require('./Image-WYWORJT4.css');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var ReactDOM = require('react-dom');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
|
|
13
|
+
function _interopNamespace(e) {
|
|
14
|
+
if (e && e.__esModule) return e;
|
|
15
|
+
var n = Object.create(null);
|
|
16
|
+
if (e) {
|
|
17
|
+
Object.keys(e).forEach(function (k) {
|
|
18
|
+
if (k !== 'default') {
|
|
19
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function () { return e[k]; }
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
n.default = e;
|
|
28
|
+
return Object.freeze(n);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
|
+
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
|
|
33
|
+
|
|
34
|
+
var Image = ({
|
|
35
|
+
src,
|
|
36
|
+
alt,
|
|
37
|
+
width = 200,
|
|
38
|
+
height = 140,
|
|
39
|
+
preview = true,
|
|
40
|
+
hover = true,
|
|
41
|
+
placeholder,
|
|
42
|
+
className = ""
|
|
43
|
+
}) => {
|
|
44
|
+
const [loaded, setLoaded] = React__namespace.useState(false);
|
|
45
|
+
const [err, setErr] = React__namespace.useState(false);
|
|
46
|
+
const [open, setOpen] = React__namespace.useState(false);
|
|
47
|
+
const canPreview = preview && loaded && !err;
|
|
48
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
className: `n-image ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
|
|
53
|
+
style: { width },
|
|
54
|
+
onClick: () => canPreview && setOpen(true),
|
|
55
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "n-image-frame", style: { width: "100%", height }, children: [
|
|
56
|
+
!err && src && /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onLoad: () => setLoaded(true), onError: () => setErr(true) }),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "image", size: 28 }) }),
|
|
58
|
+
canPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-hint", children: [
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "eye", size: 14 }),
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
|
|
62
|
+
] }),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
+
"button",
|
|
66
|
+
{
|
|
67
|
+
type: "button",
|
|
68
|
+
className: "ia-btn",
|
|
69
|
+
onClick: () => setOpen(true),
|
|
70
|
+
"aria-label": "\u9884\u89C8",
|
|
71
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "eye", size: 13 })
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
src && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "download", size: 13 }) })
|
|
75
|
+
] })
|
|
76
|
+
] })
|
|
77
|
+
] })
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
open && typeof document !== "undefined" && ReactDOM__default.default.createPortal(
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "image-preview-overlay", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onClick: (e) => e.stopPropagation() }) }),
|
|
82
|
+
document.body
|
|
83
|
+
)
|
|
84
|
+
] });
|
|
85
|
+
};
|
|
86
|
+
var ImageGrid = ({
|
|
87
|
+
images,
|
|
88
|
+
columns,
|
|
89
|
+
itemHeight = 130,
|
|
90
|
+
className = ""
|
|
91
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
className,
|
|
95
|
+
style: {
|
|
96
|
+
display: "grid",
|
|
97
|
+
gap: 14,
|
|
98
|
+
gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))"
|
|
99
|
+
},
|
|
100
|
+
children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: img.src, alt: img.alt, width: "100%", height: itemHeight }, i))
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
exports.Image = Image;
|
|
105
|
+
exports.ImageGrid = ImageGrid;
|
|
106
|
+
//# sourceMappingURL=chunk-QESLHLTG.cjs.map
|
|
107
|
+
//# sourceMappingURL=chunk-QESLHLTG.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/Image.tsx"],"names":["React","jsxs","Fragment","jsx","Icon","ReactDOM"],"mappings":"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","file":"chunk-QESLHLTG.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Image.css\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Icon } from \"../Icon\";\n\nexport interface ImageProps {\n src?: string;\n alt?: string;\n width?: number | string;\n height?: number | string;\n /** Allow click-to-zoom preview overlay. */\n preview?: boolean;\n /** Hover scale-up. */\n hover?: boolean;\n /** Custom placeholder while loading or on error. */\n placeholder?: React.ReactNode;\n className?: string;\n}\n\n/** `Image` — neumorphic framed image with optional preview overlay. */\nexport const Image: React.FC<ImageProps> = ({\n src,\n alt,\n width = 200,\n height = 140,\n preview = true,\n hover = true,\n placeholder,\n className = \"\",\n}) => {\n const [loaded, setLoaded] = React.useState(false);\n const [err, setErr] = React.useState(false);\n const [open, setOpen] = React.useState(false);\n const canPreview = preview && loaded && !err;\n\n return (\n <>\n <div\n className={`n-image ${hover ? \"hover\" : \"\"} ${canPreview ? \"clickable\" : \"\"} ${className}`}\n style={{ width }}\n onClick={() => canPreview && setOpen(true)}\n >\n <div className=\"n-image-frame\" style={{ width: \"100%\", height }}>\n {!err && src && (\n <img src={src} alt={alt} onLoad={() => setLoaded(true)} onError={() => setErr(true)} />\n )}\n <div className={`n-image-placeholder ${loaded && !err ? \"loaded\" : \"\"}`}>\n {placeholder ?? <Icon name=\"image\" size={28} />}\n </div>\n {canPreview && (\n <>\n <div className=\"image-hint\">\n <Icon name=\"eye\" size={14} />\n <span>点击查看</span>\n </div>\n <div className=\"image-actions\" onClick={(e) => e.stopPropagation()}>\n <button\n type=\"button\"\n className=\"ia-btn\"\n onClick={() => setOpen(true)}\n aria-label=\"预览\"\n >\n <Icon name=\"eye\" size={13} />\n </button>\n {src && (\n <a className=\"ia-btn\" href={src} download aria-label=\"下载\">\n <Icon name=\"download\" size={13} />\n </a>\n )}\n </div>\n </>\n )}\n </div>\n </div>\n {open &&\n typeof document !== \"undefined\" &&\n ReactDOM.createPortal(\n <div className=\"image-preview-overlay\" onClick={() => setOpen(false)}>\n <img src={src} alt={alt} onClick={(e) => e.stopPropagation()} />\n </div>,\n document.body\n )}\n </>\n );\n};\n\nexport interface ImageGridProps {\n images: { src: string; alt?: string }[];\n columns?: number;\n itemHeight?: number;\n className?: string;\n}\n\n/** `ImageGrid` — auto-fit grid of `Image` items. */\nexport const ImageGrid: React.FC<ImageGridProps> = ({\n images,\n columns,\n itemHeight = 130,\n className = \"\",\n}) => (\n <div\n className={className}\n style={{\n display: \"grid\",\n gap: 14,\n gridTemplateColumns: columns\n ? `repeat(${columns}, 1fr)`\n : \"repeat(auto-fill, minmax(160px, 1fr))\",\n }}\n >\n {images.map((img, i) => (\n <Image key={i} src={img.src} alt={img.alt} width=\"100%\" height={itemHeight} />\n ))}\n </div>\n);\n"]}
|