@x-plat/design-system 0.5.39 → 0.5.41

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.
Files changed (12) hide show
  1. package/dist/components/Chart/index.cjs +15 -35
  2. package/dist/components/Chart/index.css +48 -39
  3. package/dist/components/Chart/index.js +15 -35
  4. package/dist/components/ChatInput/index.css +1 -1
  5. package/dist/components/Table/index.css +5 -1
  6. package/dist/components/index.cjs +15 -35
  7. package/dist/components/index.css +54 -88
  8. package/dist/components/index.js +15 -35
  9. package/dist/index.cjs +15 -35
  10. package/dist/index.css +54 -88
  11. package/dist/index.js +15 -35
  12. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -80,47 +80,27 @@ var toSmoothPath = (points) => {
80
80
  }
81
81
  return d;
82
82
  };
83
- var RESIZE_SETTLE_MS = 150;
84
83
  var useChartSize = (ref) => {
85
84
  const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
86
- const settleTimer = import_react.default.useRef(0);
87
- const committedSize = import_react.default.useRef({ width: 0, height: 0 });
88
- const initialRef = import_react.default.useRef(true);
89
85
  import_react.default.useEffect(() => {
90
86
  const el = ref.current;
91
87
  if (!el) return;
88
+ let rafId = 0;
92
89
  const observer = new ResizeObserver((entries) => {
93
- const entry = entries[0];
94
- if (!entry) return;
95
- const { width, height } = entry.contentRect;
96
- const w = Math.floor(width);
97
- const h = Math.floor(height);
98
- if (w <= 0 || h <= 0) return;
99
- if (w === committedSize.current.width && h === committedSize.current.height) return;
100
- if (initialRef.current) {
101
- initialRef.current = false;
102
- committedSize.current = { width: w, height: h };
103
- setSize({ width: w, height: h });
104
- return;
105
- }
106
- const prev = committedSize.current;
107
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
108
- const svg = el.firstElementChild;
109
- svg.style.transformOrigin = "0 0";
110
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
111
- }
112
- window.clearTimeout(settleTimer.current);
113
- settleTimer.current = window.setTimeout(() => {
114
- if (el.firstElementChild) {
115
- el.firstElementChild.style.transform = "";
116
- }
117
- committedSize.current = { width: w, height: h };
118
- setSize({ width: w, height: h });
119
- }, RESIZE_SETTLE_MS);
90
+ cancelAnimationFrame(rafId);
91
+ rafId = requestAnimationFrame(() => {
92
+ const entry = entries[0];
93
+ if (!entry) return;
94
+ const { width, height } = entry.contentRect;
95
+ const w = Math.floor(width);
96
+ const h = Math.floor(height);
97
+ if (w <= 0 || h <= 0) return;
98
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
99
+ });
120
100
  });
121
101
  observer.observe(el);
122
102
  return () => {
123
- window.clearTimeout(settleTimer.current);
103
+ cancelAnimationFrame(rafId);
124
104
  observer.disconnect();
125
105
  };
126
106
  }, [ref]);
@@ -647,11 +627,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
647
627
  "div",
648
628
  {
649
629
  ref,
650
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
630
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
651
631
  style: { left: pos.left, top: pos.top },
652
632
  children: [
653
- title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "chart-tooltip-title", children: title }),
654
- desc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "chart-tooltip-desc", children: desc })
633
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-title", children: title }),
634
+ desc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-desc", children: desc })
655
635
  ]
656
636
  }
657
637
  );
package/dist/components/Chart/index.css CHANGED
@@ -1,3 +1,50 @@
1
+ /* src/components/Tooltip/tooltip.scss */
2
+ .lib-xplat-tooltip-trigger {
3
+ display: inline-flex;
4
+ }
5
+ .lib-xplat-tooltip {
6
+ z-index: 1100;
7
+ padding: var(--spacing-space-3);
8
+ border-radius: var(--spacing-radius-md);
9
+ max-width: 240px;
10
+ pointer-events: none;
11
+ animation: tooltip-show 120ms ease-out;
12
+ }
13
+ .lib-xplat-tooltip .tooltip-title {
14
+ font-size: 13px;
15
+ line-height: 18px;
16
+ font-weight: 400;
17
+ }
18
+ .lib-xplat-tooltip .tooltip-desc {
19
+ font-size: 12px;
20
+ line-height: 18px;
21
+ font-weight: 400;
22
+ }
23
+ .lib-xplat-tooltip.dark {
24
+ background-color: var(--semantic-surface-neutral-strong);
25
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
26
+ }
27
+ .lib-xplat-tooltip.dark .tooltip-title,
28
+ .lib-xplat-tooltip.dark .tooltip-desc {
29
+ color: var(--semantic-text-inverse);
30
+ }
31
+ .lib-xplat-tooltip.light {
32
+ background-color: var(--semantic-surface-neutral-default);
33
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
34
+ }
35
+ .lib-xplat-tooltip.light .tooltip-title,
36
+ .lib-xplat-tooltip.light .tooltip-desc {
37
+ color: var(--semantic-text-subtle);
38
+ }
39
+ @keyframes tooltip-show {
40
+ from {
41
+ opacity: 0;
42
+ }
43
+ to {
44
+ opacity: 1;
45
+ }
46
+ }
47
+
1
48
  /* src/components/Chart/chart.scss */
2
49
  .lib-xplat-chart {
3
50
  contain: layout style;
@@ -105,40 +152,10 @@
105
152
  .lib-xplat-chart .chart-area[style*=animationDelay] {
106
153
  animation: chart-fade-in 800ms ease-out both;
107
154
  }
108
- .lib-xplat-chart .chart-tooltip {
155
+ .lib-xplat-chart .chart-tooltip-pos {
109
156
  position: absolute;
110
157
  z-index: 10;
111
- padding: var(--spacing-space-3);
112
- border-radius: var(--spacing-radius-md);
113
- max-width: 240px;
114
158
  pointer-events: none;
115
- animation: chart-tooltip-in 120ms ease-out;
116
- }
117
- .lib-xplat-chart .chart-tooltip .chart-tooltip-title {
118
- font-size: 13px;
119
- line-height: 18px;
120
- font-weight: 400;
121
- }
122
- .lib-xplat-chart .chart-tooltip .chart-tooltip-desc {
123
- font-size: 12px;
124
- line-height: 18px;
125
- font-weight: 400;
126
- }
127
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark {
128
- background-color: var(--semantic-surface-neutral-strong);
129
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
130
- }
131
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-title,
132
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-desc {
133
- color: var(--semantic-text-inverse);
134
- }
135
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light {
136
- background-color: var(--semantic-surface-neutral-default);
137
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
138
- }
139
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-title,
140
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-desc {
141
- color: var(--semantic-text-subtle);
142
159
  }
143
160
  .lib-xplat-chart .chart-legend {
144
161
  display: flex;
@@ -188,14 +205,6 @@
188
205
  opacity: 1;
189
206
  }
190
207
  }
191
- @keyframes chart-tooltip-in {
192
- from {
193
- opacity: 0;
194
- }
195
- to {
196
- opacity: 1;
197
- }
198
- }
199
208
  @media (prefers-reduced-motion: reduce) {
200
209
  .lib-xplat-chart .chart-bar-animate,
201
210
  .lib-xplat-chart .chart-pie-label-animate,
package/dist/components/Chart/index.js CHANGED
@@ -44,47 +44,27 @@ var toSmoothPath = (points) => {
44
44
  }
45
45
  return d;
46
46
  };
47
- var RESIZE_SETTLE_MS = 150;
48
47
  var useChartSize = (ref) => {
49
48
  const [size, setSize] = React.useState({ width: 0, height: 0 });
50
- const settleTimer = React.useRef(0);
51
- const committedSize = React.useRef({ width: 0, height: 0 });
52
- const initialRef = React.useRef(true);
53
49
  React.useEffect(() => {
54
50
  const el = ref.current;
55
51
  if (!el) return;
52
+ let rafId = 0;
56
53
  const observer = new ResizeObserver((entries) => {
57
- const entry = entries[0];
58
- if (!entry) return;
59
- const { width, height } = entry.contentRect;
60
- const w = Math.floor(width);
61
- const h = Math.floor(height);
62
- if (w <= 0 || h <= 0) return;
63
- if (w === committedSize.current.width && h === committedSize.current.height) return;
64
- if (initialRef.current) {
65
- initialRef.current = false;
66
- committedSize.current = { width: w, height: h };
67
- setSize({ width: w, height: h });
68
- return;
69
- }
70
- const prev = committedSize.current;
71
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
72
- const svg = el.firstElementChild;
73
- svg.style.transformOrigin = "0 0";
74
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
75
- }
76
- window.clearTimeout(settleTimer.current);
77
- settleTimer.current = window.setTimeout(() => {
78
- if (el.firstElementChild) {
79
- el.firstElementChild.style.transform = "";
80
- }
81
- committedSize.current = { width: w, height: h };
82
- setSize({ width: w, height: h });
83
- }, RESIZE_SETTLE_MS);
54
+ cancelAnimationFrame(rafId);
55
+ rafId = requestAnimationFrame(() => {
56
+ const entry = entries[0];
57
+ if (!entry) return;
58
+ const { width, height } = entry.contentRect;
59
+ const w = Math.floor(width);
60
+ const h = Math.floor(height);
61
+ if (w <= 0 || h <= 0) return;
62
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
63
+ });
84
64
  });
85
65
  observer.observe(el);
86
66
  return () => {
87
- window.clearTimeout(settleTimer.current);
67
+ cancelAnimationFrame(rafId);
88
68
  observer.disconnect();
89
69
  };
90
70
  }, [ref]);
@@ -611,11 +591,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
611
591
  "div",
612
592
  {
613
593
  ref,
614
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
594
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
615
595
  style: { left: pos.left, top: pos.top },
616
596
  children: [
617
- title && /* @__PURE__ */ jsx("div", { className: "chart-tooltip-title", children: title }),
618
- desc && /* @__PURE__ */ jsx("div", { className: "chart-tooltip-desc", children: desc })
597
+ title && /* @__PURE__ */ jsx("div", { className: "tooltip-title", children: title }),
598
+ desc && /* @__PURE__ */ jsx("div", { className: "tooltip-desc", children: desc })
619
599
  ]
620
600
  }
621
601
  );
package/dist/components/ChatInput/index.css CHANGED
@@ -82,7 +82,7 @@
82
82
  align-items: flex-end;
83
83
  width: 100%;
84
84
  gap: var(--spacing-space-2);
85
- padding: var(--spacing-space-2);
85
+ padding: var(--spacing-space-3);
86
86
  border: 1px solid var(--semantic-border-default);
87
87
  border-radius: var(--spacing-radius-lg);
88
88
  background-color: var(--semantic-surface-neutral-default);
package/dist/components/Table/index.css CHANGED
@@ -40,6 +40,10 @@
40
40
  top: 0;
41
41
  z-index: 9;
42
42
  }
43
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr,
44
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr {
45
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
46
+ }
43
47
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
44
48
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
45
49
  border-bottom: 1px solid var(--semantic-border-default);
@@ -246,7 +250,7 @@
246
250
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th,
247
251
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
248
252
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
249
- transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
253
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
250
254
  }
251
255
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.clickable,
252
256
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th.clickable,
package/dist/components/index.cjs CHANGED
@@ -2274,47 +2274,27 @@ var toSmoothPath = (points) => {
2274
2274
  }
2275
2275
  return d;
2276
2276
  };
2277
- var RESIZE_SETTLE_MS = 150;
2278
2277
  var useChartSize = (ref) => {
2279
2278
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
2280
- const settleTimer = import_react6.default.useRef(0);
2281
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
2282
- const initialRef = import_react6.default.useRef(true);
2283
2279
  import_react6.default.useEffect(() => {
2284
2280
  const el = ref.current;
2285
2281
  if (!el) return;
2282
+ let rafId = 0;
2286
2283
  const observer = new ResizeObserver((entries) => {
2287
- const entry = entries[0];
2288
- if (!entry) return;
2289
- const { width, height } = entry.contentRect;
2290
- const w = Math.floor(width);
2291
- const h = Math.floor(height);
2292
- if (w <= 0 || h <= 0) return;
2293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2294
- if (initialRef.current) {
2295
- initialRef.current = false;
2296
- committedSize.current = { width: w, height: h };
2297
- setSize({ width: w, height: h });
2298
- return;
2299
- }
2300
- const prev = committedSize.current;
2301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2302
- const svg = el.firstElementChild;
2303
- svg.style.transformOrigin = "0 0";
2304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2305
- }
2306
- window.clearTimeout(settleTimer.current);
2307
- settleTimer.current = window.setTimeout(() => {
2308
- if (el.firstElementChild) {
2309
- el.firstElementChild.style.transform = "";
2310
- }
2311
- committedSize.current = { width: w, height: h };
2312
- setSize({ width: w, height: h });
2313
- }, RESIZE_SETTLE_MS);
2284
+ cancelAnimationFrame(rafId);
2285
+ rafId = requestAnimationFrame(() => {
2286
+ const entry = entries[0];
2287
+ if (!entry) return;
2288
+ const { width, height } = entry.contentRect;
2289
+ const w = Math.floor(width);
2290
+ const h = Math.floor(height);
2291
+ if (w <= 0 || h <= 0) return;
2292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2293
+ });
2314
2294
  });
2315
2295
  observer.observe(el);
2316
2296
  return () => {
2317
- window.clearTimeout(settleTimer.current);
2297
+ cancelAnimationFrame(rafId);
2318
2298
  observer.disconnect();
2319
2299
  };
2320
2300
  }, [ref]);
@@ -2841,11 +2821,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2841
2821
  "div",
2842
2822
  {
2843
2823
  ref,
2844
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
2824
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
2845
2825
  style: { left: pos.left, top: pos.top },
2846
2826
  children: [
2847
- title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-title", children: title }),
2848
- desc && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-desc", children: desc })
2827
+ title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "tooltip-title", children: title }),
2828
+ desc && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "tooltip-desc", children: desc })
2849
2829
  ]
2850
2830
  }
2851
2831
  );
package/dist/components/index.css CHANGED
@@ -1748,7 +1748,7 @@
1748
1748
  align-items: flex-end;
1749
1749
  width: 100%;
1750
1750
  gap: var(--spacing-space-2);
1751
- padding: var(--spacing-space-2);
1751
+ padding: var(--spacing-space-3);
1752
1752
  border: 1px solid var(--semantic-border-default);
1753
1753
  border-radius: var(--spacing-radius-lg);
1754
1754
  background-color: var(--semantic-surface-neutral-default);
@@ -1923,6 +1923,53 @@
1923
1923
  gap: var(--spacing-space-5);
1924
1924
  }
1925
1925
 
1926
+ /* src/components/Tooltip/tooltip.scss */
1927
+ .lib-xplat-tooltip-trigger {
1928
+ display: inline-flex;
1929
+ }
1930
+ .lib-xplat-tooltip {
1931
+ z-index: 1100;
1932
+ padding: var(--spacing-space-3);
1933
+ border-radius: var(--spacing-radius-md);
1934
+ max-width: 240px;
1935
+ pointer-events: none;
1936
+ animation: tooltip-show 120ms ease-out;
1937
+ }
1938
+ .lib-xplat-tooltip .tooltip-title {
1939
+ font-size: 13px;
1940
+ line-height: 18px;
1941
+ font-weight: 400;
1942
+ }
1943
+ .lib-xplat-tooltip .tooltip-desc {
1944
+ font-size: 12px;
1945
+ line-height: 18px;
1946
+ font-weight: 400;
1947
+ }
1948
+ .lib-xplat-tooltip.dark {
1949
+ background-color: var(--semantic-surface-neutral-strong);
1950
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1951
+ }
1952
+ .lib-xplat-tooltip.dark .tooltip-title,
1953
+ .lib-xplat-tooltip.dark .tooltip-desc {
1954
+ color: var(--semantic-text-inverse);
1955
+ }
1956
+ .lib-xplat-tooltip.light {
1957
+ background-color: var(--semantic-surface-neutral-default);
1958
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1959
+ }
1960
+ .lib-xplat-tooltip.light .tooltip-title,
1961
+ .lib-xplat-tooltip.light .tooltip-desc {
1962
+ color: var(--semantic-text-subtle);
1963
+ }
1964
+ @keyframes tooltip-show {
1965
+ from {
1966
+ opacity: 0;
1967
+ }
1968
+ to {
1969
+ opacity: 1;
1970
+ }
1971
+ }
1972
+
1926
1973
  /* src/components/Chart/chart.scss */
1927
1974
  .lib-xplat-chart {
1928
1975
  contain: layout style;
@@ -2030,40 +2077,10 @@
2030
2077
  .lib-xplat-chart .chart-area[style*=animationDelay] {
2031
2078
  animation: chart-fade-in 800ms ease-out both;
2032
2079
  }
2033
- .lib-xplat-chart .chart-tooltip {
2080
+ .lib-xplat-chart .chart-tooltip-pos {
2034
2081
  position: absolute;
2035
2082
  z-index: 10;
2036
- padding: var(--spacing-space-3);
2037
- border-radius: var(--spacing-radius-md);
2038
- max-width: 240px;
2039
2083
  pointer-events: none;
2040
- animation: chart-tooltip-in 120ms ease-out;
2041
- }
2042
- .lib-xplat-chart .chart-tooltip .chart-tooltip-title {
2043
- font-size: 13px;
2044
- line-height: 18px;
2045
- font-weight: 400;
2046
- }
2047
- .lib-xplat-chart .chart-tooltip .chart-tooltip-desc {
2048
- font-size: 12px;
2049
- line-height: 18px;
2050
- font-weight: 400;
2051
- }
2052
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark {
2053
- background-color: var(--semantic-surface-neutral-strong);
2054
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2055
- }
2056
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-title,
2057
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-desc {
2058
- color: var(--semantic-text-inverse);
2059
- }
2060
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light {
2061
- background-color: var(--semantic-surface-neutral-default);
2062
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
2063
- }
2064
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-title,
2065
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-desc {
2066
- color: var(--semantic-text-subtle);
2067
2084
  }
2068
2085
  .lib-xplat-chart .chart-legend {
2069
2086
  display: flex;
@@ -2113,14 +2130,6 @@
2113
2130
  opacity: 1;
2114
2131
  }
2115
2132
  }
2116
- @keyframes chart-tooltip-in {
2117
- from {
2118
- opacity: 0;
2119
- }
2120
- to {
2121
- opacity: 1;
2122
- }
2123
- }
2124
2133
  @media (prefers-reduced-motion: reduce) {
2125
2134
  .lib-xplat-chart .chart-bar-animate,
2126
2135
  .lib-xplat-chart .chart-pie-label-animate,
@@ -3951,6 +3960,10 @@
3951
3960
  top: 0;
3952
3961
  z-index: 9;
3953
3962
  }
3963
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr,
3964
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr {
3965
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
3966
+ }
3954
3967
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
3955
3968
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
3956
3969
  border-bottom: 1px solid var(--semantic-border-default);
@@ -4157,7 +4170,7 @@
4157
4170
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th,
4158
4171
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
4159
4172
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
4160
- transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
4173
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
4161
4174
  }
4162
4175
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.clickable,
4163
4176
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th.clickable,
@@ -4454,53 +4467,6 @@
4454
4467
  }
4455
4468
  }
4456
4469
 
4457
- /* src/components/Tooltip/tooltip.scss */
4458
- .lib-xplat-tooltip-trigger {
4459
- display: inline-flex;
4460
- }
4461
- .lib-xplat-tooltip {
4462
- z-index: 1100;
4463
- padding: var(--spacing-space-3);
4464
- border-radius: var(--spacing-radius-md);
4465
- max-width: 240px;
4466
- pointer-events: none;
4467
- animation: tooltip-show 120ms ease-out;
4468
- }
4469
- .lib-xplat-tooltip .tooltip-title {
4470
- font-size: 13px;
4471
- line-height: 18px;
4472
- font-weight: 400;
4473
- }
4474
- .lib-xplat-tooltip .tooltip-desc {
4475
- font-size: 12px;
4476
- line-height: 18px;
4477
- font-weight: 400;
4478
- }
4479
- .lib-xplat-tooltip.dark {
4480
- background-color: var(--semantic-surface-neutral-strong);
4481
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4482
- }
4483
- .lib-xplat-tooltip.dark .tooltip-title,
4484
- .lib-xplat-tooltip.dark .tooltip-desc {
4485
- color: var(--semantic-text-inverse);
4486
- }
4487
- .lib-xplat-tooltip.light {
4488
- background-color: var(--semantic-surface-neutral-default);
4489
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
4490
- }
4491
- .lib-xplat-tooltip.light .tooltip-title,
4492
- .lib-xplat-tooltip.light .tooltip-desc {
4493
- color: var(--semantic-text-subtle);
4494
- }
4495
- @keyframes tooltip-show {
4496
- from {
4497
- opacity: 0;
4498
- }
4499
- to {
4500
- opacity: 1;
4501
- }
4502
- }
4503
-
4504
4470
  /* src/components/Video/video.scss */
4505
4471
  .lib-xplat-video {
4506
4472
  position: relative;
package/dist/components/index.js CHANGED
@@ -2184,47 +2184,27 @@ var toSmoothPath = (points) => {
2184
2184
  }
2185
2185
  return d;
2186
2186
  };
2187
- var RESIZE_SETTLE_MS = 150;
2188
2187
  var useChartSize = (ref) => {
2189
2188
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
2190
- const settleTimer = React6.useRef(0);
2191
- const committedSize = React6.useRef({ width: 0, height: 0 });
2192
- const initialRef = React6.useRef(true);
2193
2189
  React6.useEffect(() => {
2194
2190
  const el = ref.current;
2195
2191
  if (!el) return;
2192
+ let rafId = 0;
2196
2193
  const observer = new ResizeObserver((entries) => {
2197
- const entry = entries[0];
2198
- if (!entry) return;
2199
- const { width, height } = entry.contentRect;
2200
- const w = Math.floor(width);
2201
- const h = Math.floor(height);
2202
- if (w <= 0 || h <= 0) return;
2203
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2204
- if (initialRef.current) {
2205
- initialRef.current = false;
2206
- committedSize.current = { width: w, height: h };
2207
- setSize({ width: w, height: h });
2208
- return;
2209
- }
2210
- const prev = committedSize.current;
2211
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2212
- const svg = el.firstElementChild;
2213
- svg.style.transformOrigin = "0 0";
2214
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2215
- }
2216
- window.clearTimeout(settleTimer.current);
2217
- settleTimer.current = window.setTimeout(() => {
2218
- if (el.firstElementChild) {
2219
- el.firstElementChild.style.transform = "";
2220
- }
2221
- committedSize.current = { width: w, height: h };
2222
- setSize({ width: w, height: h });
2223
- }, RESIZE_SETTLE_MS);
2194
+ cancelAnimationFrame(rafId);
2195
+ rafId = requestAnimationFrame(() => {
2196
+ const entry = entries[0];
2197
+ if (!entry) return;
2198
+ const { width, height } = entry.contentRect;
2199
+ const w = Math.floor(width);
2200
+ const h = Math.floor(height);
2201
+ if (w <= 0 || h <= 0) return;
2202
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2203
+ });
2224
2204
  });
2225
2205
  observer.observe(el);
2226
2206
  return () => {
2227
- window.clearTimeout(settleTimer.current);
2207
+ cancelAnimationFrame(rafId);
2228
2208
  observer.disconnect();
2229
2209
  };
2230
2210
  }, [ref]);
@@ -2751,11 +2731,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2751
2731
  "div",
2752
2732
  {
2753
2733
  ref,
2754
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
2734
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
2755
2735
  style: { left: pos.left, top: pos.top },
2756
2736
  children: [
2757
- title && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-title", children: title }),
2758
- desc && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-desc", children: desc })
2737
+ title && /* @__PURE__ */ jsx307("div", { className: "tooltip-title", children: title }),
2738
+ desc && /* @__PURE__ */ jsx307("div", { className: "tooltip-desc", children: desc })
2759
2739
  ]
2760
2740
  }
2761
2741
  );
package/dist/index.cjs CHANGED
@@ -6673,47 +6673,27 @@ var toSmoothPath = (points) => {
6673
6673
  }
6674
6674
  return d;
6675
6675
  };
6676
- var RESIZE_SETTLE_MS = 150;
6677
6676
  var useChartSize = (ref) => {
6678
6677
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
6679
- const settleTimer = import_react6.default.useRef(0);
6680
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
6681
- const initialRef = import_react6.default.useRef(true);
6682
6678
  import_react6.default.useEffect(() => {
6683
6679
  const el = ref.current;
6684
6680
  if (!el) return;
6681
+ let rafId = 0;
6685
6682
  const observer = new ResizeObserver((entries) => {
6686
- const entry = entries[0];
6687
- if (!entry) return;
6688
- const { width, height } = entry.contentRect;
6689
- const w = Math.floor(width);
6690
- const h = Math.floor(height);
6691
- if (w <= 0 || h <= 0) return;
6692
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6693
- if (initialRef.current) {
6694
- initialRef.current = false;
6695
- committedSize.current = { width: w, height: h };
6696
- setSize({ width: w, height: h });
6697
- return;
6698
- }
6699
- const prev = committedSize.current;
6700
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6701
- const svg = el.firstElementChild;
6702
- svg.style.transformOrigin = "0 0";
6703
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6704
- }
6705
- window.clearTimeout(settleTimer.current);
6706
- settleTimer.current = window.setTimeout(() => {
6707
- if (el.firstElementChild) {
6708
- el.firstElementChild.style.transform = "";
6709
- }
6710
- committedSize.current = { width: w, height: h };
6711
- setSize({ width: w, height: h });
6712
- }, RESIZE_SETTLE_MS);
6683
+ cancelAnimationFrame(rafId);
6684
+ rafId = requestAnimationFrame(() => {
6685
+ const entry = entries[0];
6686
+ if (!entry) return;
6687
+ const { width, height } = entry.contentRect;
6688
+ const w = Math.floor(width);
6689
+ const h = Math.floor(height);
6690
+ if (w <= 0 || h <= 0) return;
6691
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6692
+ });
6713
6693
  });
6714
6694
  observer.observe(el);
6715
6695
  return () => {
6716
- window.clearTimeout(settleTimer.current);
6696
+ cancelAnimationFrame(rafId);
6717
6697
  observer.disconnect();
6718
6698
  };
6719
6699
  }, [ref]);
@@ -7240,11 +7220,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
7240
7220
  "div",
7241
7221
  {
7242
7222
  ref,
7243
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
7223
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
7244
7224
  style: { left: pos.left, top: pos.top },
7245
7225
  children: [
7246
- title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-title", children: title }),
7247
- desc && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-desc", children: desc })
7226
+ title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "tooltip-title", children: title }),
7227
+ desc && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "tooltip-desc", children: desc })
7248
7228
  ]
7249
7229
  }
7250
7230
  );
package/dist/index.css CHANGED
@@ -1748,7 +1748,7 @@
1748
1748
  align-items: flex-end;
1749
1749
  width: 100%;
1750
1750
  gap: var(--spacing-space-2);
1751
- padding: var(--spacing-space-2);
1751
+ padding: var(--spacing-space-3);
1752
1752
  border: 1px solid var(--semantic-border-default);
1753
1753
  border-radius: var(--spacing-radius-lg);
1754
1754
  background-color: var(--semantic-surface-neutral-default);
@@ -1923,6 +1923,53 @@
1923
1923
  gap: var(--spacing-space-5);
1924
1924
  }
1925
1925
 
1926
+ /* src/components/Tooltip/tooltip.scss */
1927
+ .lib-xplat-tooltip-trigger {
1928
+ display: inline-flex;
1929
+ }
1930
+ .lib-xplat-tooltip {
1931
+ z-index: 1100;
1932
+ padding: var(--spacing-space-3);
1933
+ border-radius: var(--spacing-radius-md);
1934
+ max-width: 240px;
1935
+ pointer-events: none;
1936
+ animation: tooltip-show 120ms ease-out;
1937
+ }
1938
+ .lib-xplat-tooltip .tooltip-title {
1939
+ font-size: 13px;
1940
+ line-height: 18px;
1941
+ font-weight: 400;
1942
+ }
1943
+ .lib-xplat-tooltip .tooltip-desc {
1944
+ font-size: 12px;
1945
+ line-height: 18px;
1946
+ font-weight: 400;
1947
+ }
1948
+ .lib-xplat-tooltip.dark {
1949
+ background-color: var(--semantic-surface-neutral-strong);
1950
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1951
+ }
1952
+ .lib-xplat-tooltip.dark .tooltip-title,
1953
+ .lib-xplat-tooltip.dark .tooltip-desc {
1954
+ color: var(--semantic-text-inverse);
1955
+ }
1956
+ .lib-xplat-tooltip.light {
1957
+ background-color: var(--semantic-surface-neutral-default);
1958
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1959
+ }
1960
+ .lib-xplat-tooltip.light .tooltip-title,
1961
+ .lib-xplat-tooltip.light .tooltip-desc {
1962
+ color: var(--semantic-text-subtle);
1963
+ }
1964
+ @keyframes tooltip-show {
1965
+ from {
1966
+ opacity: 0;
1967
+ }
1968
+ to {
1969
+ opacity: 1;
1970
+ }
1971
+ }
1972
+
1926
1973
  /* src/components/Chart/chart.scss */
1927
1974
  .lib-xplat-chart {
1928
1975
  contain: layout style;
@@ -2030,40 +2077,10 @@
2030
2077
  .lib-xplat-chart .chart-area[style*=animationDelay] {
2031
2078
  animation: chart-fade-in 800ms ease-out both;
2032
2079
  }
2033
- .lib-xplat-chart .chart-tooltip {
2080
+ .lib-xplat-chart .chart-tooltip-pos {
2034
2081
  position: absolute;
2035
2082
  z-index: 10;
2036
- padding: var(--spacing-space-3);
2037
- border-radius: var(--spacing-radius-md);
2038
- max-width: 240px;
2039
2083
  pointer-events: none;
2040
- animation: chart-tooltip-in 120ms ease-out;
2041
- }
2042
- .lib-xplat-chart .chart-tooltip .chart-tooltip-title {
2043
- font-size: 13px;
2044
- line-height: 18px;
2045
- font-weight: 400;
2046
- }
2047
- .lib-xplat-chart .chart-tooltip .chart-tooltip-desc {
2048
- font-size: 12px;
2049
- line-height: 18px;
2050
- font-weight: 400;
2051
- }
2052
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark {
2053
- background-color: var(--semantic-surface-neutral-strong);
2054
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2055
- }
2056
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-title,
2057
- .lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-desc {
2058
- color: var(--semantic-text-inverse);
2059
- }
2060
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light {
2061
- background-color: var(--semantic-surface-neutral-default);
2062
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
2063
- }
2064
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-title,
2065
- .lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-desc {
2066
- color: var(--semantic-text-subtle);
2067
2084
  }
2068
2085
  .lib-xplat-chart .chart-legend {
2069
2086
  display: flex;
@@ -2113,14 +2130,6 @@
2113
2130
  opacity: 1;
2114
2131
  }
2115
2132
  }
2116
- @keyframes chart-tooltip-in {
2117
- from {
2118
- opacity: 0;
2119
- }
2120
- to {
2121
- opacity: 1;
2122
- }
2123
- }
2124
2133
  @media (prefers-reduced-motion: reduce) {
2125
2134
  .lib-xplat-chart .chart-bar-animate,
2126
2135
  .lib-xplat-chart .chart-pie-label-animate,
@@ -3951,6 +3960,10 @@
3951
3960
  top: 0;
3952
3961
  z-index: 9;
3953
3962
  }
3963
+ .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr,
3964
+ .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr {
3965
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
3966
+ }
3954
3967
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
3955
3968
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
3956
3969
  border-bottom: 1px solid var(--semantic-border-default);
@@ -4157,7 +4170,7 @@
4157
4170
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th,
4158
4171
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
4159
4172
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
4160
- transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
4173
+ transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
4161
4174
  }
4162
4175
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.clickable,
4163
4176
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th.clickable,
@@ -4454,53 +4467,6 @@
4454
4467
  }
4455
4468
  }
4456
4469
 
4457
- /* src/components/Tooltip/tooltip.scss */
4458
- .lib-xplat-tooltip-trigger {
4459
- display: inline-flex;
4460
- }
4461
- .lib-xplat-tooltip {
4462
- z-index: 1100;
4463
- padding: var(--spacing-space-3);
4464
- border-radius: var(--spacing-radius-md);
4465
- max-width: 240px;
4466
- pointer-events: none;
4467
- animation: tooltip-show 120ms ease-out;
4468
- }
4469
- .lib-xplat-tooltip .tooltip-title {
4470
- font-size: 13px;
4471
- line-height: 18px;
4472
- font-weight: 400;
4473
- }
4474
- .lib-xplat-tooltip .tooltip-desc {
4475
- font-size: 12px;
4476
- line-height: 18px;
4477
- font-weight: 400;
4478
- }
4479
- .lib-xplat-tooltip.dark {
4480
- background-color: var(--semantic-surface-neutral-strong);
4481
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4482
- }
4483
- .lib-xplat-tooltip.dark .tooltip-title,
4484
- .lib-xplat-tooltip.dark .tooltip-desc {
4485
- color: var(--semantic-text-inverse);
4486
- }
4487
- .lib-xplat-tooltip.light {
4488
- background-color: var(--semantic-surface-neutral-default);
4489
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
4490
- }
4491
- .lib-xplat-tooltip.light .tooltip-title,
4492
- .lib-xplat-tooltip.light .tooltip-desc {
4493
- color: var(--semantic-text-subtle);
4494
- }
4495
- @keyframes tooltip-show {
4496
- from {
4497
- opacity: 0;
4498
- }
4499
- to {
4500
- opacity: 1;
4501
- }
4502
- }
4503
-
4504
4470
  /* src/components/Video/video.scss */
4505
4471
  .lib-xplat-video {
4506
4472
  position: relative;
package/dist/index.js CHANGED
@@ -6274,47 +6274,27 @@ var toSmoothPath = (points) => {
6274
6274
  }
6275
6275
  return d;
6276
6276
  };
6277
- var RESIZE_SETTLE_MS = 150;
6278
6277
  var useChartSize = (ref) => {
6279
6278
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
6280
- const settleTimer = React6.useRef(0);
6281
- const committedSize = React6.useRef({ width: 0, height: 0 });
6282
- const initialRef = React6.useRef(true);
6283
6279
  React6.useEffect(() => {
6284
6280
  const el = ref.current;
6285
6281
  if (!el) return;
6282
+ let rafId = 0;
6286
6283
  const observer = new ResizeObserver((entries) => {
6287
- const entry = entries[0];
6288
- if (!entry) return;
6289
- const { width, height } = entry.contentRect;
6290
- const w = Math.floor(width);
6291
- const h = Math.floor(height);
6292
- if (w <= 0 || h <= 0) return;
6293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6294
- if (initialRef.current) {
6295
- initialRef.current = false;
6296
- committedSize.current = { width: w, height: h };
6297
- setSize({ width: w, height: h });
6298
- return;
6299
- }
6300
- const prev = committedSize.current;
6301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6302
- const svg = el.firstElementChild;
6303
- svg.style.transformOrigin = "0 0";
6304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6305
- }
6306
- window.clearTimeout(settleTimer.current);
6307
- settleTimer.current = window.setTimeout(() => {
6308
- if (el.firstElementChild) {
6309
- el.firstElementChild.style.transform = "";
6310
- }
6311
- committedSize.current = { width: w, height: h };
6312
- setSize({ width: w, height: h });
6313
- }, RESIZE_SETTLE_MS);
6284
+ cancelAnimationFrame(rafId);
6285
+ rafId = requestAnimationFrame(() => {
6286
+ const entry = entries[0];
6287
+ if (!entry) return;
6288
+ const { width, height } = entry.contentRect;
6289
+ const w = Math.floor(width);
6290
+ const h = Math.floor(height);
6291
+ if (w <= 0 || h <= 0) return;
6292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6293
+ });
6314
6294
  });
6315
6295
  observer.observe(el);
6316
6296
  return () => {
6317
- window.clearTimeout(settleTimer.current);
6297
+ cancelAnimationFrame(rafId);
6318
6298
  observer.disconnect();
6319
6299
  };
6320
6300
  }, [ref]);
@@ -6841,11 +6821,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
6841
6821
  "div",
6842
6822
  {
6843
6823
  ref,
6844
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
6824
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
6845
6825
  style: { left: pos.left, top: pos.top },
6846
6826
  children: [
6847
- title && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-title", children: title }),
6848
- desc && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-desc", children: desc })
6827
+ title && /* @__PURE__ */ jsx307("div", { className: "tooltip-title", children: title }),
6828
+ desc && /* @__PURE__ */ jsx307("div", { className: "tooltip-desc", children: desc })
6849
6829
  ]
6850
6830
  }
6851
6831
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.39",
3
+ "version": "0.5.41",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",