@robr0/design-system 0.2.0 → 0.4.0

package/index.d.ts

@@ -4,6 +4,8 @@
  * (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/AgentStatus/AgentStatus';
+export * from './components/AgentStatus/AgentStatusPatterns';
 export * from './components/Alert/Alert';
 export * from './components/AlertDialog/AlertDialog';
 export * from './components/AppLayout/AppLayout';
@@ -19,9 +21,11 @@ export * from './components/Checkbox/Checkbox';
 export * from './components/Chip/Chip';
 export * from './components/CircularButton/CircularButton';
 export * from './components/CodeBlock/CodeBlock';
+export * from './components/ColorPicker/ColorPicker';
 export * from './components/Combobox/Combobox';
 export * from './components/CommandPalette/CommandPalette';
 export * from './components/ContactCard/ContactCard';
+export * from './components/ContextMenu/ContextMenu';
 export * from './components/ContributionGraph/ContributionGraph';
 export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
@@ -32,10 +36,13 @@ export * from './components/Dropdown/Dropdown';
 export * from './components/DropdownMenu/DropdownMenu';
 export * from './components/EmptyState/EmptyState';
 export * from './components/EntityCard/EntityCard';
+export * from './components/Field/Field';
+export * from './components/Field/FieldContext';
 export * from './components/Figure/Figure';
 export * from './components/FileInput/FileInput';
 export * from './components/Input/Input';
 export * from './components/Instructions/Instructions';
+export * from './components/Kbd/Kbd';
 export * from './components/LinkList/LinkList';
 export * from './components/Nav/Nav';
 export * from './components/Pagination/Pagination';
@@ -43,6 +50,7 @@ export * from './components/Popover/Popover';
 export * from './components/ProgressBar/ProgressBar';
 export * from './components/Quote/Quote';
 export * from './components/RadioButton/RadioButton';
+export * from './components/Reasoning/Reasoning';
 export * from './components/SectionTitle/SectionTitle';
 export * from './components/SegmentedControl/SegmentedControl';
 export * from './components/SelectionCard/SelectionCard';
@@ -50,6 +58,7 @@ export * from './components/Skeleton/Skeleton';
 export * from './components/Slider/Slider';
 export * from './components/Spinner/Spinner';
 export * from './components/Stat/Stat';
+export * from './components/Swatch/Swatch';
 export * from './components/Table/Table';
 export * from './components/Tabs/Tabs';
 export * from './components/Textarea/Textarea';
@@ -57,6 +66,8 @@ export * from './components/Timeline/Timeline';
 export * from './components/Toast/Toast';
 export * from './components/ToggleGroup/ToggleGroup';
 export * from './components/ToggleSwitch/ToggleSwitch';
+export * from './components/ToolCall/ToolCall';
 export * from './components/Tooltip/Tooltip';
-export { componentRegistry, COMPONENT_COUNT } from './components/registry';
+export { componentRegistry, componentMetadata, componentCategories, COMPONENT_COUNT, } from './components/registry';
+export type { ComponentMeta } from './components/registry';
 export { tokenRegistry, TOKEN_COUNT, TOKEN_COUNTS } from './tokens/registry';

package/index.js

@@ -1,4 +1,6 @@
 import { Accordion } from "./components/Accordion/Accordion.js";
+import { AgentStatus } from "./components/AgentStatus/AgentStatus.js";
+import { agentStatusPatterns } from "./components/AgentStatus/AgentStatusPatterns.js";
 import { Alert } from "./components/Alert/Alert.js";
 import { AlertDialog } from "./components/AlertDialog/AlertDialog.js";
 import { AppLayout } from "./components/AppLayout/AppLayout.js";
@@ -14,9 +16,11 @@ 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 { ColorPicker } from "./components/ColorPicker/ColorPicker.js";
 import { Combobox } from "./components/Combobox/Combobox.js";
 import { CommandPalette } from "./components/CommandPalette/CommandPalette.js";
 import { ContactCard } from "./components/ContactCard/ContactCard.js";
+import { ContextMenu } from "./components/ContextMenu/ContextMenu.js";
 import { ContributionGraph } from "./components/ContributionGraph/ContributionGraph.js";
 import { DateInput } from "./components/DateInput/DateInput.js";
 import { DatePicker } from "./components/DatePicker/DatePicker.js";
@@ -27,10 +31,13 @@ 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 { Field } from "./components/Field/Field.js";
+import { FieldContext, useField } from "./components/Field/FieldContext.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 { Kbd } from "./components/Kbd/Kbd.js";
 import { LinkList } from "./components/LinkList/LinkList.js";
 import { Nav } from "./components/Nav/Nav.js";
 import { Pagination } from "./components/Pagination/Pagination.js";
@@ -38,6 +45,7 @@ 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 { Reasoning } from "./components/Reasoning/Reasoning.js";
 import { SectionTitle } from "./components/SectionTitle/SectionTitle.js";
 import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl.js";
 import { SelectionCard } from "./components/SelectionCard/SelectionCard.js";
@@ -45,6 +53,7 @@ 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 { Swatch } from "./components/Swatch/Swatch.js";
 import { Table } from "./components/Table/Table.js";
 import { Tabs } from "./components/Tabs/Tabs.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
@@ -52,11 +61,13 @@ 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 { ToolCall } from "./components/ToolCall/ToolCall.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
-import { COMPONENT_COUNT, componentRegistry } from "./components/registry.js";
+import { COMPONENT_COUNT, componentCategories, componentMetadata, componentRegistry } from "./components/registry.js";
 import { TOKEN_COUNT, TOKEN_COUNTS, tokenRegistry } from "./tokens/registry.js";
 export {
   Accordion,
+  AgentStatus,
   Alert,
   AlertDialog,
   AppLayout,
@@ -74,9 +85,11 @@ export {
   Chip,
   CircularButton,
   CodeBlock,
+  ColorPicker,
   Combobox,
   CommandPalette,
   ContactCard,
+  ContextMenu,
   ContributionGraph,
   DateInput,
   DatePicker,
@@ -87,10 +100,13 @@ export {
   DropdownMenu,
   EmptyState,
   EntityCard,
+  Field,
+  FieldContext,
   Figure,
   FileInput,
   Input,
   Instructions,
+  Kbd,
   LinkList,
   Nav,
   Pagination,
@@ -99,6 +115,7 @@ export {
   Quote,
   RadioButton,
   RadioGroup,
+  Reasoning,
   SectionTitle,
   SegmentedControl,
   SelectionCard,
@@ -106,6 +123,7 @@ export {
   Slider,
   Spinner,
   Stat,
+  Swatch,
   TOKEN_COUNT,
   TOKEN_COUNTS,
   Table,
@@ -116,8 +134,13 @@ export {
   ToastProvider,
   ToggleGroup,
   ToggleSwitch,
+  ToolCall,
   Tooltip,
+  agentStatusPatterns,
+  componentCategories,
+  componentMetadata,
   componentRegistry,
   tokenRegistry,
+  useField,
   useToast
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.2.0",
-  "description": "A token-driven React design system — accessible components, light/dark theming, and CSS-variable customization.",
+  "version": "0.4.0",
+  "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/robritacca-dotcom/design-system.git"
   },
-  "homepage": "https://www.robertritacca.com",
+  "homepage": "https://robertritacca.com",
   "keywords": [
     "react",
     "design-system",
@@ -15,7 +15,11 @@
     "design-tokens",
     "css-variables",
     "dark-mode",
-    "typescript"
+    "typescript",
+    "ai-ready",
+    "ai-agents",
+    "claude-code",
+    "composable"
   ],
   "type": "module",
   "sideEffects": [

package/tokens/registry.json

@@ -189,6 +189,7 @@
       "--motion-duration-base",
       "--motion-duration-deliberate",
       "--motion-duration-fast",
+      "--motion-duration-loop-matrix",
       "--motion-duration-loop-shimmer",
       "--motion-duration-loop-spin",
       "--motion-duration-slow",

package/tokens/registry.json.d.ts

@@ -189,6 +189,7 @@ declare const _default: {
       "--motion-duration-base",
       "--motion-duration-deliberate",
       "--motion-duration-fast",
+      "--motion-duration-loop-matrix",
       "--motion-duration-loop-shimmer",
       "--motion-duration-loop-spin",
       "--motion-duration-slow",

package/tokens/registry.json.js

@@ -1,4 +1,4 @@
-const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary"], "typography": ["--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxs", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
+const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary"], "typography": ["--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxs", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
 const registry = {
   categories
 };

package/tokens/tokens-motion.css

@@ -26,7 +26,8 @@
 
   --motion-duration-deliberate: 400ms;    /* Carousel slide */
   --motion-duration-loop-spin: 1000ms;    /* Spinner rotation */
-  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer */
+  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer, agent label sweep */
+  --motion-duration-loop-matrix: 1400ms;  /* Agent dot-matrix cycle (twelve slots) */
 
   /* ============================================
      EASINGS
@@ -55,6 +56,7 @@
     --motion-duration-deliberate: 0.01ms;
     --motion-duration-loop-spin: 0.01ms;
     --motion-duration-loop-shimmer: 0.01ms;
+    --motion-duration-loop-matrix: 0.01ms;
   }
 
   *,