@robr0/design-system 0.1.0

package/components/Popover/Popover.css

@@ -0,0 +1,99 @@
+/* ============================================
+   POPOVER COMPONENT
+   Contextual overlay panel
+   ============================================ */
+
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-popover__trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-popover__panel {
+  position: absolute;
+  z-index: 10;
+  min-width: 200px;
+  padding: var(--padding-md); /* 16px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm); /* 8px */
+  background-color: var(--color-bg-container-primary);
+  box-shadow: var(--shadow-floating);
+
+  /* Hidden by default */
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.96);
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-popover__panel--open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+/* ============================================
+   POSITION — BOTTOM (default)
+   ============================================ */
+
+.ds-popover__panel--bottom {
+  top: 100%;
+  left: 0;
+  margin-top: var(--gap-xxs); /* 2px */
+}
+
+/* ============================================
+   POSITION — TOP
+   ============================================ */
+
+.ds-popover__panel--top {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: var(--gap-xxs); /* 2px */
+}
+
+/* ============================================
+   POSITION — LEFT
+   ============================================ */
+
+.ds-popover__panel--left {
+  right: 100%;
+  top: 0;
+  margin-right: var(--gap-xxs); /* 2px */
+}
+
+/* ============================================
+   POSITION — RIGHT
+   ============================================ */
+
+.ds-popover__panel--right {
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-xxs); /* 2px */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-popover--compact {
+  padding: var(--padding-sm); /* 8px */
+  min-width: 160px;
+}
+
+.ds-popover--compact .ds-popover__panel {
+  padding: var(--padding-sm);
+  min-width: 160px;
+}

package/components/Popover/Popover.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface PopoverProps {
+    /** Trigger element */
+    children: React.ReactNode;
+    /** Popover content */
+    content: React.ReactNode;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Preferred position */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Trigger mode */
+    trigger?: 'click' | 'hover';
+    /** Whether the popover is open (controlled mode) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible label for the trigger */
+    ariaLabel?: string;
+    /** Additional CSS classes for the popover panel */
+    className?: string;
+}
+/**
+ * Popover component for contextual overlays.
+ * Wraps a trigger element and displays content in a
+ * positioned panel. Supports click and hover triggers
+ * with automatic outside-click dismissal.
+ */
+export declare const Popover: ({ children, content, size, position, trigger, open: controlledOpen, onOpenChange, ariaLabel, className, }: PopoverProps) => React.JSX.Element;

package/components/Popover/Popover.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import "./Popover.css";
+const Popover = ({
+  children,
+  content,
+  size = "default",
+  position = "bottom",
+  trigger = "click",
+  open: controlledOpen,
+  onOpenChange,
+  ariaLabel,
+  className = ""
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const containerRef = useRef(null);
+  const hoverTimeoutRef = useRef(void 0);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback((next) => {
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
+  useEffect(() => {
+    if (!isOpen || trigger !== "click") return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen, trigger, setOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, setOpen]);
+  const handleClick = () => {
+    if (trigger === "click") {
+      setOpen(!isOpen);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (trigger === "hover") {
+      clearTimeout(hoverTimeoutRef.current);
+      setOpen(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = setTimeout(() => setOpen(false), 150);
+    }
+  };
+  const baseClass = "ds-popover";
+  const sizeClass = `${baseClass}--${size}`;
+  const positionClass = `${baseClass}__panel--${position}`;
+  const openClass = isOpen ? `${baseClass}__panel--open` : "";
+  const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+  const panelClasses = [`${baseClass}__panel`, sizeClass, positionClass, openClass].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      ref: containerRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${baseClass}__trigger`,
+            onClick: handleClick,
+            role: trigger === "click" ? "button" : void 0,
+            tabIndex: trigger === "click" ? 0 : void 0,
+            "aria-expanded": isOpen,
+            "aria-label": ariaLabel,
+            "aria-haspopup": "dialog",
+            onKeyDown: (e) => {
+              if (trigger === "click" && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                setOpen(!isOpen);
+              }
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: panelClasses, role: "dialog", "aria-hidden": !isOpen, children: content })
+      ]
+    }
+  );
+};
+export {
+  Popover
+};

package/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,60 @@
+/* ============================================
+   PROGRESS BAR COMPONENT
+   Displays completion progress as a horizontal bar
+   ============================================ */
+
+.ds-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-sm);
+  width: 100%;
+}
+
+/* ============================================
+   TRACK
+   ============================================ */
+
+.ds-progress-bar__track {
+  flex: 1;
+  height: 8px;
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.ds-progress-bar--compact .ds-progress-bar__track {
+  height: 4px;
+}
+
+/* ============================================
+   FILL
+   ============================================ */
+
+.ds-progress-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-progress-bar__label {
+  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);
+  min-width: 36px;
+  text-align: right;
+}
+
+/* ============================================
+   FILL COLOUR
+   ============================================ */
+
+.ds-progress-bar__fill {
+  background-color: var(--color-core-accent-mint);
+}

package/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+export interface ProgressBarProps {
+    /** Current progress value (0–100) */
+    value?: number;
+    /** Size of the bar */
+    size?: 'default' | 'compact';
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Accessible label describing what is loading */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ProgressBar displays completion progress as a horizontal bar.
+ */
+export declare const ProgressBar: ({ value, size, showLabel, ariaLabel, className, }: ProgressBarProps) => import("react").JSX.Element;

package/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./ProgressBar.css";
+const ProgressBar = ({
+  value = 0,
+  size = "default",
+  showLabel = false,
+  ariaLabel,
+  className = ""
+}) => {
+  const clamped = Math.max(0, Math.min(100, value));
+  const baseClass = "ds-progress-bar";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${clamped}%` } }) }),
+    showLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+      clamped,
+      "%"
+    ] })
+  ] });
+};
+export {
+  ProgressBar
+};

package/components/Quote/Quote.css

@@ -0,0 +1,79 @@
+/* ============================================
+   QUOTE COMPONENT
+   Inline blockquote or large pull-quote with
+   optional attribution.
+   ============================================ */
+
+.ds-quote {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.ds-quote__text {
+  margin: 0;
+}
+
+/* ============================================
+   VARIANT — DEFAULT (inline blockquote)
+   ============================================ */
+
+.ds-quote--default .ds-quote__text {
+  padding-left: var(--padding-lg);
+  border-left: var(--border-md) solid var(--color-bg-container-tertiary);
+  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);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-quote--default .ds-quote__caption {
+  padding-left: var(--padding-lg);
+}
+
+/* ============================================
+   VARIANT — PULL (large display quote)
+   Weight 300 display type per the
+   weight-contrast rule — no border, the scale
+   is the emphasis.
+   ============================================ */
+
+.ds-quote--pull .ds-quote__text {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ATTRIBUTION
+   ============================================ */
+
+.ds-quote__caption {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+}
+
+.ds-quote__attribution {
+  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-primary);
+}
+
+.ds-quote__detail {
+  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-tertiary);
+}

package/components/Quote/Quote.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface QuoteProps {
+    /** The quote text */
+    children: React.ReactNode;
+    /** Who said it, e.g. "Rob Ritacca" */
+    attribution?: string;
+    /** Context under the attribution, e.g. "Design Lead, Intuit" */
+    detail?: string;
+    /** `default` is an inline blockquote; `pull` is a large display pull-quote */
+    variant?: 'default' | 'pull';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Quote component — an inline blockquote or a large pull-quote,
+ * with optional attribution.
+ */
+export declare const Quote: ({ children, attribution, detail, variant, className, }: QuoteProps) => React.JSX.Element;

package/components/Quote/Quote.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Quote.css";
+const Quote = ({
+  children,
+  attribution,
+  detail,
+  variant = "default",
+  className = ""
+}) => {
+  const baseClass = "ds-quote";
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    /* @__PURE__ */ jsx("blockquote", { className: `${baseClass}__text`, children }),
+    (attribution || detail) && /* @__PURE__ */ jsxs("figcaption", { className: `${baseClass}__caption`, children: [
+      attribution && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__attribution`, children: [
+        "— ",
+        attribution
+      ] }),
+      detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: detail })
+    ] })
+  ] });
+};
+export {
+  Quote
+};

package/components/RadioButton/RadioButton.css

@@ -0,0 +1,132 @@
+/* ============================================
+   RADIO BUTTON COMPONENT
+   Custom radio with animated dot indicator
+   ============================================ */
+
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ============================================
+   CIRCLE (outer ring)
+   ============================================ */
+
+.ds-radio__circle {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border: var(--border-md) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full); /* 999px — perfect circle */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   DOT (inner fill)
+   ============================================ */
+
+.ds-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);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-radio__label {
+  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);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   CHECKED STATE
+   ============================================ */
+
+.ds-radio--checked .ds-radio__circle {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-radio--checked .ds-radio__dot {
+  transform: scale(1);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-radio:not(.ds-radio--disabled):hover .ds-radio__circle {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-radio--checked:not(.ds-radio--disabled):hover .ds-radio__circle {
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-radio--checked:not(.ds-radio--disabled):hover .ds-radio__dot {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-radio:focus-visible .ds-radio__circle {
+  outline: var(--border-md) solid var(--color-action-primary-border-tertiary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-radio--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   RADIO GROUP
+   ============================================ */
+
+.ds-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-radio-group__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-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-radio-group--horizontal .ds-radio-group__options {
+  flex-direction: row;
+  gap: var(--gap-lg); /* 20px */
+}

package/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export interface RadioButtonProps {
+    /** Label text */
+    label?: string;
+    /** Whether this radio is selected */
+    checked?: boolean;
+    /** Whether the radio is disabled */
+    disabled?: boolean;
+    /** Radio group name — groups radios together */
+    name?: string;
+    /** Value for this radio option */
+    value?: string;
+    /** Callback when selected */
+    onChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label override */
+    ariaLabel?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+export declare const RadioButton: ({ label, checked, disabled, value, onChange, className, ariaLabel, }: RadioButtonProps) => React.JSX.Element;
+export interface RadioGroupProps {
+    /** Group label */
+    label?: string;
+    /** Currently selected value */
+    value?: string;
+    /** Radio group name */
+    name: string;
+    /** Radio options */
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const RadioGroup: ({ label, value, name, options, direction, onChange, className, }: RadioGroupProps) => React.JSX.Element;