@flytedan/flytebot-design-system 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -3462,6 +3462,308 @@
   transition: width var(--dur-base) var(--ease);
 }
 
+/* --- charts (MP-210): TrendChart, DonutChart, BarList, FunnelChart -------- */
+/* Colour comes only from --chart-1..8 (tokens.css), which are declared once in :root
+   and never redefined under [data-theme="dark"] or [data-contrast="high"] — so every
+   fill/stroke below is already correct in all three without a single override rule
+   here. Only the theme-aware tokens (--text, --text-2, --text-muted, --border,
+   --surface-3) carry axes, gridlines and labels, which DO need to shift per theme. */
+.fd-chart-legend {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+}
+.fd-chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: none;
+  background: none;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  border-radius: var(--r-sm);
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+  cursor: pointer;
+  transition: opacity var(--dur-base) var(--ease), background var(--dur-fast) var(--ease);
+}
+.fd-chart-legend-item:hover {
+  background: var(--surface-2);
+}
+.fd-chart-legend-item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.fd-chart-legend-item.is-dim {
+  opacity: 0.45;
+}
+.fd-chart-legend-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  flex: none;
+}
+.fd-chart-legend-label {
+  white-space: nowrap;
+}
+
+/* TrendChart */
+.fd-trend {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+.fd-trend-plot {
+  width: 100%;
+}
+.fd-trend-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.fd-trend-grid {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+.fd-trend-axis {
+  stroke: var(--border-strong);
+  stroke-width: 1;
+}
+.fd-trend-axis-label {
+  fill: var(--text-muted);
+  font-size: 10.5px;
+  font-family: var(--font-sans);
+}
+.fd-trend-line {
+  transition: opacity var(--dur-base) var(--ease);
+  vector-effect: non-scaling-stroke;
+}
+.fd-trend-dot {
+  cursor: pointer;
+  transition: r var(--dur-fast) var(--ease);
+}
+.fd-trend-dot:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
+}
+.fd-trend-tip text {
+  fill: var(--text);
+  font-size: 11px;
+  font-weight: var(--w-medium);
+  paint-order: stroke;
+  stroke: var(--surface);
+  stroke-width: 3px;
+}
+.fd-trend-skel {
+  width: 100%;
+}
+
+/* DonutChart */
+.fd-donut {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.fd-donut-body {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.fd-donut-ring {
+  position: relative;
+  flex: none;
+}
+.fd-donut-ring svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.fd-donut-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+}
+.fd-donut-center-big {
+  font-size: var(--h3-size);
+  font-weight: var(--w-semibold);
+  color: var(--text);
+  line-height: 1.1;
+}
+.fd-donut-center-small {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.fd-donut-legend {
+  flex: 1;
+  min-width: 160px;
+  margin-top: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* BarList */
+.fd-barlist-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+/* Tooltip's own trigger wrapper is an inline-flex span sized to its content (so an icon
+   trigger elsewhere in the kit hugs the icon) — here the trigger IS the whole row, so it
+   has to fill the row's width instead of shrink-wrapping it, or every column past the
+   label collapses to min-content. */
+.fd-barlist-row .fd-tooltip-anchor {
+  display: block;
+  width: 100%;
+}
+.fd-barlist-btn {
+  display: grid;
+  grid-template-columns: minmax(64px, 0.9fr) 3fr auto auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 6px 4px;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+.fd-barlist-btn:hover {
+  background: var(--surface-2);
+}
+.fd-barlist-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.fd-barlist-label {
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.fd-barlist-track {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.fd-barlist-track svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.fd-barlist-rail {
+  fill: var(--surface-3);
+}
+.fd-barlist-value {
+  font-size: var(--body-sm-size);
+  color: var(--text);
+  white-space: nowrap;
+}
+.fd-barlist-pct {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  min-width: 34px;
+  text-align: right;
+}
+@media (max-width: 480px) {
+  .fd-barlist-btn {
+    grid-template-columns: minmax(52px, 0.8fr) 2fr auto auto;
+    gap: 6px;
+  }
+  .fd-barlist-pct {
+    display: none;
+  }
+}
+
+/* FunnelChart */
+.fd-funnel-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* See the identical rule on .fd-barlist-row: Tooltip's trigger wrapper shrink-wraps its
+   content by default, but here the trigger is the whole step row. */
+.fd-funnel-row .fd-tooltip-anchor {
+  display: block;
+  width: 100%;
+}
+.fd-funnel-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 4px;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.fd-funnel-btn:hover {
+  background: var(--surface-2);
+}
+.fd-funnel-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.fd-funnel-shape-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.fd-funnel-shape {
+  display: block;
+  height: 100%;
+  transition: width var(--dur-base) var(--ease);
+}
+.fd-funnel-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: var(--body-sm-size);
+}
+.fd-funnel-label {
+  font-weight: var(--w-medium);
+  color: var(--text);
+}
+.fd-funnel-value {
+  color: var(--text-2);
+}
+.fd-funnel-rates {
+  display: flex;
+  gap: 10px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
 /* --- code + diff --------------------------------------------------------- */
 .fd-code {
   border: 1px solid var(--chat-code-border);