@x-plat/design-system 0.5.40 → 0.5.42

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 (13) hide show
  1. package/dist/components/Chart/index.cjs +4 -4
  2. package/dist/components/Chart/index.css +48 -39
  3. package/dist/components/Chart/index.js +4 -4
  4. package/dist/components/ChatInput/index.css +1 -1
  5. package/dist/components/Table/index.css +5 -1
  6. package/dist/components/Tooltip/index.css +1 -1
  7. package/dist/components/index.cjs +4 -4
  8. package/dist/components/index.css +54 -88
  9. package/dist/components/index.js +4 -4
  10. package/dist/index.cjs +4 -4
  11. package/dist/index.css +54 -88
  12. package/dist/index.js +4 -4
  13. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -627,11 +627,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
627
627
  "div",
628
628
  {
629
629
  ref,
630
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
630
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
631
631
  style: { left: pos.left, top: pos.top },
632
632
  children: [
633
- title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "chart-tooltip-title", children: title }),
634
- 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 })
635
635
  ]
636
636
  }
637
637
  );
@@ -675,7 +675,7 @@ var ChartLegend = ({ data, labels, type }) => {
675
675
  }) });
676
676
  };
677
677
  var Chart = import_react.default.memo((props) => {
678
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
678
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
679
679
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
680
680
  const { width, height } = useChartSize(containerRef);
681
681
  const stableData = import_react.default.useMemo(() => data, [JSON.stringify(data)]);
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-subtle);
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
@@ -591,11 +591,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
591
591
  "div",
592
592
  {
593
593
  ref,
594
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
594
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
595
595
  style: { left: pos.left, top: pos.top },
596
596
  children: [
597
- title && /* @__PURE__ */ jsx("div", { className: "chart-tooltip-title", children: title }),
598
- 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 })
599
599
  ]
600
600
  }
601
601
  );
@@ -639,7 +639,7 @@ var ChartLegend = ({ data, labels, type }) => {
639
639
  }) });
640
640
  };
641
641
  var Chart = React.memo((props) => {
642
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
642
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
643
643
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
644
644
  const { width, height } = useChartSize(containerRef);
645
645
  const stableData = React.useMemo(() => data, [JSON.stringify(data)]);
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/Tooltip/index.css CHANGED
@@ -26,7 +26,7 @@
26
26
  }
27
27
  .lib-xplat-tooltip.dark .tooltip-title,
28
28
  .lib-xplat-tooltip.dark .tooltip-desc {
29
- color: var(--semantic-text-inverse);
29
+ color: var(--semantic-text-subtle);
30
30
  }
31
31
  .lib-xplat-tooltip.light {
32
32
  background-color: var(--semantic-surface-neutral-default);
package/dist/components/index.cjs CHANGED
@@ -2821,11 +2821,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2821
2821
  "div",
2822
2822
  {
2823
2823
  ref,
2824
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
2824
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
2825
2825
  style: { left: pos.left, top: pos.top },
2826
2826
  children: [
2827
- title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-title", children: title }),
2828
- 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 })
2829
2829
  ]
2830
2830
  }
2831
2831
  );
@@ -2869,7 +2869,7 @@ var ChartLegend = ({ data, labels, type }) => {
2869
2869
  }) });
2870
2870
  };
2871
2871
  var Chart = import_react6.default.memo((props) => {
2872
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
2872
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
2873
2873
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
2874
2874
  const { width, height } = useChartSize(containerRef);
2875
2875
  const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
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-subtle);
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
@@ -2731,11 +2731,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2731
2731
  "div",
2732
2732
  {
2733
2733
  ref,
2734
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
2734
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
2735
2735
  style: { left: pos.left, top: pos.top },
2736
2736
  children: [
2737
- title && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-title", children: title }),
2738
- 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 })
2739
2739
  ]
2740
2740
  }
2741
2741
  );
@@ -2779,7 +2779,7 @@ var ChartLegend = ({ data, labels, type }) => {
2779
2779
  }) });
2780
2780
  };
2781
2781
  var Chart = React6.memo((props) => {
2782
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
2782
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
2783
2783
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
2784
2784
  const { width, height } = useChartSize(containerRef);
2785
2785
  const stableData = React6.useMemo(() => data, [JSON.stringify(data)]);
package/dist/index.cjs CHANGED
@@ -7220,11 +7220,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
7220
7220
  "div",
7221
7221
  {
7222
7222
  ref,
7223
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
7223
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
7224
7224
  style: { left: pos.left, top: pos.top },
7225
7225
  children: [
7226
- title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-title", children: title }),
7227
- 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 })
7228
7228
  ]
7229
7229
  }
7230
7230
  );
@@ -7268,7 +7268,7 @@ var ChartLegend = ({ data, labels, type }) => {
7268
7268
  }) });
7269
7269
  };
7270
7270
  var Chart = import_react6.default.memo((props) => {
7271
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
7271
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
7272
7272
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
7273
7273
  const { width, height } = useChartSize(containerRef);
7274
7274
  const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
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-subtle);
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
@@ -6821,11 +6821,11 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
6821
6821
  "div",
6822
6822
  {
6823
6823
  ref,
6824
- className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
6824
+ className: `lib-xplat-tooltip ${tooltipType} chart-tooltip-pos`,
6825
6825
  style: { left: pos.left, top: pos.top },
6826
6826
  children: [
6827
- title && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-title", children: title }),
6828
- 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 })
6829
6829
  ]
6830
6830
  }
6831
6831
  );
@@ -6869,7 +6869,7 @@ var ChartLegend = ({ data, labels, type }) => {
6869
6869
  }) });
6870
6870
  };
6871
6871
  var Chart = React6.memo((props) => {
6872
- const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
6872
+ const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
6873
6873
  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
6874
6874
  const { width, height } = useChartSize(containerRef);
6875
6875
  const stableData = React6.useMemo(() => data, [JSON.stringify(data)]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.40",
3
+ "version": "0.5.42",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",