@x-plat/design-system 0.5.6 → 0.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Chart/index.cjs +33 -24
- package/dist/components/Chart/index.js +33 -24
- package/dist/components/DatePicker/index.cjs +38 -22
- package/dist/components/DatePicker/index.css +14 -1
- package/dist/components/DatePicker/index.d.cts +2 -1
- package/dist/components/DatePicker/index.d.ts +2 -1
- package/dist/components/DatePicker/index.js +38 -22
- package/dist/components/Video/index.cjs +1 -1
- package/dist/components/Video/index.css +7 -0
- package/dist/components/Video/index.js +1 -1
- package/dist/components/index.cjs +72 -47
- package/dist/components/index.css +21 -1
- package/dist/components/index.js +72 -47
- package/dist/index.cjs +72 -47
- package/dist/index.css +21 -1
- package/dist/index.js +72 -47
- package/package.json +1 -1
|
@@ -2103,23 +2103,30 @@ var CardTab_default = CardTab;
|
|
|
2103
2103
|
// src/components/Chart/Chart.tsx
|
|
2104
2104
|
var import_react5 = __toESM(require("react"), 1);
|
|
2105
2105
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
2106
|
-
var
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
[
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
var
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2106
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
2107
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
2108
|
+
const n = i + 1;
|
|
2109
|
+
return [
|
|
2110
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
2111
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
2112
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
2113
|
+
`var(--semantic-categorical-${n}-text)`
|
|
2114
|
+
];
|
|
2115
|
+
});
|
|
2116
|
+
var PIE_COLORS = Array.from(
|
|
2117
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
2118
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
2119
|
+
);
|
|
2120
|
+
var hashString = (str) => {
|
|
2121
|
+
let hash = 0;
|
|
2122
|
+
for (let i = 0; i < str.length; i++) {
|
|
2123
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
2124
|
+
}
|
|
2125
|
+
return Math.abs(hash);
|
|
2126
|
+
};
|
|
2127
|
+
var getPalette = (palettes, index, key) => {
|
|
2128
|
+
const offset = key ? hashString(key) : 0;
|
|
2129
|
+
return palettes[(index + offset) % palettes.length];
|
|
2123
2130
|
};
|
|
2124
2131
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
2125
2132
|
var useChartTooltip = (enabled) => {
|
|
@@ -2189,8 +2196,8 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
|
|
|
2189
2196
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
2190
2197
|
}),
|
|
2191
2198
|
entries.map(([key], di) => {
|
|
2192
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2193
|
-
const color = palette[
|
|
2199
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2200
|
+
const color = palette[2];
|
|
2194
2201
|
const points = seriesPoints[di];
|
|
2195
2202
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
|
|
2196
2203
|
/* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
@@ -2255,8 +2262,8 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
2255
2262
|
}),
|
|
2256
2263
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
2257
2264
|
entries.map(([key], di) => {
|
|
2258
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2259
|
-
const color = palette[
|
|
2265
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2266
|
+
const color = palette[2];
|
|
2260
2267
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
2261
2268
|
"rect",
|
|
2262
2269
|
{
|
|
@@ -2279,13 +2286,15 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
2279
2286
|
BarChart.displayName = "BarChart";
|
|
2280
2287
|
var PieDonutChart = import_react5.default.memo(
|
|
2281
2288
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
2282
|
-
const
|
|
2289
|
+
const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
|
|
2290
|
+
const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
2283
2291
|
const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
2284
2292
|
const cx = 150;
|
|
2285
2293
|
const cy = 150;
|
|
2286
2294
|
const r2 = 120;
|
|
2287
2295
|
const innerR = isDoughnut ? 60 : 0;
|
|
2288
|
-
const
|
|
2296
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
2297
|
+
const colorOffset = hashString(firstKey);
|
|
2289
2298
|
const sliceData = import_react5.default.useMemo(() => {
|
|
2290
2299
|
let angle0 = -Math.PI / 2;
|
|
2291
2300
|
return values.map((v, i) => {
|
|
@@ -2320,7 +2329,7 @@ var PieDonutChart = import_react5.default.memo(
|
|
|
2320
2329
|
"path",
|
|
2321
2330
|
{
|
|
2322
2331
|
d: s.d,
|
|
2323
|
-
fill:
|
|
2332
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
2324
2333
|
className: "chart-slice",
|
|
2325
2334
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
2326
2335
|
onMouseMove: onMove,
|
|
@@ -2802,13 +2811,14 @@ var SingleDatePicker_default = SingleDatePicker;
|
|
|
2802
2811
|
// src/components/DatePicker/InputDatePicker/index.tsx
|
|
2803
2812
|
var import_jsx_runtime312 = require("react/jsx-runtime");
|
|
2804
2813
|
var formatDate = (date) => {
|
|
2814
|
+
if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
|
|
2805
2815
|
const y = date.getFullYear();
|
|
2806
2816
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
2807
2817
|
const d = String(date.getDate()).padStart(2, "0");
|
|
2808
2818
|
return `${y}/${m}/${d}`;
|
|
2809
2819
|
};
|
|
2810
2820
|
var InputDatePicker = (props) => {
|
|
2811
|
-
const { value, onChange, minDate, maxDate, disabled, locale } = props;
|
|
2821
|
+
const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
|
|
2812
2822
|
const [isOpen, setIsOpen] = import_react11.default.useState(false);
|
|
2813
2823
|
const containerRef = import_react11.default.useRef(null);
|
|
2814
2824
|
const calendarRef = import_react11.default.useRef(null);
|
|
@@ -2818,27 +2828,42 @@ var InputDatePicker = (props) => {
|
|
|
2818
2828
|
onChange?.(date);
|
|
2819
2829
|
setIsOpen(false);
|
|
2820
2830
|
};
|
|
2821
|
-
return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
|
|
2832
|
+
"div",
|
|
2833
|
+
{
|
|
2834
|
+
className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
|
|
2835
|
+
ref: containerRef,
|
|
2836
|
+
children: [
|
|
2837
|
+
/* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
2838
|
+
"div",
|
|
2839
|
+
{
|
|
2840
|
+
className: "input-datepicker-trigger",
|
|
2841
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
2842
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
2843
|
+
Input_default,
|
|
2844
|
+
{
|
|
2845
|
+
value: formatDate(value),
|
|
2846
|
+
placeholder,
|
|
2847
|
+
suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
|
|
2848
|
+
disabled,
|
|
2849
|
+
readOnly: true
|
|
2850
|
+
}
|
|
2851
|
+
)
|
|
2852
|
+
}
|
|
2853
|
+
),
|
|
2854
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
2855
|
+
SingleDatePicker_default,
|
|
2856
|
+
{
|
|
2857
|
+
value: value ?? /* @__PURE__ */ new Date(),
|
|
2858
|
+
onChange: handleSelect,
|
|
2859
|
+
minDate,
|
|
2860
|
+
maxDate,
|
|
2861
|
+
locale
|
|
2862
|
+
}
|
|
2863
|
+
) })
|
|
2864
|
+
]
|
|
2865
|
+
}
|
|
2866
|
+
);
|
|
2842
2867
|
};
|
|
2843
2868
|
InputDatePicker.displayName = "InputDatePicker";
|
|
2844
2869
|
var InputDatePicker_default = InputDatePicker;
|
|
@@ -5056,7 +5081,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
|
|
|
5056
5081
|
onTimeUpdate: handleTimeUpdate,
|
|
5057
5082
|
onVolumeChange: handleVolumeChange,
|
|
5058
5083
|
onRateChange: handleRateChange,
|
|
5059
|
-
onClick: togglePlay,
|
|
5084
|
+
onClick: showControls || showCenterPlay ? togglePlay : void 0,
|
|
5060
5085
|
...rest,
|
|
5061
5086
|
children
|
|
5062
5087
|
}
|
|
@@ -2244,6 +2244,7 @@
|
|
|
2244
2244
|
.lib-xplat-datepicker.range {
|
|
2245
2245
|
display: flex;
|
|
2246
2246
|
flex-direction: column;
|
|
2247
|
+
container-type: inline-size;
|
|
2247
2248
|
}
|
|
2248
2249
|
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
2249
2250
|
display: none;
|
|
@@ -2286,7 +2287,7 @@
|
|
|
2286
2287
|
color: var(--semantic-text-muted);
|
|
2287
2288
|
margin-bottom: var(--spacing-space-2);
|
|
2288
2289
|
}
|
|
2289
|
-
@
|
|
2290
|
+
@container (max-width: 600px) {
|
|
2290
2291
|
.lib-xplat-datepicker .datepicker-range-tabs {
|
|
2291
2292
|
display: flex;
|
|
2292
2293
|
}
|
|
@@ -2303,6 +2304,18 @@
|
|
|
2303
2304
|
.lib-xplat-datepicker.input-datepicker {
|
|
2304
2305
|
position: relative;
|
|
2305
2306
|
}
|
|
2307
|
+
.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
|
|
2308
|
+
cursor: pointer;
|
|
2309
|
+
}
|
|
2310
|
+
.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
|
|
2311
|
+
cursor: pointer;
|
|
2312
|
+
}
|
|
2313
|
+
.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
|
|
2314
|
+
cursor: not-allowed;
|
|
2315
|
+
}
|
|
2316
|
+
.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
|
|
2317
|
+
cursor: not-allowed;
|
|
2318
|
+
}
|
|
2306
2319
|
.lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
|
|
2307
2320
|
position: absolute;
|
|
2308
2321
|
top: 100%;
|
|
@@ -4079,6 +4092,9 @@
|
|
|
4079
4092
|
max-height: 100%;
|
|
4080
4093
|
object-fit: contain;
|
|
4081
4094
|
vertical-align: middle;
|
|
4095
|
+
}
|
|
4096
|
+
.lib-xplat-video.has-controls > video,
|
|
4097
|
+
.lib-xplat-video:has(> .center-play) > video {
|
|
4082
4098
|
cursor: pointer;
|
|
4083
4099
|
}
|
|
4084
4100
|
.lib-xplat-video > .center-play {
|
|
@@ -4241,6 +4257,9 @@
|
|
|
4241
4257
|
appearance: none;
|
|
4242
4258
|
background: transparent;
|
|
4243
4259
|
cursor: pointer;
|
|
4260
|
+
margin: 0;
|
|
4261
|
+
padding: 0;
|
|
4262
|
+
align-self: center;
|
|
4244
4263
|
}
|
|
4245
4264
|
.lib-xplat-video .seekbar:focus,
|
|
4246
4265
|
.lib-xplat-video .volume-slider:focus {
|
|
@@ -4252,6 +4271,7 @@
|
|
|
4252
4271
|
appearance: none;
|
|
4253
4272
|
width: 12px;
|
|
4254
4273
|
height: 12px;
|
|
4274
|
+
margin-top: -4px;
|
|
4255
4275
|
border-radius: 50%;
|
|
4256
4276
|
background: #fff;
|
|
4257
4277
|
border: none;
|
package/dist/components/index.js
CHANGED
|
@@ -2015,23 +2015,30 @@ var CardTab_default = CardTab;
|
|
|
2015
2015
|
// src/components/Chart/Chart.tsx
|
|
2016
2016
|
import React5 from "react";
|
|
2017
2017
|
import { jsx as jsx305, jsxs as jsxs196 } from "react/jsx-runtime";
|
|
2018
|
-
var
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
[
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
var
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2018
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
2019
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
2020
|
+
const n = i + 1;
|
|
2021
|
+
return [
|
|
2022
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
2023
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
2024
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
2025
|
+
`var(--semantic-categorical-${n}-text)`
|
|
2026
|
+
];
|
|
2027
|
+
});
|
|
2028
|
+
var PIE_COLORS = Array.from(
|
|
2029
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
2030
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
2031
|
+
);
|
|
2032
|
+
var hashString = (str) => {
|
|
2033
|
+
let hash = 0;
|
|
2034
|
+
for (let i = 0; i < str.length; i++) {
|
|
2035
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
2036
|
+
}
|
|
2037
|
+
return Math.abs(hash);
|
|
2038
|
+
};
|
|
2039
|
+
var getPalette = (palettes, index, key) => {
|
|
2040
|
+
const offset = key ? hashString(key) : 0;
|
|
2041
|
+
return palettes[(index + offset) % palettes.length];
|
|
2035
2042
|
};
|
|
2036
2043
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
2037
2044
|
var useChartTooltip = (enabled) => {
|
|
@@ -2101,8 +2108,8 @@ var LineChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2101
2108
|
return /* @__PURE__ */ jsx305("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
2102
2109
|
}),
|
|
2103
2110
|
entries.map(([key], di) => {
|
|
2104
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2105
|
-
const color = palette[
|
|
2111
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2112
|
+
const color = palette[2];
|
|
2106
2113
|
const points = seriesPoints[di];
|
|
2107
2114
|
return /* @__PURE__ */ jsxs196("g", { children: [
|
|
2108
2115
|
/* @__PURE__ */ jsx305(
|
|
@@ -2167,8 +2174,8 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2167
2174
|
}),
|
|
2168
2175
|
labels.map((label, i) => /* @__PURE__ */ jsx305("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
2169
2176
|
entries.map(([key], di) => {
|
|
2170
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
2171
|
-
const color = palette[
|
|
2177
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
2178
|
+
const color = palette[2];
|
|
2172
2179
|
return bars[di].map((b, i) => /* @__PURE__ */ jsx305(
|
|
2173
2180
|
"rect",
|
|
2174
2181
|
{
|
|
@@ -2191,13 +2198,15 @@ var BarChart = React5.memo(({ data, labels, onHover, onMove, onLeave }) => {
|
|
|
2191
2198
|
BarChart.displayName = "BarChart";
|
|
2192
2199
|
var PieDonutChart = React5.memo(
|
|
2193
2200
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
2194
|
-
const
|
|
2201
|
+
const entries = React5.useMemo(() => Object.entries(data), [data]);
|
|
2202
|
+
const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
2195
2203
|
const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
2196
2204
|
const cx = 150;
|
|
2197
2205
|
const cy = 150;
|
|
2198
2206
|
const r2 = 120;
|
|
2199
2207
|
const innerR = isDoughnut ? 60 : 0;
|
|
2200
|
-
const
|
|
2208
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
2209
|
+
const colorOffset = hashString(firstKey);
|
|
2201
2210
|
const sliceData = React5.useMemo(() => {
|
|
2202
2211
|
let angle0 = -Math.PI / 2;
|
|
2203
2212
|
return values.map((v, i) => {
|
|
@@ -2232,7 +2241,7 @@ var PieDonutChart = React5.memo(
|
|
|
2232
2241
|
"path",
|
|
2233
2242
|
{
|
|
2234
2243
|
d: s.d,
|
|
2235
|
-
fill:
|
|
2244
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
2236
2245
|
className: "chart-slice",
|
|
2237
2246
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
2238
2247
|
onMouseMove: onMove,
|
|
@@ -2714,13 +2723,14 @@ var SingleDatePicker_default = SingleDatePicker;
|
|
|
2714
2723
|
// src/components/DatePicker/InputDatePicker/index.tsx
|
|
2715
2724
|
import { jsx as jsx312, jsxs as jsxs201 } from "react/jsx-runtime";
|
|
2716
2725
|
var formatDate = (date) => {
|
|
2726
|
+
if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
|
|
2717
2727
|
const y = date.getFullYear();
|
|
2718
2728
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
2719
2729
|
const d = String(date.getDate()).padStart(2, "0");
|
|
2720
2730
|
return `${y}/${m}/${d}`;
|
|
2721
2731
|
};
|
|
2722
2732
|
var InputDatePicker = (props) => {
|
|
2723
|
-
const { value, onChange, minDate, maxDate, disabled, locale } = props;
|
|
2733
|
+
const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
|
|
2724
2734
|
const [isOpen, setIsOpen] = React10.useState(false);
|
|
2725
2735
|
const containerRef = React10.useRef(null);
|
|
2726
2736
|
const calendarRef = React10.useRef(null);
|
|
@@ -2730,27 +2740,42 @@ var InputDatePicker = (props) => {
|
|
|
2730
2740
|
onChange?.(date);
|
|
2731
2741
|
setIsOpen(false);
|
|
2732
2742
|
};
|
|
2733
|
-
return /* @__PURE__ */ jsxs201(
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2743
|
+
return /* @__PURE__ */ jsxs201(
|
|
2744
|
+
"div",
|
|
2745
|
+
{
|
|
2746
|
+
className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
|
|
2747
|
+
ref: containerRef,
|
|
2748
|
+
children: [
|
|
2749
|
+
/* @__PURE__ */ jsx312(
|
|
2750
|
+
"div",
|
|
2751
|
+
{
|
|
2752
|
+
className: "input-datepicker-trigger",
|
|
2753
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
2754
|
+
children: /* @__PURE__ */ jsx312(
|
|
2755
|
+
Input_default,
|
|
2756
|
+
{
|
|
2757
|
+
value: formatDate(value),
|
|
2758
|
+
placeholder,
|
|
2759
|
+
suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
|
|
2760
|
+
disabled,
|
|
2761
|
+
readOnly: true
|
|
2762
|
+
}
|
|
2763
|
+
)
|
|
2764
|
+
}
|
|
2765
|
+
),
|
|
2766
|
+
isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
|
|
2767
|
+
SingleDatePicker_default,
|
|
2768
|
+
{
|
|
2769
|
+
value: value ?? /* @__PURE__ */ new Date(),
|
|
2770
|
+
onChange: handleSelect,
|
|
2771
|
+
minDate,
|
|
2772
|
+
maxDate,
|
|
2773
|
+
locale
|
|
2774
|
+
}
|
|
2775
|
+
) })
|
|
2776
|
+
]
|
|
2777
|
+
}
|
|
2778
|
+
);
|
|
2754
2779
|
};
|
|
2755
2780
|
InputDatePicker.displayName = "InputDatePicker";
|
|
2756
2781
|
var InputDatePicker_default = InputDatePicker;
|
|
@@ -4968,7 +4993,7 @@ var Video = React38.forwardRef((props, ref) => {
|
|
|
4968
4993
|
onTimeUpdate: handleTimeUpdate,
|
|
4969
4994
|
onVolumeChange: handleVolumeChange,
|
|
4970
4995
|
onRateChange: handleRateChange,
|
|
4971
|
-
onClick: togglePlay,
|
|
4996
|
+
onClick: showControls || showCenterPlay ? togglePlay : void 0,
|
|
4972
4997
|
...rest,
|
|
4973
4998
|
children
|
|
4974
4999
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -6514,23 +6514,30 @@ var CardTab_default = CardTab;
|
|
|
6514
6514
|
// src/components/Chart/Chart.tsx
|
|
6515
6515
|
var import_react5 = __toESM(require("react"), 1);
|
|
6516
6516
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
6517
|
-
var
|
|
6518
|
-
|
|
6519
|
-
|
|
6520
|
-
[
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
var
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6517
|
+
var CATEGORICAL_COUNT2 = 8;
|
|
6518
|
+
var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT2 }, (_, i) => {
|
|
6519
|
+
const n = i + 1;
|
|
6520
|
+
return [
|
|
6521
|
+
`var(--semantic-categorical-${n}-bg)`,
|
|
6522
|
+
`var(--semantic-categorical-${n}-area)`,
|
|
6523
|
+
`var(--semantic-categorical-${n}-fill)`,
|
|
6524
|
+
`var(--semantic-categorical-${n}-text)`
|
|
6525
|
+
];
|
|
6526
|
+
});
|
|
6527
|
+
var PIE_COLORS = Array.from(
|
|
6528
|
+
{ length: CATEGORICAL_COUNT2 },
|
|
6529
|
+
(_, i) => `var(--semantic-categorical-${i + 1}-fill)`
|
|
6530
|
+
);
|
|
6531
|
+
var hashString = (str) => {
|
|
6532
|
+
let hash = 0;
|
|
6533
|
+
for (let i = 0; i < str.length; i++) {
|
|
6534
|
+
hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
|
|
6535
|
+
}
|
|
6536
|
+
return Math.abs(hash);
|
|
6537
|
+
};
|
|
6538
|
+
var getPalette = (palettes, index, key) => {
|
|
6539
|
+
const offset = key ? hashString(key) : 0;
|
|
6540
|
+
return palettes[(index + offset) % palettes.length];
|
|
6534
6541
|
};
|
|
6535
6542
|
var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
|
|
6536
6543
|
var useChartTooltip = (enabled) => {
|
|
@@ -6600,8 +6607,8 @@ var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onL
|
|
|
6600
6607
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
|
|
6601
6608
|
}),
|
|
6602
6609
|
entries.map(([key], di) => {
|
|
6603
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6604
|
-
const color = palette[
|
|
6610
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6611
|
+
const color = palette[2];
|
|
6605
6612
|
const points = seriesPoints[di];
|
|
6606
6613
|
return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
|
|
6607
6614
|
/* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
@@ -6666,8 +6673,8 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
6666
6673
|
}),
|
|
6667
6674
|
labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
|
|
6668
6675
|
entries.map(([key], di) => {
|
|
6669
|
-
const palette = getPalette(LINE_BAR_PALETTES, di);
|
|
6670
|
-
const color = palette[
|
|
6676
|
+
const palette = getPalette(LINE_BAR_PALETTES, di, key);
|
|
6677
|
+
const color = palette[2];
|
|
6671
6678
|
return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
|
|
6672
6679
|
"rect",
|
|
6673
6680
|
{
|
|
@@ -6690,13 +6697,15 @@ var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLe
|
|
|
6690
6697
|
BarChart.displayName = "BarChart";
|
|
6691
6698
|
var PieDonutChart = import_react5.default.memo(
|
|
6692
6699
|
({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
|
|
6693
|
-
const
|
|
6700
|
+
const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
|
|
6701
|
+
const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
|
|
6694
6702
|
const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
|
|
6695
6703
|
const cx = 150;
|
|
6696
6704
|
const cy = 150;
|
|
6697
6705
|
const r2 = 120;
|
|
6698
6706
|
const innerR = isDoughnut ? 60 : 0;
|
|
6699
|
-
const
|
|
6707
|
+
const firstKey = entries[0]?.[0] ?? "";
|
|
6708
|
+
const colorOffset = hashString(firstKey);
|
|
6700
6709
|
const sliceData = import_react5.default.useMemo(() => {
|
|
6701
6710
|
let angle0 = -Math.PI / 2;
|
|
6702
6711
|
return values.map((v, i) => {
|
|
@@ -6731,7 +6740,7 @@ var PieDonutChart = import_react5.default.memo(
|
|
|
6731
6740
|
"path",
|
|
6732
6741
|
{
|
|
6733
6742
|
d: s.d,
|
|
6734
|
-
fill:
|
|
6743
|
+
fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
|
|
6735
6744
|
className: "chart-slice",
|
|
6736
6745
|
onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
|
|
6737
6746
|
onMouseMove: onMove,
|
|
@@ -7226,13 +7235,14 @@ var SingleDatePicker_default = SingleDatePicker;
|
|
|
7226
7235
|
// src/components/DatePicker/InputDatePicker/index.tsx
|
|
7227
7236
|
var import_jsx_runtime312 = require("react/jsx-runtime");
|
|
7228
7237
|
var formatDate = (date) => {
|
|
7238
|
+
if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
|
|
7229
7239
|
const y = date.getFullYear();
|
|
7230
7240
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
7231
7241
|
const d = String(date.getDate()).padStart(2, "0");
|
|
7232
7242
|
return `${y}/${m}/${d}`;
|
|
7233
7243
|
};
|
|
7234
7244
|
var InputDatePicker = (props) => {
|
|
7235
|
-
const { value, onChange, minDate, maxDate, disabled, locale } = props;
|
|
7245
|
+
const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
|
|
7236
7246
|
const [isOpen, setIsOpen] = import_react11.default.useState(false);
|
|
7237
7247
|
const containerRef = import_react11.default.useRef(null);
|
|
7238
7248
|
const calendarRef = import_react11.default.useRef(null);
|
|
@@ -7242,27 +7252,42 @@ var InputDatePicker = (props) => {
|
|
|
7242
7252
|
onChange?.(date);
|
|
7243
7253
|
setIsOpen(false);
|
|
7244
7254
|
};
|
|
7245
|
-
return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
|
|
7246
|
-
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
|
|
7254
|
-
|
|
7255
|
-
|
|
7256
|
-
|
|
7257
|
-
|
|
7258
|
-
|
|
7259
|
-
|
|
7260
|
-
|
|
7261
|
-
|
|
7262
|
-
|
|
7263
|
-
|
|
7264
|
-
|
|
7265
|
-
|
|
7255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
|
|
7256
|
+
"div",
|
|
7257
|
+
{
|
|
7258
|
+
className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
|
|
7259
|
+
ref: containerRef,
|
|
7260
|
+
children: [
|
|
7261
|
+
/* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
7262
|
+
"div",
|
|
7263
|
+
{
|
|
7264
|
+
className: "input-datepicker-trigger",
|
|
7265
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
7266
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
7267
|
+
Input_default,
|
|
7268
|
+
{
|
|
7269
|
+
value: formatDate(value),
|
|
7270
|
+
placeholder,
|
|
7271
|
+
suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
|
|
7272
|
+
disabled,
|
|
7273
|
+
readOnly: true
|
|
7274
|
+
}
|
|
7275
|
+
)
|
|
7276
|
+
}
|
|
7277
|
+
),
|
|
7278
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
|
|
7279
|
+
SingleDatePicker_default,
|
|
7280
|
+
{
|
|
7281
|
+
value: value ?? /* @__PURE__ */ new Date(),
|
|
7282
|
+
onChange: handleSelect,
|
|
7283
|
+
minDate,
|
|
7284
|
+
maxDate,
|
|
7285
|
+
locale
|
|
7286
|
+
}
|
|
7287
|
+
) })
|
|
7288
|
+
]
|
|
7289
|
+
}
|
|
7290
|
+
);
|
|
7266
7291
|
};
|
|
7267
7292
|
InputDatePicker.displayName = "InputDatePicker";
|
|
7268
7293
|
var InputDatePicker_default = InputDatePicker;
|
|
@@ -9480,7 +9505,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
|
|
|
9480
9505
|
onTimeUpdate: handleTimeUpdate,
|
|
9481
9506
|
onVolumeChange: handleVolumeChange,
|
|
9482
9507
|
onRateChange: handleRateChange,
|
|
9483
|
-
onClick: togglePlay,
|
|
9508
|
+
onClick: showControls || showCenterPlay ? togglePlay : void 0,
|
|
9484
9509
|
...rest,
|
|
9485
9510
|
children
|
|
9486
9511
|
}
|