@robr0/design-system 0.1.0

package/components/RadioButton/RadioButton.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./RadioButton.css";
+const RadioButton = ({
+  label,
+  checked = false,
+  disabled = false,
+  value = "",
+  onChange,
+  className = "",
+  ariaLabel
+}) => {
+  const baseClass = "ds-radio";
+  const checkedClass = checked ? `${baseClass}--checked` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const classes = [baseClass, checkedClass, disabledClass, className].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(value);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "radio",
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel || label,
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
+        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+      ]
+    }
+  );
+};
+const RadioGroup = ({
+  label,
+  value,
+  name,
+  options,
+  direction = "vertical",
+  onChange,
+  className = ""
+}) => {
+  const baseClass = "ds-radio-group";
+  const directionClass = `${baseClass}--${direction}`;
+  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "radiogroup", "aria-label": label, children: [
+    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+      RadioButton,
+      {
+        label: option.label,
+        value: option.value,
+        name,
+        checked: value === option.value,
+        disabled: option.disabled,
+        onChange
+      },
+      option.value
+    )) })
+  ] });
+};
+export {
+  RadioButton,
+  RadioGroup
+};

package/components/SectionTitle/SectionTitle.css

@@ -0,0 +1,37 @@
+/* ============================================
+   SECTION TITLE COMPONENT
+   Heading with divider line, optional trailing content
+   ============================================ */
+
+.ds-section-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-md);
+  border-bottom: 1px solid var(--color-divider);
+  padding-bottom: var(--padding-xl);
+}
+
+/* ============================================
+   HEADING
+   ============================================ */
+
+.ds-section-title__heading {
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TRAILING CONTENT (count, badge, metadata)
+   ============================================ */
+
+.ds-section-title__trailing {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+}

package/components/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface SectionTitleProps {
+    /** Section heading text */
+    title: string;
+    /** Optional trailing content (count, badge, metadata) */
+    trailing?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SectionTitle({ title, trailing, className, }: SectionTitleProps): React.JSX.Element;

package/components/SectionTitle/SectionTitle.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./SectionTitle.css";
+function SectionTitle({
+  title,
+  trailing,
+  className
+}) {
+  const classes = ["ds-section-title", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("h2", { className: "ds-section-title__heading", children: title }),
+    trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ds-section-title__trailing", children: trailing })
+  ] });
+}
+export {
+  SectionTitle
+};

package/components/SegmentedControl/SegmentedControl.css

@@ -0,0 +1,129 @@
+/* ============================================
+   SEGMENTED CONTROL COMPONENT
+   Pill-style toggle between related views
+   ============================================ */
+
+.ds-segmented-control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs); /* 2px */
+  padding: var(--padding-xxs); /* 4px */
+  border-radius: var(--radius-full); /* pill shape */
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+}
+
+/* ============================================
+   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-sm); /* 8px */
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  border: none;
+  border-radius: var(--radius-full); /* 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;
+}
+
+/* Typography — paragraph em (medium weight) for clickable controls */
+.ds-segmented-control__label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Icon */
+.ds-segmented-control__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+  color: var(--color-icon-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);
+}
+
+/* ============================================
+   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-xs) var(--padding-sm-md); /* 6px 12px */
+}
+
+.ds-segmented-control--compact .ds-segmented-control__label {
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-segmented-control--compact .ds-segmented-control__icon {
+  --icon-size: var(--icon-size-sm);
+}

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface Segment {
+    /** Unique value for this segment */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional Material Symbol icon name */
+    icon?: string;
+    /** 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';
+    /** Full width — segments fill container */
+    fullWidth?: 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, fullWidth, ariaLabel, className, }: SegmentedControlProps) => React.JSX.Element;

package/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import "./SegmentedControl.css";
+import "../../fonts/material-symbols.css";
+const SegmentedControl = ({
+  segments,
+  activeSegment,
+  onSegmentChange,
+  size = "default",
+  fullWidth = false,
+  ariaLabel,
+  className = ""
+}) => {
+  const baseClass = "ds-segmented-control";
+  const sizeClass = `${baseClass}--${size}`;
+  const fullWidthClass = fullWidth ? `${baseClass}--full-width` : "";
+  const containerRef = useRef(null);
+  const classes = [baseClass, sizeClass, fullWidthClass, className].filter(Boolean).join(" ");
+  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__ */ jsx("div", { className: classes, role: "tablist", "aria-label": ariaLabel, ref: containerRef, children: 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 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__icon material-symbols-rounded`,
+              "aria-hidden": "true",
+              children: segment.icon
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: segment.label })
+        ]
+      },
+      segment.value
+    );
+  }) });
+};
+export {
+  SegmentedControl
+};

package/components/SelectionCard/SelectionCard.css

@@ -0,0 +1,251 @@
+/* ============================================
+   SELECTION CARD COMPONENT
+   Large selectable option cards with radio or
+   checkbox indicators. Used for high-visibility
+   choice interfaces like settings and onboarding.
+   ============================================ */
+
+/* ============================================
+   GROUP — vertical stack of cards
+   ============================================ */
+
+.ds-selection-card-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+/* ============================================
+   CARD — single option
+   ============================================ */
+
+.ds-selection-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-lg); /* 20px */
+  padding: var(--padding-md); /* 16px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-selection-card:not(.ds-selection-card--disabled):hover {
+  border-color: var(--color-action-primary-border);
+}
+
+/* ============================================
+   SELECTED STATE
+   ============================================ */
+
+.ds-selection-card--selected {
+  border-color: var(--color-action-primary-border);
+  background-color: var(--color-bg-container-primary-semi);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-selection-card--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-selection-card:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CONTENT — label + description
+   ============================================ */
+
+.ds-selection-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 4px */
+  min-width: 0;
+}
+
+.ds-selection-card__label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-selection-card__description {
+  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-secondary);
+}
+
+/* ============================================
+   INDICATOR — radio, checkbox, or toggle
+   ============================================ */
+
+.ds-selection-card__indicator {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   RADIO INDICATOR
+   ============================================ */
+
+.ds-selection-card__radio {
+  width: 24px;
+  height: 24px;
+  border: var(--border-md) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__radio-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-action-primary-bg);
+  transform: scale(0);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Selected radio */
+.ds-selection-card--selected .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-selection-card--selected .ds-selection-card__radio-dot {
+  transform: scale(1);
+}
+
+/* Hover radio (unselected) */
+.ds-selection-card:not(.ds-selection-card--disabled):not(.ds-selection-card--selected):hover .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg);
+}
+
+/* Hover radio (selected) */
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__radio-dot {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   CHECKBOX INDICATOR
+   ============================================ */
+
+.ds-selection-card__checkbox {
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  border: var(--border-md) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm); /* 8px */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__check-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-action-primary-text-active);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Selected checkbox */
+.ds-selection-card--selected .ds-selection-card__checkbox {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-selection-card--selected .ds-selection-card__check-icon {
+  opacity: 1;
+}
+
+/* Hover checkbox (unselected) */
+.ds-selection-card:not(.ds-selection-card--disabled):not(.ds-selection-card--selected):hover .ds-selection-card__checkbox {
+  border-color: var(--color-action-primary-bg);
+}
+
+/* Hover checkbox (selected) */
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__checkbox {
+  background-color: var(--color-action-primary-bg-hover);
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   TOGGLE INDICATOR
+   Matches ToggleSwitch component styling
+   ============================================ */
+
+.ds-selection-card__toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-action-primary-bg);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+.ds-selection-card__toggle-thumb {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--color-control-thumb);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__toggle-icon {
+  /* Intentionally off the --icon-size-* scale — same reason as ToggleSwitch:
+     this glyph lives inside the 20x20 toggle thumb, and the smallest scale
+     step (20px) would fill it completely. */
+  font-size: 14px;
+  color: var(--color-action-primary-bg);
+}
+
+/* Off state — thumb moves left, track goes grey */
+.ds-selection-card__toggle--off {
+  background: var(--color-text-secondary);
+}
+
+.ds-selection-card__toggle--off .ds-selection-card__toggle-thumb {
+  transform: translateX(-18px);
+}
+
+.ds-selection-card__toggle--off .ds-selection-card__toggle-icon {
+  color: var(--color-text-secondary);
+}

package/components/SelectionCard/SelectionCard.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface SelectionCardOption {
+    /** Unique value for this option */
+    value: string;
+    /** Primary label */
+    label: string;
+    /** Optional description text below the label */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface SelectionCardProps {
+    /** Selection mode — radio (single), checkbox (multi), or toggle (each card is an on/off switch) */
+    mode?: 'radio' | 'checkbox' | 'toggle';
+    /** Available options */
+    options: SelectionCardOption[];
+    /** Currently selected value(s) — string for radio, string[] for checkbox */
+    value?: string | string[];
+    /** Callback when selection changes — returns string for radio, string[] for checkbox */
+    onChange?: (value: string | string[]) => void;
+    /** Group name (used for aria-label on the group) */
+    name?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const SelectionCard: ({ mode, options, value, onChange, name, className, }: SelectionCardProps) => React.JSX.Element;