@robr0/design-system 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rob Ritacca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+# robr0 — Portfolio + Design System
+
+[![CI](https://github.com/robritacca-dotcom/design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/robritacca-dotcom/design-system/actions/workflows/ci.yml)
+
+A personal portfolio site built on a custom React design system I designed and engineered from scratch. The DS isn't a side project — it's the backbone every portfolio page is built on, ensuring the work is presented consistently and with the same craft standards I apply professionally.
+
+**[→ Live site](https://robertritacca.com/)** · **[→ Storybook](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)**
+
+The **live site** is the portfolio built on the design system. **Storybook** is the interactive component explorer for the design system itself — two separate parts of this repo.
+
+---
+
+## Two things, one repo
+
+| Part | Description |
+|---|---|
+| **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages — all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
+| **Design system** (`/src`) | <!-- component-count -->56<!-- /component-count --> React components, a three-tier token architecture, dark mode, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+
+---
+
+## Design system
+
+### Components
+
+<!-- component-list:start -->
+Accordion · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Checkbox · Chip · Circular button · Code block · Combobox · Command palette · Contact card · Contribution graph · Date input · Date picker · Dialog · Divider · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Figure · File input · Input · Instructions · Link list · Nav · Pagination · Popover · Progress bar · Quote · Radio button · Section title · Segmented control · Selection card · Skeleton · Slider · Spinner · Stat · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tooltip
+<!-- component-list:end -->
+
+### Using the package
+
+The design system is published as [`@robr0/design-system`](https://www.npmjs.com/package/@robr0/design-system) (React 19+ is a peer dependency):
+
+```bash
+npm install @robr0/design-system
+```
+
+Import the token stylesheet once (it carries the primitives, semantic tokens, and both themes), then use components:
+
+```tsx
+import '@robr0/design-system/tokens/tokens.css';
+import { Button, Card, Badge } from '@robr0/design-system';
+```
+
+Deep imports work too (`@robr0/design-system/components/Button/Button`). Chart components live behind a separate entry so the optional `recharts` peer dependency is only needed if you use them:
+
+```tsx
+import { BarChart, LineChart } from '@robr0/design-system/charts';
+```
+
+**Theming and customization** happen through CSS variables — no configuration API:
+
+- **Dark mode**: set `data-theme="dark"` on the root element (light is the default).
+- **Font**: the whole type scale chains to one token. Load any font you like and override it:
+  ```css
+  :root { --font-family-primary: 'Inter', sans-serif; }
+  ```
+- **Colors, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it:
+  ```css
+  :root {
+    --primitive-teal-07: #7C3AED;  /* your brand color becomes the action color */
+    --primitive-radius-full: 12px; /* pill buttons become rounded rectangles */
+  }
+  ```
+
+Icons use a bundled Material Symbols Rounded variable font (woff2) — no extra setup. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
+
+### Token architecture
+
+Tokens flow in one direction — primitives are never referenced directly in components:
+
+```
+tokens-primitives.css      --primitive-teal-07: #118AB2
+        ↓
+tokens-light/dark.css      --color-action-primary-bg: var(--primitive-teal-07)
+        ↓
+Component CSS              background-color: var(--color-action-primary-bg)
+```
+
+Dark mode is driven by `data-theme="dark"` on the root element — no `prefers-color-scheme` queries in components.
+
+### Design principles
+
+- **Single typeface**: Nunito Sans (weight 300 for display, 600 for headings, 400/500 for body)
+- **White-floor UI**: depth comes from a container color ramp, not box shadows
+- **Teal is the action color**: primary buttons and focus rings only — never decorative
+- **Five status variants**: info, positive, warning, error, neutral — shared tokens across Badge, Alert, Toast, ProgressBar
+- **Material Symbols Rounded** for all icons
+
+Full spec in [`design.md`](design.md).
+
+---
+
+## Tech
+
+- **React 19 + TypeScript** — component library
+- **Vite 7** — dev server and library build
+- **Next.js 16** — portfolio site and DS documentation
+- **Storybook 10** — component explorer
+- **Vitest + Playwright** — every Storybook story runs as a render test in headless Chromium
+- **CSS custom properties** — all theming via semantic tokens, no CSS-in-JS
+
+---
+
+## Quality & CI
+
+Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/workflows/ci.yml)) with four jobs: **lint + library build**, **story tests** (every Storybook story rendered in headless Chromium via Vitest), **Storybook build**, and **website build**. The same checklist runs locally with one command:
+
+```bash
+npm run verify   # lint + library build + story tests + Storybook build + website build
+```
+
+CI also guards against documentation drift: generated surfaces (this README's component count and list, the website's skills pages, the published CLAUDE.md/design.md blueprints) are rebuilt from their source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
+
+---
+
+## Running locally
+
+```bash
+# Storybook (the library's dev sandbox)
+npm run storybook        # http://localhost:6006
+
+# Portfolio + documentation website
+cd website
+npm install
+npm run dev              # http://localhost:3000
+```

package/charts.d.ts

@@ -0,0 +1,14 @@
+/**
+ * GENERATED FILE — do not edit.
+ * Built from src/components/registry.json by scripts/generate-library-barrel.mjs
+ * (validate-registry chain). The recharts-backed components; requires the optional recharts peer dependency.
+ */
+export * from './components/Chart/AreaChart';
+export * from './components/Chart/BarChart';
+export * from './components/Chart/LineChart';
+export * from './components/Chart/PieChart';
+export * from './components/Chart/RadarChart';
+export * from './components/Chart/RadialChart';
+export * from './components/Chart/ScatterChart';
+export * from './components/Chart/StackedBarChart';
+export * from './components/Chart/Treemap';

package/charts.js

@@ -0,0 +1,20 @@
+import { AreaChart } from "./components/Chart/AreaChart.js";
+import { BarChart } from "./components/Chart/BarChart.js";
+import { LineChart } from "./components/Chart/LineChart.js";
+import { PieChart } from "./components/Chart/PieChart.js";
+import { RadarChart } from "./components/Chart/RadarChart.js";
+import { RadialChart } from "./components/Chart/RadialChart.js";
+import { ScatterChart } from "./components/Chart/ScatterChart.js";
+import { StackedBarChart } from "./components/Chart/StackedBarChart.js";
+import { Treemap } from "./components/Chart/Treemap.js";
+export {
+  AreaChart,
+  BarChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  RadialChart,
+  ScatterChart,
+  StackedBarChart,
+  Treemap
+};

package/components/Accordion/Accordion.css

@@ -0,0 +1,119 @@
+/* ============================================
+   ACCORDION COMPONENT
+   Collapsible content sections
+   ============================================ */
+
+.ds-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.ds-accordion__item {
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+}
+
+.ds-accordion__item:last-child {
+  border-bottom: none;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--gap-sm);
+  padding: var(--padding-md) var(--padding-lg);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-accordion__trigger:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-accordion__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-accordion__title {
+  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);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-accordion__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-accordion__item--open .ds-accordion__icon {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-accordion__item--open .ds-accordion__panel {
+  grid-template-rows: 1fr;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-accordion__content {
+  overflow: hidden;
+  padding: 0 var(--padding-lg);
+  transition: padding var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-accordion__item--open .ds-accordion__content {
+  padding: 0 var(--padding-lg) var(--padding-md);
+}
+
+.ds-accordion__content p {
+  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);
+  margin: 0;
+}

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AccordionItem {
+    /** Unique identifier */
+    id: string;
+    /** Header text */
+    title: string;
+    /** Body content */
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    /** List of accordion items */
+    items: AccordionItem[];
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** IDs of initially expanded items */
+    defaultExpanded?: string[];
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Accordion organises content into collapsible sections.
+ * Supports single or multiple open panels.
+ */
+export declare const Accordion: ({ items, multiple, defaultExpanded, className, }: AccordionProps) => React.JSX.Element;

package/components/Accordion/Accordion.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import "./Accordion.css";
+import "../../fonts/material-symbols.css";
+const Accordion = ({
+  items,
+  multiple = false,
+  defaultExpanded = [],
+  className = ""
+}) => {
+  const [expanded, setExpanded] = useState(new Set(defaultExpanded));
+  const baseClass = "ds-accordion";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const toggle = useCallback(
+    (id) => {
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          if (!multiple) next.clear();
+          next.add(id);
+        }
+        return next;
+      });
+    },
+    [multiple]
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, children: items.map((item) => {
+    const isOpen = expanded.has(item.id);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__item${isOpen ? ` ${baseClass}__item--open` : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__trigger`,
+              "aria-expanded": isOpen,
+              "aria-controls": `${baseClass}-panel-${item.id}`,
+              id: `${baseClass}-header-${item.id}`,
+              onClick: () => toggle(item.id),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: item.title }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "expand_more"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `${baseClass}-panel-${item.id}`,
+              role: "region",
+              "aria-labelledby": `${baseClass}-header-${item.id}`,
+              className: `${baseClass}__panel`,
+              children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: item.content })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+};
+export {
+  Accordion
+};

package/components/Alert/Alert.css

@@ -0,0 +1,252 @@
+/* ============================================
+   ALERT COMPONENT
+   Contextual feedback with status variants
+   ============================================ */
+
+.ds-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-md); /* 16px */
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   SIZE — DEFAULT
+   ============================================ */
+
+.ds-alert--default {
+  padding: var(--padding-md); /* 16px */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-alert--compact {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+}
+
+.ds-alert--compact .ds-alert__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-alert--compact .ds-alert__title {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-alert--compact .ds-alert__description {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-alert--compact .ds-alert__dismiss {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-alert--compact .ds-alert__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-alert__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-alert__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  min-width: 0;
+}
+
+.ds-alert__title {
+  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);
+  margin: 0;
+}
+
+.ds-alert__description {
+  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);
+  margin: 0;
+}
+
+/* ============================================
+   DISMISS BUTTON
+   ============================================ */
+
+.ds-alert__dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--radius-sm); /* 8px */
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-alert__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-alert__dismiss:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-alert__dismiss:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   VARIANT — INFO
+   ============================================ */
+
+.ds-alert--info {
+  background-color: var(--color-status-info-bg);
+  border-color: var(--color-status-info-border);
+}
+
+.ds-alert--info .ds-alert__icon {
+  color: var(--color-status-info-border);
+}
+
+.ds-alert--info .ds-alert__title {
+  color: var(--color-status-info-text);
+}
+
+.ds-alert--info .ds-alert__description {
+  color: var(--color-status-info-text);
+}
+
+.ds-alert--info .ds-alert__dismiss {
+  color: var(--color-status-info-text);
+}
+
+/* ============================================
+   VARIANT — POSITIVE
+   ============================================ */
+
+.ds-alert--positive {
+  background-color: var(--color-status-positive-bg);
+  border-color: var(--color-status-positive-border);
+}
+
+.ds-alert--positive .ds-alert__icon {
+  color: var(--color-status-positive-border);
+}
+
+.ds-alert--positive .ds-alert__title {
+  color: var(--color-status-positive-text);
+}
+
+.ds-alert--positive .ds-alert__description {
+  color: var(--color-status-positive-text);
+}
+
+.ds-alert--positive .ds-alert__dismiss {
+  color: var(--color-status-positive-text);
+}
+
+/* ============================================
+   VARIANT — WARNING
+   ============================================ */
+
+.ds-alert--warning {
+  background-color: var(--color-status-warning-bg);
+  border-color: var(--color-status-warning-border);
+}
+
+.ds-alert--warning .ds-alert__icon {
+  color: var(--color-status-warning-border);
+}
+
+.ds-alert--warning .ds-alert__title {
+  color: var(--color-status-warning-text);
+}
+
+.ds-alert--warning .ds-alert__description {
+  color: var(--color-status-warning-text);
+}
+
+.ds-alert--warning .ds-alert__dismiss {
+  color: var(--color-status-warning-text);
+}
+
+/* ============================================
+   VARIANT — ERROR
+   ============================================ */
+
+.ds-alert--error {
+  background-color: var(--color-status-error-bg);
+  border-color: var(--color-status-error-border);
+}
+
+.ds-alert--error .ds-alert__icon {
+  color: var(--color-status-error-border);
+}
+
+.ds-alert--error .ds-alert__title {
+  color: var(--color-status-error-text);
+}
+
+.ds-alert--error .ds-alert__description {
+  color: var(--color-status-error-text);
+}
+
+.ds-alert--error .ds-alert__dismiss {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   VARIANT — NEUTRAL
+   ============================================ */
+
+.ds-alert--neutral {
+  background-color: var(--color-status-neutral-bg);
+  border-color: var(--color-status-neutral-border);
+}
+
+.ds-alert--neutral .ds-alert__icon {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__title {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__description {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__dismiss {
+  color: var(--color-status-neutral-text);
+}

package/components/Alert/Alert.d.ts

@@ -0,0 +1,24 @@
+export interface AlertProps {
+    /** Alert title text */
+    title?: string;
+    /** Alert description / body text */
+    description?: string;
+    /** Alert variant determines colour and icon */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Custom icon override — Material Symbol name */
+    icon?: string;
+    /** Callback when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Alert component for contextual feedback messages.
+ * Supports info, positive, warning, error, and neutral variants
+ * with optional dismiss functionality.
+ */
+export declare const Alert: ({ title, description, variant, size, dismissible, icon, onDismiss, className, }: AlertProps) => import("react").JSX.Element;