@robr0/design-system 0.10.0 → 0.11.0

package/index.d.ts

@@ -19,6 +19,7 @@ export * from './components/Breadcrumb/Breadcrumb';
 export * from './components/Button/Button';
 export * from './components/ButtonGroup/ButtonGroup';
 export * from './components/Card/Card';
+export * from './components/CardStack/CardStack';
 export * from './components/Carousel/Carousel';
 export * from './components/ChatHeader/ChatHeader';
 export * from './components/ChatMarker/ChatMarker';
@@ -52,11 +53,14 @@ export * from './components/Field/Field';
 export * from './components/Field/FieldContext';
 export * from './components/Figure/Figure';
 export * from './components/FileInput/FileInput';
+export * from './components/Globe/Globe';
 export * from './components/Input/Input';
 export * from './components/Instructions/Instructions';
 export * from './components/InterruptCard/InterruptCard';
 export * from './components/Kbd/Kbd';
 export * from './components/LinkList/LinkList';
+export * from './components/MapCallout/MapCallout';
+export * from './components/MapLegend/MapLegend';
 export * from './components/MessageActions/MessageActions';
 export * from './components/MessageCard/MessageCard';
 export * from './components/ModelPicker/ModelPicker';

package/index.js

@@ -14,6 +14,7 @@ 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 { CardStack } from "./components/CardStack/CardStack.js";
 import { Carousel } from "./components/Carousel/Carousel.js";
 import { ChatHeader } from "./components/ChatHeader/ChatHeader.js";
 import { ChatMarker } from "./components/ChatMarker/ChatMarker.js";
@@ -47,11 +48,14 @@ 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 { Globe } from "./components/Globe/Globe.js";
 import { Input } from "./components/Input/Input.js";
 import { Instructions } from "./components/Instructions/Instructions.js";
 import { InterruptCard } from "./components/InterruptCard/InterruptCard.js";
 import { Kbd } from "./components/Kbd/Kbd.js";
 import { LinkList } from "./components/LinkList/LinkList.js";
+import { MapCallout } from "./components/MapCallout/MapCallout.js";
+import { MapLegend } from "./components/MapLegend/MapLegend.js";
 import { MessageActions } from "./components/MessageActions/MessageActions.js";
 import { MessageCard } from "./components/MessageCard/MessageCard.js";
 import { ModelPicker } from "./components/ModelPicker/ModelPicker.js";
@@ -114,6 +118,7 @@ export {
   ButtonGroup,
   COMPONENT_COUNT,
   Card,
+  CardStack,
   Carousel,
   ChatHeader,
   ChatMarker,
@@ -150,11 +155,14 @@ export {
   FieldContext,
   Figure,
   FileInput,
+  Globe,
   Input,
   Instructions,
   InterruptCard,
   Kbd,
   LinkList,
+  MapCallout,
+  MapLegend,
   MessageActions,
   MessageCard,
   ModelPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "license": "MIT",
   "repository": {
@@ -50,6 +50,10 @@
       "types": "./tokens/registry.d.ts",
       "import": "./tokens/registry.js"
     },
+    "./tokens/motion": {
+      "types": "./tokens/motion.d.ts",
+      "import": "./tokens/motion.js"
+    },
     "./components/*": {
       "types": "./components/*.d.ts",
       "import": "./components/*.js"

package/tokens/motion.d.ts

@@ -0,0 +1,23 @@
+/**
+ * JS-driven motion timings — the TypeScript side of the motion tokens.
+ * CSS transitions read the `--motion-*` custom properties; these constants
+ * are the single home for timings that live in JavaScript timers, where a
+ * CSS variable cannot reach. Components use them as defaults, so a single
+ * instance can still be tuned through its component's own props.
+ *
+ * These are schedule timings (when something starts, stops, or is taken
+ * away), not animation durations, so the reduced-motion guard in
+ * tokens-motion.css deliberately does not apply to them.
+ */
+/** Delay before a hover-triggered overlay appears, filtering pass-through hovers. */
+export declare const MOTION_HOVER_SHOW_DELAY_MS = 300;
+/** Grace period before a hover-triggered overlay or submenu closes, forgiving a wobbly pointer path. */
+export declare const MOTION_HOVER_HIDE_DELAY_MS = 150;
+/** How long a transient notification stays before dismissing itself. */
+export declare const MOTION_AUTO_DISMISS_MS = 5000;
+/** Interval between automatic slide advances. */
+export declare const MOTION_AUTOPLAY_INTERVAL_MS = 5000;
+/** How long momentary confirmation feedback (a copied state) holds before resetting. */
+export declare const MOTION_FEEDBACK_RESET_MS = 2000;
+/** How long after the last scroll event a scroll surface is considered settled. */
+export declare const MOTION_SCROLL_SETTLE_MS = 600;

package/tokens/motion.js

@@ -0,0 +1,14 @@
+const MOTION_HOVER_SHOW_DELAY_MS = 300;
+const MOTION_HOVER_HIDE_DELAY_MS = 150;
+const MOTION_AUTO_DISMISS_MS = 5e3;
+const MOTION_AUTOPLAY_INTERVAL_MS = 5e3;
+const MOTION_FEEDBACK_RESET_MS = 2e3;
+const MOTION_SCROLL_SETTLE_MS = 600;
+export {
+  MOTION_AUTOPLAY_INTERVAL_MS,
+  MOTION_AUTO_DISMISS_MS,
+  MOTION_FEEDBACK_RESET_MS,
+  MOTION_HOVER_HIDE_DELAY_MS,
+  MOTION_HOVER_SHOW_DELAY_MS,
+  MOTION_SCROLL_SETTLE_MS
+};

package/tokens/registry.json

@@ -35,6 +35,13 @@
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--color-chart-series-1",
+      "--color-chart-series-2",
+      "--color-chart-series-3",
+      "--color-chart-series-4",
+      "--color-chart-series-5",
+      "--color-chart-series-6",
+      "--color-chart-series-7",
       "--color-chat-bubble-received-bg",
       "--color-chat-bubble-received-text",
       "--color-chat-bubble-sent-bg",
@@ -84,6 +91,11 @@
       "--color-text-tertiary"
     ],
     "typography": [
+      "--font-caption-family",
+      "--font-caption-letter-spacing",
+      "--font-caption-line-height",
+      "--font-caption-size",
+      "--font-caption-weight",
       "--font-display-1-family",
       "--font-display-1-letter-spacing",
       "--font-display-1-line-height",
@@ -121,6 +133,11 @@
       "--font-mega-2-line-height",
       "--font-mega-2-size",
       "--font-mega-2-weight",
+      "--font-overline-family",
+      "--font-overline-letter-spacing",
+      "--font-overline-line-height",
+      "--font-overline-size",
+      "--font-overline-weight",
       "--font-paragraph-em-family",
       "--font-paragraph-em-letter-spacing",
       "--font-paragraph-em-line-height",

package/tokens/registry.json.d.ts

@@ -35,6 +35,13 @@ declare const _default: {
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--color-chart-series-1",
+      "--color-chart-series-2",
+      "--color-chart-series-3",
+      "--color-chart-series-4",
+      "--color-chart-series-5",
+      "--color-chart-series-6",
+      "--color-chart-series-7",
       "--color-chat-bubble-received-bg",
       "--color-chat-bubble-received-text",
       "--color-chat-bubble-sent-bg",
@@ -84,6 +91,11 @@ declare const _default: {
       "--color-text-tertiary"
     ],
     "typography": [
+      "--font-caption-family",
+      "--font-caption-letter-spacing",
+      "--font-caption-line-height",
+      "--font-caption-size",
+      "--font-caption-weight",
       "--font-display-1-family",
       "--font-display-1-letter-spacing",
       "--font-display-1-line-height",
@@ -121,6 +133,11 @@ declare const _default: {
       "--font-mega-2-line-height",
       "--font-mega-2-size",
       "--font-mega-2-weight",
+      "--font-overline-family",
+      "--font-overline-letter-spacing",
+      "--font-overline-line-height",
+      "--font-overline-size",
+      "--font-overline-weight",
       "--font-paragraph-em-family",
       "--font-paragraph-em-letter-spacing",
       "--font-paragraph-em-line-height",

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-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--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-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--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-code", "--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-xxl", "--gap-xxs", "--gap-xxxl", "--gap-xxxxl", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxl", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-composer", "--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-instant", "--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 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-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--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-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--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-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--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-code", "--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-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-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-xxl", "--gap-xxs", "--gap-xxxl", "--gap-xxxxl", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxl", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-composer", "--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-instant", "--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-dark.css

@@ -112,6 +112,17 @@
   --color-chart-contribution-3: var(--primitive-green-08);
   --color-chart-contribution-4: var(--primitive-green-07);
 
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-01);
   --color-input-text-placeholder: var(--primitive-neutral-04);

package/tokens/tokens-light.css

@@ -126,6 +126,17 @@
   --color-chart-contribution-3: var(--primitive-green-07);
   --color-chart-contribution-4: var(--primitive-green-09);
 
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-10);
   --color-input-text-placeholder: var(--primitive-neutral-06);

package/tokens/tokens-typography.css

@@ -118,6 +118,26 @@
   --font-paragraph-sm-em-weight: 500;
   --font-paragraph-sm-em-line-height: 20px;
   --font-paragraph-sm-em-letter-spacing: 0;
+
+  /* Overline — the uppercase label face: an eyebrow over a title, a map
+     callout's place name, a code block's language chip. Small and bold with
+     open tracking, because capitals at this size need air to stay legible.
+     Pair with text-transform: uppercase at the use site — the tokens set the
+     metrics, never the casing. */
+  --font-overline-family: var(--font-family-primary);
+  --font-overline-size: 14px;
+  --font-overline-weight: 600;
+  --font-overline-line-height: 20px;
+  --font-overline-letter-spacing: 0.08em; /* +8% */
+
+  /* Caption — the floor of the scale. Footnotes and disclaimers: a line the
+     reader should be able to find but never has to read to use the screen.
+     Never on a control, never for running text. */
+  --font-caption-family: var(--font-family-primary);
+  --font-caption-size: 12px;
+  --font-caption-weight: 400;
+  --font-caption-line-height: 16px;
+  --font-caption-letter-spacing: 0;
 }
 
 /* ============================================