rift-ds 1.0.0

package/components/SegmentedControl/SegmentedControl.css

@@ -0,0 +1,231 @@
+/* ============================================
+   SEGMENTED CONTROL COMPONENT
+   Pill-style toggle between related views
+   ============================================ */
+
+.ds-segmented-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050); /* 2px */
+  padding: var(--padding-100); /* 4px */
+  /* Concentric with the segments, the Composer's rule: the track's
+     curve is the segment's radius plus the inset between them, so a
+     theme that squares the pill token keeps the two curves parallel
+     instead of a soft track hugging sharp segments. At the shipped
+     999px pill both terms saturate and nothing changes. */
+  border-radius: calc(var(--radius-pill) + var(--padding-100));
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* ============================================
+   SLIDING PILL
+   The active indicator is a single element that
+   slides and resizes between segments. Its box is
+   written inline by the component from the active
+   segment's measurements; until that first
+   measurement lands (SSR, first client frame) it
+   stays hidden and the active segment paints its
+   own background instead.
+   ============================================ */
+
+.ds-segmented-control__pill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-primary-bg);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, width;
+  transition:
+    transform var(--motion-duration-base) var(--motion-ease-entrance),
+    width var(--motion-duration-base) var(--motion-ease-entrance),
+    background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-segmented-control--pill-ready .ds-segmented-control__pill {
+  opacity: 1;
+}
+
+/* Once the pill owns the selection, the active segment's own fill retires —
+   labels and icons keep their active colours and read above the pill. */
+.ds-segmented-control--pill-ready .ds-segmented-control__segment--active,
+.ds-segmented-control--pill-ready .ds-segmented-control__segment--active:hover,
+.ds-segmented-control--pill-ready.ds-segmented-control--neutral .ds-segmented-control__segment--active,
+.ds-segmented-control--pill-ready.ds-segmented-control--neutral .ds-segmented-control__segment--active:hover {
+  background-color: transparent;
+}
+
+/* Hovering the active segment darkens the pill, mirroring the retired
+   per-segment hover fill. */
+.ds-segmented-control--pill-ready:has(.ds-segmented-control__segment--active:hover) .ds-segmented-control__pill {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__pill {
+  background-color: var(--color-action-neutral-bg);
+}
+
+.ds-segmented-control--pill-ready.ds-segmented-control--neutral:has(.ds-segmented-control__segment--active:hover) .ds-segmented-control__pill {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+/* ============================================
+   FULL WIDTH
+   ============================================ */
+
+.ds-segmented-control--full-width {
+  width: 100%;
+}
+
+.ds-segmented-control--full-width .ds-segmented-control__segment {
+  flex: 1;
+}
+
+/* ============================================
+   SEGMENT BUTTON
+   ============================================ */
+
+.ds-segmented-control__segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  border: none;
+  border-radius: var(--radius-pill); /* pill shape */
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+  white-space: nowrap;
+  position: relative;
+  z-index: 1; /* labels and icons read above the sliding pill */
+}
+
+/* Typography — paragraph em (medium weight) for clickable controls */
+.ds-segmented-control__label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Collapsed to icons: the word leaves the screen but stays the segment's
+   accessible name, so a narrow strip loses its labels and nothing else. The
+   clip recipe rather than display:none, which would take the name with it. */
+.ds-segmented-control__label--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Icon — same idle tier as the label, so an icon never reads dimmer than
+   the text beside it, and an icon-only segment (the site's theme toggle)
+   holds label-strength contrast in both modes. */
+.ds-segmented-control__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-segmented-control__segment:not(.ds-segmented-control__segment--active):not(.ds-segmented-control__segment--disabled):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* ============================================
+   ACTIVE STATE
+   ============================================ */
+
+.ds-segmented-control__segment--active {
+  background-color: var(--color-action-primary-bg);
+}
+
+.ds-segmented-control__segment--active .ds-segmented-control__label {
+  color: var(--color-action-primary-text);
+}
+
+.ds-segmented-control__segment--active .ds-segmented-control__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-segmented-control__segment--active:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   NEUTRAL VARIANT
+   The active pill fills grey instead of the
+   action teal — for sets where the selection
+   should not carry the action colour's weight.
+   ============================================ */
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active {
+  background-color: var(--color-action-neutral-bg);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__label {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active .ds-segmented-control__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-segmented-control--neutral .ds-segmented-control__segment--active:hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-segmented-control__segment--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-segmented-control__segment:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-segmented-control--compact .ds-segmented-control__segment {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+}
+
+.ds-segmented-control--compact .ds-segmented-control__label {
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-segmented-control--compact .ds-segmented-control__icon {
+  --icon-size: var(--icon-size-500);
+}

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+export interface Segment {
+    /** Unique value for this segment */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Whether disabled */
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** Array of segments */
+    segments: Segment[];
+    /** Currently active segment value */
+    activeSegment: string;
+    /** Callback when segment changes */
+    onSegmentChange?: (value: string) => void;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Visual treatment of the active segment — teal by default, `neutral` fills it grey */
+    variant?: 'primary' | 'neutral';
+    /** Full width — segments fill container */
+    fullWidth?: boolean;
+    /**
+     * Shed parts rather than overflow when the container is too narrow for the
+     * strip. The control measures its own natural widths and drops to labels
+     * alone, then to icons alone, in that order — the label carries the
+     * meaning, so the icon goes first. It only falls to icons when every
+     * segment has one, and hidden labels stay in the accessibility tree, so
+     * nothing loses its name. Off by default; the control overflows as before.
+     */
+    collapse?: boolean;
+    /** Accessible label for the tablist */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Segmented control for toggling between related views.
+ * A horizontal set of mutually exclusive options with a
+ * pill-shaped active indicator. Supports icons and keyboard navigation.
+ */
+export declare const SegmentedControl: ({ segments, activeSegment, onSegmentChange, size, variant, fullWidth, collapse, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;

package/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useLayoutEffect } from "react";
+import "./SegmentedControl.css";
+import "../../fonts/material-symbols.css";
+const SegmentedControl = ({
+  segments,
+  activeSegment,
+  onSegmentChange,
+  size = "default",
+  variant = "primary",
+  fullWidth = false,
+  collapse = false,
+  ariaLabel,
+  className = ""
+}) => {
+  const baseClass = "ds-segmented-control";
+  const sizeClass = `${baseClass}--${size}`;
+  const variantClass = `${baseClass}--${variant}`;
+  const fullWidthClass = fullWidth ? `${baseClass}--full-width` : "";
+  const containerRef = useRef(null);
+  const pillRef = useRef(null);
+  const [pillReady, setPillReady] = useState(false);
+  const hasPositionedRef = useRef(false);
+  const armFrameRef = useRef(0);
+  const metricsRef = useRef(null);
+  const everySegmentHasIcon = segments.every((segment) => Boolean(segment.icon));
+  const collapseKey = [
+    size,
+    fullWidth,
+    ...segments.map((segment) => `${segment.value}:${segment.label}`)
+  ].join("|");
+  const [collapseState, setCollapseState] = useState({
+    key: collapseKey,
+    mode: "full"
+  });
+  if (collapseState.key !== collapseKey) {
+    setCollapseState({ key: collapseKey, mode: "full" });
+  }
+  const collapseMode = collapseState.key === collapseKey ? collapseState.mode : "full";
+  const classes = [
+    baseClass,
+    sizeClass,
+    variantClass,
+    fullWidthClass,
+    pillReady ? `${baseClass}--pill-ready` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const positionPill = useCallback(
+    (animate) => {
+      const container = containerRef.current;
+      const pill = pillRef.current;
+      if (!container || !pill) return;
+      const active = container.querySelector(
+        `[data-segment-value="${CSS.escape(activeSegment)}"]`
+      );
+      if (!active || active.offsetWidth === 0) {
+        if (armFrameRef.current) {
+          cancelAnimationFrame(armFrameRef.current);
+          armFrameRef.current = 0;
+        }
+        hasPositionedRef.current = false;
+        setPillReady(false);
+        return;
+      }
+      if (!animate) pill.style.transition = "none";
+      pill.style.width = `${active.offsetWidth}px`;
+      pill.style.height = `${active.offsetHeight}px`;
+      pill.style.transform = `translate(${active.offsetLeft}px, ${active.offsetTop}px)`;
+      if (!animate) {
+        void pill.offsetWidth;
+        pill.style.transition = "";
+      }
+      if (!hasPositionedRef.current && armFrameRef.current === 0) {
+        armFrameRef.current = requestAnimationFrame(() => {
+          armFrameRef.current = requestAnimationFrame(() => {
+            armFrameRef.current = 0;
+            hasPositionedRef.current = true;
+          });
+        });
+      }
+      setPillReady(true);
+    },
+    [activeSegment]
+  );
+  const latestPositionPill = useRef(positionPill);
+  useLayoutEffect(() => {
+    latestPositionPill.current = positionPill;
+  }, [positionPill]);
+  useLayoutEffect(() => {
+    positionPill(hasPositionedRef.current);
+  }, [positionPill, segments, size, fullWidth, collapseMode]);
+  useLayoutEffect(() => {
+    if (!collapse) return;
+    const container = containerRef.current;
+    const host = container?.parentElement;
+    if (!container || !host || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      if (metricsRef.current?.key !== collapseKey) {
+        if (collapseMode !== "full") return;
+        const segEls = Array.from(
+          container.querySelectorAll("[data-segment-value]")
+        );
+        if (segEls.length === 0 || segEls[0].offsetWidth === 0) return;
+        const trackStyle = getComputedStyle(container);
+        const chrome = parseFloat(trackStyle.paddingLeft) + parseFloat(trackStyle.paddingRight) + parseFloat(trackStyle.borderLeftWidth) + parseFloat(trackStyle.borderRightWidth) + (parseFloat(trackStyle.columnGap) || 0) * (segEls.length - 1);
+        let full = chrome;
+        let iconCost = 0;
+        let labelCost = 0;
+        for (const seg of segEls) {
+          full += seg.getBoundingClientRect().width;
+          const segGap = parseFloat(getComputedStyle(seg).columnGap) || 0;
+          const icon = seg.querySelector(`.${baseClass}__icon`);
+          const label = seg.querySelector(`.${baseClass}__label`);
+          if (icon) iconCost += icon.getBoundingClientRect().width + (label ? segGap : 0);
+          if (label) labelCost += label.getBoundingClientRect().width + (icon ? segGap : 0);
+        }
+        metricsRef.current = {
+          key: collapseKey,
+          full: Math.ceil(full),
+          labels: Math.ceil(full - iconCost),
+          icons: Math.ceil(full - labelCost)
+        };
+      }
+      const metrics = metricsRef.current;
+      if (!metrics) return;
+      const available = host.clientWidth;
+      if (available === 0) return;
+      const next = available >= metrics.full ? "full" : available >= metrics.labels || !everySegmentHasIcon ? "labels" : "icons";
+      setCollapseState(
+        (current) => current.key === collapseKey && current.mode === next ? current : { key: collapseKey, mode: next }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [collapse, collapseMode, everySegmentHasIcon, collapseKey]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    let initialFire = true;
+    const observer = new ResizeObserver(() => {
+      if (initialFire) {
+        initialFire = false;
+        if (hasPositionedRef.current) return;
+      }
+      latestPositionPill.current(false);
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (armFrameRef.current) {
+        cancelAnimationFrame(armFrameRef.current);
+        armFrameRef.current = 0;
+      }
+    };
+  }, []);
+  const handleKeyDown = (e, idx) => {
+    const enabledSegments = segments.filter((s) => !s.disabled);
+    const currentEnabledIdx = enabledSegments.findIndex((s) => s.value === segments[idx].value);
+    let nextIdx = -1;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      nextIdx = (currentEnabledIdx + 1) % enabledSegments.length;
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      nextIdx = (currentEnabledIdx - 1 + enabledSegments.length) % enabledSegments.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextIdx = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextIdx = enabledSegments.length - 1;
+    }
+    if (nextIdx >= 0) {
+      const nextSegment = enabledSegments[nextIdx];
+      onSegmentChange?.(nextSegment.value);
+      const buttons = containerRef.current?.querySelectorAll(
+        `[data-segment-value]`
+      );
+      buttons?.forEach((btn) => {
+        if (btn.dataset.segmentValue === nextSegment.value) {
+          btn.focus();
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "tablist", "aria-label": ariaLabel, ref: containerRef, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__pill`, "aria-hidden": "true", ref: pillRef }),
+    segments.map((segment, idx) => {
+      const isActive = segment.value === activeSegment;
+      const btnClasses = [
+        `${baseClass}__segment`,
+        isActive ? `${baseClass}__segment--active` : "",
+        segment.disabled ? `${baseClass}__segment--disabled` : ""
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          className: btnClasses,
+          "aria-selected": isActive,
+          "aria-disabled": segment.disabled || void 0,
+          disabled: segment.disabled,
+          tabIndex: isActive ? 0 : -1,
+          "data-segment-value": segment.value,
+          onClick: () => {
+            if (!segment.disabled) {
+              onSegmentChange?.(segment.value);
+            }
+          },
+          onKeyDown: (e) => handleKeyDown(e, idx),
+          children: [
+            segment.icon && collapseMode !== "labels" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__icon${typeof segment.icon === "string" ? " material-symbols-rounded" : ""}`,
+                "aria-hidden": "true",
+                children: segment.icon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label${collapseMode === "icons" && segment.icon ? ` ${baseClass}__label--hidden` : ""}`,
+                children: segment.label
+              }
+            )
+          ]
+        },
+        segment.value
+      );
+    })
+  ] });
+};
+export {
+  SegmentedControl
+};