@robr0/design-system 0.12.0 → 0.14.0

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

@@ -9,9 +9,10 @@
    token-only.
    ============================================ */
 
-/* Base */
+/* Base — card chrome, header, and padding come from the shared chart
+   styles (Chart.css); this file owns the stage row alone. */
 
-.ds-funnel-chart {
+.ds-funnel-chart__stages {
   display: flex;
   align-items: center;
   gap: var(--gap-xxs);

package/components/FunnelChart/FunnelChart.d.ts

@@ -15,7 +15,13 @@ export interface FunnelStage {
 type FunnelChartOwnProps = {
     /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
     data: FunnelStage[];
-    /** Chart height in pixels. */
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Chart area height in pixels. */
     height?: number;
     /**
      * Floor percentage for a stage's height, so steep drop-offs stay readable.
@@ -32,9 +38,11 @@ export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.Compon
  * 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.
+ * from a Server Component. It wears the chart family's card chrome (title,
+ * subtitle, padding) and takes `bare` to drop it inside a Panel, like every
+ * other chart. Degenerate data stays safe: an empty array renders an empty
+ * stage row, 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 {};

package/components/FunnelChart/FunnelChart.js

@@ -1,11 +1,27 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
+import "../Chart/Chart.css";
 import "./FunnelChart.css";
 const SERIES_COUNT = 7;
 const FunnelChart = React.forwardRef(
-  ({ data, height = 190, minStageShare = 16, className = "", style, ...rest }, ref) => {
+  ({
+    data,
+    title,
+    subtitle,
+    bare = false,
+    height = 190,
+    minStageShare = 16,
+    className = "",
+    ...rest
+  }, ref) => {
     const baseClass = "ds-funnel-chart";
-    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const chartClass = "ds-chart";
+    const classes = [
+      chartClass,
+      bare && `${chartClass}--bare`,
+      baseClass,
+      className
+    ].filter(Boolean).join(" ");
     const firstValue = data.length > 0 ? data[0].value : 0;
     const clampShare = (share) => Math.min(Math.max(share, minStageShare), 100);
     const stages = data.map((stage, i) => ({
@@ -14,32 +30,36 @@ const FunnelChart = React.forwardRef(
       color: `var(--color-chart-series-${i % SERIES_COUNT + 1})`
     }));
     const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.label} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: classes,
-        style: { ...style, height },
-        role: "img",
-        "aria-label": ariaLabel,
-        children: stages.map((stage, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${baseClass}__stage`,
-            style: {
-              "--funnel-stage-size": stage.share,
-              "--funnel-stage-color": stage.color
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${chartClass}__body ${baseClass}__stages`,
+          style: { height },
+          role: "img",
+          "aria-label": ariaLabel,
+          children: stages.map((stage, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__stage`,
+              style: {
+                "--funnel-stage-size": stage.share,
+                "--funnel-stage-color": stage.color
+              },
+              children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
+                Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
+                "%"
+              ] })
             },
-            children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
-              Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
-              "%"
-            ] })
-          },
-          `${stage.label}-${i}`
-        ))
-      }
-    );
+            `${stage.label}-${i}`
+          ))
+        }
+      )
+    ] });
   }
 );
 FunnelChart.displayName = "FunnelChart";