@x-plat/design-system 0.5.48 → 0.5.50
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/Editor/index.cjs +760 -0
- package/dist/components/Editor/index.css +247 -0
- package/dist/components/Editor/index.d.cts +29 -0
- package/dist/components/Editor/index.d.ts +29 -0
- package/dist/components/Editor/index.js +727 -0
- package/dist/components/index.cjs +1002 -293
- package/dist/components/index.css +248 -0
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1001 -293
- package/dist/index.cjs +1026 -317
- package/dist/index.css +248 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1025 -317
- package/guidelines/AGENT_PROMPT.md +20 -0
- package/guidelines/setup.md +28 -0
- package/package.json +1 -1
package/dist/components/index.js
CHANGED
|
@@ -2007,14 +2007,14 @@ var CardTabRoot = (props) => {
|
|
|
2007
2007
|
);
|
|
2008
2008
|
return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
|
|
2009
2009
|
/* @__PURE__ */ jsx304("div", { className: "card-tab-bar", children: tabs.map((tab) => {
|
|
2010
|
-
const
|
|
2010
|
+
const isActive2 = tab.value === activeValue;
|
|
2011
2011
|
return /* @__PURE__ */ jsx304(
|
|
2012
2012
|
"button",
|
|
2013
2013
|
{
|
|
2014
|
-
className: clsx_default("card-tab-trigger",
|
|
2014
|
+
className: clsx_default("card-tab-trigger", isActive2 && "active"),
|
|
2015
2015
|
onClick: () => handleTabClick(tab),
|
|
2016
2016
|
role: "tab",
|
|
2017
|
-
"aria-selected":
|
|
2017
|
+
"aria-selected": isActive2,
|
|
2018
2018
|
children: tab.title
|
|
2019
2019
|
},
|
|
2020
2020
|
tab.value
|
|
@@ -3376,12 +3376,12 @@ import React14 from "react";
|
|
|
3376
3376
|
import React13 from "react";
|
|
3377
3377
|
import { jsx as jsx317 } from "react/jsx-runtime";
|
|
3378
3378
|
var TabItem = React13.forwardRef((props, ref) => {
|
|
3379
|
-
const { isActive, title, onClick } = props;
|
|
3379
|
+
const { isActive: isActive2, title, onClick } = props;
|
|
3380
3380
|
return /* @__PURE__ */ jsx317(
|
|
3381
3381
|
"div",
|
|
3382
3382
|
{
|
|
3383
3383
|
ref,
|
|
3384
|
-
className: clsx_default("tab-item",
|
|
3384
|
+
className: clsx_default("tab-item", isActive2 ? "active" : null),
|
|
3385
3385
|
onClick,
|
|
3386
3386
|
children: title
|
|
3387
3387
|
}
|
|
@@ -3804,24 +3804,731 @@ var Dropdown = (props) => {
|
|
|
3804
3804
|
Dropdown.displayName = "Dropdown";
|
|
3805
3805
|
var Dropdown_default = Dropdown;
|
|
3806
3806
|
|
|
3807
|
-
// src/components/
|
|
3807
|
+
// src/components/Editor/Editor.tsx
|
|
3808
|
+
import React21 from "react";
|
|
3808
3809
|
import { jsx as jsx324, jsxs as jsxs208 } from "react/jsx-runtime";
|
|
3810
|
+
var DEFAULT_TOOLBAR = [
|
|
3811
|
+
"bold",
|
|
3812
|
+
"italic",
|
|
3813
|
+
"underline",
|
|
3814
|
+
"strikethrough",
|
|
3815
|
+
"code",
|
|
3816
|
+
"heading",
|
|
3817
|
+
"list",
|
|
3818
|
+
"ordered-list",
|
|
3819
|
+
"blockquote",
|
|
3820
|
+
"code-block",
|
|
3821
|
+
"link",
|
|
3822
|
+
"image",
|
|
3823
|
+
"divider"
|
|
3824
|
+
];
|
|
3825
|
+
var ALLOWED_TAGS = /* @__PURE__ */ new Set([
|
|
3826
|
+
"p",
|
|
3827
|
+
"br",
|
|
3828
|
+
"h1",
|
|
3829
|
+
"h2",
|
|
3830
|
+
"h3",
|
|
3831
|
+
"h4",
|
|
3832
|
+
"h5",
|
|
3833
|
+
"h6",
|
|
3834
|
+
"ul",
|
|
3835
|
+
"ol",
|
|
3836
|
+
"li",
|
|
3837
|
+
"blockquote",
|
|
3838
|
+
"pre",
|
|
3839
|
+
"code",
|
|
3840
|
+
"strong",
|
|
3841
|
+
"b",
|
|
3842
|
+
"em",
|
|
3843
|
+
"i",
|
|
3844
|
+
"u",
|
|
3845
|
+
"s",
|
|
3846
|
+
"strike",
|
|
3847
|
+
"del",
|
|
3848
|
+
"a",
|
|
3849
|
+
"img",
|
|
3850
|
+
"hr",
|
|
3851
|
+
"span",
|
|
3852
|
+
"div"
|
|
3853
|
+
]);
|
|
3854
|
+
var ALLOWED_ATTRS = {
|
|
3855
|
+
a: ["href", "target", "rel"],
|
|
3856
|
+
img: ["src", "alt"]
|
|
3857
|
+
};
|
|
3858
|
+
var sanitizeHtml = (input) => {
|
|
3859
|
+
const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
|
|
3860
|
+
const root = doc.body.firstElementChild;
|
|
3861
|
+
if (!root) return "";
|
|
3862
|
+
const walk = (node) => {
|
|
3863
|
+
const children = Array.from(node.children);
|
|
3864
|
+
for (const child of children) {
|
|
3865
|
+
const tag = child.tagName.toLowerCase();
|
|
3866
|
+
if (!ALLOWED_TAGS.has(tag)) {
|
|
3867
|
+
while (child.firstChild) node.insertBefore(child.firstChild, child);
|
|
3868
|
+
node.removeChild(child);
|
|
3869
|
+
continue;
|
|
3870
|
+
}
|
|
3871
|
+
const allowed = ALLOWED_ATTRS[tag] || [];
|
|
3872
|
+
for (const attr of Array.from(child.attributes)) {
|
|
3873
|
+
if (!allowed.includes(attr.name)) {
|
|
3874
|
+
child.removeAttribute(attr.name);
|
|
3875
|
+
}
|
|
3876
|
+
if (attr.name === "href" || attr.name === "src") {
|
|
3877
|
+
const val = attr.value.trim().toLowerCase();
|
|
3878
|
+
if (val.startsWith("javascript:") || val.startsWith("data:text/html")) {
|
|
3879
|
+
child.removeAttribute(attr.name);
|
|
3880
|
+
}
|
|
3881
|
+
}
|
|
3882
|
+
}
|
|
3883
|
+
walk(child);
|
|
3884
|
+
}
|
|
3885
|
+
};
|
|
3886
|
+
walk(root);
|
|
3887
|
+
return root.innerHTML;
|
|
3888
|
+
};
|
|
3889
|
+
var escapeHtml = (text) => {
|
|
3890
|
+
const div = document.createElement("div");
|
|
3891
|
+
div.textContent = text;
|
|
3892
|
+
return div.innerHTML.replace(/\n/g, "<br>");
|
|
3893
|
+
};
|
|
3894
|
+
var SLASH_ITEMS = [
|
|
3895
|
+
{ key: "paragraph", label: "\uB2E8\uB77D", hint: "\uAE30\uBCF8 \uD14D\uC2A4\uD2B8" },
|
|
3896
|
+
{ key: "heading", label: "\uC81C\uBAA9 1", hint: "\uD070 \uC81C\uBAA9" },
|
|
3897
|
+
{ key: "list", label: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", hint: "\u2022 \uD56D\uBAA9" },
|
|
3898
|
+
{ key: "ordered-list", label: "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D", hint: "1. \uD56D\uBAA9" },
|
|
3899
|
+
{ key: "blockquote", label: "\uC778\uC6A9", hint: "" },
|
|
3900
|
+
{ key: "code-block", label: "\uCF54\uB4DC \uBE14\uB85D", hint: "" },
|
|
3901
|
+
{ key: "divider", label: "\uAD6C\uBD84\uC120", hint: "\u2500" },
|
|
3902
|
+
{ key: "image", label: "\uC774\uBBF8\uC9C0", hint: "" }
|
|
3903
|
+
];
|
|
3904
|
+
var Editor = (props) => {
|
|
3905
|
+
const {
|
|
3906
|
+
value = "",
|
|
3907
|
+
onChange,
|
|
3908
|
+
placeholder = "\uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694",
|
|
3909
|
+
readOnly = false,
|
|
3910
|
+
toolbar = DEFAULT_TOOLBAR,
|
|
3911
|
+
enableSlashCommand = true,
|
|
3912
|
+
enableMarkdownShortcuts = true,
|
|
3913
|
+
onImageUpload,
|
|
3914
|
+
minHeight = 200
|
|
3915
|
+
} = props;
|
|
3916
|
+
const editorRef = React21.useRef(null);
|
|
3917
|
+
const lastRangeRef = React21.useRef(null);
|
|
3918
|
+
const composingRef = React21.useRef(false);
|
|
3919
|
+
const [isFocused, setIsFocused] = React21.useState(false);
|
|
3920
|
+
const [isEmpty, setIsEmpty] = React21.useState(!value);
|
|
3921
|
+
const [activeFormats, setActiveFormats] = React21.useState(/* @__PURE__ */ new Set());
|
|
3922
|
+
const [slashOpen, setSlashOpen] = React21.useState(false);
|
|
3923
|
+
const [slashFilter, setSlashFilter] = React21.useState("");
|
|
3924
|
+
const [slashIdx, setSlashIdx] = React21.useState(0);
|
|
3925
|
+
const [slashPos, setSlashPos] = React21.useState({ top: 0, left: 0 });
|
|
3926
|
+
const slashStartRangeRef = React21.useRef(null);
|
|
3927
|
+
const [linkOpen, setLinkOpen] = React21.useState(false);
|
|
3928
|
+
const [linkValue, setLinkValue] = React21.useState("");
|
|
3929
|
+
const [linkPos, setLinkPos] = React21.useState({ top: 0, left: 0 });
|
|
3930
|
+
React21.useEffect(() => {
|
|
3931
|
+
if (!editorRef.current) return;
|
|
3932
|
+
if (editorRef.current.innerHTML !== value) {
|
|
3933
|
+
editorRef.current.innerHTML = sanitizeHtml(value || "");
|
|
3934
|
+
updateEmpty();
|
|
3935
|
+
}
|
|
3936
|
+
}, [value]);
|
|
3937
|
+
const updateEmpty = () => {
|
|
3938
|
+
const el = editorRef.current;
|
|
3939
|
+
if (!el) return;
|
|
3940
|
+
const text = el.textContent || "";
|
|
3941
|
+
const childCount = el.children.length;
|
|
3942
|
+
setIsEmpty(text.length === 0 && childCount <= 1);
|
|
3943
|
+
};
|
|
3944
|
+
const saveSelection = () => {
|
|
3945
|
+
const sel = window.getSelection();
|
|
3946
|
+
if (sel && sel.rangeCount > 0 && editorRef.current?.contains(sel.anchorNode)) {
|
|
3947
|
+
lastRangeRef.current = sel.getRangeAt(0).cloneRange();
|
|
3948
|
+
}
|
|
3949
|
+
};
|
|
3950
|
+
const restoreSelection = () => {
|
|
3951
|
+
if (!lastRangeRef.current) return;
|
|
3952
|
+
const sel = window.getSelection();
|
|
3953
|
+
sel?.removeAllRanges();
|
|
3954
|
+
sel?.addRange(lastRangeRef.current);
|
|
3955
|
+
};
|
|
3956
|
+
const updateActiveFormats = () => {
|
|
3957
|
+
if (!editorRef.current) return;
|
|
3958
|
+
const sel = window.getSelection();
|
|
3959
|
+
if (!sel || !editorRef.current.contains(sel.anchorNode)) return;
|
|
3960
|
+
const next = /* @__PURE__ */ new Set();
|
|
3961
|
+
try {
|
|
3962
|
+
if (document.queryCommandState("bold")) next.add("bold");
|
|
3963
|
+
if (document.queryCommandState("italic")) next.add("italic");
|
|
3964
|
+
if (document.queryCommandState("underline")) next.add("underline");
|
|
3965
|
+
if (document.queryCommandState("strikethrough")) next.add("strikethrough");
|
|
3966
|
+
if (document.queryCommandState("insertUnorderedList")) next.add("list");
|
|
3967
|
+
if (document.queryCommandState("insertOrderedList")) next.add("ordered-list");
|
|
3968
|
+
const block = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
|
|
3969
|
+
if (block) next.add(`block:${block}`);
|
|
3970
|
+
} catch {
|
|
3971
|
+
}
|
|
3972
|
+
setActiveFormats(next);
|
|
3973
|
+
};
|
|
3974
|
+
const exec = (cmd, val) => {
|
|
3975
|
+
document.execCommand(cmd, false, val);
|
|
3976
|
+
editorRef.current?.focus();
|
|
3977
|
+
updateActiveFormats();
|
|
3978
|
+
handleInput();
|
|
3979
|
+
};
|
|
3980
|
+
const setBlock = (tag) => {
|
|
3981
|
+
exec("formatBlock", tag);
|
|
3982
|
+
};
|
|
3983
|
+
const insertDivider = () => {
|
|
3984
|
+
exec("insertHorizontalRule");
|
|
3985
|
+
const el = editorRef.current;
|
|
3986
|
+
if (el && el.lastElementChild?.tagName === "HR") {
|
|
3987
|
+
const p = document.createElement("p");
|
|
3988
|
+
p.innerHTML = "<br>";
|
|
3989
|
+
el.appendChild(p);
|
|
3990
|
+
handleInput();
|
|
3991
|
+
}
|
|
3992
|
+
};
|
|
3993
|
+
const insertImageByUrl = (url) => {
|
|
3994
|
+
if (!url) return;
|
|
3995
|
+
exec("insertImage", url);
|
|
3996
|
+
};
|
|
3997
|
+
const triggerImageUpload = async () => {
|
|
3998
|
+
if (!onImageUpload) {
|
|
3999
|
+
const url = window.prompt("\uC774\uBBF8\uC9C0 URL");
|
|
4000
|
+
if (url) {
|
|
4001
|
+
restoreSelection();
|
|
4002
|
+
insertImageByUrl(url);
|
|
4003
|
+
}
|
|
4004
|
+
return;
|
|
4005
|
+
}
|
|
4006
|
+
const input = document.createElement("input");
|
|
4007
|
+
input.type = "file";
|
|
4008
|
+
input.accept = "image/*";
|
|
4009
|
+
input.onchange = async () => {
|
|
4010
|
+
const file = input.files?.[0];
|
|
4011
|
+
if (!file) return;
|
|
4012
|
+
try {
|
|
4013
|
+
const url = await onImageUpload(file);
|
|
4014
|
+
restoreSelection();
|
|
4015
|
+
insertImageByUrl(url);
|
|
4016
|
+
} catch (err) {
|
|
4017
|
+
console.error("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uC2E4\uD328:", err);
|
|
4018
|
+
}
|
|
4019
|
+
};
|
|
4020
|
+
input.click();
|
|
4021
|
+
};
|
|
4022
|
+
const openSlashMenu = () => {
|
|
4023
|
+
if (!enableSlashCommand) return;
|
|
4024
|
+
const sel = window.getSelection();
|
|
4025
|
+
if (!sel || sel.rangeCount === 0) return;
|
|
4026
|
+
const range = sel.getRangeAt(0);
|
|
4027
|
+
slashStartRangeRef.current = range.cloneRange();
|
|
4028
|
+
const rect = range.getBoundingClientRect();
|
|
4029
|
+
const editorRect = editorRef.current.getBoundingClientRect();
|
|
4030
|
+
setSlashPos({
|
|
4031
|
+
top: rect.bottom - editorRect.top + 4,
|
|
4032
|
+
left: rect.left - editorRect.left
|
|
4033
|
+
});
|
|
4034
|
+
setSlashFilter("");
|
|
4035
|
+
setSlashIdx(0);
|
|
4036
|
+
setSlashOpen(true);
|
|
4037
|
+
};
|
|
4038
|
+
const closeSlashMenu = () => {
|
|
4039
|
+
setSlashOpen(false);
|
|
4040
|
+
setSlashFilter("");
|
|
4041
|
+
setSlashIdx(0);
|
|
4042
|
+
slashStartRangeRef.current = null;
|
|
4043
|
+
};
|
|
4044
|
+
const filteredSlashItems = React21.useMemo(() => {
|
|
4045
|
+
if (!slashFilter) return SLASH_ITEMS;
|
|
4046
|
+
const f = slashFilter.toLowerCase();
|
|
4047
|
+
return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
|
|
4048
|
+
}, [slashFilter]);
|
|
4049
|
+
const removeSlashTrigger = () => {
|
|
4050
|
+
const sel = window.getSelection();
|
|
4051
|
+
if (!sel || sel.rangeCount === 0) return;
|
|
4052
|
+
const range = sel.getRangeAt(0);
|
|
4053
|
+
const node = range.startContainer;
|
|
4054
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
4055
|
+
const text = node.textContent || "";
|
|
4056
|
+
const idx = text.lastIndexOf("/");
|
|
4057
|
+
if (idx >= 0) {
|
|
4058
|
+
node.textContent = text.slice(0, idx) + text.slice(range.startOffset);
|
|
4059
|
+
const newRange = document.createRange();
|
|
4060
|
+
newRange.setStart(node, idx);
|
|
4061
|
+
newRange.collapse(true);
|
|
4062
|
+
sel.removeAllRanges();
|
|
4063
|
+
sel.addRange(newRange);
|
|
4064
|
+
}
|
|
4065
|
+
}
|
|
4066
|
+
};
|
|
4067
|
+
const applySlashItem = (item) => {
|
|
4068
|
+
removeSlashTrigger();
|
|
4069
|
+
closeSlashMenu();
|
|
4070
|
+
switch (item.key) {
|
|
4071
|
+
case "paragraph":
|
|
4072
|
+
setBlock("p");
|
|
4073
|
+
break;
|
|
4074
|
+
case "heading":
|
|
4075
|
+
setBlock("h2");
|
|
4076
|
+
break;
|
|
4077
|
+
case "list":
|
|
4078
|
+
exec("insertUnorderedList");
|
|
4079
|
+
break;
|
|
4080
|
+
case "ordered-list":
|
|
4081
|
+
exec("insertOrderedList");
|
|
4082
|
+
break;
|
|
4083
|
+
case "blockquote":
|
|
4084
|
+
setBlock("blockquote");
|
|
4085
|
+
break;
|
|
4086
|
+
case "code-block":
|
|
4087
|
+
setBlock("pre");
|
|
4088
|
+
break;
|
|
4089
|
+
case "divider":
|
|
4090
|
+
insertDivider();
|
|
4091
|
+
break;
|
|
4092
|
+
case "image":
|
|
4093
|
+
triggerImageUpload();
|
|
4094
|
+
break;
|
|
4095
|
+
default:
|
|
4096
|
+
break;
|
|
4097
|
+
}
|
|
4098
|
+
};
|
|
4099
|
+
const openLinkEditor = () => {
|
|
4100
|
+
saveSelection();
|
|
4101
|
+
const sel = window.getSelection();
|
|
4102
|
+
if (!sel || sel.rangeCount === 0) return;
|
|
4103
|
+
const range = sel.getRangeAt(0);
|
|
4104
|
+
const rect = range.getBoundingClientRect();
|
|
4105
|
+
const editorRect = editorRef.current.getBoundingClientRect();
|
|
4106
|
+
setLinkPos({
|
|
4107
|
+
top: rect.bottom - editorRect.top + 4,
|
|
4108
|
+
left: rect.left - editorRect.left
|
|
4109
|
+
});
|
|
4110
|
+
const anchor = sel.anchorNode?.parentElement?.closest("a");
|
|
4111
|
+
setLinkValue(anchor?.getAttribute("href") || "");
|
|
4112
|
+
setLinkOpen(true);
|
|
4113
|
+
};
|
|
4114
|
+
const applyLink = () => {
|
|
4115
|
+
restoreSelection();
|
|
4116
|
+
if (linkValue) {
|
|
4117
|
+
exec("createLink", linkValue);
|
|
4118
|
+
const sel = window.getSelection();
|
|
4119
|
+
const anchor = sel?.anchorNode?.parentElement?.closest("a");
|
|
4120
|
+
if (anchor) {
|
|
4121
|
+
anchor.setAttribute("target", "_blank");
|
|
4122
|
+
anchor.setAttribute("rel", "noopener noreferrer");
|
|
4123
|
+
}
|
|
4124
|
+
} else {
|
|
4125
|
+
exec("unlink");
|
|
4126
|
+
}
|
|
4127
|
+
setLinkOpen(false);
|
|
4128
|
+
};
|
|
4129
|
+
const tryMarkdownShortcut = () => {
|
|
4130
|
+
if (!enableMarkdownShortcuts) return false;
|
|
4131
|
+
const sel = window.getSelection();
|
|
4132
|
+
if (!sel || sel.rangeCount === 0) return false;
|
|
4133
|
+
const range = sel.getRangeAt(0);
|
|
4134
|
+
const node = range.startContainer;
|
|
4135
|
+
if (node.nodeType !== Node.TEXT_NODE) return false;
|
|
4136
|
+
const text = (node.textContent || "").slice(0, range.startOffset);
|
|
4137
|
+
const patterns = [
|
|
4138
|
+
[/^###\s$/, () => setBlock("h3")],
|
|
4139
|
+
[/^##\s$/, () => setBlock("h2")],
|
|
4140
|
+
[/^#\s$/, () => setBlock("h1")],
|
|
4141
|
+
[/^-\s$/, () => exec("insertUnorderedList")],
|
|
4142
|
+
[/^\*\s$/, () => exec("insertUnorderedList")],
|
|
4143
|
+
[/^1\.\s$/, () => exec("insertOrderedList")],
|
|
4144
|
+
[/^>\s$/, () => setBlock("blockquote")]
|
|
4145
|
+
];
|
|
4146
|
+
for (const [re, fn] of patterns) {
|
|
4147
|
+
if (re.test(text)) {
|
|
4148
|
+
node.textContent = (node.textContent || "").slice(range.startOffset);
|
|
4149
|
+
const newRange = document.createRange();
|
|
4150
|
+
newRange.setStart(node, 0);
|
|
4151
|
+
newRange.collapse(true);
|
|
4152
|
+
sel.removeAllRanges();
|
|
4153
|
+
sel.addRange(newRange);
|
|
4154
|
+
fn();
|
|
4155
|
+
return true;
|
|
4156
|
+
}
|
|
4157
|
+
}
|
|
4158
|
+
return false;
|
|
4159
|
+
};
|
|
4160
|
+
const handleInput = () => {
|
|
4161
|
+
if (composingRef.current) return;
|
|
4162
|
+
const el = editorRef.current;
|
|
4163
|
+
if (!el) return;
|
|
4164
|
+
onChange?.(el.innerHTML);
|
|
4165
|
+
updateEmpty();
|
|
4166
|
+
updateActiveFormats();
|
|
4167
|
+
if (slashOpen) {
|
|
4168
|
+
const sel = window.getSelection();
|
|
4169
|
+
if (sel && sel.rangeCount > 0) {
|
|
4170
|
+
const range = sel.getRangeAt(0);
|
|
4171
|
+
const node = range.startContainer;
|
|
4172
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
4173
|
+
const text = node.textContent || "";
|
|
4174
|
+
const lastSlash = text.lastIndexOf("/", range.startOffset - 1);
|
|
4175
|
+
if (lastSlash >= 0) {
|
|
4176
|
+
const filter = text.slice(lastSlash + 1, range.startOffset);
|
|
4177
|
+
if (filter.includes(" ") || filter.includes("\n")) {
|
|
4178
|
+
closeSlashMenu();
|
|
4179
|
+
} else {
|
|
4180
|
+
setSlashFilter(filter);
|
|
4181
|
+
setSlashIdx(0);
|
|
4182
|
+
}
|
|
4183
|
+
} else {
|
|
4184
|
+
closeSlashMenu();
|
|
4185
|
+
}
|
|
4186
|
+
}
|
|
4187
|
+
}
|
|
4188
|
+
}
|
|
4189
|
+
};
|
|
4190
|
+
const handleKeyDown = (e) => {
|
|
4191
|
+
if (readOnly) return;
|
|
4192
|
+
if (slashOpen) {
|
|
4193
|
+
if (e.key === "ArrowDown") {
|
|
4194
|
+
e.preventDefault();
|
|
4195
|
+
setSlashIdx((i) => Math.min(i + 1, filteredSlashItems.length - 1));
|
|
4196
|
+
return;
|
|
4197
|
+
}
|
|
4198
|
+
if (e.key === "ArrowUp") {
|
|
4199
|
+
e.preventDefault();
|
|
4200
|
+
setSlashIdx((i) => Math.max(i - 1, 0));
|
|
4201
|
+
return;
|
|
4202
|
+
}
|
|
4203
|
+
if (e.key === "Enter") {
|
|
4204
|
+
e.preventDefault();
|
|
4205
|
+
const item = filteredSlashItems[slashIdx];
|
|
4206
|
+
if (item) applySlashItem(item);
|
|
4207
|
+
return;
|
|
4208
|
+
}
|
|
4209
|
+
if (e.key === "Escape") {
|
|
4210
|
+
e.preventDefault();
|
|
4211
|
+
closeSlashMenu();
|
|
4212
|
+
return;
|
|
4213
|
+
}
|
|
4214
|
+
}
|
|
4215
|
+
if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
|
|
4216
|
+
const k = e.key.toLowerCase();
|
|
4217
|
+
if (k === "b") {
|
|
4218
|
+
e.preventDefault();
|
|
4219
|
+
exec("bold");
|
|
4220
|
+
return;
|
|
4221
|
+
}
|
|
4222
|
+
if (k === "i") {
|
|
4223
|
+
e.preventDefault();
|
|
4224
|
+
exec("italic");
|
|
4225
|
+
return;
|
|
4226
|
+
}
|
|
4227
|
+
if (k === "u") {
|
|
4228
|
+
e.preventDefault();
|
|
4229
|
+
exec("underline");
|
|
4230
|
+
return;
|
|
4231
|
+
}
|
|
4232
|
+
if (k === "k") {
|
|
4233
|
+
e.preventDefault();
|
|
4234
|
+
openLinkEditor();
|
|
4235
|
+
return;
|
|
4236
|
+
}
|
|
4237
|
+
}
|
|
4238
|
+
if (enableSlashCommand && e.key === "/") {
|
|
4239
|
+
setTimeout(openSlashMenu, 0);
|
|
4240
|
+
}
|
|
4241
|
+
if (enableMarkdownShortcuts && e.key === " ") {
|
|
4242
|
+
if (tryMarkdownShortcut()) {
|
|
4243
|
+
e.preventDefault();
|
|
4244
|
+
}
|
|
4245
|
+
}
|
|
4246
|
+
};
|
|
4247
|
+
const handlePaste = (e) => {
|
|
4248
|
+
if (readOnly) return;
|
|
4249
|
+
e.preventDefault();
|
|
4250
|
+
const html = e.clipboardData.getData("text/html");
|
|
4251
|
+
const text = e.clipboardData.getData("text/plain");
|
|
4252
|
+
const clean = html ? sanitizeHtml(html) : escapeHtml(text);
|
|
4253
|
+
document.execCommand("insertHTML", false, clean);
|
|
4254
|
+
handleInput();
|
|
4255
|
+
};
|
|
4256
|
+
const handleCompositionStart = () => {
|
|
4257
|
+
composingRef.current = true;
|
|
4258
|
+
};
|
|
4259
|
+
const handleCompositionEnd = () => {
|
|
4260
|
+
composingRef.current = false;
|
|
4261
|
+
handleInput();
|
|
4262
|
+
};
|
|
4263
|
+
const handleFocus = () => {
|
|
4264
|
+
setIsFocused(true);
|
|
4265
|
+
updateActiveFormats();
|
|
4266
|
+
};
|
|
4267
|
+
const handleBlur = () => {
|
|
4268
|
+
setIsFocused(false);
|
|
4269
|
+
saveSelection();
|
|
4270
|
+
};
|
|
4271
|
+
const handleSelectionUpdate = () => {
|
|
4272
|
+
updateActiveFormats();
|
|
4273
|
+
};
|
|
4274
|
+
const onToolbarAction = (item) => {
|
|
4275
|
+
switch (item) {
|
|
4276
|
+
case "bold":
|
|
4277
|
+
exec("bold");
|
|
4278
|
+
break;
|
|
4279
|
+
case "italic":
|
|
4280
|
+
exec("italic");
|
|
4281
|
+
break;
|
|
4282
|
+
case "underline":
|
|
4283
|
+
exec("underline");
|
|
4284
|
+
break;
|
|
4285
|
+
case "strikethrough":
|
|
4286
|
+
exec("strikethrough");
|
|
4287
|
+
break;
|
|
4288
|
+
case "code": {
|
|
4289
|
+
const sel = window.getSelection();
|
|
4290
|
+
if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
|
4291
|
+
const range = sel.getRangeAt(0);
|
|
4292
|
+
const code = document.createElement("code");
|
|
4293
|
+
try {
|
|
4294
|
+
range.surroundContents(code);
|
|
4295
|
+
} catch {
|
|
4296
|
+
const frag = range.extractContents();
|
|
4297
|
+
code.appendChild(frag);
|
|
4298
|
+
range.insertNode(code);
|
|
4299
|
+
}
|
|
4300
|
+
handleInput();
|
|
4301
|
+
break;
|
|
4302
|
+
}
|
|
4303
|
+
case "heading":
|
|
4304
|
+
setBlock("h2");
|
|
4305
|
+
break;
|
|
4306
|
+
case "list":
|
|
4307
|
+
exec("insertUnorderedList");
|
|
4308
|
+
break;
|
|
4309
|
+
case "ordered-list":
|
|
4310
|
+
exec("insertOrderedList");
|
|
4311
|
+
break;
|
|
4312
|
+
case "blockquote":
|
|
4313
|
+
setBlock("blockquote");
|
|
4314
|
+
break;
|
|
4315
|
+
case "code-block":
|
|
4316
|
+
setBlock("pre");
|
|
4317
|
+
break;
|
|
4318
|
+
case "link":
|
|
4319
|
+
openLinkEditor();
|
|
4320
|
+
break;
|
|
4321
|
+
case "image":
|
|
4322
|
+
triggerImageUpload();
|
|
4323
|
+
break;
|
|
4324
|
+
case "divider":
|
|
4325
|
+
insertDivider();
|
|
4326
|
+
break;
|
|
4327
|
+
}
|
|
4328
|
+
};
|
|
4329
|
+
return /* @__PURE__ */ jsxs208("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
|
|
4330
|
+
!readOnly && /* @__PURE__ */ jsx324(
|
|
4331
|
+
EditorToolbar,
|
|
4332
|
+
{
|
|
4333
|
+
items: toolbar,
|
|
4334
|
+
active: activeFormats,
|
|
4335
|
+
onAction: onToolbarAction
|
|
4336
|
+
}
|
|
4337
|
+
),
|
|
4338
|
+
/* @__PURE__ */ jsxs208("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
|
|
4339
|
+
isEmpty && !isFocused && /* @__PURE__ */ jsx324("div", { className: "lib-xplat-editor__placeholder", children: placeholder }),
|
|
4340
|
+
/* @__PURE__ */ jsx324(
|
|
4341
|
+
"div",
|
|
4342
|
+
{
|
|
4343
|
+
ref: editorRef,
|
|
4344
|
+
contentEditable: !readOnly,
|
|
4345
|
+
suppressContentEditableWarning: true,
|
|
4346
|
+
className: "lib-xplat-editor__editable",
|
|
4347
|
+
onInput: handleInput,
|
|
4348
|
+
onKeyDown: handleKeyDown,
|
|
4349
|
+
onKeyUp: handleSelectionUpdate,
|
|
4350
|
+
onMouseUp: handleSelectionUpdate,
|
|
4351
|
+
onPaste: handlePaste,
|
|
4352
|
+
onCompositionStart: handleCompositionStart,
|
|
4353
|
+
onCompositionEnd: handleCompositionEnd,
|
|
4354
|
+
onFocus: handleFocus,
|
|
4355
|
+
onBlur: handleBlur,
|
|
4356
|
+
spellCheck: true
|
|
4357
|
+
}
|
|
4358
|
+
),
|
|
4359
|
+
slashOpen && filteredSlashItems.length > 0 && /* @__PURE__ */ jsx324(
|
|
4360
|
+
SlashMenu,
|
|
4361
|
+
{
|
|
4362
|
+
position: slashPos,
|
|
4363
|
+
items: filteredSlashItems,
|
|
4364
|
+
activeIndex: slashIdx,
|
|
4365
|
+
onSelect: applySlashItem,
|
|
4366
|
+
onClose: closeSlashMenu
|
|
4367
|
+
}
|
|
4368
|
+
),
|
|
4369
|
+
linkOpen && /* @__PURE__ */ jsx324(
|
|
4370
|
+
LinkPopover,
|
|
4371
|
+
{
|
|
4372
|
+
position: linkPos,
|
|
4373
|
+
value: linkValue,
|
|
4374
|
+
onChange: setLinkValue,
|
|
4375
|
+
onConfirm: applyLink,
|
|
4376
|
+
onClose: () => setLinkOpen(false)
|
|
4377
|
+
}
|
|
4378
|
+
)
|
|
4379
|
+
] })
|
|
4380
|
+
] });
|
|
4381
|
+
};
|
|
4382
|
+
Editor.displayName = "Editor";
|
|
4383
|
+
var Editor_default = Editor;
|
|
4384
|
+
var TOOLBAR_LABEL = {
|
|
4385
|
+
bold: "B",
|
|
4386
|
+
italic: "I",
|
|
4387
|
+
underline: "U",
|
|
4388
|
+
strikethrough: "S",
|
|
4389
|
+
code: "<>",
|
|
4390
|
+
heading: "H",
|
|
4391
|
+
list: "\u2022",
|
|
4392
|
+
"ordered-list": "1.",
|
|
4393
|
+
blockquote: "\u275D",
|
|
4394
|
+
"code-block": "[ ]",
|
|
4395
|
+
link: "\u{1F517}",
|
|
4396
|
+
image: "\u{1F5BC}",
|
|
4397
|
+
divider: "\u2014"
|
|
4398
|
+
};
|
|
4399
|
+
var TOOLBAR_TITLE = {
|
|
4400
|
+
bold: "\uAD75\uAC8C (\u2318B)",
|
|
4401
|
+
italic: "\uAE30\uC6B8\uC784 (\u2318I)",
|
|
4402
|
+
underline: "\uBC11\uC904 (\u2318U)",
|
|
4403
|
+
strikethrough: "\uCDE8\uC18C\uC120",
|
|
4404
|
+
code: "\uC778\uB77C\uC778 \uCF54\uB4DC",
|
|
4405
|
+
heading: "\uC81C\uBAA9",
|
|
4406
|
+
list: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D",
|
|
4407
|
+
"ordered-list": "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D",
|
|
4408
|
+
blockquote: "\uC778\uC6A9",
|
|
4409
|
+
"code-block": "\uCF54\uB4DC \uBE14\uB85D",
|
|
4410
|
+
link: "\uB9C1\uD06C (\u2318K)",
|
|
4411
|
+
image: "\uC774\uBBF8\uC9C0",
|
|
4412
|
+
divider: "\uAD6C\uBD84\uC120"
|
|
4413
|
+
};
|
|
4414
|
+
var isActive = (item, active) => {
|
|
4415
|
+
if (item === "heading") return active.has("block:h1") || active.has("block:h2") || active.has("block:h3");
|
|
4416
|
+
if (item === "blockquote") return active.has("block:blockquote");
|
|
4417
|
+
if (item === "code-block") return active.has("block:pre");
|
|
4418
|
+
return active.has(item);
|
|
4419
|
+
};
|
|
4420
|
+
var EditorToolbar = ({ items, active, onAction }) => {
|
|
4421
|
+
return /* @__PURE__ */ jsx324("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ jsx324(
|
|
4422
|
+
"button",
|
|
4423
|
+
{
|
|
4424
|
+
type: "button",
|
|
4425
|
+
className: clsx_default("lib-xplat-editor__toolbar-btn", isActive(item, active) && "active"),
|
|
4426
|
+
title: TOOLBAR_TITLE[item],
|
|
4427
|
+
onMouseDown: (e) => {
|
|
4428
|
+
e.preventDefault();
|
|
4429
|
+
onAction(item);
|
|
4430
|
+
},
|
|
4431
|
+
children: TOOLBAR_LABEL[item]
|
|
4432
|
+
},
|
|
4433
|
+
item
|
|
4434
|
+
)) });
|
|
4435
|
+
};
|
|
4436
|
+
var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
|
|
4437
|
+
React21.useEffect(() => {
|
|
4438
|
+
const handleClickOutside = (e) => {
|
|
4439
|
+
const target = e.target;
|
|
4440
|
+
const menu = document.querySelector(".lib-xplat-editor__slash-menu");
|
|
4441
|
+
if (menu && !menu.contains(target)) onClose();
|
|
4442
|
+
};
|
|
4443
|
+
window.addEventListener("mousedown", handleClickOutside);
|
|
4444
|
+
return () => window.removeEventListener("mousedown", handleClickOutside);
|
|
4445
|
+
}, [onClose]);
|
|
4446
|
+
return /* @__PURE__ */ jsx324(
|
|
4447
|
+
"div",
|
|
4448
|
+
{
|
|
4449
|
+
className: "lib-xplat-editor__slash-menu",
|
|
4450
|
+
style: { top: position.top, left: position.left },
|
|
4451
|
+
children: items.map((item, i) => /* @__PURE__ */ jsxs208(
|
|
4452
|
+
"button",
|
|
4453
|
+
{
|
|
4454
|
+
type: "button",
|
|
4455
|
+
className: clsx_default("lib-xplat-editor__slash-item", i === activeIndex && "active"),
|
|
4456
|
+
onMouseDown: (e) => {
|
|
4457
|
+
e.preventDefault();
|
|
4458
|
+
onSelect(item);
|
|
4459
|
+
},
|
|
4460
|
+
children: [
|
|
4461
|
+
/* @__PURE__ */ jsx324("span", { className: "label", children: item.label }),
|
|
4462
|
+
item.hint && /* @__PURE__ */ jsx324("span", { className: "hint", children: item.hint })
|
|
4463
|
+
]
|
|
4464
|
+
},
|
|
4465
|
+
item.key
|
|
4466
|
+
))
|
|
4467
|
+
}
|
|
4468
|
+
);
|
|
4469
|
+
};
|
|
4470
|
+
var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
|
|
4471
|
+
const inputRef = React21.useRef(null);
|
|
4472
|
+
React21.useEffect(() => {
|
|
4473
|
+
inputRef.current?.focus();
|
|
4474
|
+
}, []);
|
|
4475
|
+
return /* @__PURE__ */ jsxs208(
|
|
4476
|
+
"div",
|
|
4477
|
+
{
|
|
4478
|
+
className: "lib-xplat-editor__link-popover",
|
|
4479
|
+
style: { top: position.top, left: position.left },
|
|
4480
|
+
children: [
|
|
4481
|
+
/* @__PURE__ */ jsx324(
|
|
4482
|
+
"input",
|
|
4483
|
+
{
|
|
4484
|
+
ref: inputRef,
|
|
4485
|
+
type: "url",
|
|
4486
|
+
placeholder: "https://",
|
|
4487
|
+
value,
|
|
4488
|
+
onChange: (e) => onChange(e.target.value),
|
|
4489
|
+
onKeyDown: (e) => {
|
|
4490
|
+
if (e.key === "Enter") {
|
|
4491
|
+
e.preventDefault();
|
|
4492
|
+
onConfirm();
|
|
4493
|
+
}
|
|
4494
|
+
if (e.key === "Escape") {
|
|
4495
|
+
e.preventDefault();
|
|
4496
|
+
onClose();
|
|
4497
|
+
}
|
|
4498
|
+
}
|
|
4499
|
+
}
|
|
4500
|
+
),
|
|
4501
|
+
/* @__PURE__ */ jsx324("button", { type: "button", onMouseDown: (e) => {
|
|
4502
|
+
e.preventDefault();
|
|
4503
|
+
onConfirm();
|
|
4504
|
+
}, children: "\uC801\uC6A9" }),
|
|
4505
|
+
/* @__PURE__ */ jsx324("button", { type: "button", onMouseDown: (e) => {
|
|
4506
|
+
e.preventDefault();
|
|
4507
|
+
onClose();
|
|
4508
|
+
}, children: "\uCDE8\uC18C" })
|
|
4509
|
+
]
|
|
4510
|
+
}
|
|
4511
|
+
);
|
|
4512
|
+
};
|
|
4513
|
+
|
|
4514
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
4515
|
+
import { jsx as jsx325, jsxs as jsxs209 } from "react/jsx-runtime";
|
|
3809
4516
|
var EmptyState = (props) => {
|
|
3810
4517
|
const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
|
|
3811
|
-
return /* @__PURE__ */
|
|
3812
|
-
icon && /* @__PURE__ */
|
|
3813
|
-
!icon && /* @__PURE__ */
|
|
3814
|
-
/* @__PURE__ */
|
|
3815
|
-
description && /* @__PURE__ */
|
|
3816
|
-
action && /* @__PURE__ */
|
|
4518
|
+
return /* @__PURE__ */ jsxs209("div", { className: "lib-xplat-empty-state", children: [
|
|
4519
|
+
icon && /* @__PURE__ */ jsx325("div", { className: "empty-icon", children: icon }),
|
|
4520
|
+
!icon && /* @__PURE__ */ jsx325("div", { className: "empty-icon", children: /* @__PURE__ */ jsx325("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx325("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
|
|
4521
|
+
/* @__PURE__ */ jsx325("p", { className: "empty-title", children: title }),
|
|
4522
|
+
description && /* @__PURE__ */ jsx325("p", { className: "empty-description", children: description }),
|
|
4523
|
+
action && /* @__PURE__ */ jsx325("div", { className: "empty-action", children: action })
|
|
3817
4524
|
] });
|
|
3818
4525
|
};
|
|
3819
4526
|
EmptyState.displayName = "EmptyState";
|
|
3820
4527
|
var EmptyState_default = EmptyState;
|
|
3821
4528
|
|
|
3822
4529
|
// src/components/FileUpload/FileUpload.tsx
|
|
3823
|
-
import
|
|
3824
|
-
import { jsx as
|
|
4530
|
+
import React22 from "react";
|
|
4531
|
+
import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
|
|
3825
4532
|
var FileUpload = (props) => {
|
|
3826
4533
|
const {
|
|
3827
4534
|
accept,
|
|
@@ -3831,8 +4538,8 @@ var FileUpload = (props) => {
|
|
|
3831
4538
|
label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
|
|
3832
4539
|
description
|
|
3833
4540
|
} = props;
|
|
3834
|
-
const [isDragOver, setIsDragOver] =
|
|
3835
|
-
const inputRef =
|
|
4541
|
+
const [isDragOver, setIsDragOver] = React22.useState(false);
|
|
4542
|
+
const inputRef = React22.useRef(null);
|
|
3836
4543
|
const handleFiles = (fileList) => {
|
|
3837
4544
|
let files = Array.from(fileList);
|
|
3838
4545
|
if (maxSize) {
|
|
@@ -3862,7 +4569,7 @@ var FileUpload = (props) => {
|
|
|
3862
4569
|
handleFiles(e.target.files);
|
|
3863
4570
|
}
|
|
3864
4571
|
};
|
|
3865
|
-
return /* @__PURE__ */
|
|
4572
|
+
return /* @__PURE__ */ jsxs210(
|
|
3866
4573
|
"div",
|
|
3867
4574
|
{
|
|
3868
4575
|
className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }),
|
|
@@ -3871,7 +4578,7 @@ var FileUpload = (props) => {
|
|
|
3871
4578
|
onDragLeave: handleDragLeave,
|
|
3872
4579
|
onClick: () => inputRef.current?.click(),
|
|
3873
4580
|
children: [
|
|
3874
|
-
/* @__PURE__ */
|
|
4581
|
+
/* @__PURE__ */ jsx326(
|
|
3875
4582
|
"input",
|
|
3876
4583
|
{
|
|
3877
4584
|
ref: inputRef,
|
|
@@ -3881,9 +4588,9 @@ var FileUpload = (props) => {
|
|
|
3881
4588
|
onChange: handleChange
|
|
3882
4589
|
}
|
|
3883
4590
|
),
|
|
3884
|
-
/* @__PURE__ */
|
|
3885
|
-
/* @__PURE__ */
|
|
3886
|
-
description && /* @__PURE__ */
|
|
4591
|
+
/* @__PURE__ */ jsx326("div", { className: "upload-icon", children: /* @__PURE__ */ jsx326(UploadIcon_default, {}) }),
|
|
4592
|
+
/* @__PURE__ */ jsx326("p", { className: "upload-label", children: label }),
|
|
4593
|
+
description && /* @__PURE__ */ jsx326("p", { className: "upload-description", children: description })
|
|
3887
4594
|
]
|
|
3888
4595
|
}
|
|
3889
4596
|
);
|
|
@@ -3892,10 +4599,10 @@ FileUpload.displayName = "FileUpload";
|
|
|
3892
4599
|
var FileUpload_default = FileUpload;
|
|
3893
4600
|
|
|
3894
4601
|
// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
|
|
3895
|
-
import
|
|
4602
|
+
import React24 from "react";
|
|
3896
4603
|
|
|
3897
4604
|
// src/components/HtmlTypeWriter/utils.ts
|
|
3898
|
-
import
|
|
4605
|
+
import React23 from "react";
|
|
3899
4606
|
var voidTags = /* @__PURE__ */ new Set([
|
|
3900
4607
|
"br",
|
|
3901
4608
|
"img",
|
|
@@ -3963,41 +4670,41 @@ var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
|
|
|
3963
4670
|
props[attr.name] = attr.value;
|
|
3964
4671
|
});
|
|
3965
4672
|
if (voidTags.has(tag)) {
|
|
3966
|
-
return
|
|
4673
|
+
return React23.createElement(tag, props);
|
|
3967
4674
|
}
|
|
3968
4675
|
const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
|
|
3969
|
-
return
|
|
4676
|
+
return React23.createElement(tag, props, ...children);
|
|
3970
4677
|
};
|
|
3971
4678
|
var htmlToReactProgressive = (root, typedLen, rangeMap) => {
|
|
3972
4679
|
const nodes = Array.from(root.childNodes).map((child, idx) => {
|
|
3973
4680
|
const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
|
|
3974
|
-
return node == null ? null :
|
|
4681
|
+
return node == null ? null : React23.createElement(React23.Fragment, { key: idx }, node);
|
|
3975
4682
|
}).filter(Boolean);
|
|
3976
4683
|
return nodes.length === 0 ? null : nodes;
|
|
3977
4684
|
};
|
|
3978
4685
|
|
|
3979
4686
|
// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
|
|
3980
|
-
import { jsx as
|
|
4687
|
+
import { jsx as jsx327 } from "react/jsx-runtime";
|
|
3981
4688
|
var HtmlTypeWriter = ({
|
|
3982
4689
|
html,
|
|
3983
4690
|
duration = 20,
|
|
3984
4691
|
onDone,
|
|
3985
4692
|
onChange
|
|
3986
4693
|
}) => {
|
|
3987
|
-
const [typedLen, setTypedLen] =
|
|
3988
|
-
const doneCalledRef =
|
|
3989
|
-
const { doc, rangeMap, totalLength } =
|
|
4694
|
+
const [typedLen, setTypedLen] = React24.useState(0);
|
|
4695
|
+
const doneCalledRef = React24.useRef(false);
|
|
4696
|
+
const { doc, rangeMap, totalLength } = React24.useMemo(() => {
|
|
3990
4697
|
if (typeof window === "undefined") return { doc: null, rangeMap: /* @__PURE__ */ new Map(), totalLength: 0 };
|
|
3991
4698
|
const decoded = decodeHtmlEntities(html);
|
|
3992
4699
|
const doc2 = new DOMParser().parseFromString(decoded, "text/html");
|
|
3993
4700
|
const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
|
|
3994
4701
|
return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
|
|
3995
4702
|
}, [html]);
|
|
3996
|
-
|
|
4703
|
+
React24.useEffect(() => {
|
|
3997
4704
|
setTypedLen(0);
|
|
3998
4705
|
doneCalledRef.current = false;
|
|
3999
4706
|
}, [html]);
|
|
4000
|
-
|
|
4707
|
+
React24.useEffect(() => {
|
|
4001
4708
|
if (!totalLength) return;
|
|
4002
4709
|
if (typedLen >= totalLength) return;
|
|
4003
4710
|
const timer = window.setInterval(() => {
|
|
@@ -4005,33 +4712,33 @@ var HtmlTypeWriter = ({
|
|
|
4005
4712
|
}, duration);
|
|
4006
4713
|
return () => window.clearInterval(timer);
|
|
4007
4714
|
}, [typedLen, totalLength, duration]);
|
|
4008
|
-
|
|
4715
|
+
React24.useEffect(() => {
|
|
4009
4716
|
if (typedLen > 0 && typedLen < totalLength) {
|
|
4010
4717
|
onChange?.();
|
|
4011
4718
|
}
|
|
4012
4719
|
}, [typedLen, totalLength, onChange]);
|
|
4013
|
-
|
|
4720
|
+
React24.useEffect(() => {
|
|
4014
4721
|
if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
|
|
4015
4722
|
doneCalledRef.current = true;
|
|
4016
4723
|
onDone?.();
|
|
4017
4724
|
}
|
|
4018
4725
|
}, [typedLen, totalLength, onDone]);
|
|
4019
|
-
const parsed =
|
|
4726
|
+
const parsed = React24.useMemo(
|
|
4020
4727
|
() => doc ? htmlToReactProgressive(doc.body, typedLen, rangeMap) : null,
|
|
4021
4728
|
[doc, typedLen, rangeMap]
|
|
4022
4729
|
);
|
|
4023
|
-
return /* @__PURE__ */
|
|
4730
|
+
return /* @__PURE__ */ jsx327("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
|
|
4024
4731
|
};
|
|
4025
4732
|
HtmlTypeWriter.displayName = "HtmlTypeWriter";
|
|
4026
4733
|
var HtmlTypeWriter_default = HtmlTypeWriter;
|
|
4027
4734
|
|
|
4028
4735
|
// src/components/ImageSelector/ImageSelector.tsx
|
|
4029
|
-
import
|
|
4030
|
-
import { jsx as
|
|
4736
|
+
import React25 from "react";
|
|
4737
|
+
import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
|
|
4031
4738
|
var ImageSelector = (props) => {
|
|
4032
4739
|
const { value, label, onChange } = props;
|
|
4033
|
-
const [previewUrl, setPreviewUrl] =
|
|
4034
|
-
|
|
4740
|
+
const [previewUrl, setPreviewUrl] = React25.useState();
|
|
4741
|
+
React25.useEffect(() => {
|
|
4035
4742
|
if (!value) {
|
|
4036
4743
|
setPreviewUrl(void 0);
|
|
4037
4744
|
return;
|
|
@@ -4040,7 +4747,7 @@ var ImageSelector = (props) => {
|
|
|
4040
4747
|
setPreviewUrl(url);
|
|
4041
4748
|
return () => URL.revokeObjectURL(url);
|
|
4042
4749
|
}, [value]);
|
|
4043
|
-
const inputRef =
|
|
4750
|
+
const inputRef = React25.useRef(null);
|
|
4044
4751
|
const handleFileChange = (e) => {
|
|
4045
4752
|
const selectedFile = e.target.files?.[0];
|
|
4046
4753
|
if (selectedFile) {
|
|
@@ -4053,8 +4760,8 @@ var ImageSelector = (props) => {
|
|
|
4053
4760
|
const handleOpenFileDialog = () => {
|
|
4054
4761
|
inputRef.current?.click();
|
|
4055
4762
|
};
|
|
4056
|
-
return /* @__PURE__ */
|
|
4057
|
-
/* @__PURE__ */
|
|
4763
|
+
return /* @__PURE__ */ jsxs211("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
|
|
4764
|
+
/* @__PURE__ */ jsx328(
|
|
4058
4765
|
"input",
|
|
4059
4766
|
{
|
|
4060
4767
|
type: "file",
|
|
@@ -4064,13 +4771,13 @@ var ImageSelector = (props) => {
|
|
|
4064
4771
|
ref: inputRef
|
|
4065
4772
|
}
|
|
4066
4773
|
),
|
|
4067
|
-
value && /* @__PURE__ */
|
|
4068
|
-
/* @__PURE__ */
|
|
4069
|
-
/* @__PURE__ */
|
|
4774
|
+
value && /* @__PURE__ */ jsxs211("div", { className: "action-bar", children: [
|
|
4775
|
+
/* @__PURE__ */ jsx328("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx328(UploadIcon_default, {}) }),
|
|
4776
|
+
/* @__PURE__ */ jsx328("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx328(DeleteIcon_default, {}) })
|
|
4070
4777
|
] }),
|
|
4071
|
-
/* @__PURE__ */
|
|
4072
|
-
/* @__PURE__ */
|
|
4073
|
-
/* @__PURE__ */
|
|
4778
|
+
/* @__PURE__ */ jsx328("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx328("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs211("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
|
|
4779
|
+
/* @__PURE__ */ jsx328("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx328(ImageIcon_default, {}) }),
|
|
4780
|
+
/* @__PURE__ */ jsx328("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
|
|
4074
4781
|
] }) })
|
|
4075
4782
|
] });
|
|
4076
4783
|
};
|
|
@@ -4078,7 +4785,7 @@ ImageSelector.displayName = "ImageSelector";
|
|
|
4078
4785
|
var ImageSelector_default = ImageSelector;
|
|
4079
4786
|
|
|
4080
4787
|
// src/components/Pagination/Pagination.tsx
|
|
4081
|
-
import { jsx as
|
|
4788
|
+
import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
|
|
4082
4789
|
var getPageRange = (current, totalPages, siblingCount) => {
|
|
4083
4790
|
const totalNumbers = siblingCount * 2 + 5;
|
|
4084
4791
|
if (totalPages <= totalNumbers) {
|
|
@@ -4121,19 +4828,19 @@ var Pagination = (props) => {
|
|
|
4121
4828
|
onChange?.(page);
|
|
4122
4829
|
}
|
|
4123
4830
|
};
|
|
4124
|
-
return /* @__PURE__ */
|
|
4125
|
-
/* @__PURE__ */
|
|
4831
|
+
return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
|
|
4832
|
+
/* @__PURE__ */ jsx329(
|
|
4126
4833
|
"button",
|
|
4127
4834
|
{
|
|
4128
4835
|
className: "page-btn prev",
|
|
4129
4836
|
disabled: current <= 1,
|
|
4130
4837
|
onClick: () => handleClick(current - 1),
|
|
4131
4838
|
"aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
|
|
4132
|
-
children: /* @__PURE__ */
|
|
4839
|
+
children: /* @__PURE__ */ jsx329(ChevronLeftIcon_default, {})
|
|
4133
4840
|
}
|
|
4134
4841
|
),
|
|
4135
4842
|
pages.map(
|
|
4136
|
-
(page, i) => page === "..." ? /* @__PURE__ */
|
|
4843
|
+
(page, i) => page === "..." ? /* @__PURE__ */ jsx329("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx329(
|
|
4137
4844
|
"button",
|
|
4138
4845
|
{
|
|
4139
4846
|
className: clsx_default("page-btn", { active: page === current }),
|
|
@@ -4144,14 +4851,14 @@ var Pagination = (props) => {
|
|
|
4144
4851
|
page
|
|
4145
4852
|
)
|
|
4146
4853
|
),
|
|
4147
|
-
/* @__PURE__ */
|
|
4854
|
+
/* @__PURE__ */ jsx329(
|
|
4148
4855
|
"button",
|
|
4149
4856
|
{
|
|
4150
4857
|
className: "page-btn next",
|
|
4151
4858
|
disabled: current >= totalPages,
|
|
4152
4859
|
onClick: () => handleClick(current + 1),
|
|
4153
4860
|
"aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
|
|
4154
|
-
children: /* @__PURE__ */
|
|
4861
|
+
children: /* @__PURE__ */ jsx329(ChevronRightIcon_default, {})
|
|
4155
4862
|
}
|
|
4156
4863
|
)
|
|
4157
4864
|
] });
|
|
@@ -4160,17 +4867,17 @@ Pagination.displayName = "Pagination";
|
|
|
4160
4867
|
var Pagination_default = Pagination;
|
|
4161
4868
|
|
|
4162
4869
|
// src/components/PopOver/PopOver.tsx
|
|
4163
|
-
import
|
|
4164
|
-
import { jsx as
|
|
4870
|
+
import React26 from "react";
|
|
4871
|
+
import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
|
|
4165
4872
|
var PopOver = (props) => {
|
|
4166
4873
|
const { children, isOpen, onClose, PopOverEl } = props;
|
|
4167
|
-
const popRef =
|
|
4168
|
-
const triggerRef =
|
|
4169
|
-
const [localOpen, setLocalOpen] =
|
|
4170
|
-
const [eventTrigger, setEventTrigger] =
|
|
4874
|
+
const popRef = React26.useRef(null);
|
|
4875
|
+
const triggerRef = React26.useRef(null);
|
|
4876
|
+
const [localOpen, setLocalOpen] = React26.useState(false);
|
|
4877
|
+
const [eventTrigger, setEventTrigger] = React26.useState(false);
|
|
4171
4878
|
useClickOutside_default([popRef, triggerRef], onClose, isOpen);
|
|
4172
4879
|
const position = useAutoPosition_default(triggerRef, popRef, localOpen);
|
|
4173
|
-
|
|
4880
|
+
React26.useEffect(() => {
|
|
4174
4881
|
if (isOpen) {
|
|
4175
4882
|
setLocalOpen(isOpen);
|
|
4176
4883
|
setTimeout(() => {
|
|
@@ -4183,7 +4890,7 @@ var PopOver = (props) => {
|
|
|
4183
4890
|
}, 200);
|
|
4184
4891
|
}
|
|
4185
4892
|
}, [isOpen]);
|
|
4186
|
-
return /* @__PURE__ */
|
|
4893
|
+
return /* @__PURE__ */ jsxs213(
|
|
4187
4894
|
"div",
|
|
4188
4895
|
{
|
|
4189
4896
|
className: "lib-xplat-pop-over",
|
|
@@ -4193,7 +4900,7 @@ var PopOver = (props) => {
|
|
|
4193
4900
|
},
|
|
4194
4901
|
children: [
|
|
4195
4902
|
children,
|
|
4196
|
-
localOpen && /* @__PURE__ */
|
|
4903
|
+
localOpen && /* @__PURE__ */ jsx330(Portal_default, { children: /* @__PURE__ */ jsx330(
|
|
4197
4904
|
"div",
|
|
4198
4905
|
{
|
|
4199
4906
|
className: clsx_default(
|
|
@@ -4216,7 +4923,7 @@ PopOver.displayName = "PopOver";
|
|
|
4216
4923
|
var PopOver_default = PopOver;
|
|
4217
4924
|
|
|
4218
4925
|
// src/components/Progress/Progress.tsx
|
|
4219
|
-
import { jsx as
|
|
4926
|
+
import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
|
|
4220
4927
|
var Progress = (props) => {
|
|
4221
4928
|
const {
|
|
4222
4929
|
value,
|
|
@@ -4226,8 +4933,8 @@ var Progress = (props) => {
|
|
|
4226
4933
|
showLabel = false
|
|
4227
4934
|
} = props;
|
|
4228
4935
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
4229
|
-
return /* @__PURE__ */
|
|
4230
|
-
/* @__PURE__ */
|
|
4936
|
+
return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
|
|
4937
|
+
/* @__PURE__ */ jsx331(
|
|
4231
4938
|
"div",
|
|
4232
4939
|
{
|
|
4233
4940
|
className: "track",
|
|
@@ -4235,7 +4942,7 @@ var Progress = (props) => {
|
|
|
4235
4942
|
"aria-valuenow": value,
|
|
4236
4943
|
"aria-valuemin": 0,
|
|
4237
4944
|
"aria-valuemax": max,
|
|
4238
|
-
children: /* @__PURE__ */
|
|
4945
|
+
children: /* @__PURE__ */ jsx331(
|
|
4239
4946
|
"div",
|
|
4240
4947
|
{
|
|
4241
4948
|
className: "bar",
|
|
@@ -4244,7 +4951,7 @@ var Progress = (props) => {
|
|
|
4244
4951
|
)
|
|
4245
4952
|
}
|
|
4246
4953
|
),
|
|
4247
|
-
showLabel && /* @__PURE__ */
|
|
4954
|
+
showLabel && /* @__PURE__ */ jsxs214("span", { className: "label", children: [
|
|
4248
4955
|
Math.round(percentage),
|
|
4249
4956
|
"%"
|
|
4250
4957
|
] })
|
|
@@ -4254,17 +4961,17 @@ Progress.displayName = "Progress";
|
|
|
4254
4961
|
var Progress_default = Progress;
|
|
4255
4962
|
|
|
4256
4963
|
// src/components/Radio/RadioGroupContext.tsx
|
|
4257
|
-
import
|
|
4258
|
-
var RadioGroupContext =
|
|
4964
|
+
import React27 from "react";
|
|
4965
|
+
var RadioGroupContext = React27.createContext(
|
|
4259
4966
|
null
|
|
4260
4967
|
);
|
|
4261
4968
|
var useRadioGroupContext = () => {
|
|
4262
|
-
return
|
|
4969
|
+
return React27.useContext(RadioGroupContext);
|
|
4263
4970
|
};
|
|
4264
4971
|
var RadioGroupContext_default = RadioGroupContext;
|
|
4265
4972
|
|
|
4266
4973
|
// src/components/Radio/Radio.tsx
|
|
4267
|
-
import { jsx as
|
|
4974
|
+
import { jsx as jsx332, jsxs as jsxs215 } from "react/jsx-runtime";
|
|
4268
4975
|
var Radio = (props) => {
|
|
4269
4976
|
const {
|
|
4270
4977
|
label,
|
|
@@ -4282,7 +4989,7 @@ var Radio = (props) => {
|
|
|
4282
4989
|
value,
|
|
4283
4990
|
onChange: rest.onChange
|
|
4284
4991
|
};
|
|
4285
|
-
return /* @__PURE__ */
|
|
4992
|
+
return /* @__PURE__ */ jsxs215(
|
|
4286
4993
|
"label",
|
|
4287
4994
|
{
|
|
4288
4995
|
className: clsx_default(
|
|
@@ -4292,18 +4999,18 @@ var Radio = (props) => {
|
|
|
4292
4999
|
localChecked ? "checked" : void 0
|
|
4293
5000
|
),
|
|
4294
5001
|
children: [
|
|
4295
|
-
/* @__PURE__ */
|
|
4296
|
-
/* @__PURE__ */
|
|
5002
|
+
/* @__PURE__ */ jsx332("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
|
|
5003
|
+
/* @__PURE__ */ jsx332(
|
|
4297
5004
|
"div",
|
|
4298
5005
|
{
|
|
4299
5006
|
className: clsx_default(
|
|
4300
5007
|
"circle",
|
|
4301
5008
|
localChecked ? "checked" : void 0
|
|
4302
5009
|
),
|
|
4303
|
-
children: localChecked && /* @__PURE__ */
|
|
5010
|
+
children: localChecked && /* @__PURE__ */ jsx332("div", { className: "inner-circle" })
|
|
4304
5011
|
}
|
|
4305
5012
|
),
|
|
4306
|
-
label && /* @__PURE__ */
|
|
5013
|
+
label && /* @__PURE__ */ jsx332("span", { children: label })
|
|
4307
5014
|
]
|
|
4308
5015
|
}
|
|
4309
5016
|
);
|
|
@@ -4312,28 +5019,28 @@ Radio.displayName = "Radio";
|
|
|
4312
5019
|
var Radio_default = Radio;
|
|
4313
5020
|
|
|
4314
5021
|
// src/components/Radio/RadioGroup.tsx
|
|
4315
|
-
import { Fragment as Fragment4, jsx as
|
|
5022
|
+
import { Fragment as Fragment4, jsx as jsx333 } from "react/jsx-runtime";
|
|
4316
5023
|
var RadioGroup = (props) => {
|
|
4317
5024
|
const { children, ...rest } = props;
|
|
4318
|
-
return /* @__PURE__ */
|
|
5025
|
+
return /* @__PURE__ */ jsx333(Fragment4, { children: /* @__PURE__ */ jsx333(RadioGroupContext_default.Provider, { value: rest, children }) });
|
|
4319
5026
|
};
|
|
4320
5027
|
RadioGroup.displayName = "RadioGroup";
|
|
4321
5028
|
var RadioGroup_default = RadioGroup;
|
|
4322
5029
|
|
|
4323
5030
|
// src/components/Select/Select.tsx
|
|
4324
|
-
import
|
|
5031
|
+
import React30 from "react";
|
|
4325
5032
|
|
|
4326
5033
|
// src/components/Select/context.ts
|
|
4327
|
-
import
|
|
4328
|
-
var SelectContext =
|
|
5034
|
+
import React28 from "react";
|
|
5035
|
+
var SelectContext = React28.createContext(null);
|
|
4329
5036
|
var context_default = SelectContext;
|
|
4330
5037
|
|
|
4331
5038
|
// src/components/Select/SelectItem.tsx
|
|
4332
|
-
import
|
|
4333
|
-
import { jsx as
|
|
5039
|
+
import React29 from "react";
|
|
5040
|
+
import { jsx as jsx334 } from "react/jsx-runtime";
|
|
4334
5041
|
var SelectItem = (props) => {
|
|
4335
5042
|
const { children, value, onClick, disabled = false } = props;
|
|
4336
|
-
const ctx =
|
|
5043
|
+
const ctx = React29.useContext(context_default);
|
|
4337
5044
|
const handleClick = (e) => {
|
|
4338
5045
|
e.preventDefault();
|
|
4339
5046
|
e.stopPropagation();
|
|
@@ -4342,7 +5049,7 @@ var SelectItem = (props) => {
|
|
|
4342
5049
|
ctx?.close();
|
|
4343
5050
|
onClick?.();
|
|
4344
5051
|
};
|
|
4345
|
-
return /* @__PURE__ */
|
|
5052
|
+
return /* @__PURE__ */ jsx334(
|
|
4346
5053
|
"div",
|
|
4347
5054
|
{
|
|
4348
5055
|
className: clsx_default("select-item", disabled && "disabled"),
|
|
@@ -4363,7 +5070,7 @@ SelectItem.displayName = "Select.Item";
|
|
|
4363
5070
|
var SelectItem_default = SelectItem;
|
|
4364
5071
|
|
|
4365
5072
|
// src/components/Select/Select.tsx
|
|
4366
|
-
import { jsx as
|
|
5073
|
+
import { jsx as jsx335, jsxs as jsxs216 } from "react/jsx-runtime";
|
|
4367
5074
|
var ANIMATION_DURATION_MS3 = 200;
|
|
4368
5075
|
var SelectRoot = (props) => {
|
|
4369
5076
|
const {
|
|
@@ -4375,26 +5082,26 @@ var SelectRoot = (props) => {
|
|
|
4375
5082
|
error = false,
|
|
4376
5083
|
size = "md"
|
|
4377
5084
|
} = props;
|
|
4378
|
-
const itemChildren =
|
|
4379
|
-
(child) =>
|
|
5085
|
+
const itemChildren = React30.Children.toArray(children).filter(
|
|
5086
|
+
(child) => React30.isValidElement(child) && child.type === SelectItem_default
|
|
4380
5087
|
);
|
|
4381
5088
|
const isControlled = valueProp !== void 0;
|
|
4382
|
-
const [isOpen, setOpen] =
|
|
4383
|
-
const [uncontrolledLabel, setUncontrolledLabel] =
|
|
4384
|
-
const controlledLabel =
|
|
5089
|
+
const [isOpen, setOpen] = React30.useState(false);
|
|
5090
|
+
const [uncontrolledLabel, setUncontrolledLabel] = React30.useState(null);
|
|
5091
|
+
const controlledLabel = React30.useMemo(() => {
|
|
4385
5092
|
if (!isControlled) return null;
|
|
4386
5093
|
const match = itemChildren.find((child) => child.props.value === valueProp);
|
|
4387
5094
|
return match ? match.props.children : null;
|
|
4388
5095
|
}, [isControlled, valueProp, itemChildren]);
|
|
4389
5096
|
const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
|
|
4390
|
-
const triggerRef =
|
|
4391
|
-
const contentRef =
|
|
4392
|
-
const [mounted, setMounted] =
|
|
4393
|
-
const [visible, setVisible] =
|
|
4394
|
-
|
|
5097
|
+
const triggerRef = React30.useRef(null);
|
|
5098
|
+
const contentRef = React30.useRef(null);
|
|
5099
|
+
const [mounted, setMounted] = React30.useState(false);
|
|
5100
|
+
const [visible, setVisible] = React30.useState(false);
|
|
5101
|
+
React30.useEffect(() => {
|
|
4395
5102
|
if (disabled && isOpen) setOpen(false);
|
|
4396
5103
|
}, [disabled, isOpen]);
|
|
4397
|
-
|
|
5104
|
+
React30.useEffect(() => {
|
|
4398
5105
|
if (isOpen) {
|
|
4399
5106
|
setMounted(true);
|
|
4400
5107
|
const t2 = setTimeout(() => setVisible(true), 1);
|
|
@@ -4404,12 +5111,12 @@ var SelectRoot = (props) => {
|
|
|
4404
5111
|
const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
|
|
4405
5112
|
return () => clearTimeout(t);
|
|
4406
5113
|
}, [isOpen]);
|
|
4407
|
-
const open =
|
|
4408
|
-
const close =
|
|
4409
|
-
const toggle =
|
|
5114
|
+
const open = React30.useCallback(() => setOpen(true), []);
|
|
5115
|
+
const close = React30.useCallback(() => setOpen(false), []);
|
|
5116
|
+
const toggle = React30.useCallback(() => setOpen((prev) => !prev), []);
|
|
4410
5117
|
useClickOutside_default([contentRef, triggerRef], close, isOpen);
|
|
4411
5118
|
const position = useAutoPosition_default(triggerRef, contentRef, mounted);
|
|
4412
|
-
const setSelected =
|
|
5119
|
+
const setSelected = React30.useCallback(
|
|
4413
5120
|
(label, itemValue) => {
|
|
4414
5121
|
if (!isControlled) {
|
|
4415
5122
|
setUncontrolledLabel(label);
|
|
@@ -4418,7 +5125,7 @@ var SelectRoot = (props) => {
|
|
|
4418
5125
|
},
|
|
4419
5126
|
[isControlled, onChange]
|
|
4420
5127
|
);
|
|
4421
|
-
const ctxValue =
|
|
5128
|
+
const ctxValue = React30.useMemo(
|
|
4422
5129
|
() => ({
|
|
4423
5130
|
isOpen,
|
|
4424
5131
|
mounted,
|
|
@@ -4439,7 +5146,7 @@ var SelectRoot = (props) => {
|
|
|
4439
5146
|
if (disabled) return;
|
|
4440
5147
|
toggle();
|
|
4441
5148
|
};
|
|
4442
|
-
return /* @__PURE__ */
|
|
5149
|
+
return /* @__PURE__ */ jsx335(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
|
|
4443
5150
|
"div",
|
|
4444
5151
|
{
|
|
4445
5152
|
className: clsx_default(
|
|
@@ -4450,7 +5157,7 @@ var SelectRoot = (props) => {
|
|
|
4450
5157
|
mounted && "is-open"
|
|
4451
5158
|
),
|
|
4452
5159
|
children: [
|
|
4453
|
-
/* @__PURE__ */
|
|
5160
|
+
/* @__PURE__ */ jsxs216(
|
|
4454
5161
|
"div",
|
|
4455
5162
|
{
|
|
4456
5163
|
ref: triggerRef,
|
|
@@ -4474,7 +5181,7 @@ var SelectRoot = (props) => {
|
|
|
4474
5181
|
}
|
|
4475
5182
|
},
|
|
4476
5183
|
children: [
|
|
4477
|
-
/* @__PURE__ */
|
|
5184
|
+
/* @__PURE__ */ jsx335(
|
|
4478
5185
|
"span",
|
|
4479
5186
|
{
|
|
4480
5187
|
className: clsx_default(
|
|
@@ -4484,25 +5191,25 @@ var SelectRoot = (props) => {
|
|
|
4484
5191
|
children: selectedLabel ?? placeholder
|
|
4485
5192
|
}
|
|
4486
5193
|
),
|
|
4487
|
-
/* @__PURE__ */
|
|
5194
|
+
/* @__PURE__ */ jsx335(
|
|
4488
5195
|
"span",
|
|
4489
5196
|
{
|
|
4490
5197
|
className: clsx_default("select-trigger-icon", isOpen && "open"),
|
|
4491
5198
|
"aria-hidden": true,
|
|
4492
|
-
children: /* @__PURE__ */
|
|
5199
|
+
children: /* @__PURE__ */ jsx335(ChevronDownIcon_default, {})
|
|
4493
5200
|
}
|
|
4494
5201
|
)
|
|
4495
5202
|
]
|
|
4496
5203
|
}
|
|
4497
5204
|
),
|
|
4498
|
-
mounted && /* @__PURE__ */
|
|
5205
|
+
mounted && /* @__PURE__ */ jsx335(Portal_default, { children: /* @__PURE__ */ jsx335(
|
|
4499
5206
|
"div",
|
|
4500
5207
|
{
|
|
4501
5208
|
className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
|
|
4502
5209
|
ref: contentRef,
|
|
4503
5210
|
style: { ...position.position, width: triggerRef.current?.offsetWidth },
|
|
4504
5211
|
role: "listbox",
|
|
4505
|
-
children: /* @__PURE__ */
|
|
5212
|
+
children: /* @__PURE__ */ jsx335(context_default.Provider, { value: ctxValue, children: itemChildren })
|
|
4506
5213
|
}
|
|
4507
5214
|
) })
|
|
4508
5215
|
]
|
|
@@ -4516,7 +5223,7 @@ var Select = Object.assign(SelectRoot, {
|
|
|
4516
5223
|
var Select_default = Select;
|
|
4517
5224
|
|
|
4518
5225
|
// src/components/Skeleton/Skeleton.tsx
|
|
4519
|
-
import { jsx as
|
|
5226
|
+
import { jsx as jsx336 } from "react/jsx-runtime";
|
|
4520
5227
|
var SIZE_MAP = {
|
|
4521
5228
|
xs: "var(--spacing-size-1)",
|
|
4522
5229
|
sm: "var(--spacing-size-2)",
|
|
@@ -4532,7 +5239,7 @@ var Skeleton = (props) => {
|
|
|
4532
5239
|
...width != null && { width: SIZE_MAP[width] },
|
|
4533
5240
|
...height != null && { height: SIZE_MAP[height] }
|
|
4534
5241
|
};
|
|
4535
|
-
return /* @__PURE__ */
|
|
5242
|
+
return /* @__PURE__ */ jsx336(
|
|
4536
5243
|
"div",
|
|
4537
5244
|
{
|
|
4538
5245
|
className: clsx_default("lib-xplat-skeleton", variant),
|
|
@@ -4545,20 +5252,20 @@ Skeleton.displayName = "Skeleton";
|
|
|
4545
5252
|
var Skeleton_default = Skeleton;
|
|
4546
5253
|
|
|
4547
5254
|
// src/components/Spinner/Spinner.tsx
|
|
4548
|
-
import { jsx as
|
|
5255
|
+
import { jsx as jsx337, jsxs as jsxs217 } from "react/jsx-runtime";
|
|
4549
5256
|
var Spinner = (props) => {
|
|
4550
5257
|
const {
|
|
4551
5258
|
size = "md",
|
|
4552
5259
|
type = "brand"
|
|
4553
5260
|
} = props;
|
|
4554
|
-
return /* @__PURE__ */
|
|
5261
|
+
return /* @__PURE__ */ jsx337(
|
|
4555
5262
|
"div",
|
|
4556
5263
|
{
|
|
4557
5264
|
className: clsx_default("lib-xplat-spinner", size, type),
|
|
4558
5265
|
role: "status",
|
|
4559
5266
|
"aria-label": "\uB85C\uB529 \uC911",
|
|
4560
|
-
children: /* @__PURE__ */
|
|
4561
|
-
/* @__PURE__ */
|
|
5267
|
+
children: /* @__PURE__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
5268
|
+
/* @__PURE__ */ jsx337(
|
|
4562
5269
|
"circle",
|
|
4563
5270
|
{
|
|
4564
5271
|
className: "track",
|
|
@@ -4568,7 +5275,7 @@ var Spinner = (props) => {
|
|
|
4568
5275
|
strokeWidth: "3"
|
|
4569
5276
|
}
|
|
4570
5277
|
),
|
|
4571
|
-
/* @__PURE__ */
|
|
5278
|
+
/* @__PURE__ */ jsx337(
|
|
4572
5279
|
"circle",
|
|
4573
5280
|
{
|
|
4574
5281
|
className: "indicator",
|
|
@@ -4587,20 +5294,20 @@ Spinner.displayName = "Spinner";
|
|
|
4587
5294
|
var Spinner_default = Spinner;
|
|
4588
5295
|
|
|
4589
5296
|
// src/components/Steps/Steps.tsx
|
|
4590
|
-
import { jsx as
|
|
5297
|
+
import { jsx as jsx338, jsxs as jsxs218 } from "react/jsx-runtime";
|
|
4591
5298
|
var Steps = (props) => {
|
|
4592
5299
|
const {
|
|
4593
5300
|
items,
|
|
4594
5301
|
current,
|
|
4595
5302
|
type = "brand"
|
|
4596
5303
|
} = props;
|
|
4597
|
-
return /* @__PURE__ */
|
|
5304
|
+
return /* @__PURE__ */ jsx338("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
|
|
4598
5305
|
const status = index < current ? "completed" : index === current ? "active" : "pending";
|
|
4599
|
-
return /* @__PURE__ */
|
|
4600
|
-
/* @__PURE__ */
|
|
4601
|
-
/* @__PURE__ */
|
|
4602
|
-
/* @__PURE__ */
|
|
4603
|
-
item.description && /* @__PURE__ */
|
|
5306
|
+
return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
|
|
5307
|
+
/* @__PURE__ */ jsx338("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx338(CheckIcon_default, {}) : /* @__PURE__ */ jsx338("span", { children: index + 1 }) }),
|
|
5308
|
+
/* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
|
|
5309
|
+
/* @__PURE__ */ jsx338("span", { className: "step-title", children: item.title }),
|
|
5310
|
+
item.description && /* @__PURE__ */ jsx338("span", { className: "step-description", children: item.description })
|
|
4604
5311
|
] })
|
|
4605
5312
|
] }, index);
|
|
4606
5313
|
}) });
|
|
@@ -4609,8 +5316,8 @@ Steps.displayName = "Steps";
|
|
|
4609
5316
|
var Steps_default = Steps;
|
|
4610
5317
|
|
|
4611
5318
|
// src/components/Swiper/Swiper.tsx
|
|
4612
|
-
import
|
|
4613
|
-
import { jsx as
|
|
5319
|
+
import React31 from "react";
|
|
5320
|
+
import { jsx as jsx339, jsxs as jsxs219 } from "react/jsx-runtime";
|
|
4614
5321
|
var Swiper = (props) => {
|
|
4615
5322
|
const {
|
|
4616
5323
|
auto = false,
|
|
@@ -4634,25 +5341,25 @@ var Swiper = (props) => {
|
|
|
4634
5341
|
const maxIndex = Math.max(0, totalSlides - viewItemCount);
|
|
4635
5342
|
const useLoop = loop && canSlide;
|
|
4636
5343
|
const cloneCount = useLoop ? totalSlides : 0;
|
|
4637
|
-
const extendedItems =
|
|
5344
|
+
const extendedItems = React31.useMemo(() => {
|
|
4638
5345
|
if (!useLoop) return items;
|
|
4639
5346
|
return [...items, ...items, ...items];
|
|
4640
5347
|
}, [items, useLoop]);
|
|
4641
5348
|
const initialIdx = Math.max(0, Math.min(indexProp ?? 0, maxIndex));
|
|
4642
|
-
const [innerIndex, setInnerIndex] =
|
|
5349
|
+
const [innerIndex, setInnerIndex] = React31.useState(
|
|
4643
5350
|
useLoop ? cloneCount + initialIdx : initialIdx
|
|
4644
5351
|
);
|
|
4645
|
-
const [isDragging, setIsDragging] =
|
|
4646
|
-
const [dragOffset, setDragOffset] =
|
|
4647
|
-
const [animated, setAnimated] =
|
|
4648
|
-
const [containerWidth, setContainerWidth] =
|
|
4649
|
-
const containerRef =
|
|
4650
|
-
const startXRef =
|
|
4651
|
-
const startTimeRef =
|
|
4652
|
-
const autoplayTimerRef =
|
|
4653
|
-
const resumeTimeoutRef =
|
|
4654
|
-
const [paused, setPaused] =
|
|
4655
|
-
|
|
5352
|
+
const [isDragging, setIsDragging] = React31.useState(false);
|
|
5353
|
+
const [dragOffset, setDragOffset] = React31.useState(0);
|
|
5354
|
+
const [animated, setAnimated] = React31.useState(true);
|
|
5355
|
+
const [containerWidth, setContainerWidth] = React31.useState(0);
|
|
5356
|
+
const containerRef = React31.useRef(null);
|
|
5357
|
+
const startXRef = React31.useRef(0);
|
|
5358
|
+
const startTimeRef = React31.useRef(0);
|
|
5359
|
+
const autoplayTimerRef = React31.useRef(null);
|
|
5360
|
+
const resumeTimeoutRef = React31.useRef(null);
|
|
5361
|
+
const [paused, setPaused] = React31.useState(false);
|
|
5362
|
+
React31.useEffect(() => {
|
|
4656
5363
|
const el = containerRef.current;
|
|
4657
5364
|
if (!el) return;
|
|
4658
5365
|
const ro = new ResizeObserver((entries) => {
|
|
@@ -4671,7 +5378,7 @@ var Swiper = (props) => {
|
|
|
4671
5378
|
return ((inner - cloneCount) % totalSlides + totalSlides) % totalSlides;
|
|
4672
5379
|
};
|
|
4673
5380
|
const realIndex = getRealIndex(innerIndex);
|
|
4674
|
-
const moveToInner =
|
|
5381
|
+
const moveToInner = React31.useCallback(
|
|
4675
5382
|
(idx, withAnim = true) => {
|
|
4676
5383
|
if (!useLoop) {
|
|
4677
5384
|
setAnimated(withAnim);
|
|
@@ -4699,7 +5406,7 @@ var Swiper = (props) => {
|
|
|
4699
5406
|
},
|
|
4700
5407
|
[useLoop, cloneCount, totalSlides]
|
|
4701
5408
|
);
|
|
4702
|
-
const handleTransitionEnd =
|
|
5409
|
+
const handleTransitionEnd = React31.useCallback(() => {
|
|
4703
5410
|
if (!useLoop) return;
|
|
4704
5411
|
const real = getRealIndex(innerIndex);
|
|
4705
5412
|
const canonical = cloneCount + real;
|
|
@@ -4709,7 +5416,7 @@ var Swiper = (props) => {
|
|
|
4709
5416
|
}
|
|
4710
5417
|
onChange?.(Math.min(real, maxIndex));
|
|
4711
5418
|
}, [useLoop, innerIndex, cloneCount, totalSlides, maxIndex, onChange]);
|
|
4712
|
-
const slideTo =
|
|
5419
|
+
const slideTo = React31.useCallback(
|
|
4713
5420
|
(logicalIndex) => {
|
|
4714
5421
|
if (!canSlide) return;
|
|
4715
5422
|
const clamped = useLoop ? logicalIndex : Math.max(0, Math.min(logicalIndex, maxIndex));
|
|
@@ -4719,7 +5426,7 @@ var Swiper = (props) => {
|
|
|
4719
5426
|
},
|
|
4720
5427
|
[canSlide, useLoop, cloneCount, maxIndex, onChange, moveToInner]
|
|
4721
5428
|
);
|
|
4722
|
-
const slideNext =
|
|
5429
|
+
const slideNext = React31.useCallback(() => {
|
|
4723
5430
|
if (!canSlide) return;
|
|
4724
5431
|
const nextInner = innerIndex + slideBy;
|
|
4725
5432
|
if (useLoop) {
|
|
@@ -4728,7 +5435,7 @@ var Swiper = (props) => {
|
|
|
4728
5435
|
moveToInner(Math.min(nextInner, maxIndex), true);
|
|
4729
5436
|
}
|
|
4730
5437
|
}, [canSlide, useLoop, innerIndex, slideBy, maxIndex, moveToInner]);
|
|
4731
|
-
const slidePrev =
|
|
5438
|
+
const slidePrev = React31.useCallback(() => {
|
|
4732
5439
|
if (!canSlide) return;
|
|
4733
5440
|
const prevInner = innerIndex - slideBy;
|
|
4734
5441
|
if (useLoop) {
|
|
@@ -4737,7 +5444,7 @@ var Swiper = (props) => {
|
|
|
4737
5444
|
moveToInner(Math.max(prevInner, 0), true);
|
|
4738
5445
|
}
|
|
4739
5446
|
}, [canSlide, useLoop, innerIndex, slideBy, moveToInner]);
|
|
4740
|
-
|
|
5447
|
+
React31.useEffect(() => {
|
|
4741
5448
|
if (indexProp === void 0) return;
|
|
4742
5449
|
const clamped = Math.max(0, Math.min(indexProp, maxIndex));
|
|
4743
5450
|
const target = useLoop ? cloneCount + clamped : clamped;
|
|
@@ -4745,12 +5452,12 @@ var Swiper = (props) => {
|
|
|
4745
5452
|
moveToInner(target, true);
|
|
4746
5453
|
}
|
|
4747
5454
|
}, [indexProp]);
|
|
4748
|
-
|
|
5455
|
+
React31.useImperativeHandle(swiperRef, () => ({
|
|
4749
5456
|
slidePrev,
|
|
4750
5457
|
slideNext,
|
|
4751
5458
|
slideTo
|
|
4752
5459
|
}));
|
|
4753
|
-
|
|
5460
|
+
React31.useEffect(() => {
|
|
4754
5461
|
if (!auto || !canSlide || paused) return;
|
|
4755
5462
|
autoplayTimerRef.current = setInterval(slideNext, autoplayDelay);
|
|
4756
5463
|
return () => {
|
|
@@ -4776,7 +5483,7 @@ var Swiper = (props) => {
|
|
|
4776
5483
|
resumeTimeoutRef.current = null;
|
|
4777
5484
|
}, pauseOnInteraction);
|
|
4778
5485
|
};
|
|
4779
|
-
|
|
5486
|
+
React31.useEffect(() => {
|
|
4780
5487
|
return () => {
|
|
4781
5488
|
if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
|
|
4782
5489
|
};
|
|
@@ -4794,7 +5501,7 @@ var Swiper = (props) => {
|
|
|
4794
5501
|
startXRef.current = getClientX(e);
|
|
4795
5502
|
startTimeRef.current = Date.now();
|
|
4796
5503
|
};
|
|
4797
|
-
|
|
5504
|
+
React31.useEffect(() => {
|
|
4798
5505
|
if (!isDragging) return;
|
|
4799
5506
|
const handleMove = (e) => {
|
|
4800
5507
|
setDragOffset(getClientX(e) - startXRef.current);
|
|
@@ -4833,8 +5540,8 @@ var Swiper = (props) => {
|
|
|
4833
5540
|
}, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
|
|
4834
5541
|
const slideWidthPercent = 100 / viewItemCount;
|
|
4835
5542
|
const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
|
|
4836
|
-
const slideElements =
|
|
4837
|
-
() => extendedItems.map((item, idx) => /* @__PURE__ */
|
|
5543
|
+
const slideElements = React31.useMemo(
|
|
5544
|
+
() => extendedItems.map((item, idx) => /* @__PURE__ */ jsx339(
|
|
4838
5545
|
"div",
|
|
4839
5546
|
{
|
|
4840
5547
|
className: "lib-xplat-swiper__slide",
|
|
@@ -4853,14 +5560,14 @@ var Swiper = (props) => {
|
|
|
4853
5560
|
Math.floor(realIndex / slideBy),
|
|
4854
5561
|
totalSteps - 1
|
|
4855
5562
|
);
|
|
4856
|
-
return /* @__PURE__ */
|
|
4857
|
-
/* @__PURE__ */
|
|
5563
|
+
return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
|
|
5564
|
+
/* @__PURE__ */ jsx339(
|
|
4858
5565
|
"div",
|
|
4859
5566
|
{
|
|
4860
5567
|
className: "lib-xplat-swiper__viewport",
|
|
4861
5568
|
onMouseDown: handleDragStart,
|
|
4862
5569
|
onTouchStart: handleDragStart,
|
|
4863
|
-
children: /* @__PURE__ */
|
|
5570
|
+
children: /* @__PURE__ */ jsx339(
|
|
4864
5571
|
"div",
|
|
4865
5572
|
{
|
|
4866
5573
|
className: clsx_default(
|
|
@@ -4878,7 +5585,7 @@ var Swiper = (props) => {
|
|
|
4878
5585
|
)
|
|
4879
5586
|
}
|
|
4880
5587
|
),
|
|
4881
|
-
showProgress && canSlide && /* @__PURE__ */
|
|
5588
|
+
showProgress && canSlide && /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx339(
|
|
4882
5589
|
"span",
|
|
4883
5590
|
{
|
|
4884
5591
|
className: "lib-xplat-swiper__progress-fill",
|
|
@@ -4888,7 +5595,7 @@ var Swiper = (props) => {
|
|
|
4888
5595
|
}
|
|
4889
5596
|
}
|
|
4890
5597
|
) }) }),
|
|
4891
|
-
canSlide && /* @__PURE__ */
|
|
5598
|
+
canSlide && /* @__PURE__ */ jsx339("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx339(
|
|
4892
5599
|
"button",
|
|
4893
5600
|
{
|
|
4894
5601
|
className: clsx_default(
|
|
@@ -4906,8 +5613,8 @@ Swiper.displayName = "Swiper";
|
|
|
4906
5613
|
var Swiper_default = Swiper;
|
|
4907
5614
|
|
|
4908
5615
|
// src/components/Switch/Switch.tsx
|
|
4909
|
-
import
|
|
4910
|
-
import { jsx as
|
|
5616
|
+
import React32 from "react";
|
|
5617
|
+
import { jsx as jsx340 } from "react/jsx-runtime";
|
|
4911
5618
|
var KNOB_TRANSITION_MS = 250;
|
|
4912
5619
|
var Switch = (props) => {
|
|
4913
5620
|
const {
|
|
@@ -4917,9 +5624,9 @@ var Switch = (props) => {
|
|
|
4917
5624
|
disabled,
|
|
4918
5625
|
onChange
|
|
4919
5626
|
} = props;
|
|
4920
|
-
const [isAnimating, setIsAnimating] =
|
|
4921
|
-
const timeoutRef =
|
|
4922
|
-
|
|
5627
|
+
const [isAnimating, setIsAnimating] = React32.useState(false);
|
|
5628
|
+
const timeoutRef = React32.useRef(null);
|
|
5629
|
+
React32.useEffect(() => {
|
|
4923
5630
|
return () => {
|
|
4924
5631
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
4925
5632
|
};
|
|
@@ -4934,7 +5641,7 @@ var Switch = (props) => {
|
|
|
4934
5641
|
timeoutRef.current = null;
|
|
4935
5642
|
}, KNOB_TRANSITION_MS);
|
|
4936
5643
|
};
|
|
4937
|
-
return /* @__PURE__ */
|
|
5644
|
+
return /* @__PURE__ */ jsx340(
|
|
4938
5645
|
"div",
|
|
4939
5646
|
{
|
|
4940
5647
|
className: clsx_default(
|
|
@@ -4947,7 +5654,7 @@ var Switch = (props) => {
|
|
|
4947
5654
|
),
|
|
4948
5655
|
onClick: handleClick,
|
|
4949
5656
|
"aria-disabled": disabled || isAnimating,
|
|
4950
|
-
children: /* @__PURE__ */
|
|
5657
|
+
children: /* @__PURE__ */ jsx340("div", { className: clsx_default("knob", value ? "checked" : void 0) })
|
|
4951
5658
|
}
|
|
4952
5659
|
);
|
|
4953
5660
|
};
|
|
@@ -4955,17 +5662,17 @@ Switch.displayName = "Switch";
|
|
|
4955
5662
|
var Switch_default = Switch;
|
|
4956
5663
|
|
|
4957
5664
|
// src/components/Table/TableContext.tsx
|
|
4958
|
-
import
|
|
4959
|
-
var TableContext =
|
|
5665
|
+
import React33 from "react";
|
|
5666
|
+
var TableContext = React33.createContext(null);
|
|
4960
5667
|
var useTableContext = () => {
|
|
4961
|
-
const ctx =
|
|
5668
|
+
const ctx = React33.useContext(TableContext);
|
|
4962
5669
|
if (!ctx) throw new Error("Table components must be used inside <Table>");
|
|
4963
5670
|
return ctx;
|
|
4964
5671
|
};
|
|
4965
5672
|
var TableContext_default = TableContext;
|
|
4966
5673
|
|
|
4967
5674
|
// src/components/Table/Table.tsx
|
|
4968
|
-
import { jsx as
|
|
5675
|
+
import { jsx as jsx341 } from "react/jsx-runtime";
|
|
4969
5676
|
var Table = (props) => {
|
|
4970
5677
|
const {
|
|
4971
5678
|
children,
|
|
@@ -4975,7 +5682,7 @@ var Table = (props) => {
|
|
|
4975
5682
|
headerSticky = false,
|
|
4976
5683
|
stickyShadow = true
|
|
4977
5684
|
} = props;
|
|
4978
|
-
return /* @__PURE__ */
|
|
5685
|
+
return /* @__PURE__ */ jsx341("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx341(
|
|
4979
5686
|
TableContext_default.Provider,
|
|
4980
5687
|
{
|
|
4981
5688
|
value: {
|
|
@@ -4984,7 +5691,7 @@ var Table = (props) => {
|
|
|
4984
5691
|
headerSticky,
|
|
4985
5692
|
stickyShadow
|
|
4986
5693
|
},
|
|
4987
|
-
children: /* @__PURE__ */
|
|
5694
|
+
children: /* @__PURE__ */ jsx341("table", { className: "lib-xplat-table", children })
|
|
4988
5695
|
}
|
|
4989
5696
|
) });
|
|
4990
5697
|
};
|
|
@@ -4992,41 +5699,41 @@ Table.displayName = "Table";
|
|
|
4992
5699
|
var Table_default = Table;
|
|
4993
5700
|
|
|
4994
5701
|
// src/components/Table/TableBody.tsx
|
|
4995
|
-
import { jsx as
|
|
5702
|
+
import { jsx as jsx342 } from "react/jsx-runtime";
|
|
4996
5703
|
var TableBody = (props) => {
|
|
4997
5704
|
const { children } = props;
|
|
4998
|
-
return /* @__PURE__ */
|
|
5705
|
+
return /* @__PURE__ */ jsx342("tbody", { children });
|
|
4999
5706
|
};
|
|
5000
5707
|
TableBody.displayName = "TableBody";
|
|
5001
5708
|
var TableBody_default = TableBody;
|
|
5002
5709
|
|
|
5003
5710
|
// src/components/Table/TableCell.tsx
|
|
5004
|
-
import
|
|
5711
|
+
import React36 from "react";
|
|
5005
5712
|
|
|
5006
5713
|
// src/components/Table/TableHeadContext.tsx
|
|
5007
|
-
import
|
|
5008
|
-
var TableHeadContext =
|
|
5714
|
+
import React34 from "react";
|
|
5715
|
+
var TableHeadContext = React34.createContext(
|
|
5009
5716
|
null
|
|
5010
5717
|
);
|
|
5011
5718
|
var useTableHeadContext = () => {
|
|
5012
|
-
const ctx =
|
|
5719
|
+
const ctx = React34.useContext(TableHeadContext);
|
|
5013
5720
|
return ctx;
|
|
5014
5721
|
};
|
|
5015
5722
|
var TableHeadContext_default = TableHeadContext;
|
|
5016
5723
|
|
|
5017
5724
|
// src/components/Table/TableRowContext.tsx
|
|
5018
|
-
import
|
|
5019
|
-
var TableRowContext =
|
|
5725
|
+
import React35 from "react";
|
|
5726
|
+
var TableRowContext = React35.createContext(null);
|
|
5020
5727
|
var useTableRowContext = () => {
|
|
5021
|
-
const ctx =
|
|
5728
|
+
const ctx = React35.useContext(TableRowContext);
|
|
5022
5729
|
if (!ctx) throw new Error("Table components must be used inside <Table>");
|
|
5023
5730
|
return ctx;
|
|
5024
5731
|
};
|
|
5025
5732
|
var TableRowContext_default = TableRowContext;
|
|
5026
5733
|
|
|
5027
5734
|
// src/components/Table/TableCell.tsx
|
|
5028
|
-
import { jsx as
|
|
5029
|
-
var TableCell =
|
|
5735
|
+
import { jsx as jsx343 } from "react/jsx-runtime";
|
|
5736
|
+
var TableCell = React36.memo((props) => {
|
|
5030
5737
|
const {
|
|
5031
5738
|
children,
|
|
5032
5739
|
align = "center",
|
|
@@ -5038,9 +5745,9 @@ var TableCell = React35.memo((props) => {
|
|
|
5038
5745
|
const { registerStickyCell, stickyCells } = useTableRowContext();
|
|
5039
5746
|
const { stickyShadow } = useTableContext();
|
|
5040
5747
|
const headContext = useTableHeadContext();
|
|
5041
|
-
const [left, setLeft] =
|
|
5042
|
-
const cellRef =
|
|
5043
|
-
const calculateLeft =
|
|
5748
|
+
const [left, setLeft] = React36.useState(0);
|
|
5749
|
+
const cellRef = React36.useRef(null);
|
|
5750
|
+
const calculateLeft = React36.useCallback(() => {
|
|
5044
5751
|
if (!cellRef.current) return 0;
|
|
5045
5752
|
let totalLeft = 0;
|
|
5046
5753
|
for (const ref of stickyCells) {
|
|
@@ -5049,7 +5756,7 @@ var TableCell = React35.memo((props) => {
|
|
|
5049
5756
|
}
|
|
5050
5757
|
return totalLeft;
|
|
5051
5758
|
}, [stickyCells]);
|
|
5052
|
-
|
|
5759
|
+
React36.useEffect(() => {
|
|
5053
5760
|
if (!isSticky || !cellRef.current) return;
|
|
5054
5761
|
registerStickyCell(cellRef);
|
|
5055
5762
|
setLeft(calculateLeft());
|
|
@@ -5067,7 +5774,7 @@ var TableCell = React35.memo((props) => {
|
|
|
5067
5774
|
const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
|
|
5068
5775
|
const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
|
|
5069
5776
|
const enableHover = headContext && headContext.cellHover;
|
|
5070
|
-
return /* @__PURE__ */
|
|
5777
|
+
return /* @__PURE__ */ jsx343(
|
|
5071
5778
|
CellTag,
|
|
5072
5779
|
{
|
|
5073
5780
|
ref: cellRef,
|
|
@@ -5092,21 +5799,21 @@ TableCell.displayName = "TableCell";
|
|
|
5092
5799
|
var TableCell_default = TableCell;
|
|
5093
5800
|
|
|
5094
5801
|
// src/components/Table/TableHead.tsx
|
|
5095
|
-
import { jsx as
|
|
5802
|
+
import { jsx as jsx344 } from "react/jsx-runtime";
|
|
5096
5803
|
var TableHead = ({
|
|
5097
5804
|
children,
|
|
5098
5805
|
cellHover = false
|
|
5099
5806
|
}) => {
|
|
5100
5807
|
const { headerSticky } = useTableContext();
|
|
5101
|
-
return /* @__PURE__ */
|
|
5808
|
+
return /* @__PURE__ */ jsx344(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx344("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
|
|
5102
5809
|
};
|
|
5103
5810
|
TableHead.displayName = "TableHead";
|
|
5104
5811
|
var TableHead_default = TableHead;
|
|
5105
5812
|
|
|
5106
5813
|
// src/components/Table/TableRow.tsx
|
|
5107
|
-
import
|
|
5108
|
-
import { jsx as
|
|
5109
|
-
var TableRow =
|
|
5814
|
+
import React37 from "react";
|
|
5815
|
+
import { jsx as jsx345 } from "react/jsx-runtime";
|
|
5816
|
+
var TableRow = React37.memo((props) => {
|
|
5110
5817
|
const {
|
|
5111
5818
|
children,
|
|
5112
5819
|
type = "secondary",
|
|
@@ -5115,14 +5822,14 @@ var TableRow = React36.memo((props) => {
|
|
|
5115
5822
|
onClick
|
|
5116
5823
|
} = props;
|
|
5117
5824
|
const { rowBorderUse } = useTableContext();
|
|
5118
|
-
const [stickyCells, setStickyCells] =
|
|
5825
|
+
const [stickyCells, setStickyCells] = React37.useState([]);
|
|
5119
5826
|
const registerStickyCell = (ref) => {
|
|
5120
5827
|
setStickyCells((prev) => {
|
|
5121
5828
|
if (prev.includes(ref)) return prev;
|
|
5122
5829
|
return [...prev, ref];
|
|
5123
5830
|
});
|
|
5124
5831
|
};
|
|
5125
|
-
return /* @__PURE__ */
|
|
5832
|
+
return /* @__PURE__ */ jsx345(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx345(
|
|
5126
5833
|
"tr",
|
|
5127
5834
|
{
|
|
5128
5835
|
className: clsx_default(
|
|
@@ -5146,7 +5853,7 @@ TableRow.displayName = "TableRow";
|
|
|
5146
5853
|
var TableRow_default = TableRow;
|
|
5147
5854
|
|
|
5148
5855
|
// src/components/Tag/Tag.tsx
|
|
5149
|
-
import { jsx as
|
|
5856
|
+
import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
|
|
5150
5857
|
var Tag = (props) => {
|
|
5151
5858
|
const {
|
|
5152
5859
|
children,
|
|
@@ -5156,7 +5863,7 @@ var Tag = (props) => {
|
|
|
5156
5863
|
disabled = false,
|
|
5157
5864
|
colorIndex
|
|
5158
5865
|
} = props;
|
|
5159
|
-
return /* @__PURE__ */
|
|
5866
|
+
return /* @__PURE__ */ jsxs220(
|
|
5160
5867
|
"span",
|
|
5161
5868
|
{
|
|
5162
5869
|
className: clsx_default(
|
|
@@ -5167,8 +5874,8 @@ var Tag = (props) => {
|
|
|
5167
5874
|
disabled && "disabled"
|
|
5168
5875
|
),
|
|
5169
5876
|
children: [
|
|
5170
|
-
/* @__PURE__ */
|
|
5171
|
-
onClose && /* @__PURE__ */
|
|
5877
|
+
/* @__PURE__ */ jsx346("span", { className: "tag-label", children }),
|
|
5878
|
+
onClose && /* @__PURE__ */ jsx346("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx346(XIcon_default, {}) })
|
|
5172
5879
|
]
|
|
5173
5880
|
}
|
|
5174
5881
|
);
|
|
@@ -5177,12 +5884,12 @@ Tag.displayName = "Tag";
|
|
|
5177
5884
|
var Tag_default = Tag;
|
|
5178
5885
|
|
|
5179
5886
|
// src/components/TextArea/TextArea.tsx
|
|
5180
|
-
import
|
|
5181
|
-
import { jsx as
|
|
5182
|
-
var TextArea =
|
|
5887
|
+
import React38 from "react";
|
|
5888
|
+
import { jsx as jsx347 } from "react/jsx-runtime";
|
|
5889
|
+
var TextArea = React38.forwardRef(
|
|
5183
5890
|
(props, ref) => {
|
|
5184
5891
|
const { value, onChange, disabled, ...textareaProps } = props;
|
|
5185
|
-
const localRef =
|
|
5892
|
+
const localRef = React38.useRef(null);
|
|
5186
5893
|
const setRefs = (el) => {
|
|
5187
5894
|
localRef.current = el;
|
|
5188
5895
|
if (!ref) return;
|
|
@@ -5202,21 +5909,21 @@ var TextArea = React37.forwardRef(
|
|
|
5202
5909
|
onChange(event);
|
|
5203
5910
|
}
|
|
5204
5911
|
};
|
|
5205
|
-
|
|
5912
|
+
React38.useEffect(() => {
|
|
5206
5913
|
const el = localRef.current;
|
|
5207
5914
|
if (!el) return;
|
|
5208
5915
|
el.style.height = "0px";
|
|
5209
5916
|
const nextHeight = Math.min(el.scrollHeight, 400);
|
|
5210
5917
|
el.style.height = `${nextHeight}px`;
|
|
5211
5918
|
}, [value]);
|
|
5212
|
-
return /* @__PURE__ */
|
|
5919
|
+
return /* @__PURE__ */ jsx347("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx347(
|
|
5213
5920
|
"div",
|
|
5214
5921
|
{
|
|
5215
5922
|
className: clsx_default(
|
|
5216
5923
|
"lib-xplat-textarea",
|
|
5217
5924
|
disabled ? "disabled" : void 0
|
|
5218
5925
|
),
|
|
5219
|
-
children: /* @__PURE__ */
|
|
5926
|
+
children: /* @__PURE__ */ jsx347(
|
|
5220
5927
|
"textarea",
|
|
5221
5928
|
{
|
|
5222
5929
|
...textareaProps,
|
|
@@ -5234,25 +5941,25 @@ TextArea.displayName = "TextArea";
|
|
|
5234
5941
|
var TextArea_default = TextArea;
|
|
5235
5942
|
|
|
5236
5943
|
// src/components/Toast/Toast.tsx
|
|
5237
|
-
import
|
|
5944
|
+
import React39 from "react";
|
|
5238
5945
|
import { createPortal as createPortal3 } from "react-dom";
|
|
5239
|
-
import { jsx as
|
|
5240
|
-
var ToastContext =
|
|
5946
|
+
import { jsx as jsx348, jsxs as jsxs221 } from "react/jsx-runtime";
|
|
5947
|
+
var ToastContext = React39.createContext(null);
|
|
5241
5948
|
var useToast = () => {
|
|
5242
|
-
const ctx =
|
|
5949
|
+
const ctx = React39.useContext(ToastContext);
|
|
5243
5950
|
if (!ctx) throw new Error("useToast must be used within ToastProvider");
|
|
5244
5951
|
return ctx;
|
|
5245
5952
|
};
|
|
5246
5953
|
var EXIT_DURATION = 300;
|
|
5247
5954
|
var ToastItemComponent = ({ item, isExiting, onClose }) => {
|
|
5248
|
-
const ref =
|
|
5249
|
-
const [height, setHeight] =
|
|
5250
|
-
|
|
5955
|
+
const ref = React39.useRef(null);
|
|
5956
|
+
const [height, setHeight] = React39.useState(void 0);
|
|
5957
|
+
React39.useEffect(() => {
|
|
5251
5958
|
if (ref.current && !isExiting) {
|
|
5252
5959
|
setHeight(ref.current.offsetHeight);
|
|
5253
5960
|
}
|
|
5254
5961
|
}, [isExiting]);
|
|
5255
|
-
return /* @__PURE__ */
|
|
5962
|
+
return /* @__PURE__ */ jsx348(
|
|
5256
5963
|
"div",
|
|
5257
5964
|
{
|
|
5258
5965
|
className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
|
|
@@ -5260,15 +5967,15 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
|
|
|
5260
5967
|
maxHeight: isExiting ? 0 : height ?? "none",
|
|
5261
5968
|
marginBottom: isExiting ? 0 : void 0
|
|
5262
5969
|
},
|
|
5263
|
-
children: /* @__PURE__ */
|
|
5970
|
+
children: /* @__PURE__ */ jsxs221(
|
|
5264
5971
|
"div",
|
|
5265
5972
|
{
|
|
5266
5973
|
ref,
|
|
5267
5974
|
className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
|
|
5268
5975
|
role: "alert",
|
|
5269
5976
|
children: [
|
|
5270
|
-
/* @__PURE__ */
|
|
5271
|
-
/* @__PURE__ */
|
|
5977
|
+
/* @__PURE__ */ jsx348("span", { className: "message", children: item.message }),
|
|
5978
|
+
/* @__PURE__ */ jsx348("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
|
|
5272
5979
|
]
|
|
5273
5980
|
}
|
|
5274
5981
|
)
|
|
@@ -5279,13 +5986,13 @@ var ToastProvider = ({
|
|
|
5279
5986
|
children,
|
|
5280
5987
|
position = "top-right"
|
|
5281
5988
|
}) => {
|
|
5282
|
-
const [toasts, setToasts] =
|
|
5283
|
-
const [removing, setRemoving] =
|
|
5284
|
-
const [mounted, setMounted] =
|
|
5285
|
-
|
|
5989
|
+
const [toasts, setToasts] = React39.useState([]);
|
|
5990
|
+
const [removing, setRemoving] = React39.useState(/* @__PURE__ */ new Set());
|
|
5991
|
+
const [mounted, setMounted] = React39.useState(false);
|
|
5992
|
+
React39.useEffect(() => {
|
|
5286
5993
|
setMounted(true);
|
|
5287
5994
|
}, []);
|
|
5288
|
-
const remove =
|
|
5995
|
+
const remove = React39.useCallback((id) => {
|
|
5289
5996
|
setRemoving((prev) => new Set(prev).add(id));
|
|
5290
5997
|
setTimeout(() => {
|
|
5291
5998
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
@@ -5296,7 +6003,7 @@ var ToastProvider = ({
|
|
|
5296
6003
|
});
|
|
5297
6004
|
}, EXIT_DURATION);
|
|
5298
6005
|
}, []);
|
|
5299
|
-
const toast =
|
|
6006
|
+
const toast = React39.useCallback(
|
|
5300
6007
|
(type, message, duration = 3e3) => {
|
|
5301
6008
|
const id = `${Date.now()}-${Math.random()}`;
|
|
5302
6009
|
setToasts((prev) => [...prev, { id, type, message }]);
|
|
@@ -5306,10 +6013,10 @@ var ToastProvider = ({
|
|
|
5306
6013
|
},
|
|
5307
6014
|
[remove]
|
|
5308
6015
|
);
|
|
5309
|
-
return /* @__PURE__ */
|
|
6016
|
+
return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
|
|
5310
6017
|
children,
|
|
5311
6018
|
mounted && createPortal3(
|
|
5312
|
-
/* @__PURE__ */
|
|
6019
|
+
/* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx348(
|
|
5313
6020
|
ToastItemComponent,
|
|
5314
6021
|
{
|
|
5315
6022
|
item: t,
|
|
@@ -5325,8 +6032,8 @@ var ToastProvider = ({
|
|
|
5325
6032
|
ToastProvider.displayName = "ToastProvider";
|
|
5326
6033
|
|
|
5327
6034
|
// src/components/Tooltip/Tooltip.tsx
|
|
5328
|
-
import
|
|
5329
|
-
import { Fragment as Fragment5, jsx as
|
|
6035
|
+
import React40 from "react";
|
|
6036
|
+
import { Fragment as Fragment5, jsx as jsx349, jsxs as jsxs222 } from "react/jsx-runtime";
|
|
5330
6037
|
var OFFSET = 12;
|
|
5331
6038
|
var SHOW_DELAY = 300;
|
|
5332
6039
|
var Tooltip = (props) => {
|
|
@@ -5337,12 +6044,12 @@ var Tooltip = (props) => {
|
|
|
5337
6044
|
children,
|
|
5338
6045
|
disabled = false
|
|
5339
6046
|
} = props;
|
|
5340
|
-
const triggerRef =
|
|
5341
|
-
const tooltipRef =
|
|
5342
|
-
const [visible, setVisible] =
|
|
5343
|
-
const [pos, setPos] =
|
|
5344
|
-
const delayTimer =
|
|
5345
|
-
const calculatePos =
|
|
6047
|
+
const triggerRef = React40.useRef(null);
|
|
6048
|
+
const tooltipRef = React40.useRef(null);
|
|
6049
|
+
const [visible, setVisible] = React40.useState(false);
|
|
6050
|
+
const [pos, setPos] = React40.useState({ left: 0, top: 0 });
|
|
6051
|
+
const delayTimer = React40.useRef(0);
|
|
6052
|
+
const calculatePos = React40.useCallback((clientX, clientY) => {
|
|
5346
6053
|
const el = tooltipRef.current;
|
|
5347
6054
|
if (!el) return;
|
|
5348
6055
|
const w = el.offsetWidth;
|
|
@@ -5355,38 +6062,38 @@ var Tooltip = (props) => {
|
|
|
5355
6062
|
if (left < 8) left = 8;
|
|
5356
6063
|
setPos({ left, top });
|
|
5357
6064
|
}, []);
|
|
5358
|
-
const handleMouseEnter =
|
|
6065
|
+
const handleMouseEnter = React40.useCallback(() => {
|
|
5359
6066
|
if (disabled) return;
|
|
5360
6067
|
delayTimer.current = window.setTimeout(() => {
|
|
5361
6068
|
setVisible(true);
|
|
5362
6069
|
}, SHOW_DELAY);
|
|
5363
6070
|
}, [disabled]);
|
|
5364
|
-
const handleMouseMove =
|
|
6071
|
+
const handleMouseMove = React40.useCallback((e) => {
|
|
5365
6072
|
if (!visible) return;
|
|
5366
6073
|
calculatePos(e.clientX, e.clientY);
|
|
5367
6074
|
}, [visible, calculatePos]);
|
|
5368
|
-
const handleMouseLeave =
|
|
6075
|
+
const handleMouseLeave = React40.useCallback(() => {
|
|
5369
6076
|
window.clearTimeout(delayTimer.current);
|
|
5370
6077
|
setVisible(false);
|
|
5371
6078
|
}, []);
|
|
5372
|
-
const handleClick =
|
|
6079
|
+
const handleClick = React40.useCallback(() => {
|
|
5373
6080
|
window.clearTimeout(delayTimer.current);
|
|
5374
6081
|
setVisible(false);
|
|
5375
6082
|
}, []);
|
|
5376
|
-
const handleFocus =
|
|
6083
|
+
const handleFocus = React40.useCallback(() => {
|
|
5377
6084
|
if (disabled) return;
|
|
5378
6085
|
setVisible(true);
|
|
5379
6086
|
}, [disabled]);
|
|
5380
|
-
const handleBlur =
|
|
6087
|
+
const handleBlur = React40.useCallback(() => {
|
|
5381
6088
|
setVisible(false);
|
|
5382
6089
|
}, []);
|
|
5383
|
-
|
|
6090
|
+
React40.useLayoutEffect(() => {
|
|
5384
6091
|
if (!visible || !triggerRef.current) return;
|
|
5385
6092
|
const rect = triggerRef.current.getBoundingClientRect();
|
|
5386
6093
|
calculatePos(rect.right, rect.top);
|
|
5387
6094
|
}, [visible, calculatePos]);
|
|
5388
|
-
if (!title && !description) return /* @__PURE__ */
|
|
5389
|
-
return /* @__PURE__ */
|
|
6095
|
+
if (!title && !description) return /* @__PURE__ */ jsx349(Fragment5, { children });
|
|
6096
|
+
return /* @__PURE__ */ jsxs222(
|
|
5390
6097
|
"div",
|
|
5391
6098
|
{
|
|
5392
6099
|
ref: triggerRef,
|
|
@@ -5399,15 +6106,15 @@ var Tooltip = (props) => {
|
|
|
5399
6106
|
onBlur: handleBlur,
|
|
5400
6107
|
children: [
|
|
5401
6108
|
children,
|
|
5402
|
-
visible && /* @__PURE__ */
|
|
6109
|
+
visible && /* @__PURE__ */ jsx349(Portal_default, { children: /* @__PURE__ */ jsxs222(
|
|
5403
6110
|
"div",
|
|
5404
6111
|
{
|
|
5405
6112
|
ref: tooltipRef,
|
|
5406
6113
|
className: clsx_default("lib-xplat-tooltip", type),
|
|
5407
6114
|
style: { position: "fixed", left: pos.left, top: pos.top },
|
|
5408
6115
|
children: [
|
|
5409
|
-
title && /* @__PURE__ */
|
|
5410
|
-
description && /* @__PURE__ */
|
|
6116
|
+
title && /* @__PURE__ */ jsx349("div", { className: "tooltip-title", children: title }),
|
|
6117
|
+
description && /* @__PURE__ */ jsx349("div", { className: "tooltip-desc", children: description })
|
|
5411
6118
|
]
|
|
5412
6119
|
}
|
|
5413
6120
|
) })
|
|
@@ -5419,11 +6126,11 @@ Tooltip.displayName = "Tooltip";
|
|
|
5419
6126
|
var Tooltip_default = Tooltip;
|
|
5420
6127
|
|
|
5421
6128
|
// src/components/Video/Video.tsx
|
|
5422
|
-
import
|
|
5423
|
-
import { jsx as
|
|
5424
|
-
var PipIcon = () => /* @__PURE__ */
|
|
5425
|
-
/* @__PURE__ */
|
|
5426
|
-
/* @__PURE__ */
|
|
6129
|
+
import React41 from "react";
|
|
6130
|
+
import { jsx as jsx350, jsxs as jsxs223 } from "react/jsx-runtime";
|
|
6131
|
+
var PipIcon = () => /* @__PURE__ */ jsxs223("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
|
|
6132
|
+
/* @__PURE__ */ jsx350("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
|
|
6133
|
+
/* @__PURE__ */ jsx350("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
|
|
5427
6134
|
] });
|
|
5428
6135
|
var formatTime = (sec) => {
|
|
5429
6136
|
if (!Number.isFinite(sec) || sec < 0) return "0:00";
|
|
@@ -5431,7 +6138,7 @@ var formatTime = (sec) => {
|
|
|
5431
6138
|
const s = Math.floor(sec % 60);
|
|
5432
6139
|
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
5433
6140
|
};
|
|
5434
|
-
var Video =
|
|
6141
|
+
var Video = React41.forwardRef((props, ref) => {
|
|
5435
6142
|
const {
|
|
5436
6143
|
src,
|
|
5437
6144
|
poster,
|
|
@@ -5455,21 +6162,21 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5455
6162
|
children,
|
|
5456
6163
|
...rest
|
|
5457
6164
|
} = props;
|
|
5458
|
-
const containerRef =
|
|
5459
|
-
const videoRef =
|
|
5460
|
-
const [isPlaying, setIsPlaying] =
|
|
5461
|
-
const [isLoaded, setIsLoaded] =
|
|
5462
|
-
const [currentTime, setCurrentTime] =
|
|
5463
|
-
const [duration, setDuration] =
|
|
5464
|
-
const [buffered, setBuffered] =
|
|
5465
|
-
const [volume, setVolume] =
|
|
5466
|
-
const [isMuted, setIsMuted] =
|
|
5467
|
-
const [isFullscreen, setIsFullscreen] =
|
|
5468
|
-
const [playbackRate, setPlaybackRate] =
|
|
5469
|
-
const [rateMenuOpen, setRateMenuOpen] =
|
|
5470
|
-
const [captionsOn, setCaptionsOn] =
|
|
5471
|
-
const [isPip, setIsPip] =
|
|
5472
|
-
const setRefs =
|
|
6165
|
+
const containerRef = React41.useRef(null);
|
|
6166
|
+
const videoRef = React41.useRef(null);
|
|
6167
|
+
const [isPlaying, setIsPlaying] = React41.useState(Boolean(autoPlay));
|
|
6168
|
+
const [isLoaded, setIsLoaded] = React41.useState(false);
|
|
6169
|
+
const [currentTime, setCurrentTime] = React41.useState(0);
|
|
6170
|
+
const [duration, setDuration] = React41.useState(0);
|
|
6171
|
+
const [buffered, setBuffered] = React41.useState(0);
|
|
6172
|
+
const [volume, setVolume] = React41.useState(1);
|
|
6173
|
+
const [isMuted, setIsMuted] = React41.useState(Boolean(muted));
|
|
6174
|
+
const [isFullscreen, setIsFullscreen] = React41.useState(false);
|
|
6175
|
+
const [playbackRate, setPlaybackRate] = React41.useState(1);
|
|
6176
|
+
const [rateMenuOpen, setRateMenuOpen] = React41.useState(false);
|
|
6177
|
+
const [captionsOn, setCaptionsOn] = React41.useState(false);
|
|
6178
|
+
const [isPip, setIsPip] = React41.useState(false);
|
|
6179
|
+
const setRefs = React41.useCallback(
|
|
5473
6180
|
(el) => {
|
|
5474
6181
|
videoRef.current = el;
|
|
5475
6182
|
if (typeof ref === "function") ref(el);
|
|
@@ -5477,14 +6184,14 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5477
6184
|
},
|
|
5478
6185
|
[ref]
|
|
5479
6186
|
);
|
|
5480
|
-
|
|
6187
|
+
React41.useEffect(() => {
|
|
5481
6188
|
const onFsChange = () => {
|
|
5482
6189
|
setIsFullscreen(document.fullscreenElement === containerRef.current);
|
|
5483
6190
|
};
|
|
5484
6191
|
document.addEventListener("fullscreenchange", onFsChange);
|
|
5485
6192
|
return () => document.removeEventListener("fullscreenchange", onFsChange);
|
|
5486
6193
|
}, []);
|
|
5487
|
-
|
|
6194
|
+
React41.useEffect(() => {
|
|
5488
6195
|
const v = videoRef.current;
|
|
5489
6196
|
if (!v) return;
|
|
5490
6197
|
const onEnter = () => setIsPip(true);
|
|
@@ -5598,13 +6305,13 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5598
6305
|
const volumePct = (isMuted ? 0 : volume) * 100;
|
|
5599
6306
|
const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
|
|
5600
6307
|
const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
|
|
5601
|
-
return /* @__PURE__ */
|
|
6308
|
+
return /* @__PURE__ */ jsxs223(
|
|
5602
6309
|
"div",
|
|
5603
6310
|
{
|
|
5604
6311
|
ref: containerRef,
|
|
5605
6312
|
className: clsx_default("lib-xplat-video", showControls && "has-controls"),
|
|
5606
6313
|
children: [
|
|
5607
|
-
/* @__PURE__ */
|
|
6314
|
+
/* @__PURE__ */ jsx350(
|
|
5608
6315
|
"video",
|
|
5609
6316
|
{
|
|
5610
6317
|
ref: setRefs,
|
|
@@ -5625,7 +6332,7 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5625
6332
|
children
|
|
5626
6333
|
}
|
|
5627
6334
|
),
|
|
5628
|
-
showCenterPlay && /* @__PURE__ */
|
|
6335
|
+
showCenterPlay && /* @__PURE__ */ jsx350(
|
|
5629
6336
|
"button",
|
|
5630
6337
|
{
|
|
5631
6338
|
type: "button",
|
|
@@ -5637,11 +6344,11 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5637
6344
|
onClick: togglePlay,
|
|
5638
6345
|
"aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
|
|
5639
6346
|
tabIndex: -1,
|
|
5640
|
-
children: /* @__PURE__ */
|
|
6347
|
+
children: /* @__PURE__ */ jsx350("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx350(PlayCircleIcon_default, {}) })
|
|
5641
6348
|
}
|
|
5642
6349
|
),
|
|
5643
|
-
showControls && /* @__PURE__ */
|
|
5644
|
-
/* @__PURE__ */
|
|
6350
|
+
showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
|
|
6351
|
+
/* @__PURE__ */ jsx350(
|
|
5645
6352
|
"input",
|
|
5646
6353
|
{
|
|
5647
6354
|
type: "range",
|
|
@@ -5658,29 +6365,29 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5658
6365
|
}
|
|
5659
6366
|
}
|
|
5660
6367
|
),
|
|
5661
|
-
/* @__PURE__ */
|
|
5662
|
-
/* @__PURE__ */
|
|
6368
|
+
/* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
|
|
6369
|
+
/* @__PURE__ */ jsx350(
|
|
5663
6370
|
"button",
|
|
5664
6371
|
{
|
|
5665
6372
|
type: "button",
|
|
5666
6373
|
className: "control-btn",
|
|
5667
6374
|
onClick: togglePlay,
|
|
5668
6375
|
"aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
|
|
5669
|
-
children: isPlaying ? /* @__PURE__ */
|
|
6376
|
+
children: isPlaying ? /* @__PURE__ */ jsx350(PauseIcon_default, {}) : /* @__PURE__ */ jsx350(PlayIcon_default, {})
|
|
5670
6377
|
}
|
|
5671
6378
|
),
|
|
5672
|
-
/* @__PURE__ */
|
|
5673
|
-
/* @__PURE__ */
|
|
6379
|
+
/* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
|
|
6380
|
+
/* @__PURE__ */ jsx350(
|
|
5674
6381
|
"button",
|
|
5675
6382
|
{
|
|
5676
6383
|
type: "button",
|
|
5677
6384
|
className: "control-btn",
|
|
5678
6385
|
onClick: toggleMute,
|
|
5679
6386
|
"aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
|
|
5680
|
-
children: /* @__PURE__ */
|
|
6387
|
+
children: /* @__PURE__ */ jsx350(VolumeGlyph, {})
|
|
5681
6388
|
}
|
|
5682
6389
|
),
|
|
5683
|
-
/* @__PURE__ */
|
|
6390
|
+
/* @__PURE__ */ jsx350(
|
|
5684
6391
|
"input",
|
|
5685
6392
|
{
|
|
5686
6393
|
type: "range",
|
|
@@ -5695,14 +6402,14 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5695
6402
|
}
|
|
5696
6403
|
)
|
|
5697
6404
|
] }),
|
|
5698
|
-
/* @__PURE__ */
|
|
6405
|
+
/* @__PURE__ */ jsxs223("span", { className: "time", children: [
|
|
5699
6406
|
formatTime(currentTime),
|
|
5700
6407
|
" / ",
|
|
5701
6408
|
formatTime(duration)
|
|
5702
6409
|
] }),
|
|
5703
|
-
/* @__PURE__ */
|
|
5704
|
-
playbackRates && playbackRates.length > 0 && /* @__PURE__ */
|
|
5705
|
-
/* @__PURE__ */
|
|
6410
|
+
/* @__PURE__ */ jsx350("div", { className: "controls-spacer" }),
|
|
6411
|
+
playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
|
|
6412
|
+
/* @__PURE__ */ jsxs223(
|
|
5706
6413
|
"button",
|
|
5707
6414
|
{
|
|
5708
6415
|
type: "button",
|
|
@@ -5716,7 +6423,7 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5716
6423
|
]
|
|
5717
6424
|
}
|
|
5718
6425
|
),
|
|
5719
|
-
rateMenuOpen && /* @__PURE__ */
|
|
6426
|
+
rateMenuOpen && /* @__PURE__ */ jsx350("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx350("li", { children: /* @__PURE__ */ jsxs223(
|
|
5720
6427
|
"button",
|
|
5721
6428
|
{
|
|
5722
6429
|
type: "button",
|
|
@@ -5730,7 +6437,7 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5730
6437
|
}
|
|
5731
6438
|
) }, r2)) })
|
|
5732
6439
|
] }),
|
|
5733
|
-
showCaptions && /* @__PURE__ */
|
|
6440
|
+
showCaptions && /* @__PURE__ */ jsx350(
|
|
5734
6441
|
"button",
|
|
5735
6442
|
{
|
|
5736
6443
|
type: "button",
|
|
@@ -5738,37 +6445,37 @@ var Video = React40.forwardRef((props, ref) => {
|
|
|
5738
6445
|
onClick: toggleCaptions,
|
|
5739
6446
|
"aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
|
|
5740
6447
|
"aria-pressed": captionsOn,
|
|
5741
|
-
children: /* @__PURE__ */
|
|
6448
|
+
children: /* @__PURE__ */ jsx350(TypeIcon_default, {})
|
|
5742
6449
|
}
|
|
5743
6450
|
),
|
|
5744
|
-
showPip && pipSupported && /* @__PURE__ */
|
|
6451
|
+
showPip && pipSupported && /* @__PURE__ */ jsx350(
|
|
5745
6452
|
"button",
|
|
5746
6453
|
{
|
|
5747
6454
|
type: "button",
|
|
5748
6455
|
className: clsx_default("control-btn", isPip && "is-active"),
|
|
5749
6456
|
onClick: togglePip,
|
|
5750
6457
|
"aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
|
|
5751
|
-
children: /* @__PURE__ */
|
|
6458
|
+
children: /* @__PURE__ */ jsx350(PipIcon, {})
|
|
5752
6459
|
}
|
|
5753
6460
|
),
|
|
5754
|
-
showDownload && /* @__PURE__ */
|
|
6461
|
+
showDownload && /* @__PURE__ */ jsx350(
|
|
5755
6462
|
"a",
|
|
5756
6463
|
{
|
|
5757
6464
|
className: "control-btn",
|
|
5758
6465
|
href: src,
|
|
5759
6466
|
download: downloadFileName ?? true,
|
|
5760
6467
|
"aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
|
|
5761
|
-
children: /* @__PURE__ */
|
|
6468
|
+
children: /* @__PURE__ */ jsx350(DownloadIcon_default, {})
|
|
5762
6469
|
}
|
|
5763
6470
|
),
|
|
5764
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ jsx350(
|
|
5765
6472
|
"button",
|
|
5766
6473
|
{
|
|
5767
6474
|
type: "button",
|
|
5768
6475
|
className: "control-btn",
|
|
5769
6476
|
onClick: toggleFullscreen,
|
|
5770
6477
|
"aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
|
|
5771
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
6478
|
+
children: isFullscreen ? /* @__PURE__ */ jsx350(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx350(MaximizeIcon_default, {})
|
|
5772
6479
|
}
|
|
5773
6480
|
)
|
|
5774
6481
|
] })
|
|
@@ -5796,6 +6503,7 @@ export {
|
|
|
5796
6503
|
Divider_default as Divider,
|
|
5797
6504
|
Drawer_default as Drawer,
|
|
5798
6505
|
Dropdown_default as Dropdown,
|
|
6506
|
+
Editor_default as Editor,
|
|
5799
6507
|
EmptyState_default as EmptyState,
|
|
5800
6508
|
FileUpload_default as FileUpload,
|
|
5801
6509
|
HtmlTypeWriter_default as HtmlTypewriter,
|