@x-plat/design-system 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AutoResizeTextArea/index.css +3 -1
- package/dist/components/Button/index.css +2 -1
- package/dist/components/Button/index.d.cts +6 -0
- package/dist/components/Button/index.d.ts +6 -0
- package/dist/components/Chart/index.cjs +8 -1
- package/dist/components/Chart/index.js +8 -1
- package/dist/components/ChatInput/index.css +6 -2
- package/dist/components/DatePicker/index.css +5 -2
- package/dist/components/Input/index.css +3 -1
- package/dist/components/Link/index.cjs +64 -0
- package/dist/components/Link/index.css +25 -0
- package/dist/components/Link/index.d.cts +27 -0
- package/dist/components/Link/index.d.ts +27 -0
- package/dist/components/Link/index.js +37 -0
- package/dist/components/LinkButton/index.cjs +64 -0
- package/dist/components/LinkButton/index.css +106 -0
- package/dist/components/LinkButton/index.d.cts +28 -0
- package/dist/components/LinkButton/index.d.ts +28 -0
- package/dist/components/LinkButton/index.js +37 -0
- package/dist/components/Select/index.css +4 -2
- package/dist/components/TextArea/index.css +3 -1
- package/dist/components/Tooltip/index.cjs +77 -32
- package/dist/components/Tooltip/index.d.cts +10 -2
- package/dist/components/Tooltip/index.d.ts +10 -2
- package/dist/components/Tooltip/index.js +77 -32
- package/dist/components/index.cjs +247 -153
- package/dist/components/index.css +44 -7
- package/dist/components/index.d.cts +2 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +222 -130
- package/dist/index.cjs +266 -172
- package/dist/index.css +44 -7
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +239 -147
- package/guidelines/AGENT_PROMPT.md +2 -2
- package/guidelines/Guidelines.md +2 -1
- package/guidelines/components/button.md +54 -0
- package/guidelines/components/card.md +15 -19
- package/guidelines/components/link.md +35 -0
- package/guidelines/components/overlay.md +30 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6297,9 +6297,16 @@ var useChartTooltip = (enabled) => {
|
|
|
6297
6297
|
}, []);
|
|
6298
6298
|
return { tooltip, show, hide, move, containerRef };
|
|
6299
6299
|
};
|
|
6300
|
+
var formatTick = (value, maxVal) => {
|
|
6301
|
+
const step = maxVal / 4;
|
|
6302
|
+
if (!Number.isFinite(step) || step <= 0) return "0";
|
|
6303
|
+
const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
|
|
6304
|
+
const fixed = value.toFixed(decimals);
|
|
6305
|
+
return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
|
|
6306
|
+
};
|
|
6300
6307
|
var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
|
|
6301
6308
|
const y = PADDING.top + (1 - ratio) * chartH;
|
|
6302
|
-
const val =
|
|
6309
|
+
const val = formatTick(maxVal * ratio, maxVal);
|
|
6303
6310
|
return /* @__PURE__ */ jsxs195("g", { children: [
|
|
6304
6311
|
/* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
|
|
6305
6312
|
/* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
|
|
@@ -8910,8 +8917,46 @@ var ImageSelector = (props) => {
|
|
|
8910
8917
|
ImageSelector.displayName = "ImageSelector";
|
|
8911
8918
|
var ImageSelector_default = ImageSelector;
|
|
8912
8919
|
|
|
8920
|
+
// src/components/Link/Link.tsx
|
|
8921
|
+
import { jsx as jsx329 } from "react/jsx-runtime";
|
|
8922
|
+
var Link = (props) => {
|
|
8923
|
+
const { children, href, underline = "always", target, rel, ...rest } = props;
|
|
8924
|
+
return /* @__PURE__ */ jsx329(
|
|
8925
|
+
"a",
|
|
8926
|
+
{
|
|
8927
|
+
className: clsx_default("lib-xplat-link", `underline-${underline}`),
|
|
8928
|
+
href,
|
|
8929
|
+
target,
|
|
8930
|
+
rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
|
|
8931
|
+
...rest,
|
|
8932
|
+
children
|
|
8933
|
+
}
|
|
8934
|
+
);
|
|
8935
|
+
};
|
|
8936
|
+
Link.displayName = "Link";
|
|
8937
|
+
var Link_default = Link;
|
|
8938
|
+
|
|
8939
|
+
// src/components/LinkButton/LinkButton.tsx
|
|
8940
|
+
import { jsx as jsx330 } from "react/jsx-runtime";
|
|
8941
|
+
var LinkButton = (props) => {
|
|
8942
|
+
const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
|
|
8943
|
+
return /* @__PURE__ */ jsx330(
|
|
8944
|
+
"a",
|
|
8945
|
+
{
|
|
8946
|
+
className: clsx_default("lib-xplat-button", type, size),
|
|
8947
|
+
href,
|
|
8948
|
+
target,
|
|
8949
|
+
rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
|
|
8950
|
+
...rest,
|
|
8951
|
+
children
|
|
8952
|
+
}
|
|
8953
|
+
);
|
|
8954
|
+
};
|
|
8955
|
+
LinkButton.displayName = "LinkButton";
|
|
8956
|
+
var LinkButton_default = LinkButton;
|
|
8957
|
+
|
|
8913
8958
|
// src/components/NotificationBadge/NotificationBadge.tsx
|
|
8914
|
-
import { jsx as
|
|
8959
|
+
import { jsx as jsx331, jsxs as jsxs211 } from "react/jsx-runtime";
|
|
8915
8960
|
var NotificationBadge = (props) => {
|
|
8916
8961
|
const {
|
|
8917
8962
|
children,
|
|
@@ -8925,14 +8970,14 @@ var NotificationBadge = (props) => {
|
|
|
8925
8970
|
const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
|
|
8926
8971
|
return /* @__PURE__ */ jsxs211("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
|
|
8927
8972
|
children,
|
|
8928
|
-
showBadge && /* @__PURE__ */
|
|
8973
|
+
showBadge && /* @__PURE__ */ jsx331("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
|
|
8929
8974
|
] });
|
|
8930
8975
|
};
|
|
8931
8976
|
NotificationBadge.displayName = "NotificationBadge";
|
|
8932
8977
|
var NotificationBadge_default = NotificationBadge;
|
|
8933
8978
|
|
|
8934
8979
|
// src/components/Pagination/Pagination.tsx
|
|
8935
|
-
import { jsx as
|
|
8980
|
+
import { jsx as jsx332, jsxs as jsxs212 } from "react/jsx-runtime";
|
|
8936
8981
|
var getPageRange = (current, totalPages, siblingCount) => {
|
|
8937
8982
|
const totalNumbers = siblingCount * 2 + 5;
|
|
8938
8983
|
if (totalPages <= totalNumbers) {
|
|
@@ -8976,18 +9021,18 @@ var Pagination = (props) => {
|
|
|
8976
9021
|
}
|
|
8977
9022
|
};
|
|
8978
9023
|
return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
|
|
8979
|
-
/* @__PURE__ */
|
|
9024
|
+
/* @__PURE__ */ jsx332(
|
|
8980
9025
|
"button",
|
|
8981
9026
|
{
|
|
8982
9027
|
className: "page-btn prev",
|
|
8983
9028
|
disabled: current <= 1,
|
|
8984
9029
|
onClick: () => handleClick(current - 1),
|
|
8985
9030
|
"aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
|
|
8986
|
-
children: /* @__PURE__ */
|
|
9031
|
+
children: /* @__PURE__ */ jsx332(ChevronLeftIcon_default, {})
|
|
8987
9032
|
}
|
|
8988
9033
|
),
|
|
8989
9034
|
pages.map(
|
|
8990
|
-
(page, i) => page === "..." ? /* @__PURE__ */
|
|
9035
|
+
(page, i) => page === "..." ? /* @__PURE__ */ jsx332("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx332(
|
|
8991
9036
|
"button",
|
|
8992
9037
|
{
|
|
8993
9038
|
className: clsx_default("page-btn", { active: page === current }),
|
|
@@ -8998,14 +9043,14 @@ var Pagination = (props) => {
|
|
|
8998
9043
|
page
|
|
8999
9044
|
)
|
|
9000
9045
|
),
|
|
9001
|
-
/* @__PURE__ */
|
|
9046
|
+
/* @__PURE__ */ jsx332(
|
|
9002
9047
|
"button",
|
|
9003
9048
|
{
|
|
9004
9049
|
className: "page-btn next",
|
|
9005
9050
|
disabled: current >= totalPages,
|
|
9006
9051
|
onClick: () => handleClick(current + 1),
|
|
9007
9052
|
"aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
|
|
9008
|
-
children: /* @__PURE__ */
|
|
9053
|
+
children: /* @__PURE__ */ jsx332(ChevronRightIcon_default, {})
|
|
9009
9054
|
}
|
|
9010
9055
|
)
|
|
9011
9056
|
] });
|
|
@@ -9015,7 +9060,7 @@ var Pagination_default = Pagination;
|
|
|
9015
9060
|
|
|
9016
9061
|
// src/components/PopOver/PopOver.tsx
|
|
9017
9062
|
import React27 from "react";
|
|
9018
|
-
import { jsx as
|
|
9063
|
+
import { jsx as jsx333, jsxs as jsxs213 } from "react/jsx-runtime";
|
|
9019
9064
|
var PopOver = (props) => {
|
|
9020
9065
|
const { children, isOpen, onClose, PopOverEl } = props;
|
|
9021
9066
|
const popRef = React27.useRef(null);
|
|
@@ -9047,7 +9092,7 @@ var PopOver = (props) => {
|
|
|
9047
9092
|
},
|
|
9048
9093
|
children: [
|
|
9049
9094
|
children,
|
|
9050
|
-
localOpen && /* @__PURE__ */
|
|
9095
|
+
localOpen && /* @__PURE__ */ jsx333(Portal_default, { children: /* @__PURE__ */ jsx333(
|
|
9051
9096
|
"div",
|
|
9052
9097
|
{
|
|
9053
9098
|
className: clsx_default(
|
|
@@ -9070,7 +9115,7 @@ PopOver.displayName = "PopOver";
|
|
|
9070
9115
|
var PopOver_default = PopOver;
|
|
9071
9116
|
|
|
9072
9117
|
// src/components/Progress/Progress.tsx
|
|
9073
|
-
import { jsx as
|
|
9118
|
+
import { jsx as jsx334, jsxs as jsxs214 } from "react/jsx-runtime";
|
|
9074
9119
|
var Progress = (props) => {
|
|
9075
9120
|
const {
|
|
9076
9121
|
value,
|
|
@@ -9081,7 +9126,7 @@ var Progress = (props) => {
|
|
|
9081
9126
|
} = props;
|
|
9082
9127
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
9083
9128
|
return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
|
|
9084
|
-
/* @__PURE__ */
|
|
9129
|
+
/* @__PURE__ */ jsx334(
|
|
9085
9130
|
"div",
|
|
9086
9131
|
{
|
|
9087
9132
|
className: "track",
|
|
@@ -9089,7 +9134,7 @@ var Progress = (props) => {
|
|
|
9089
9134
|
"aria-valuenow": value,
|
|
9090
9135
|
"aria-valuemin": 0,
|
|
9091
9136
|
"aria-valuemax": max,
|
|
9092
|
-
children: /* @__PURE__ */
|
|
9137
|
+
children: /* @__PURE__ */ jsx334(
|
|
9093
9138
|
"div",
|
|
9094
9139
|
{
|
|
9095
9140
|
className: "bar",
|
|
@@ -9118,7 +9163,7 @@ var useRadioGroupContext = () => {
|
|
|
9118
9163
|
var RadioGroupContext_default = RadioGroupContext;
|
|
9119
9164
|
|
|
9120
9165
|
// src/components/Radio/Radio.tsx
|
|
9121
|
-
import { jsx as
|
|
9166
|
+
import { jsx as jsx335, jsxs as jsxs215 } from "react/jsx-runtime";
|
|
9122
9167
|
var Radio = (props) => {
|
|
9123
9168
|
const {
|
|
9124
9169
|
label,
|
|
@@ -9148,18 +9193,18 @@ var Radio = (props) => {
|
|
|
9148
9193
|
className
|
|
9149
9194
|
),
|
|
9150
9195
|
children: [
|
|
9151
|
-
/* @__PURE__ */
|
|
9152
|
-
/* @__PURE__ */
|
|
9196
|
+
/* @__PURE__ */ jsx335("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
|
|
9197
|
+
/* @__PURE__ */ jsx335(
|
|
9153
9198
|
"div",
|
|
9154
9199
|
{
|
|
9155
9200
|
className: clsx_default(
|
|
9156
9201
|
"circle",
|
|
9157
9202
|
localChecked ? "checked" : void 0
|
|
9158
9203
|
),
|
|
9159
|
-
children: localChecked && /* @__PURE__ */
|
|
9204
|
+
children: localChecked && /* @__PURE__ */ jsx335("div", { className: "inner-circle" })
|
|
9160
9205
|
}
|
|
9161
9206
|
),
|
|
9162
|
-
label && /* @__PURE__ */
|
|
9207
|
+
label && /* @__PURE__ */ jsx335("span", { children: label })
|
|
9163
9208
|
]
|
|
9164
9209
|
}
|
|
9165
9210
|
);
|
|
@@ -9168,10 +9213,10 @@ Radio.displayName = "Radio";
|
|
|
9168
9213
|
var Radio_default = Radio;
|
|
9169
9214
|
|
|
9170
9215
|
// src/components/Radio/RadioGroup.tsx
|
|
9171
|
-
import { Fragment as Fragment4, jsx as
|
|
9216
|
+
import { Fragment as Fragment4, jsx as jsx336 } from "react/jsx-runtime";
|
|
9172
9217
|
var RadioGroup = (props) => {
|
|
9173
9218
|
const { children, ...rest } = props;
|
|
9174
|
-
return /* @__PURE__ */
|
|
9219
|
+
return /* @__PURE__ */ jsx336(Fragment4, { children: /* @__PURE__ */ jsx336(RadioGroupContext_default.Provider, { value: rest, children }) });
|
|
9175
9220
|
};
|
|
9176
9221
|
RadioGroup.displayName = "RadioGroup";
|
|
9177
9222
|
var RadioGroup_default = RadioGroup;
|
|
@@ -9186,7 +9231,7 @@ var context_default = SelectContext;
|
|
|
9186
9231
|
|
|
9187
9232
|
// src/components/Select/SelectItem.tsx
|
|
9188
9233
|
import React30 from "react";
|
|
9189
|
-
import { jsx as
|
|
9234
|
+
import { jsx as jsx337 } from "react/jsx-runtime";
|
|
9190
9235
|
var SelectItem = (props) => {
|
|
9191
9236
|
const { children, value, onClick, disabled = false } = props;
|
|
9192
9237
|
const ctx = React30.useContext(context_default);
|
|
@@ -9199,7 +9244,7 @@ var SelectItem = (props) => {
|
|
|
9199
9244
|
onClick?.();
|
|
9200
9245
|
};
|
|
9201
9246
|
const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
|
|
9202
|
-
return /* @__PURE__ */
|
|
9247
|
+
return /* @__PURE__ */ jsx337(
|
|
9203
9248
|
"div",
|
|
9204
9249
|
{
|
|
9205
9250
|
className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
|
|
@@ -9220,7 +9265,7 @@ SelectItem.displayName = "Select.Item";
|
|
|
9220
9265
|
var SelectItem_default = SelectItem;
|
|
9221
9266
|
|
|
9222
9267
|
// src/components/Select/Select.tsx
|
|
9223
|
-
import { jsx as
|
|
9268
|
+
import { jsx as jsx338, jsxs as jsxs216 } from "react/jsx-runtime";
|
|
9224
9269
|
var ANIMATION_DURATION_MS3 = 200;
|
|
9225
9270
|
var SelectRoot = (props) => {
|
|
9226
9271
|
const {
|
|
@@ -9300,7 +9345,7 @@ var SelectRoot = (props) => {
|
|
|
9300
9345
|
if (disabled) return;
|
|
9301
9346
|
toggle();
|
|
9302
9347
|
};
|
|
9303
|
-
return /* @__PURE__ */
|
|
9348
|
+
return /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
|
|
9304
9349
|
"div",
|
|
9305
9350
|
{
|
|
9306
9351
|
className: clsx_default(
|
|
@@ -9335,7 +9380,7 @@ var SelectRoot = (props) => {
|
|
|
9335
9380
|
}
|
|
9336
9381
|
},
|
|
9337
9382
|
children: [
|
|
9338
|
-
/* @__PURE__ */
|
|
9383
|
+
/* @__PURE__ */ jsx338(
|
|
9339
9384
|
"span",
|
|
9340
9385
|
{
|
|
9341
9386
|
className: clsx_default(
|
|
@@ -9345,25 +9390,25 @@ var SelectRoot = (props) => {
|
|
|
9345
9390
|
children: selectedLabel ?? placeholder
|
|
9346
9391
|
}
|
|
9347
9392
|
),
|
|
9348
|
-
/* @__PURE__ */
|
|
9393
|
+
/* @__PURE__ */ jsx338(
|
|
9349
9394
|
"span",
|
|
9350
9395
|
{
|
|
9351
9396
|
className: clsx_default("select-trigger-icon", isOpen && "open"),
|
|
9352
9397
|
"aria-hidden": true,
|
|
9353
|
-
children: /* @__PURE__ */
|
|
9398
|
+
children: /* @__PURE__ */ jsx338(ChevronDownIcon_default, {})
|
|
9354
9399
|
}
|
|
9355
9400
|
)
|
|
9356
9401
|
]
|
|
9357
9402
|
}
|
|
9358
9403
|
),
|
|
9359
|
-
mounted && /* @__PURE__ */
|
|
9404
|
+
mounted && /* @__PURE__ */ jsx338(Portal_default, { children: /* @__PURE__ */ jsx338(
|
|
9360
9405
|
"div",
|
|
9361
9406
|
{
|
|
9362
9407
|
className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
|
|
9363
9408
|
ref: contentRef,
|
|
9364
9409
|
style: { ...position.position, width: triggerRef.current?.offsetWidth },
|
|
9365
9410
|
role: "listbox",
|
|
9366
|
-
children: /* @__PURE__ */
|
|
9411
|
+
children: /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: itemChildren })
|
|
9367
9412
|
}
|
|
9368
9413
|
) })
|
|
9369
9414
|
]
|
|
@@ -9377,7 +9422,7 @@ var Select = Object.assign(SelectRoot, {
|
|
|
9377
9422
|
var Select_default = Select;
|
|
9378
9423
|
|
|
9379
9424
|
// src/components/Skeleton/Skeleton.tsx
|
|
9380
|
-
import { jsx as
|
|
9425
|
+
import { jsx as jsx339 } from "react/jsx-runtime";
|
|
9381
9426
|
var SIZE_MAP = {
|
|
9382
9427
|
xs: "var(--spacing-space-1)",
|
|
9383
9428
|
sm: "var(--spacing-space-2)",
|
|
@@ -9393,7 +9438,7 @@ var Skeleton = (props) => {
|
|
|
9393
9438
|
...width != null && { width: SIZE_MAP[width] },
|
|
9394
9439
|
...height != null && { height: SIZE_MAP[height] }
|
|
9395
9440
|
};
|
|
9396
|
-
return /* @__PURE__ */
|
|
9441
|
+
return /* @__PURE__ */ jsx339(
|
|
9397
9442
|
"div",
|
|
9398
9443
|
{
|
|
9399
9444
|
className: clsx_default("lib-xplat-skeleton", variant),
|
|
@@ -9406,20 +9451,20 @@ Skeleton.displayName = "Skeleton";
|
|
|
9406
9451
|
var Skeleton_default = Skeleton;
|
|
9407
9452
|
|
|
9408
9453
|
// src/components/Spinner/Spinner.tsx
|
|
9409
|
-
import { jsx as
|
|
9454
|
+
import { jsx as jsx340, jsxs as jsxs217 } from "react/jsx-runtime";
|
|
9410
9455
|
var Spinner = (props) => {
|
|
9411
9456
|
const {
|
|
9412
9457
|
size = "md",
|
|
9413
9458
|
type = "brand"
|
|
9414
9459
|
} = props;
|
|
9415
|
-
return /* @__PURE__ */
|
|
9460
|
+
return /* @__PURE__ */ jsx340(
|
|
9416
9461
|
"div",
|
|
9417
9462
|
{
|
|
9418
9463
|
className: clsx_default("lib-xplat-spinner", size, type),
|
|
9419
9464
|
role: "status",
|
|
9420
9465
|
"aria-label": "\uB85C\uB529 \uC911",
|
|
9421
9466
|
children: /* @__PURE__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
9422
|
-
/* @__PURE__ */
|
|
9467
|
+
/* @__PURE__ */ jsx340(
|
|
9423
9468
|
"circle",
|
|
9424
9469
|
{
|
|
9425
9470
|
className: "track",
|
|
@@ -9429,7 +9474,7 @@ var Spinner = (props) => {
|
|
|
9429
9474
|
strokeWidth: "3"
|
|
9430
9475
|
}
|
|
9431
9476
|
),
|
|
9432
|
-
/* @__PURE__ */
|
|
9477
|
+
/* @__PURE__ */ jsx340(
|
|
9433
9478
|
"circle",
|
|
9434
9479
|
{
|
|
9435
9480
|
className: "indicator",
|
|
@@ -9448,20 +9493,20 @@ Spinner.displayName = "Spinner";
|
|
|
9448
9493
|
var Spinner_default = Spinner;
|
|
9449
9494
|
|
|
9450
9495
|
// src/components/Steps/Steps.tsx
|
|
9451
|
-
import { jsx as
|
|
9496
|
+
import { jsx as jsx341, jsxs as jsxs218 } from "react/jsx-runtime";
|
|
9452
9497
|
var Steps = (props) => {
|
|
9453
9498
|
const {
|
|
9454
9499
|
items,
|
|
9455
9500
|
current,
|
|
9456
9501
|
type = "brand"
|
|
9457
9502
|
} = props;
|
|
9458
|
-
return /* @__PURE__ */
|
|
9503
|
+
return /* @__PURE__ */ jsx341("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
|
|
9459
9504
|
const status = index < current ? "completed" : index === current ? "active" : "pending";
|
|
9460
9505
|
return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
|
|
9461
|
-
/* @__PURE__ */
|
|
9506
|
+
/* @__PURE__ */ jsx341("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx341(CheckIcon_default, {}) : /* @__PURE__ */ jsx341("span", { children: index + 1 }) }),
|
|
9462
9507
|
/* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
|
|
9463
|
-
/* @__PURE__ */
|
|
9464
|
-
item.description && /* @__PURE__ */
|
|
9508
|
+
/* @__PURE__ */ jsx341("span", { className: "step-title", children: item.title }),
|
|
9509
|
+
item.description && /* @__PURE__ */ jsx341("span", { className: "step-description", children: item.description })
|
|
9465
9510
|
] })
|
|
9466
9511
|
] }, index);
|
|
9467
9512
|
}) });
|
|
@@ -9471,7 +9516,7 @@ var Steps_default = Steps;
|
|
|
9471
9516
|
|
|
9472
9517
|
// src/components/Swiper/Swiper.tsx
|
|
9473
9518
|
import React32 from "react";
|
|
9474
|
-
import { jsx as
|
|
9519
|
+
import { jsx as jsx342, jsxs as jsxs219 } from "react/jsx-runtime";
|
|
9475
9520
|
var Swiper = (props) => {
|
|
9476
9521
|
const {
|
|
9477
9522
|
auto = false,
|
|
@@ -9700,7 +9745,7 @@ var Swiper = (props) => {
|
|
|
9700
9745
|
const slideWidthPercent = 100 / viewItemCount;
|
|
9701
9746
|
const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
|
|
9702
9747
|
const slideElements = React32.useMemo(
|
|
9703
|
-
() => extendedItems.map((item, idx) => /* @__PURE__ */
|
|
9748
|
+
() => extendedItems.map((item, idx) => /* @__PURE__ */ jsx342(
|
|
9704
9749
|
"div",
|
|
9705
9750
|
{
|
|
9706
9751
|
className: "lib-xplat-swiper__slide",
|
|
@@ -9720,14 +9765,14 @@ var Swiper = (props) => {
|
|
|
9720
9765
|
totalSteps - 1
|
|
9721
9766
|
);
|
|
9722
9767
|
return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
|
|
9723
|
-
/* @__PURE__ */
|
|
9768
|
+
/* @__PURE__ */ jsx342(
|
|
9724
9769
|
"div",
|
|
9725
9770
|
{
|
|
9726
9771
|
className: "lib-xplat-swiper__viewport",
|
|
9727
9772
|
onMouseDown: handleDragStart,
|
|
9728
9773
|
onTouchStart: handleDragStart,
|
|
9729
9774
|
onDragStart: (e) => e.preventDefault(),
|
|
9730
|
-
children: /* @__PURE__ */
|
|
9775
|
+
children: /* @__PURE__ */ jsx342(
|
|
9731
9776
|
"div",
|
|
9732
9777
|
{
|
|
9733
9778
|
className: clsx_default(
|
|
@@ -9745,7 +9790,7 @@ var Swiper = (props) => {
|
|
|
9745
9790
|
)
|
|
9746
9791
|
}
|
|
9747
9792
|
),
|
|
9748
|
-
showProgress && canSlide && /* @__PURE__ */
|
|
9793
|
+
showProgress && canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx342(
|
|
9749
9794
|
"span",
|
|
9750
9795
|
{
|
|
9751
9796
|
className: "lib-xplat-swiper__progress-fill",
|
|
@@ -9755,7 +9800,7 @@ var Swiper = (props) => {
|
|
|
9755
9800
|
}
|
|
9756
9801
|
}
|
|
9757
9802
|
) }) }),
|
|
9758
|
-
canSlide && /* @__PURE__ */
|
|
9803
|
+
canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx342(
|
|
9759
9804
|
"button",
|
|
9760
9805
|
{
|
|
9761
9806
|
className: clsx_default(
|
|
@@ -9774,7 +9819,7 @@ var Swiper_default = Swiper;
|
|
|
9774
9819
|
|
|
9775
9820
|
// src/components/Switch/Switch.tsx
|
|
9776
9821
|
import React33 from "react";
|
|
9777
|
-
import { jsx as
|
|
9822
|
+
import { jsx as jsx343 } from "react/jsx-runtime";
|
|
9778
9823
|
var KNOB_TRANSITION_MS = 250;
|
|
9779
9824
|
var Switch = (props) => {
|
|
9780
9825
|
const {
|
|
@@ -9801,7 +9846,7 @@ var Switch = (props) => {
|
|
|
9801
9846
|
timeoutRef.current = null;
|
|
9802
9847
|
}, KNOB_TRANSITION_MS);
|
|
9803
9848
|
};
|
|
9804
|
-
return /* @__PURE__ */
|
|
9849
|
+
return /* @__PURE__ */ jsx343(
|
|
9805
9850
|
"div",
|
|
9806
9851
|
{
|
|
9807
9852
|
className: clsx_default(
|
|
@@ -9814,7 +9859,7 @@ var Switch = (props) => {
|
|
|
9814
9859
|
),
|
|
9815
9860
|
onClick: handleClick,
|
|
9816
9861
|
"aria-disabled": disabled || isAnimating,
|
|
9817
|
-
children: /* @__PURE__ */
|
|
9862
|
+
children: /* @__PURE__ */ jsx343("div", { className: clsx_default("knob", value ? "checked" : void 0) })
|
|
9818
9863
|
}
|
|
9819
9864
|
);
|
|
9820
9865
|
};
|
|
@@ -9832,7 +9877,7 @@ var useTableContext = () => {
|
|
|
9832
9877
|
var TableContext_default = TableContext;
|
|
9833
9878
|
|
|
9834
9879
|
// src/components/Table/Table.tsx
|
|
9835
|
-
import { jsx as
|
|
9880
|
+
import { jsx as jsx344 } from "react/jsx-runtime";
|
|
9836
9881
|
var Table = (props) => {
|
|
9837
9882
|
const {
|
|
9838
9883
|
children,
|
|
@@ -9842,7 +9887,7 @@ var Table = (props) => {
|
|
|
9842
9887
|
headerSticky = false,
|
|
9843
9888
|
stickyShadow = true
|
|
9844
9889
|
} = props;
|
|
9845
|
-
return /* @__PURE__ */
|
|
9890
|
+
return /* @__PURE__ */ jsx344("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx344(
|
|
9846
9891
|
TableContext_default.Provider,
|
|
9847
9892
|
{
|
|
9848
9893
|
value: {
|
|
@@ -9851,7 +9896,7 @@ var Table = (props) => {
|
|
|
9851
9896
|
headerSticky,
|
|
9852
9897
|
stickyShadow
|
|
9853
9898
|
},
|
|
9854
|
-
children: /* @__PURE__ */
|
|
9899
|
+
children: /* @__PURE__ */ jsx344("table", { className: "lib-xplat-table", children })
|
|
9855
9900
|
}
|
|
9856
9901
|
) });
|
|
9857
9902
|
};
|
|
@@ -9859,10 +9904,10 @@ Table.displayName = "Table";
|
|
|
9859
9904
|
var Table_default = Table;
|
|
9860
9905
|
|
|
9861
9906
|
// src/components/Table/TableBody.tsx
|
|
9862
|
-
import { jsx as
|
|
9907
|
+
import { jsx as jsx345 } from "react/jsx-runtime";
|
|
9863
9908
|
var TableBody = (props) => {
|
|
9864
9909
|
const { children } = props;
|
|
9865
|
-
return /* @__PURE__ */
|
|
9910
|
+
return /* @__PURE__ */ jsx345("tbody", { children });
|
|
9866
9911
|
};
|
|
9867
9912
|
TableBody.displayName = "TableBody";
|
|
9868
9913
|
var TableBody_default = TableBody;
|
|
@@ -9892,7 +9937,7 @@ var useTableRowContext = () => {
|
|
|
9892
9937
|
var TableRowContext_default = TableRowContext;
|
|
9893
9938
|
|
|
9894
9939
|
// src/components/Table/TableCell.tsx
|
|
9895
|
-
import { jsx as
|
|
9940
|
+
import { jsx as jsx346 } from "react/jsx-runtime";
|
|
9896
9941
|
var TableCell = React37.memo((props) => {
|
|
9897
9942
|
const {
|
|
9898
9943
|
children,
|
|
@@ -9937,7 +9982,7 @@ var TableCell = React37.memo((props) => {
|
|
|
9937
9982
|
const CellTag = isHeaderCell ? "th" : "td";
|
|
9938
9983
|
const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
|
|
9939
9984
|
const enableHover = headContext && headContext.cellHover;
|
|
9940
|
-
return /* @__PURE__ */
|
|
9985
|
+
return /* @__PURE__ */ jsx346(
|
|
9941
9986
|
CellTag,
|
|
9942
9987
|
{
|
|
9943
9988
|
ref: cellRef,
|
|
@@ -9964,20 +10009,20 @@ TableCell.displayName = "TableCell";
|
|
|
9964
10009
|
var TableCell_default = TableCell;
|
|
9965
10010
|
|
|
9966
10011
|
// src/components/Table/TableHead.tsx
|
|
9967
|
-
import { jsx as
|
|
10012
|
+
import { jsx as jsx347 } from "react/jsx-runtime";
|
|
9968
10013
|
var TableHead = ({
|
|
9969
10014
|
children,
|
|
9970
10015
|
cellHover = false
|
|
9971
10016
|
}) => {
|
|
9972
10017
|
const { headerSticky } = useTableContext();
|
|
9973
|
-
return /* @__PURE__ */
|
|
10018
|
+
return /* @__PURE__ */ jsx347(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx347("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
|
|
9974
10019
|
};
|
|
9975
10020
|
TableHead.displayName = "TableHead";
|
|
9976
10021
|
var TableHead_default = TableHead;
|
|
9977
10022
|
|
|
9978
10023
|
// src/components/Table/TableRow.tsx
|
|
9979
10024
|
import React38 from "react";
|
|
9980
|
-
import { jsx as
|
|
10025
|
+
import { jsx as jsx348 } from "react/jsx-runtime";
|
|
9981
10026
|
var TableRow = React38.memo((props) => {
|
|
9982
10027
|
const {
|
|
9983
10028
|
children,
|
|
@@ -9994,7 +10039,7 @@ var TableRow = React38.memo((props) => {
|
|
|
9994
10039
|
return [...prev, ref];
|
|
9995
10040
|
});
|
|
9996
10041
|
};
|
|
9997
|
-
return /* @__PURE__ */
|
|
10042
|
+
return /* @__PURE__ */ jsx348(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx348(
|
|
9998
10043
|
"tr",
|
|
9999
10044
|
{
|
|
10000
10045
|
className: clsx_default(
|
|
@@ -10018,7 +10063,7 @@ TableRow.displayName = "TableRow";
|
|
|
10018
10063
|
var TableRow_default = TableRow;
|
|
10019
10064
|
|
|
10020
10065
|
// src/components/Tag/Tag.tsx
|
|
10021
|
-
import { jsx as
|
|
10066
|
+
import { jsx as jsx349, jsxs as jsxs220 } from "react/jsx-runtime";
|
|
10022
10067
|
var Tag = (props) => {
|
|
10023
10068
|
const {
|
|
10024
10069
|
children,
|
|
@@ -10039,8 +10084,8 @@ var Tag = (props) => {
|
|
|
10039
10084
|
disabled && "disabled"
|
|
10040
10085
|
),
|
|
10041
10086
|
children: [
|
|
10042
|
-
/* @__PURE__ */
|
|
10043
|
-
onClose && /* @__PURE__ */
|
|
10087
|
+
/* @__PURE__ */ jsx349("span", { className: "tag-label", children }),
|
|
10088
|
+
onClose && /* @__PURE__ */ jsx349("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx349(XIcon_default, {}) })
|
|
10044
10089
|
]
|
|
10045
10090
|
}
|
|
10046
10091
|
);
|
|
@@ -10050,7 +10095,7 @@ var Tag_default = Tag;
|
|
|
10050
10095
|
|
|
10051
10096
|
// src/components/TextArea/TextArea.tsx
|
|
10052
10097
|
import React39 from "react";
|
|
10053
|
-
import { jsx as
|
|
10098
|
+
import { jsx as jsx350 } from "react/jsx-runtime";
|
|
10054
10099
|
var TextArea = React39.forwardRef(
|
|
10055
10100
|
(props, ref) => {
|
|
10056
10101
|
const {
|
|
@@ -10061,7 +10106,7 @@ var TextArea = React39.forwardRef(
|
|
|
10061
10106
|
disabled,
|
|
10062
10107
|
...textareaProps
|
|
10063
10108
|
} = props;
|
|
10064
|
-
return /* @__PURE__ */
|
|
10109
|
+
return /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx350(
|
|
10065
10110
|
"textarea",
|
|
10066
10111
|
{
|
|
10067
10112
|
...textareaProps,
|
|
@@ -10080,7 +10125,7 @@ var TextArea_default = TextArea;
|
|
|
10080
10125
|
// src/components/Toast/Toast.tsx
|
|
10081
10126
|
import React40 from "react";
|
|
10082
10127
|
import { createPortal as createPortal3 } from "react-dom";
|
|
10083
|
-
import { jsx as
|
|
10128
|
+
import { jsx as jsx351, jsxs as jsxs221 } from "react/jsx-runtime";
|
|
10084
10129
|
var ToastContext = React40.createContext(null);
|
|
10085
10130
|
var useToast = () => {
|
|
10086
10131
|
const ctx = React40.useContext(ToastContext);
|
|
@@ -10096,7 +10141,7 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
|
|
|
10096
10141
|
setHeight(ref.current.offsetHeight);
|
|
10097
10142
|
}
|
|
10098
10143
|
}, [isExiting]);
|
|
10099
|
-
return /* @__PURE__ */
|
|
10144
|
+
return /* @__PURE__ */ jsx351(
|
|
10100
10145
|
"div",
|
|
10101
10146
|
{
|
|
10102
10147
|
className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
|
|
@@ -10111,8 +10156,8 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
|
|
|
10111
10156
|
className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
|
|
10112
10157
|
role: "alert",
|
|
10113
10158
|
children: [
|
|
10114
|
-
/* @__PURE__ */
|
|
10115
|
-
/* @__PURE__ */
|
|
10159
|
+
/* @__PURE__ */ jsx351("span", { className: "message", children: item.message }),
|
|
10160
|
+
/* @__PURE__ */ jsx351("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
|
|
10116
10161
|
]
|
|
10117
10162
|
}
|
|
10118
10163
|
)
|
|
@@ -10153,7 +10198,7 @@ var ToastProvider = ({
|
|
|
10153
10198
|
return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
|
|
10154
10199
|
children,
|
|
10155
10200
|
mounted && createPortal3(
|
|
10156
|
-
/* @__PURE__ */
|
|
10201
|
+
/* @__PURE__ */ jsx351("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx351(
|
|
10157
10202
|
ToastItemComponent,
|
|
10158
10203
|
{
|
|
10159
10204
|
item: t,
|
|
@@ -10170,15 +10215,17 @@ ToastProvider.displayName = "ToastProvider";
|
|
|
10170
10215
|
|
|
10171
10216
|
// src/components/Tooltip/Tooltip.tsx
|
|
10172
10217
|
import React41 from "react";
|
|
10173
|
-
import { Fragment as Fragment5, jsx as
|
|
10218
|
+
import { Fragment as Fragment5, jsx as jsx352, jsxs as jsxs222 } from "react/jsx-runtime";
|
|
10174
10219
|
var OFFSET = 12;
|
|
10220
|
+
var GAP = 8;
|
|
10175
10221
|
var SHOW_DELAY = 300;
|
|
10176
10222
|
var Tooltip = (props) => {
|
|
10177
10223
|
const {
|
|
10178
|
-
|
|
10224
|
+
children,
|
|
10179
10225
|
title,
|
|
10180
10226
|
description,
|
|
10181
|
-
|
|
10227
|
+
type = "dark",
|
|
10228
|
+
follow = false,
|
|
10182
10229
|
disabled = false
|
|
10183
10230
|
} = props;
|
|
10184
10231
|
const triggerRef = React41.useRef(null);
|
|
@@ -10186,50 +10233,92 @@ var Tooltip = (props) => {
|
|
|
10186
10233
|
const [visible, setVisible] = React41.useState(false);
|
|
10187
10234
|
const [pos, setPos] = React41.useState({ left: 0, top: 0 });
|
|
10188
10235
|
const delayTimer = React41.useRef(0);
|
|
10189
|
-
const
|
|
10236
|
+
const rafRef = React41.useRef(0);
|
|
10237
|
+
const cursor = React41.useRef(null);
|
|
10238
|
+
const clamp = React41.useCallback((left, top, w, h) => {
|
|
10239
|
+
const vw = window.innerWidth;
|
|
10240
|
+
const vh = window.innerHeight;
|
|
10241
|
+
return {
|
|
10242
|
+
left: Math.min(Math.max(GAP, left), Math.max(GAP, vw - w - GAP)),
|
|
10243
|
+
top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
|
|
10244
|
+
};
|
|
10245
|
+
}, []);
|
|
10246
|
+
const placeAtCursor = React41.useCallback((x, y) => {
|
|
10190
10247
|
const el = tooltipRef.current;
|
|
10191
10248
|
if (!el) return;
|
|
10192
10249
|
const w = el.offsetWidth;
|
|
10193
10250
|
const h = el.offsetHeight;
|
|
10194
|
-
|
|
10195
|
-
let
|
|
10196
|
-
|
|
10197
|
-
if (
|
|
10198
|
-
|
|
10199
|
-
|
|
10200
|
-
|
|
10201
|
-
|
|
10202
|
-
|
|
10251
|
+
let left = x + OFFSET;
|
|
10252
|
+
let top = y - h - OFFSET;
|
|
10253
|
+
if (left + w > window.innerWidth - GAP) left = x - w - OFFSET;
|
|
10254
|
+
if (top < GAP) top = y + OFFSET;
|
|
10255
|
+
setPos(clamp(left, top, w, h));
|
|
10256
|
+
}, [clamp]);
|
|
10257
|
+
const placeAtTrigger = React41.useCallback(() => {
|
|
10258
|
+
const el = tooltipRef.current;
|
|
10259
|
+
const trigger = triggerRef.current;
|
|
10260
|
+
if (!el || !trigger) return;
|
|
10261
|
+
const w = el.offsetWidth;
|
|
10262
|
+
const h = el.offsetHeight;
|
|
10263
|
+
const rect = trigger.getBoundingClientRect();
|
|
10264
|
+
let top = rect.top - h - GAP;
|
|
10265
|
+
if (top < GAP) top = rect.bottom + GAP;
|
|
10266
|
+
const left = rect.left + rect.width / 2 - w / 2;
|
|
10267
|
+
setPos(clamp(left, top, w, h));
|
|
10268
|
+
}, [clamp]);
|
|
10269
|
+
const reposition = React41.useCallback(() => {
|
|
10270
|
+
if (follow && cursor.current) {
|
|
10271
|
+
placeAtCursor(cursor.current.x, cursor.current.y);
|
|
10272
|
+
} else {
|
|
10273
|
+
placeAtTrigger();
|
|
10274
|
+
}
|
|
10275
|
+
}, [follow, placeAtCursor, placeAtTrigger]);
|
|
10276
|
+
const handleMouseEnter = React41.useCallback((e) => {
|
|
10203
10277
|
if (disabled) return;
|
|
10204
|
-
|
|
10205
|
-
|
|
10206
|
-
}, SHOW_DELAY);
|
|
10278
|
+
cursor.current = { x: e.clientX, y: e.clientY };
|
|
10279
|
+
delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
|
|
10207
10280
|
}, [disabled]);
|
|
10208
10281
|
const handleMouseMove = React41.useCallback((e) => {
|
|
10209
|
-
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10215
|
-
}, []);
|
|
10216
|
-
const
|
|
10282
|
+
cursor.current = { x: e.clientX, y: e.clientY };
|
|
10283
|
+
if (!visible || !follow) return;
|
|
10284
|
+
cancelAnimationFrame(rafRef.current);
|
|
10285
|
+
rafRef.current = requestAnimationFrame(() => {
|
|
10286
|
+
if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
|
|
10287
|
+
});
|
|
10288
|
+
}, [visible, follow, placeAtCursor]);
|
|
10289
|
+
const close = React41.useCallback(() => {
|
|
10217
10290
|
window.clearTimeout(delayTimer.current);
|
|
10291
|
+
cancelAnimationFrame(rafRef.current);
|
|
10218
10292
|
setVisible(false);
|
|
10219
10293
|
}, []);
|
|
10294
|
+
const handleMouseLeave = React41.useCallback(() => {
|
|
10295
|
+
cursor.current = null;
|
|
10296
|
+
close();
|
|
10297
|
+
}, [close]);
|
|
10220
10298
|
const handleFocus = React41.useCallback(() => {
|
|
10221
10299
|
if (disabled) return;
|
|
10300
|
+
cursor.current = null;
|
|
10222
10301
|
setVisible(true);
|
|
10223
10302
|
}, [disabled]);
|
|
10224
|
-
const handleBlur = React41.useCallback(() => {
|
|
10225
|
-
setVisible(false);
|
|
10226
|
-
}, []);
|
|
10227
10303
|
React41.useLayoutEffect(() => {
|
|
10228
|
-
if (!visible
|
|
10229
|
-
|
|
10230
|
-
|
|
10231
|
-
|
|
10232
|
-
|
|
10304
|
+
if (!visible) return;
|
|
10305
|
+
reposition();
|
|
10306
|
+
}, [visible, reposition]);
|
|
10307
|
+
React41.useEffect(() => {
|
|
10308
|
+
if (!visible || follow) return;
|
|
10309
|
+
const onChange = () => placeAtTrigger();
|
|
10310
|
+
window.addEventListener("scroll", onChange, true);
|
|
10311
|
+
window.addEventListener("resize", onChange);
|
|
10312
|
+
return () => {
|
|
10313
|
+
window.removeEventListener("scroll", onChange, true);
|
|
10314
|
+
window.removeEventListener("resize", onChange);
|
|
10315
|
+
};
|
|
10316
|
+
}, [visible, follow, placeAtTrigger]);
|
|
10317
|
+
React41.useEffect(() => () => {
|
|
10318
|
+
window.clearTimeout(delayTimer.current);
|
|
10319
|
+
cancelAnimationFrame(rafRef.current);
|
|
10320
|
+
}, []);
|
|
10321
|
+
if (!title && !description) return /* @__PURE__ */ jsx352(Fragment5, { children });
|
|
10233
10322
|
return /* @__PURE__ */ jsxs222(
|
|
10234
10323
|
"div",
|
|
10235
10324
|
{
|
|
@@ -10238,20 +10327,21 @@ var Tooltip = (props) => {
|
|
|
10238
10327
|
onMouseEnter: handleMouseEnter,
|
|
10239
10328
|
onMouseMove: handleMouseMove,
|
|
10240
10329
|
onMouseLeave: handleMouseLeave,
|
|
10241
|
-
onClick:
|
|
10330
|
+
onClick: close,
|
|
10242
10331
|
onFocus: handleFocus,
|
|
10243
|
-
onBlur:
|
|
10332
|
+
onBlur: close,
|
|
10244
10333
|
children: [
|
|
10245
10334
|
children,
|
|
10246
|
-
visible && /* @__PURE__ */
|
|
10335
|
+
visible && /* @__PURE__ */ jsx352(Portal_default, { children: /* @__PURE__ */ jsxs222(
|
|
10247
10336
|
"div",
|
|
10248
10337
|
{
|
|
10249
10338
|
ref: tooltipRef,
|
|
10339
|
+
role: "tooltip",
|
|
10250
10340
|
className: clsx_default("lib-xplat-tooltip", type),
|
|
10251
10341
|
style: { position: "fixed", left: pos.left, top: pos.top },
|
|
10252
10342
|
children: [
|
|
10253
|
-
title && /* @__PURE__ */
|
|
10254
|
-
description && /* @__PURE__ */
|
|
10343
|
+
title && /* @__PURE__ */ jsx352("div", { className: "tooltip-title", children: title }),
|
|
10344
|
+
description && /* @__PURE__ */ jsx352("div", { className: "tooltip-desc", children: description })
|
|
10255
10345
|
]
|
|
10256
10346
|
}
|
|
10257
10347
|
) })
|
|
@@ -10264,10 +10354,10 @@ var Tooltip_default = Tooltip;
|
|
|
10264
10354
|
|
|
10265
10355
|
// src/components/Video/Video.tsx
|
|
10266
10356
|
import React42 from "react";
|
|
10267
|
-
import { jsx as
|
|
10357
|
+
import { jsx as jsx353, jsxs as jsxs223 } from "react/jsx-runtime";
|
|
10268
10358
|
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: [
|
|
10269
|
-
/* @__PURE__ */
|
|
10270
|
-
/* @__PURE__ */
|
|
10359
|
+
/* @__PURE__ */ jsx353("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
|
|
10360
|
+
/* @__PURE__ */ jsx353("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
|
|
10271
10361
|
] });
|
|
10272
10362
|
var formatTime = (sec) => {
|
|
10273
10363
|
if (!Number.isFinite(sec) || sec < 0) return "0:00";
|
|
@@ -10448,7 +10538,7 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10448
10538
|
ref: containerRef,
|
|
10449
10539
|
className: clsx_default("lib-xplat-video", showControls && "has-controls"),
|
|
10450
10540
|
children: [
|
|
10451
|
-
/* @__PURE__ */
|
|
10541
|
+
/* @__PURE__ */ jsx353(
|
|
10452
10542
|
"video",
|
|
10453
10543
|
{
|
|
10454
10544
|
ref: setRefs,
|
|
@@ -10469,7 +10559,7 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10469
10559
|
children
|
|
10470
10560
|
}
|
|
10471
10561
|
),
|
|
10472
|
-
showCenterPlay && /* @__PURE__ */
|
|
10562
|
+
showCenterPlay && /* @__PURE__ */ jsx353(
|
|
10473
10563
|
"button",
|
|
10474
10564
|
{
|
|
10475
10565
|
type: "button",
|
|
@@ -10481,11 +10571,11 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10481
10571
|
onClick: togglePlay,
|
|
10482
10572
|
"aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
|
|
10483
10573
|
tabIndex: -1,
|
|
10484
|
-
children: /* @__PURE__ */
|
|
10574
|
+
children: /* @__PURE__ */ jsx353("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx353(PlayCircleIcon_default, {}) })
|
|
10485
10575
|
}
|
|
10486
10576
|
),
|
|
10487
10577
|
showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
|
|
10488
|
-
/* @__PURE__ */
|
|
10578
|
+
/* @__PURE__ */ jsx353(
|
|
10489
10579
|
"input",
|
|
10490
10580
|
{
|
|
10491
10581
|
type: "range",
|
|
@@ -10503,28 +10593,28 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10503
10593
|
}
|
|
10504
10594
|
),
|
|
10505
10595
|
/* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
|
|
10506
|
-
/* @__PURE__ */
|
|
10596
|
+
/* @__PURE__ */ jsx353(
|
|
10507
10597
|
"button",
|
|
10508
10598
|
{
|
|
10509
10599
|
type: "button",
|
|
10510
10600
|
className: "control-btn",
|
|
10511
10601
|
onClick: togglePlay,
|
|
10512
10602
|
"aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
|
|
10513
|
-
children: isPlaying ? /* @__PURE__ */
|
|
10603
|
+
children: isPlaying ? /* @__PURE__ */ jsx353(PauseIcon_default, {}) : /* @__PURE__ */ jsx353(PlayIcon_default, {})
|
|
10514
10604
|
}
|
|
10515
10605
|
),
|
|
10516
10606
|
/* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
|
|
10517
|
-
/* @__PURE__ */
|
|
10607
|
+
/* @__PURE__ */ jsx353(
|
|
10518
10608
|
"button",
|
|
10519
10609
|
{
|
|
10520
10610
|
type: "button",
|
|
10521
10611
|
className: "control-btn",
|
|
10522
10612
|
onClick: toggleMute,
|
|
10523
10613
|
"aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
|
|
10524
|
-
children: /* @__PURE__ */
|
|
10614
|
+
children: /* @__PURE__ */ jsx353(VolumeGlyph, {})
|
|
10525
10615
|
}
|
|
10526
10616
|
),
|
|
10527
|
-
/* @__PURE__ */
|
|
10617
|
+
/* @__PURE__ */ jsx353(
|
|
10528
10618
|
"input",
|
|
10529
10619
|
{
|
|
10530
10620
|
type: "range",
|
|
@@ -10544,7 +10634,7 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10544
10634
|
" / ",
|
|
10545
10635
|
formatTime(duration)
|
|
10546
10636
|
] }),
|
|
10547
|
-
/* @__PURE__ */
|
|
10637
|
+
/* @__PURE__ */ jsx353("div", { className: "controls-spacer" }),
|
|
10548
10638
|
playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
|
|
10549
10639
|
/* @__PURE__ */ jsxs223(
|
|
10550
10640
|
"button",
|
|
@@ -10560,7 +10650,7 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10560
10650
|
]
|
|
10561
10651
|
}
|
|
10562
10652
|
),
|
|
10563
|
-
rateMenuOpen && /* @__PURE__ */
|
|
10653
|
+
rateMenuOpen && /* @__PURE__ */ jsx353("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx353("li", { children: /* @__PURE__ */ jsxs223(
|
|
10564
10654
|
"button",
|
|
10565
10655
|
{
|
|
10566
10656
|
type: "button",
|
|
@@ -10574,7 +10664,7 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10574
10664
|
}
|
|
10575
10665
|
) }, r2)) })
|
|
10576
10666
|
] }),
|
|
10577
|
-
showCaptions && /* @__PURE__ */
|
|
10667
|
+
showCaptions && /* @__PURE__ */ jsx353(
|
|
10578
10668
|
"button",
|
|
10579
10669
|
{
|
|
10580
10670
|
type: "button",
|
|
@@ -10582,37 +10672,37 @@ var Video = React42.forwardRef((props, ref) => {
|
|
|
10582
10672
|
onClick: toggleCaptions,
|
|
10583
10673
|
"aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
|
|
10584
10674
|
"aria-pressed": captionsOn,
|
|
10585
|
-
children: /* @__PURE__ */
|
|
10675
|
+
children: /* @__PURE__ */ jsx353(TypeIcon_default, {})
|
|
10586
10676
|
}
|
|
10587
10677
|
),
|
|
10588
|
-
showPip && pipSupported && /* @__PURE__ */
|
|
10678
|
+
showPip && pipSupported && /* @__PURE__ */ jsx353(
|
|
10589
10679
|
"button",
|
|
10590
10680
|
{
|
|
10591
10681
|
type: "button",
|
|
10592
10682
|
className: clsx_default("control-btn", isPip && "is-active"),
|
|
10593
10683
|
onClick: togglePip,
|
|
10594
10684
|
"aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
|
|
10595
|
-
children: /* @__PURE__ */
|
|
10685
|
+
children: /* @__PURE__ */ jsx353(PipIcon, {})
|
|
10596
10686
|
}
|
|
10597
10687
|
),
|
|
10598
|
-
showDownload && /* @__PURE__ */
|
|
10688
|
+
showDownload && /* @__PURE__ */ jsx353(
|
|
10599
10689
|
"a",
|
|
10600
10690
|
{
|
|
10601
10691
|
className: "control-btn",
|
|
10602
10692
|
href: src,
|
|
10603
10693
|
download: downloadFileName ?? true,
|
|
10604
10694
|
"aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
|
|
10605
|
-
children: /* @__PURE__ */
|
|
10695
|
+
children: /* @__PURE__ */ jsx353(DownloadIcon_default, {})
|
|
10606
10696
|
}
|
|
10607
10697
|
),
|
|
10608
|
-
/* @__PURE__ */
|
|
10698
|
+
/* @__PURE__ */ jsx353(
|
|
10609
10699
|
"button",
|
|
10610
10700
|
{
|
|
10611
10701
|
type: "button",
|
|
10612
10702
|
className: "control-btn",
|
|
10613
10703
|
onClick: toggleFullscreen,
|
|
10614
10704
|
"aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
|
|
10615
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
10705
|
+
children: isFullscreen ? /* @__PURE__ */ jsx353(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx353(MaximizeIcon_default, {})
|
|
10616
10706
|
}
|
|
10617
10707
|
)
|
|
10618
10708
|
] })
|
|
@@ -10625,7 +10715,7 @@ Video.displayName = "Video";
|
|
|
10625
10715
|
var Video_default = Video;
|
|
10626
10716
|
|
|
10627
10717
|
// src/layout/Grid/FullGrid/FullGrid.tsx
|
|
10628
|
-
import { jsx as
|
|
10718
|
+
import { jsx as jsx354 } from "react/jsx-runtime";
|
|
10629
10719
|
var GAP_MAP = {
|
|
10630
10720
|
none: "var(--spacing-space-none)",
|
|
10631
10721
|
xs: "var(--spacing-space-1)",
|
|
@@ -10638,13 +10728,13 @@ var GAP_MAP = {
|
|
|
10638
10728
|
var FullGrid = (props) => {
|
|
10639
10729
|
const { children, gap } = props;
|
|
10640
10730
|
const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
|
|
10641
|
-
return /* @__PURE__ */
|
|
10731
|
+
return /* @__PURE__ */ jsx354("div", { className: "lib-xplat-full-grid", style, children });
|
|
10642
10732
|
};
|
|
10643
10733
|
FullGrid.displayName = "FullGrid";
|
|
10644
10734
|
var FullGrid_default = FullGrid;
|
|
10645
10735
|
|
|
10646
10736
|
// src/layout/Grid/FullScreen/FullScreen.tsx
|
|
10647
|
-
import { jsx as
|
|
10737
|
+
import { jsx as jsx355 } from "react/jsx-runtime";
|
|
10648
10738
|
var GAP_MAP2 = {
|
|
10649
10739
|
none: "var(--spacing-space-none)",
|
|
10650
10740
|
xs: "var(--spacing-space-1)",
|
|
@@ -10657,13 +10747,13 @@ var GAP_MAP2 = {
|
|
|
10657
10747
|
var FullScreen = (props) => {
|
|
10658
10748
|
const { children, gap } = props;
|
|
10659
10749
|
const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
|
|
10660
|
-
return /* @__PURE__ */
|
|
10750
|
+
return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-full-screen", style, children });
|
|
10661
10751
|
};
|
|
10662
10752
|
FullScreen.displayName = "FullScreen";
|
|
10663
10753
|
var FullScreen_default = FullScreen;
|
|
10664
10754
|
|
|
10665
10755
|
// src/layout/Grid/Item/Item.tsx
|
|
10666
|
-
import { jsx as
|
|
10756
|
+
import { jsx as jsx356 } from "react/jsx-runtime";
|
|
10667
10757
|
var calculateSpans = (column) => {
|
|
10668
10758
|
const spans = {};
|
|
10669
10759
|
let inherited = column.default;
|
|
@@ -10680,35 +10770,35 @@ var GridItem = ({ column, children, className }) => {
|
|
|
10680
10770
|
Object.entries(spans).forEach(([key, value]) => {
|
|
10681
10771
|
style[`--column-${key}`] = value;
|
|
10682
10772
|
});
|
|
10683
|
-
return /* @__PURE__ */
|
|
10773
|
+
return /* @__PURE__ */ jsx356("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
|
|
10684
10774
|
};
|
|
10685
10775
|
GridItem.displayName = "GridItem";
|
|
10686
10776
|
var Item_default = GridItem;
|
|
10687
10777
|
|
|
10688
10778
|
// src/layout/Header/Header.tsx
|
|
10689
|
-
import { jsx as
|
|
10779
|
+
import { jsx as jsx357, jsxs as jsxs224 } from "react/jsx-runtime";
|
|
10690
10780
|
var Header = ({
|
|
10691
10781
|
logo,
|
|
10692
10782
|
centerContent,
|
|
10693
10783
|
rightContent
|
|
10694
10784
|
}) => {
|
|
10695
10785
|
return /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-header", children: [
|
|
10696
|
-
/* @__PURE__ */
|
|
10697
|
-
/* @__PURE__ */
|
|
10698
|
-
/* @__PURE__ */
|
|
10786
|
+
/* @__PURE__ */ jsx357("div", { children: logo }),
|
|
10787
|
+
/* @__PURE__ */ jsx357("div", { children: centerContent }),
|
|
10788
|
+
/* @__PURE__ */ jsx357("div", { children: rightContent })
|
|
10699
10789
|
] });
|
|
10700
10790
|
};
|
|
10701
10791
|
Header.displayName = "Header";
|
|
10702
10792
|
var Header_default = Header;
|
|
10703
10793
|
|
|
10704
10794
|
// src/layout/Layout/Layout.tsx
|
|
10705
|
-
import { Fragment as Fragment6, jsx as
|
|
10795
|
+
import { Fragment as Fragment6, jsx as jsx358, jsxs as jsxs225 } from "react/jsx-runtime";
|
|
10706
10796
|
var Layout = (props) => {
|
|
10707
10797
|
const { header, sideBar, children } = props;
|
|
10708
|
-
return /* @__PURE__ */
|
|
10709
|
-
sideBar && /* @__PURE__ */
|
|
10798
|
+
return /* @__PURE__ */ jsx358("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content-wrapper", children: [
|
|
10799
|
+
sideBar && /* @__PURE__ */ jsx358(Fragment6, { children: sideBar }),
|
|
10710
10800
|
/* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content", children: [
|
|
10711
|
-
header && /* @__PURE__ */
|
|
10801
|
+
header && /* @__PURE__ */ jsx358("div", { className: "lib-xplat-layout-conent-header", children: header }),
|
|
10712
10802
|
children
|
|
10713
10803
|
] })
|
|
10714
10804
|
] }) });
|
|
@@ -10730,18 +10820,18 @@ var useSideBarContext = () => {
|
|
|
10730
10820
|
var SideBarContext_default = SideBarContext;
|
|
10731
10821
|
|
|
10732
10822
|
// src/layout/SideBar/SideBar.tsx
|
|
10733
|
-
import { jsx as
|
|
10823
|
+
import { jsx as jsx359 } from "react/jsx-runtime";
|
|
10734
10824
|
var SideBar = (props) => {
|
|
10735
10825
|
const { children, className } = props;
|
|
10736
10826
|
const [isOpen, setIsOpen] = React44.useState(true);
|
|
10737
10827
|
const handleSwitchSideBar = () => {
|
|
10738
10828
|
setIsOpen((prev) => !prev);
|
|
10739
10829
|
};
|
|
10740
|
-
return /* @__PURE__ */
|
|
10830
|
+
return /* @__PURE__ */ jsx359(
|
|
10741
10831
|
SideBarContext_default.Provider,
|
|
10742
10832
|
{
|
|
10743
10833
|
value: { isSidebarOpen: isOpen, handleSwitchSideBar },
|
|
10744
|
-
children: /* @__PURE__ */
|
|
10834
|
+
children: /* @__PURE__ */ jsx359(
|
|
10745
10835
|
"div",
|
|
10746
10836
|
{
|
|
10747
10837
|
className: clsx_default(
|
|
@@ -10944,7 +11034,9 @@ export {
|
|
|
10944
11034
|
Layout_default as Layout,
|
|
10945
11035
|
LayoutIcon_default as LayoutIcon,
|
|
10946
11036
|
LifeBuoyIcon_default as LifeBuoyIcon,
|
|
11037
|
+
Link_default as Link,
|
|
10947
11038
|
Link2Icon_default as Link2Icon,
|
|
11039
|
+
LinkButton_default as LinkButton,
|
|
10948
11040
|
LinkIcon_default as LinkIcon,
|
|
10949
11041
|
LinkedinIcon_default as LinkedinIcon,
|
|
10950
11042
|
ListIcon_default as ListIcon,
|