@robr0/design-system 0.1.0

package/components/TypographySwatch/TypographySwatch.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./TypographySwatch.css";
+const TypographySwatch = ({
+  name,
+  weight,
+  size,
+  lineHeight,
+  letterSpacing,
+  previewStyle,
+  className = ""
+}) => {
+  const baseClass = "ds-typography-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview`, style: previewStyle, children: name }),
+    /* @__PURE__ */ jsx("hr", { className: `${baseClass}__divider` }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__values`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: weight }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Font weight" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: size }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Font size" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: lineHeight }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Line height" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: letterSpacing }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Letter spacing" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  TypographySwatch
+};

package/components/registry.d.ts

@@ -0,0 +1,20 @@
+/**
+ * COMPONENT REGISTRY — the single source of truth for the public
+ * component count.
+ *
+ * The data lives in registry.json: `components` is the official list of
+ * public components (one entry per folder in src/components), and
+ * `docOnlyHelpers` names the internal documentation helpers that are
+ * deliberately excluded from the public count.
+ *
+ * scripts/validate-component-registry.mjs compares the registry against
+ * the filesystem on every build (library, Storybook, and website), so
+ * the registry cannot silently drift from reality.
+ *
+ * Anywhere a component count is displayed — the Storybook overview,
+ * the website mega-nav, case studies — import COMPONENT_COUNT from
+ * here. Never hardcode the number.
+ */
+export declare const componentRegistry: readonly string[];
+/** The official public component count. */
+export declare const COMPONENT_COUNT: number;

package/components/registry.js

@@ -0,0 +1,7 @@
+import registry from "./registry.json.js";
+const componentRegistry = registry.components;
+const COMPONENT_COUNT = registry.components.length;
+export {
+  COMPONENT_COUNT,
+  componentRegistry
+};

package/components/registry.json

@@ -0,0 +1,67 @@
+{
+  "$comment": "SINGLE SOURCE OF TRUTH for the public component count. Every folder in src/components must appear in exactly one of these lists; scripts/validate-component-registry.mjs enforces this at build time. Import COMPONENT_COUNT from src/components/registry.ts wherever a count is displayed - never hardcode the number.",
+  "components": [
+    "Accordion",
+    "Alert",
+    "AlertDialog",
+    "AppLayout",
+    "AppSidebar",
+    "Avatar",
+    "Badge",
+    "Breadcrumb",
+    "Button",
+    "ButtonGroup",
+    "Card",
+    "Carousel",
+    "Chart",
+    "Checkbox",
+    "Chip",
+    "CircularButton",
+    "CodeBlock",
+    "Combobox",
+    "CommandPalette",
+    "ContactCard",
+    "ContributionGraph",
+    "DateInput",
+    "DatePicker",
+    "Dialog",
+    "Divider",
+    "Drawer",
+    "Dropdown",
+    "DropdownMenu",
+    "EmptyState",
+    "EntityCard",
+    "Figure",
+    "FileInput",
+    "Input",
+    "Instructions",
+    "LinkList",
+    "Nav",
+    "Pagination",
+    "Popover",
+    "ProgressBar",
+    "Quote",
+    "RadioButton",
+    "SectionTitle",
+    "SegmentedControl",
+    "SelectionCard",
+    "Skeleton",
+    "Slider",
+    "Spinner",
+    "Stat",
+    "Table",
+    "Tabs",
+    "Textarea",
+    "Timeline",
+    "Toast",
+    "ToggleGroup",
+    "ToggleSwitch",
+    "Tooltip"
+  ],
+  "docOnlyHelpers": [
+    "ColourSwatch",
+    "MotionSwatch",
+    "SpacingSwatch",
+    "TypographySwatch"
+  ]
+}

package/components/registry.json.d.ts

@@ -0,0 +1,70 @@
+declare const _default: {
+  "$comment": "SINGLE SOURCE OF TRUTH for the public component count. Every folder in src/components must appear in exactly one of these lists; scripts/validate-component-registry.mjs enforces this at build time. Import COMPONENT_COUNT from src/components/registry.ts wherever a count is displayed - never hardcode the number.",
+  "components": [
+    "Accordion",
+    "Alert",
+    "AlertDialog",
+    "AppLayout",
+    "AppSidebar",
+    "Avatar",
+    "Badge",
+    "Breadcrumb",
+    "Button",
+    "ButtonGroup",
+    "Card",
+    "Carousel",
+    "Chart",
+    "Checkbox",
+    "Chip",
+    "CircularButton",
+    "CodeBlock",
+    "Combobox",
+    "CommandPalette",
+    "ContactCard",
+    "ContributionGraph",
+    "DateInput",
+    "DatePicker",
+    "Dialog",
+    "Divider",
+    "Drawer",
+    "Dropdown",
+    "DropdownMenu",
+    "EmptyState",
+    "EntityCard",
+    "Figure",
+    "FileInput",
+    "Input",
+    "Instructions",
+    "LinkList",
+    "Nav",
+    "Pagination",
+    "Popover",
+    "ProgressBar",
+    "Quote",
+    "RadioButton",
+    "SectionTitle",
+    "SegmentedControl",
+    "SelectionCard",
+    "Skeleton",
+    "Slider",
+    "Spinner",
+    "Stat",
+    "Table",
+    "Tabs",
+    "Textarea",
+    "Timeline",
+    "Toast",
+    "ToggleGroup",
+    "ToggleSwitch",
+    "Tooltip"
+  ],
+  "docOnlyHelpers": [
+    "ColourSwatch",
+    "MotionSwatch",
+    "SpacingSwatch",
+    "TypographySwatch"
+  ]
+}
+;
+
+export default _default;

package/components/registry.json.js

@@ -0,0 +1,8 @@
+const components = ["Accordion", "Alert", "AlertDialog", "AppLayout", "AppSidebar", "Avatar", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Carousel", "Chart", "Checkbox", "Chip", "CircularButton", "CodeBlock", "Combobox", "CommandPalette", "ContactCard", "ContributionGraph", "DateInput", "DatePicker", "Dialog", "Divider", "Drawer", "Dropdown", "DropdownMenu", "EmptyState", "EntityCard", "Figure", "FileInput", "Input", "Instructions", "LinkList", "Nav", "Pagination", "Popover", "ProgressBar", "Quote", "RadioButton", "SectionTitle", "SegmentedControl", "SelectionCard", "Skeleton", "Slider", "Spinner", "Stat", "Table", "Tabs", "Textarea", "Timeline", "Toast", "ToggleGroup", "ToggleSwitch", "Tooltip"];
+const registry = {
+  components
+};
+export {
+  components,
+  registry as default
+};

package/fonts/material-symbols.css

@@ -0,0 +1,94 @@
+/* ============================================
+   MATERIAL SYMBOLS — Rounded only
+   Variable font with FILL, GRAD, opsz, wght axes
+   ============================================ */
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('./MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.woff2') format('woff2');
+  font-display: block;
+}
+
+/* ============================================
+   ICON BASE STYLES
+   ============================================ */
+
+/*
+   Sizing is driven by a single custom property, `--icon-size`, which sets
+   the glyph size and the layout box together so they can never desync.
+
+   This is deliberately a *consumed* variable with a fallback, never a
+   declared one: because this class only reads `--icon-size` and never sets
+   it, a component that sets `--icon-size` has nothing to compete with.
+   Declaring `font-size` here directly (as this file used to) tied on
+   specificity with every single-class component rule and — being imported
+   later — won, rendering 24px glyphs inside 20px boxes.
+
+   Use one of the semantic steps: --icon-size-sm | -md | -lg | -xl.
+*/
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--icon-size, var(--icon-size-md));
+  width: var(--icon-size, var(--icon-size-md));
+  height: var(--icon-size, var(--icon-size-md));
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}
+
+/* ============================================
+   VARIABLE FONT SETTINGS
+   ============================================ */
+
+/*
+   `opsz` is intentionally ABSENT from font-variation-settings. An explicit
+   axis value always overrides `font-optical-sizing: auto`, so listing it
+   here would silently pin every icon to one optical size regardless of how
+   large it is drawn — which is exactly what this file used to do, via a
+   `--material-symbols-size` hook that nothing ever set.
+
+   With the axis omitted, the browser feeds the used font-size into `opsz`
+   automatically, so stroke weight adapts to the rendered size. The font's
+   axis range is 20..48; the icon-size scale starts at 20 to stay inside it.
+*/
+.material-symbols-rounded {
+  font-optical-sizing: auto;
+  font-variation-settings:
+    'FILL' var(--material-symbols-fill, 0),
+    'wght' var(--material-symbols-weight, 200),
+    'GRAD' var(--material-symbols-grade, 0);
+}
+
+/* ============================================
+   DARK THEME — optical grade correction
+   Light-on-dark glyphs bloom and read heavier
+   than the same strokes on a light background.
+   A negative GRAD thins them back without
+   changing glyph width or spacing (which is
+   what `wght` would do). Material's own
+   guidance for inverted surfaces.
+   ============================================ */
+
+[data-theme="dark"] {
+  --material-symbols-grade: -25;
+}
+
+/* ============================================
+   MODIFIER — filled variant
+   ============================================ */
+
+.icon-filled {
+  --material-symbols-fill: 1;
+}

package/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * GENERATED FILE — do not edit.
+ * Built from src/components/registry.json by scripts/generate-library-barrel.mjs
+ * (validate-registry chain). recharts-backed modules live in charts.ts, not here — recharts is an optional peer.
+ */
+export * from './components/Accordion/Accordion';
+export * from './components/Alert/Alert';
+export * from './components/AlertDialog/AlertDialog';
+export * from './components/AppLayout/AppLayout';
+export * from './components/AppSidebar/AppSidebar';
+export * from './components/Avatar/Avatar';
+export * from './components/Badge/Badge';
+export * from './components/Breadcrumb/Breadcrumb';
+export * from './components/Button/Button';
+export * from './components/ButtonGroup/ButtonGroup';
+export * from './components/Card/Card';
+export * from './components/Carousel/Carousel';
+export * from './components/Checkbox/Checkbox';
+export * from './components/Chip/Chip';
+export * from './components/CircularButton/CircularButton';
+export * from './components/CodeBlock/CodeBlock';
+export * from './components/Combobox/Combobox';
+export * from './components/CommandPalette/CommandPalette';
+export * from './components/ContactCard/ContactCard';
+export * from './components/ContributionGraph/ContributionGraph';
+export * from './components/DateInput/DateInput';
+export * from './components/DatePicker/DatePicker';
+export * from './components/Dialog/Dialog';
+export * from './components/Divider/Divider';
+export * from './components/Drawer/Drawer';
+export * from './components/Dropdown/Dropdown';
+export * from './components/DropdownMenu/DropdownMenu';
+export * from './components/EmptyState/EmptyState';
+export * from './components/EntityCard/EntityCard';
+export * from './components/Figure/Figure';
+export * from './components/FileInput/FileInput';
+export * from './components/Input/Input';
+export * from './components/Instructions/Instructions';
+export * from './components/LinkList/LinkList';
+export * from './components/Nav/Nav';
+export * from './components/Pagination/Pagination';
+export * from './components/Popover/Popover';
+export * from './components/ProgressBar/ProgressBar';
+export * from './components/Quote/Quote';
+export * from './components/RadioButton/RadioButton';
+export * from './components/SectionTitle/SectionTitle';
+export * from './components/SegmentedControl/SegmentedControl';
+export * from './components/SelectionCard/SelectionCard';
+export * from './components/Skeleton/Skeleton';
+export * from './components/Slider/Slider';
+export * from './components/Spinner/Spinner';
+export * from './components/Stat/Stat';
+export * from './components/Table/Table';
+export * from './components/Tabs/Tabs';
+export * from './components/Textarea/Textarea';
+export * from './components/Timeline/Timeline';
+export * from './components/Toast/Toast';
+export * from './components/ToggleGroup/ToggleGroup';
+export * from './components/ToggleSwitch/ToggleSwitch';
+export * from './components/Tooltip/Tooltip';
+export { componentRegistry, COMPONENT_COUNT } from './components/registry';
+export { tokenRegistry, TOKEN_COUNT, TOKEN_COUNTS } from './tokens/registry';

package/index.js

@@ -0,0 +1,123 @@
+import { Accordion } from "./components/Accordion/Accordion.js";
+import { Alert } from "./components/Alert/Alert.js";
+import { AlertDialog } from "./components/AlertDialog/AlertDialog.js";
+import { AppLayout } from "./components/AppLayout/AppLayout.js";
+import { AppSidebar } from "./components/AppSidebar/AppSidebar.js";
+import { Avatar } from "./components/Avatar/Avatar.js";
+import { Badge } from "./components/Badge/Badge.js";
+import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
+import { Button } from "./components/Button/Button.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+import { Card } from "./components/Card/Card.js";
+import { Carousel } from "./components/Carousel/Carousel.js";
+import { Checkbox, CheckboxGroup } from "./components/Checkbox/Checkbox.js";
+import { Chip } from "./components/Chip/Chip.js";
+import { CircularButton } from "./components/CircularButton/CircularButton.js";
+import { CodeBlock } from "./components/CodeBlock/CodeBlock.js";
+import { Combobox } from "./components/Combobox/Combobox.js";
+import { CommandPalette } from "./components/CommandPalette/CommandPalette.js";
+import { ContactCard } from "./components/ContactCard/ContactCard.js";
+import { ContributionGraph } from "./components/ContributionGraph/ContributionGraph.js";
+import { DateInput } from "./components/DateInput/DateInput.js";
+import { DatePicker } from "./components/DatePicker/DatePicker.js";
+import { Dialog } from "./components/Dialog/Dialog.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
+import { Dropdown } from "./components/Dropdown/Dropdown.js";
+import { DropdownMenu } from "./components/DropdownMenu/DropdownMenu.js";
+import { EmptyState } from "./components/EmptyState/EmptyState.js";
+import { EntityCard } from "./components/EntityCard/EntityCard.js";
+import { Figure } from "./components/Figure/Figure.js";
+import { FileInput } from "./components/FileInput/FileInput.js";
+import { Input } from "./components/Input/Input.js";
+import { Instructions } from "./components/Instructions/Instructions.js";
+import { LinkList } from "./components/LinkList/LinkList.js";
+import { Nav } from "./components/Nav/Nav.js";
+import { Pagination } from "./components/Pagination/Pagination.js";
+import { Popover } from "./components/Popover/Popover.js";
+import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
+import { Quote } from "./components/Quote/Quote.js";
+import { RadioButton, RadioGroup } from "./components/RadioButton/RadioButton.js";
+import { SectionTitle } from "./components/SectionTitle/SectionTitle.js";
+import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl.js";
+import { SelectionCard } from "./components/SelectionCard/SelectionCard.js";
+import { Skeleton } from "./components/Skeleton/Skeleton.js";
+import { Slider } from "./components/Slider/Slider.js";
+import { Spinner } from "./components/Spinner/Spinner.js";
+import { Stat } from "./components/Stat/Stat.js";
+import { Table } from "./components/Table/Table.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
+import { Textarea } from "./components/Textarea/Textarea.js";
+import { Timeline } from "./components/Timeline/Timeline.js";
+import { Toast, ToastProvider, useToast } from "./components/Toast/Toast.js";
+import { ToggleGroup } from "./components/ToggleGroup/ToggleGroup.js";
+import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+import { COMPONENT_COUNT, componentRegistry } from "./components/registry.js";
+import { TOKEN_COUNT, TOKEN_COUNTS, tokenRegistry } from "./tokens/registry.js";
+export {
+  Accordion,
+  Alert,
+  AlertDialog,
+  AppLayout,
+  AppSidebar,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  COMPONENT_COUNT,
+  Card,
+  Carousel,
+  Checkbox,
+  CheckboxGroup,
+  Chip,
+  CircularButton,
+  CodeBlock,
+  Combobox,
+  CommandPalette,
+  ContactCard,
+  ContributionGraph,
+  DateInput,
+  DatePicker,
+  Dialog,
+  Divider,
+  Drawer,
+  Dropdown,
+  DropdownMenu,
+  EmptyState,
+  EntityCard,
+  Figure,
+  FileInput,
+  Input,
+  Instructions,
+  LinkList,
+  Nav,
+  Pagination,
+  Popover,
+  ProgressBar,
+  Quote,
+  RadioButton,
+  RadioGroup,
+  SectionTitle,
+  SegmentedControl,
+  SelectionCard,
+  Skeleton,
+  Slider,
+  Spinner,
+  Stat,
+  TOKEN_COUNT,
+  TOKEN_COUNTS,
+  Table,
+  Tabs,
+  Textarea,
+  Timeline,
+  Toast,
+  ToastProvider,
+  ToggleGroup,
+  ToggleSwitch,
+  Tooltip,
+  componentRegistry,
+  tokenRegistry,
+  useToast
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@robr0/design-system",
+  "version": "0.1.0",
+  "description": "A token-driven React design system — accessible components, light/dark theming, and CSS-variable customization.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robritacca-dotcom/design-system.git"
+  },
+  "homepage": "https://www.robertritacca.com",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "design-tokens",
+    "css-variables",
+    "dark-mode",
+    "typescript"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./charts": {
+      "types": "./charts.d.ts",
+      "import": "./charts.js"
+    },
+    "./components/registry": {
+      "types": "./components/registry.d.ts",
+      "import": "./components/registry.js"
+    },
+    "./components/Avatar/demoAvatars": {
+      "types": "./components/Avatar/demoAvatars.d.ts",
+      "import": "./components/Avatar/demoAvatars.js"
+    },
+    "./tokens/registry": {
+      "types": "./tokens/registry.d.ts",
+      "import": "./tokens/registry.js"
+    },
+    "./components/*": {
+      "types": "./components/*.d.ts",
+      "import": "./components/*.js"
+    },
+    "./tokens/*.css": "./tokens/*.css",
+    "./fonts/*": "./fonts/*",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "recharts": {
+      "optional": true
+    }
+  }
+}

package/tokens/registry.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TOKEN REGISTRY — the single source of truth for the semantic-token
+ * count.
+ *
+ * registry.json is GENERATED from the semantic token CSS
+ * (tokens-light.css + tokens-typography.css + tokens-motion.css) by
+ * scripts/generate-token-registry.mjs, and
+ * scripts/validate-token-registry.mjs re-checks it (plus light/dark
+ * colour parity) on every build — library, Storybook, and website —
+ * so the counts here cannot silently drift from the CSS.
+ *
+ * Anywhere a token count is displayed — case studies, foundations
+ * pages, Storybook docs — import TOKEN_COUNT / TOKEN_COUNTS from here.
+ * Never hardcode the number.
+ */
+export type TokenCategory = 'colour' | 'typography' | 'spacing' | 'radius' | 'border' | 'shadow' | 'icons' | 'motion';
+/** Semantic token names, grouped by category. */
+export declare const tokenRegistry: Record<TokenCategory, readonly string[]>;
+/** Semantic-token count per category. */
+export declare const TOKEN_COUNTS: Record<TokenCategory, number>;
+/** The official semantic-token count. */
+export declare const TOKEN_COUNT: number;

package/tokens/registry.js

@@ -0,0 +1,14 @@
+import registry from "./registry.json.js";
+const tokenRegistry = registry.categories;
+const TOKEN_COUNTS = Object.fromEntries(
+  Object.entries(tokenRegistry).map(([category, names]) => [category, names.length])
+);
+const TOKEN_COUNT = Object.values(TOKEN_COUNTS).reduce(
+  (sum, count) => sum + count,
+  0
+);
+export {
+  TOKEN_COUNT,
+  TOKEN_COUNTS,
+  tokenRegistry
+};