rift-ds 1.0.0

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 && (typeof filter.icon === "string" ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__icon material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: filter.icon
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "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,17 @@
+/* ============================================
+   FUNNEL CHART COMPONENT
+   Centred trapezoid funnel built on Recharts'
+   native Funnel. Card chrome, header, padding
+   and the tooltip surface all come from the
+   shared chart styles (Chart.css); colour
+   arrives per stage as a chart-series token
+   resolved live in SVG paint. This file owns
+   only what the shared styles cannot reach.
+   ============================================ */
+
+/* The stage-name labels draw as SVG text, which inherits no typography from
+   the shared chart classes — pin them to the family's primary face. */
+
+.ds-funnel-chart .recharts-label-list text {
+  font-family: var(--font-family-primary);
+}

package/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+/** One stage of the funnel, ordered widest first. */
+export interface FunnelStage {
+    /** Stage name, shown beside the stage and read into the chart's accessible label. */
+    label: string;
+    /** Raw count for the stage — drives the stage's width as a share of the first stage. */
+    value: number;
+    /**
+     * Preformatted value ("96.4K") for the tooltip and the accessible label.
+     * 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 width is its share of the first. */
+    data: FunnelStage[];
+    /** 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;
+    /** Shows each stage's name beside its band. Turn off when a legend under the chart already carries the names. */
+    showLabels?: boolean;
+    /**
+     * Floor percentage from the stepped-bar rendering this chart used to have.
+     * @deprecated The funnel now draws true trapezoids sized by value, so a
+     * height floor no longer applies; the prop is ignored.
+     */
+    minStageShare?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
+}
+/**
+ * FunnelChart — ordered stages as a centred funnel of trapezoid bands, built
+ * on Recharts' native Funnel so the stages sweep in on load and share the
+ * family's tooltip and palette. Each band's width is its stage's share of the
+ * first, the honest recharts geometry: the taper itself is the conversion
+ * story, and the glass tooltip carries each stage's reading and percentage.
+ * It wears the chart family's card chrome (title, subtitle, padding) and
+ * takes `bare` to drop it inside a Panel, like every other chart. The whole
+ * funnel is summarised in one accessible label, stage by stage. Degenerate
+ * data stays safe: an empty array renders an empty chart area.
+ */
+export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { ResponsiveContainer, FunnelChart as FunnelChart$1, Tooltip, Funnel, LabelList } from "recharts";
+import { getChartSeriesColors } from "../Chart/palette.js";
+import "../Chart/Chart.css";
+import "./FunnelChart.css";
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function FunnelTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  const stage = entry.payload;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: stage?.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "ds-chart__tooltip-dot",
+          style: { backgroundColor: stage?.fill }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: stage?.share !== void 0 ? `${stage.share}%` : "" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: stage?.displayValue ?? entry.value?.toLocaleString() })
+    ] })
+  ] });
+}
+const FunnelChart = React.forwardRef(
+  ({
+    data,
+    title,
+    subtitle,
+    bare = false,
+    height = 190,
+    showLabels = true,
+    minStageShare,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-funnel-chart";
+    const chartClass = "ds-chart";
+    const classes = [chartClass, bare && `${chartClass}--bare`, baseClass, className].filter(Boolean).join(" ");
+    const seriesColors = getChartSeriesColors();
+    const textSecondary = getCSSVar("--color-text-secondary", "#303030");
+    const surfaceColor = getCSSVar("--color-bg-container-primary", "#FFFFFF");
+    const firstValue = data.length > 0 ? data[0].value : 0;
+    const stages = data.map((stage, i) => ({
+      name: stage.label,
+      value: stage.value,
+      displayValue: stage.displayValue,
+      share: firstValue > 0 ? Math.round(stage.value / firstValue * 100) : 0,
+      fill: seriesColors[i % seriesColors.length]
+    }));
+    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.name} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    const renderTooltip = useCallback(
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      (props) => /* @__PURE__ */ jsx(FunnelTooltip, { ...props }),
+      []
+    );
+    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`, role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(FunnelChart$1, { margin: { top: 4, right: 4, bottom: 4, left: 4 }, children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+        /* @__PURE__ */ jsx(
+          Funnel,
+          {
+            dataKey: "value",
+            nameKey: "name",
+            data: stages,
+            lastShapeType: "rectangle",
+            stroke: surfaceColor,
+            strokeWidth: 2,
+            children: showLabels && /* @__PURE__ */ jsx(
+              LabelList,
+              {
+                position: "right",
+                dataKey: "name",
+                fill: textSecondary,
+                stroke: "none",
+                fontSize: 12
+              }
+            )
+          }
+        )
+      ] }) }) })
+    ] });
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+export {
+  FunnelChart
+};