@x-plat/design-system 0.4.6 → 0.5.0

package/dist/components/Chart/index.css

@@ -1,4 +1,61 @@
 /* src/components/Chart/chart.scss */
 .lib-xplat-chart {
   width: 100%;
+  position: relative;
+}
+.lib-xplat-chart .chart-svg {
+  width: 100%;
+  height: auto;
+}
+.lib-xplat-chart .chart-grid {
+  stroke: var(--semantic-border-subtle);
+  stroke-width: 1;
+}
+.lib-xplat-chart .chart-axis-label {
+  font-size: 10px;
+  fill: var(--semantic-text-muted);
+}
+.lib-xplat-chart .chart-pie-label {
+  font-size: 12px;
+  font-weight: 600;
+  fill: var(--semantic-text-inverse);
+  pointer-events: none;
+}
+.lib-xplat-chart .chart-pie {
+  max-width: 300px;
+  margin: 0 auto;
+}
+.lib-xplat-chart .chart-point {
+  cursor: pointer;
+  transition: r 0.15s;
+}
+.lib-xplat-chart .chart-point:hover {
+  r: 6;
+}
+.lib-xplat-chart .chart-bar {
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.lib-xplat-chart .chart-bar:hover {
+  opacity: 0.8;
+}
+.lib-xplat-chart .chart-slice {
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.lib-xplat-chart .chart-slice:hover {
+  opacity: 0.85;
+}
+.lib-xplat-chart .chart-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  background-color: var(--semantic-surface-neutral-strong);
+  color: var(--semantic-text-inverse);
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: var(--spacing-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
 }

package/dist/components/Chart/index.d.cts

@@ -1,10 +1,11 @@
 import React from 'react';
 
-interface BasicChartProps {
+interface ChartProps {
     type: "line" | "bar" | "pie" | "doughnut";
     data: Record<string, number[]>;
     labels: string[];
+    tooltip?: boolean;
 }
-declare const Chart: React.FC<BasicChartProps>;
+declare const Chart: React.FC<ChartProps>;
 
 export { Chart };

package/dist/components/Chart/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 
-interface BasicChartProps {
+interface ChartProps {
     type: "line" | "bar" | "pie" | "doughnut";
     data: Record<string, number[]>;
     labels: string[];
+    tooltip?: boolean;
 }
-declare const Chart: React.FC<BasicChartProps>;
+declare const Chart: React.FC<ChartProps>;
 
 export { Chart };