@robr0/design-system 0.11.0 → 0.13.0

package/components/Chart/StackedBarChart.js

@@ -4,8 +4,7 @@ import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Ba
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function StackedTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -27,10 +26,11 @@ const StackedBarChart = ({
   summaryItems,
   height = 350,
   yAxisFormatter,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");

package/components/Chart/Treemap.d.ts

@@ -23,6 +23,8 @@ export interface TreemapProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -30,4 +32,4 @@ export interface TreemapProps {
  * Treemap chart built on Recharts with design-system tokens.
  * Displays hierarchical data as nested coloured rectangles sized by value.
  */
-export declare const Treemap: ({ data, dataKey, title, subtitle, summaryItems, height, className, }: TreemapProps) => import("react").JSX.Element;
+export declare const Treemap: ({ data, dataKey, title, subtitle, summaryItems, height, bare, className, }: TreemapProps) => import("react").JSX.Element;

package/components/Chart/Treemap.js

@@ -4,8 +4,7 @@ import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function TreemapContent(props) {
   const { x, y, width, height, name, index, color } = props;
@@ -58,10 +57,11 @@ const Treemap = ({
   subtitle,
   summaryItems,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(TreemapTooltip, { ...props }),

package/components/Chart/palette.js

@@ -8,10 +8,8 @@ const SERIES_FALLBACKS = [
   "#1E47B0"
 ];
 function getChartSeriesColors() {
-  if (typeof window === "undefined") return SERIES_FALLBACKS;
-  const style = getComputedStyle(document.documentElement);
   return SERIES_FALLBACKS.map(
-    (fallback, i) => style.getPropertyValue(`--color-chart-series-${i + 1}`).trim() || fallback
+    (fallback, i) => `var(--color-chart-series-${i + 1}, ${fallback})`
   );
 }
 export {

package/components/FilterBar/FilterBar.css

@@ -0,0 +1,202 @@
+/* ============================================
+   FILTER BAR COMPONENT
+   A row of filter chips, each opening a
+   popover listbox. The chips share Chip's pill
+   language; active state uses the teal fill
+   convention from Chip's selected state.
+   ============================================ */
+
+/* Base */
+
+.ds-filter-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+}
+
+.ds-filter-bar__filter {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Chip shell — the pill holding the trigger and the clear button */
+
+.ds-filter-bar__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-sm-md);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-page-primary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar--compact .ds-filter-bar__chip {
+  gap: var(--gap-xs);
+  padding: var(--padding-xxxs) var(--padding-sm);
+}
+
+.ds-filter-bar__chip:hover:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__chip--open:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* Active — teal fill, matching Chip's selected convention */
+
+.ds-filter-bar__chip--active {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-filter-bar__chip--active:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* Trigger + clear share the shell's typography and colour */
+
+.ds-filter-bar__trigger,
+.ds-filter-bar__chip-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ds-filter-bar__trigger:focus-visible,
+.ds-filter-bar__chip-clear:focus-visible,
+.ds-filter-bar__clear-all:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: var(--gap-xxs);
+  border-radius: var(--radius-full);
+}
+
+.ds-filter-bar__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+.ds-filter-bar__caret {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__chip--open .ds-filter-bar__caret {
+  transform: rotate(180deg);
+}
+
+.ds-filter-bar__chip-clear {
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+}
+
+.ds-filter-bar__chip-clear .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+/* Popover listbox */
+
+.ds-filter-bar__panel {
+  position: absolute;
+  top: calc(100% + var(--gap-xxs));
+  left: 0;
+  z-index: 10;
+  min-width: 100%;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--padding-xxs);
+  list-style: none;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-filter-bar__option {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  padding: var(--padding-xs) var(--padding-sm);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__option:hover,
+.ds-filter-bar__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__option--selected {
+  color: var(--color-text-primary);
+}
+
+.ds-filter-bar__option-check {
+  flex-shrink: 0;
+  width: var(--icon-size-sm);
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-action-primary-bg);
+}
+
+/* Clear all */
+
+.ds-filter-bar__clear-all {
+  margin: 0;
+  padding: var(--padding-xs) var(--padding-sm);
+  border: none;
+  background: none;
+  border-radius: var(--radius-full);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__clear-all:hover {
+  color: var(--color-text-primary);
+}
+
+/* Icons take the colour of the text around them (see Chip.css for why
+   this is explicit rather than inherited). */
+.ds-filter-bar .material-symbols-rounded {
+  color: inherit;
+}

package/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** One choice inside a filter's popover. */
+export interface FilterBarOption {
+    /** Stored value, reported through `onValuesChange`. */
+    value: string;
+    /** Display label. */
+    label: string;
+}
+/** One filter: a chip on the bar with a popover of options behind it. */
+export interface FilterBarFilter {
+    /** Stable key for this filter — the key under which its values are reported. */
+    id: string;
+    /** Chip label, e.g. "Status". */
+    label: string;
+    /** Material Symbol icon name shown before the label. */
+    icon?: string;
+    /** The choices this filter offers. */
+    options: FilterBarOption[];
+    /** Whether several options can be active at once. Single-select closes on choice. */
+    multiple?: boolean;
+}
+/** Props owned by FilterBar itself — everything else falls through to the root div. */
+type FilterBarOwnProps = {
+    /** The filters on the bar, in display order. */
+    filters: FilterBarFilter[];
+    /** Active options per filter id (controlled). Pair with `onValuesChange`. */
+    values?: Record<string, string[]>;
+    /** Active options per filter id (uncontrolled initial state). */
+    defaultValues?: Record<string, string[]>;
+    /**
+     * Fires with the full active-filter map on every change. Filters with
+     * nothing active are absent from the map, so an empty object means
+     * unfiltered.
+     */
+    onValuesChange?: (values: Record<string, string[]>) => void;
+    /** Label for the button that clears every filter at once. */
+    clearLabel?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FilterBarProps extends FilterBarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FilterBarOwnProps | 'children'> {
+}
+/**
+ * FilterBar — a row of filter chips for narrowing a collection: each chip
+ * opens a popover of options, active filters show their choice and grow a
+ * clear button, and a clear-all appears once anything is active. State is one
+ * map of filter id to active values, controlled or uncontrolled, so wiring it
+ * to a DataTable is a single callback. Popovers are real listboxes: arrow
+ * keys move, Enter and Space toggle, Escape closes, focus never leaves the
+ * chip.
+ */
+export declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/FilterBar/FilterBar.js

@@ -0,0 +1,249 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useCallback, useEffect } from "react";
+import "./FilterBar.css";
+import "../../fonts/material-symbols.css";
+const FilterBar = React.forwardRef(
+  ({
+    filters,
+    values,
+    defaultValues,
+    onValuesChange,
+    clearLabel = "Clear all",
+    size = "default",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-filter-bar";
+    const generatedId = useId();
+    const [uncontrolledValues, setUncontrolledValues] = useState(
+      defaultValues ?? {}
+    );
+    const [openId, setOpenId] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const filterRefs = useRef(/* @__PURE__ */ new Map());
+    const activeValues = values ?? uncontrolledValues;
+    const applyValues = (next) => {
+      if (values === void 0) setUncontrolledValues(next);
+      onValuesChange?.(next);
+    };
+    const closePopover = useCallback(() => {
+      setOpenId(null);
+      setFocusedIndex(-1);
+    }, []);
+    useEffect(() => {
+      if (!openId) return;
+      const handler = (e) => {
+        const node = filterRefs.current.get(openId);
+        if (node && !node.contains(e.target)) closePopover();
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [openId, closePopover]);
+    const toggleOption = (filter, optionValue) => {
+      const current = activeValues[filter.id] ?? [];
+      let nextForFilter;
+      if (filter.multiple === false) {
+        nextForFilter = current[0] === optionValue ? [] : [optionValue];
+      } else {
+        nextForFilter = current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue];
+      }
+      const next = { ...activeValues };
+      if (nextForFilter.length > 0) next[filter.id] = nextForFilter;
+      else delete next[filter.id];
+      applyValues(next);
+      if (filter.multiple === false) closePopover();
+    };
+    const clearFilter = (filterId) => {
+      const next = { ...activeValues };
+      delete next[filterId];
+      applyValues(next);
+      if (openId === filterId) closePopover();
+    };
+    const handleTriggerClick = (filter) => {
+      setFocusedIndex(-1);
+      setOpenId((current) => current === filter.id ? null : filter.id);
+    };
+    const handleTriggerKeyDown = (e, filter) => {
+      const isOpen = openId === filter.id;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!isOpen) {
+            setOpenId(filter.id);
+            setFocusedIndex(0);
+          } else if (focusedIndex >= 0) {
+            toggleOption(filter, filter.options[focusedIndex].value);
+          } else {
+            closePopover();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setOpenId(filter.id);
+            setFocusedIndex(0);
+          } else {
+            setFocusedIndex((prev) => Math.min(prev + 1, filter.options.length - 1));
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(0);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(filter.options.length - 1);
+          }
+          break;
+        case "Escape":
+        case "Tab":
+          closePopover();
+          break;
+      }
+    };
+    const summarize = (filter) => {
+      const active = activeValues[filter.id] ?? [];
+      if (active.length === 0) return filter.label;
+      if (active.length === 1) {
+        const option = filter.options.find((o) => o.value === active[0]);
+        return `${filter.label}: ${option?.label ?? active[0]}`;
+      }
+      return `${filter.label}: ${active.length}`;
+    };
+    const anyActive = filters.some((f) => (activeValues[f.id] ?? []).length > 0);
+    const classes = [baseClass, size === "compact" && `${baseClass}--compact`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      filters.map((filter) => {
+        const isOpen = openId === filter.id;
+        const active = activeValues[filter.id] ?? [];
+        const isActive = active.length > 0;
+        const listboxId = `${generatedId}-${filter.id}-listbox`;
+        const activeDescendant = isOpen && focusedIndex >= 0 ? `${generatedId}-${filter.id}-option-${focusedIndex}` : void 0;
+        const chipClasses = [
+          `${baseClass}__chip`,
+          isActive && `${baseClass}__chip--active`,
+          isOpen && `${baseClass}__chip--open`
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${baseClass}__filter`,
+            ref: (node) => {
+              if (node) filterRefs.current.set(filter.id, node);
+              else filterRefs.current.delete(filter.id);
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: chipClasses, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__trigger`,
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": isOpen,
+                    "aria-controls": isOpen ? listboxId : void 0,
+                    "aria-activedescendant": activeDescendant,
+                    onClick: () => handleTriggerClick(filter),
+                    onKeyDown: (e) => handleTriggerKeyDown(e, filter),
+                    children: [
+                      filter.icon && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__icon material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: filter.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, children: summarize(filter) }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__caret material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: "expand_more"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isActive && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__chip-clear`,
+                    "aria-label": `Clear ${filter.label}`,
+                    onClick: () => clearFilter(filter.id),
+                    children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                  }
+                )
+              ] }),
+              isOpen && /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  id: listboxId,
+                  className: `${baseClass}__panel`,
+                  role: "listbox",
+                  "aria-label": filter.label,
+                  "aria-multiselectable": filter.multiple !== false || void 0,
+                  children: filter.options.map((option, index) => {
+                    const selected = active.includes(option.value);
+                    const optionClasses = [
+                      `${baseClass}__option`,
+                      selected && `${baseClass}__option--selected`,
+                      index === focusedIndex && `${baseClass}__option--focused`
+                    ].filter(Boolean).join(" ");
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        id: `${generatedId}-${filter.id}-option-${index}`,
+                        className: optionClasses,
+                        role: "option",
+                        "aria-selected": selected,
+                        onClick: () => toggleOption(filter, option.value),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `${baseClass}__option-check material-symbols-rounded`,
+                              "aria-hidden": "true",
+                              children: selected ? "check" : ""
+                            }
+                          ),
+                          option.label
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            ]
+          },
+          filter.id
+        );
+      }),
+      anyActive && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__clear-all`,
+          onClick: () => applyValues({}),
+          children: clearLabel
+        }
+      )
+    ] });
+  }
+);
+FilterBar.displayName = "FilterBar";
+export {
+  FilterBar
+};

package/components/FunnelChart/FunnelChart.css

@@ -0,0 +1,41 @@
+/* ============================================
+   FUNNEL CHART COMPONENT
+   Side-by-side vertical bars stepping down with
+   each stage's share of the first. Geometry and
+   colour arrive per stage as inline custom
+   properties (--funnel-stage-size, a clamped
+   percentage number; --funnel-stage-color, a
+   chart-series token), so the rules here stay
+   token-only.
+   ============================================ */
+
+/* Base */
+
+.ds-funnel-chart {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* Parts */
+
+.ds-funnel-chart__stage {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--funnel-stage-size) * 1%);
+  border-radius: var(--radius-sm);
+  background-color: var(--funnel-stage-color);
+  display: grid;
+  place-items: center;
+}
+
+.ds-funnel-chart__pct {
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-full);
+  padding: var(--padding-xxxs) var(--padding-xs);
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-caption-line-height);
+}

package/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** One stage of the funnel, ordered widest first. */
+export interface FunnelStage {
+    /** Stage name, read into the chart's accessible label. */
+    label: string;
+    /** Raw count for the stage — drives the bar's height as a share of the first stage. */
+    value: number;
+    /**
+     * Preformatted value ("96.4K") for the accessible label and any consumer
+     * legend. Falls back to the raw `value`, locale-formatted.
+     */
+    displayValue?: string;
+}
+/** Props owned by FunnelChart itself — everything else falls through to the root div. */
+type FunnelChartOwnProps = {
+    /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
+    data: FunnelStage[];
+    /** Chart height in pixels. */
+    height?: number;
+    /**
+     * Floor percentage for a stage's height, so steep drop-offs stay readable.
+     * Shares are clamped to the range from this floor up to 100.
+     */
+    minStageShare?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
+}
+/**
+ * FunnelChart — ordered stages as side-by-side vertical bars whose heights
+ * step down with each stage's share of the first, each carrying a centred
+ * percentage pill. Pure JSX and CSS computed from props: no recharts, no
+ * hooks, no browser APIs, so it deliberately omits 'use client' and renders
+ * from a Server Component. Degenerate data stays safe: an empty array
+ * renders an empty root, and a zero or negative first value draws every
+ * stage at the floor height.
+ */
+export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};