@hirobius/design-system 0.11.0 → 0.13.0

package/dist/tokens.js

@@ -48,6 +48,19 @@ const a = {
         700: "#6d28d9",
         950: "#2e1065"
       },
+      lilac: {
+        50: "#f7f4fe",
+        100: "#efe9fd",
+        200: "#ddd0fb",
+        300: "#c3aef6",
+        400: "#a585ee",
+        450: "#9a6fe8",
+        500: "#6f3fd4",
+        600: "#5f33c0",
+        700: "#4f2aa3",
+        800: "#3a1f78",
+        900: "#2a1659"
+      },
       amber: {
         50: "#fffbeb",
         400: "#fbbf24",
@@ -108,7 +121,7 @@ const a = {
     typography: {
       family: {
         primary: ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
-        display: ["Clash Display", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        display: ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
         mono: ["Geist Mono", "Courier New", "monospace"]
       },
       size: {

package/dist/types/src/app/components/activity-feed.d.ts

@@ -16,8 +16,15 @@
  *   category    → ui        (14px/1.5)
  */
 import type { ReactNode } from 'react';
-/** @public */
+/**
+ * @deprecated Use `ActivityTone` instead — values are renamed to match the
+ * fixed HDS tone vocabulary (`neutral | danger | success | warning | info`,
+ * see docs/architecture/variant-contract.md). `'error'` remains supported
+ * here as a back-compat alias for `'danger'`; new code should use `tone`.
+ */
 export type ActivityStatus = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+/** @public */
+export type ActivityTone = 'neutral' | 'danger' | 'success' | 'warning' | 'info';
 export interface ActivityEvent {
     id: string;
     title: string;
@@ -25,7 +32,16 @@ export interface ActivityEvent {
     timestamp: string;
     category: string;
     icon: ReactNode;
-    status: ActivityStatus;
+    /**
+     * Semantic tone for this event's icon and category color.
+     * `neutral | danger | success | warning | info`. Supersedes `status`.
+     */
+    tone?: ActivityTone;
+    /**
+     * @deprecated Use `tone` instead. Retained for back-compat; `'error'`
+     * resolves to the `danger` tone.
+     */
+    status?: ActivityStatus;
     action?: {
         label: string;
         onClick?: () => void;
@@ -38,6 +54,12 @@ export interface ActivityEvent {
 export interface ActivityFeedProps {
     events: ActivityEvent[];
 }
+declare const activityToneVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const activityAvatarVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
 /** @internal — demo placeholder data; supply your own ActivityEvent[] via the events prop. */
 export declare const defaultActivityEvents: ActivityEvent[];
 export declare function ActivityFeed({ events }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;
+/** @internal — CVA variant helpers; compose via ActivityFeed/ActivityEvent props instead. */
+export { activityToneVariants, activityAvatarVariants };

package/dist/types/src/app/components/alert-dialog.d.ts

@@ -0,0 +1,56 @@
+/**
+ * AlertDialog — modal confirmation dialog on Radix AlertDialog.
+ * @category Overlays
+ * @tier primitive
+ * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
+ *
+ * Radix AlertDialog (@radix-ui/react-alert-dialog) themed with the overlay role
+ * tokens to match Dialog. Unlike Dialog it forces a decision: no
+ * dismiss-on-outside-click, focus defaults to Cancel, and it exposes
+ * Action/Cancel affordances for destructive or irreversible confirmations.
+ *
+ *   <AlertDialog>
+ *     <AlertDialog.Trigger asChild><Button tone="danger">Delete</Button></AlertDialog.Trigger>
+ *     <AlertDialog.Content>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>Delete project?</AlertDialog.Title>
+ *         <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel asChild><Button variant="secondary">Cancel</Button></AlertDialog.Cancel>
+ *         <AlertDialog.Action asChild><Button tone="danger">Delete</Button></AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Content>
+ *   </AlertDialog>
+ */
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface AlertDialogComponent extends React.FC<React.ComponentProps<typeof AlertDialogPrimitive.Root>> {
+    Trigger: typeof AlertDialogTrigger;
+    Portal: typeof AlertDialogPortal;
+    Overlay: typeof AlertDialogOverlay;
+    Content: typeof AlertDialogContent;
+    Header: typeof AlertDialogHeader;
+    Footer: typeof AlertDialogFooter;
+    Title: typeof AlertDialogTitle;
+    Description: typeof AlertDialogDescription;
+    Action: typeof AlertDialogAction;
+    Cancel: typeof AlertDialogCancel;
+}
+/**
+ * AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or
+ * uncontrolled with `defaultOpen`.
+ * @public
+ */
+export declare const AlertDialog: AlertDialogComponent;
+export {};

package/dist/types/src/app/components/app-shell.d.ts

@@ -0,0 +1,38 @@
+/**
+ * AppShell — application layout scaffold with semantic header, sidebar, and main regions, built for dashboards and admin surfaces.
+ * @category Layout
+ * @tier template
+ * @public
+ *
+ * Composes a full-height page frame from three optional/required regions: an
+ * optional top `header` (spans full width), an optional left `sidebar` (fixed
+ * width via `sidebarWidth`), and required `children` rendered in `<main>`.
+ * Regions map to native landmark elements (`<header>`, `<aside>`, `<main>`)
+ * so assistive tech gets banner/complementary/main roles for free.
+ *
+ * Usage:
+ *   <AppShell header={<TopBar />} sidebar={<NavRail />}>
+ *     <PageContent />
+ *   </AppShell>
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const appShellVariants: (props?: {
+    sidebarWidth?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type AppShellVariantProps = VariantProps<typeof appShellVariants>;
+/** @public */
+export interface AppShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Optional top region, rendered full-width above the sidebar/main row. */
+    header?: React.ReactNode;
+    /** Optional left region, rendered as a fixed-width `<aside>` beside main. */
+    sidebar?: React.ReactNode;
+    /** Main content, rendered inside `<main>`. */
+    children: React.ReactNode;
+    /** Sidebar width token: sm (224px) / md (256px) / lg (288px). Defaults to 'md'. */
+    sidebarWidth?: NonNullable<AppShellVariantProps['sidebarWidth']>;
+}
+/** Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`. */
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via AppShell props instead. */
+export { appShellVariants };

package/dist/types/src/app/components/aspect-ratio.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AspectRatio — constrains its child to a fixed width:height ratio.
+ * @category Layout
+ * @tier primitive
+ *
+ * Thin token-free wrapper over Radix AspectRatio (@radix-ui/react-aspect-ratio),
+ * which holds a responsive aspect box via the padding-bottom technique so media
+ * (images, video, embeds, map tiles) never causes layout shift while loading.
+ *
+ *   <AspectRatio ratio={16 / 9}>
+ *     <img src="…" alt="…" className="h-full w-full object-cover" />
+ *   </AspectRatio>
+ */
+import * as React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+/** @public */
+export interface AspectRatioProps extends React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root> {
+    /** Desired width-to-height ratio, e.g. `16 / 9`. Defaults to `1` (square). */
+    ratio?: number;
+}
+/**
+ * Locks its single child to the given width-to-height `ratio` so media reserves
+ * its box up front and never causes layout shift while it loads.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/components/avatar-group.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AvatarGroup — an overlapping cluster of Avatars with an overflow count.
+ * @category Display
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const overflowBubbleVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type OverflowBubbleVariantProps = VariantProps<typeof overflowBubbleVariants>;
+/** @public */
+export interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, OverflowBubbleVariantProps {
+    /** Avatar elements to cluster. Extra items beyond `max` collapse into +N. */
+    children: React.ReactNode;
+    /** Maximum avatars shown before collapsing into an overflow chip. */
+    max?: number;
+}
+/** Renders up to `max` overlapping avatars followed by a `+N` overflow chip. */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via AvatarGroup props instead. */
+export { overflowBubbleVariants };

package/dist/types/src/app/components/bleed.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Bleed — controlled negative-margin full-bleed within a padded container.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves "this one child needs to visually escape its parent's
+ * padding" (a full-width image inside a padded card, a divider that should
+ * touch both edges) with a single tokenized negative-margin wrapper, so
+ * agents stop hand-rolling `margin: -24px` guesses that drift from the
+ * parent's actual padding token.
+ * @ai-rules Reach for this named layout intent before Box/sx. amount MUST
+ * use a semantic space step, never raw px, and MUST match the ancestor
+ * padding it is meant to cancel out. Do NOT use Bleed to fake extra spacing
+ * — its only job is canceling a specific known padding value on a specific
+ * axis.
+ *
+ * Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed
+ * is the inverse of a padded Center/Container — HDS names it separately
+ * since "every-layout" itself does not ship a dedicated Bleed recipe).
+ */
+import React from 'react';
+type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
+type BleedAxis = 'x' | 'y' | 'both';
+interface BleedProps {
+    /** Bleed content. */
+    children: React.ReactNode;
+    /** Semantic space step to negate. Defaults to 'normal'. */
+    amount?: LayoutGap;
+    /** Which axis the negative margin applies to. Defaults to 'x'. */
+    axis?: BleedAxis;
+    /** Escape hatch: only use when tokenized props cannot express the required wrapper class. */
+    className?: string;
+    /** Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API. */
+    style?: React.CSSProperties;
+    /** Element rendered as the outer wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Bleed: React.ForwardRefExoticComponent<BleedProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/src/app/components/blockquote.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Blockquote — quoted passage with an optional attribution.
+ * @category Typography
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const blockquoteVariants: (props?: {
+    size?: "sm" | "md" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type BlockquoteVariantProps = VariantProps<typeof blockquoteVariants>;
+/** @public */
+export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement>, BlockquoteVariantProps {
+    /** Optional attribution rendered beneath the quote (e.g. the author). */
+    attribution?: React.ReactNode;
+}
+/** A quoted passage; pass `cite` for the source URL and `attribution` for a byline. */
+export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
+/** @internal — CVA variant helper; compose via Blockquote props instead. */
+export { blockquoteVariants };

package/dist/types/src/app/components/box-sx.d.ts

@@ -0,0 +1,69 @@
+/**
+ * box-sx.ts — pure resolver + CSS injector for Box's `sx` prop.
+ *
+ * Deliberately dependency-free (no React import) so the resolver is unit
+ * testable in isolation from the component tree. `box.tsx` is the only
+ * consumer; it re-exports the types below as part of the public `Box` API.
+ *
+ * @internal — the resolver internals (`resolveSx`, `sxClassName`, `injectSx`)
+ * are exported for testing but the supported public surface is `Box` + the
+ * `Sx*` types, both re-exported from `box.tsx`.
+ */
+export declare const BOX_BREAKPOINTS: {
+    readonly xs: 375;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type Breakpoint = keyof typeof BOX_BREAKPOINTS;
+export type SxValue = string | number;
+export type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * The `sx` object shape. Keys are either:
+ *  - a CSS-property-ish key (camelCase, e.g. `p`, `color`, `marginTop`) whose
+ *    value is a plain `SxValue` or a `{ xs, sm, md, lg, xl }` responsive map, or
+ *  - a `&`-prefixed nested-selector key (`'&:hover'`, `'& > *'`,
+ *    `'&[data-state=open]'`) whose value is itself a nested `SxObject`.
+ */
+export interface SxObject {
+    [key: string]: ResponsiveValue<SxValue> | SxObject | undefined;
+}
+/**
+ * Resolves an `SxObject` into an ordered array of standalone, top-level CSS
+ * rule strings ready for individual `CSSStyleSheet.insertRule()` calls.
+ *
+ * Pure — no DOM access. Order: base (non-responsive) rules for every selector
+ * encountered (outer class first, then each `&`-selector in declaration
+ * order), followed by `@media (min-width: …)` blocks in ascending breakpoint
+ * order. Each media block is ONE rule string containing its inner selector
+ * rules concatenated as plain text — that concatenation is safe (and
+ * required) because a single `insertRule()` call for an `@media {...}` block
+ * is one rule; only top-level rule concatenation breaks `insertRule()` (see
+ * `injectSx` below).
+ */
+export declare function resolveSx(sx: SxObject, className: string): string[];
+/** Deterministic class name for an sx object — identical objects (by value) share one class/hash. */
+export declare function sxClassName(sx: SxObject): string;
+/**
+ * Resolves `sx` to its class name and (in a DOM environment) injects its CSS
+ * rules into a single managed `<style data-hds-sx>` element, once per unique
+ * hash — identical `sx` objects across renders/components share one rule set.
+ *
+ * SSR-safe: `document` is guarded, so this is a no-op on the server beyond
+ * computing the deterministic class name, which is all hydration needs to
+ * match markup — the client-side injection then fills in the actual rules.
+ *
+ * ⚠ CSSStyleSheet.insertRule() bug this fixes: it accepts exactly ONE rule
+ * per call. Naively concatenating an sx's base declarations with a
+ * `&`-selector (or responsive) rule into one string and calling
+ * `insertRule()` once throws a SyntaxError — and if that throw is swallowed
+ * (as it was previously), ALL rules are silently dropped, including the base
+ * ones: the element gets its class but renders completely unstyled. The fix
+ * is `resolveSx()` returning already-split, individually-insertable rule
+ * strings, each inserted in its own try/catch here so one bad/unsupported
+ * rule can never take the others down with it.
+ */
+export declare function injectSx(sx: SxObject): string;
+/** @internal test-only — clears the injection cache and managed stylesheet between test runs. */
+export declare function __resetBoxSxForTests(): void;

package/dist/types/src/app/components/box.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Box — polymorphic layout primitive with a token-first `sx` engine.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Provides one narrow escape hatch for genuinely one-off layout that no
+ * named primitive covers, without inviting ad hoc inline styles or raw hex/px values
+ * back into the system — the `sx` engine only accepts HDS token keys and a small,
+ * deliberate CSS subset.
+ * @ai-rules Reach for Stack/Grid/Container/the every-layout primitives first. Use
+ * Box `sx` ONLY for genuinely one-off layout. sx colors/spacing MUST use token
+ * keys, not raw hex/px. Prefer named layout primitives over ad-hoc flex.
+ *
+ * `sx` is a deliberate SUBSET of MUI's sx — not all of CSS-in-JS is a feature:
+ *   - Spacing shorthands (m/p/gap family) resolve numbers off the 4px HDS scale
+ *     (`--primitive-space-<n>`) and named steps ('tight'|'normal'|'inset'|'spacious')
+ *     off `--semantic-space-layout-*`.
+ *   - `color`/`bgcolor`/`borderColor`/`fill`/`stroke` resolve dotted token keys
+ *     ('content.primary', 'surface.raised', 'border.subtle', 'accent',
+ *     'accent.hover', 'feedback.success', …) to the matching semantic CSS var.
+ *   - Responsive `{ xs, sm, md, lg, xl }` objects compile to `min-width` media
+ *     queries off the HDS breakpoint scale.
+ *   - `&`-prefixed keys ('&:hover', '& > *', '&[data-state=open]') nest a
+ *     selector, composable with responsive values.
+ *   - Everything else passes through as a plain camelCase→kebab-case CSS
+ *     declaration (numbers get `px` unless in the unitless allowlist).
+ *
+ * See `box-sx.ts` for the pure resolver + hashing/injection engine.
+ */
+import React from 'react';
+import { type SxObject } from './box-sx';
+export type { SxObject, SxValue, ResponsiveValue, Breakpoint } from './box-sx';
+/** @public */
+export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    /** Element (or component) rendered as the outer wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+    /** Token-first `sx` layout engine — see the file-level docstring for the supported subset. */
+    sx?: SxObject;
+    /** Box content. */
+    children?: React.ReactNode;
+}
+/** @public */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/components/breadcrumb.d.ts

@@ -4,6 +4,9 @@
  * @tier pattern
  */
 import * as React from 'react';
+declare const crumbLabelVariants: (props?: {
+    current?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
 /** @public */
 export interface BreadcrumbItem {
     /** Visible label for the crumb. */
@@ -24,3 +27,5 @@ export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * is marked aria-current="page".
  */
 export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/** @internal — CVA variant helper; compose via Breadcrumb instead. */
+export { crumbLabelVariants };

package/dist/types/src/app/components/button-group.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ButtonGroup — attaches Button children into one segmented control.
+ * @category Actions
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonGroupVariants: (props?: {
+    orientation?: "horizontal" | "vertical";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;
+/** @public */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, ButtonGroupVariantProps {
+}
+/** Groups Button (or button-like) children into a single attached segment. */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal — CVA variant helper; compose via ButtonGroup props instead. */
+export { buttonGroupVariants };

package/dist/types/src/app/components/calendar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Calendar — month calendar / date picker, HDS-skinned over react-day-picker.
+ * @category Inputs
+ * @tier primitive
+ * @public
+ *
+ * A thin token-skin over react-day-picker's DayPicker (ADR-020). Passes through
+ * every DayPicker prop — `mode` ('single' | 'range' | 'multiple'), `selected`,
+ * `onSelect`, `disabled`, `month`, min/max, locale — and applies the HDS role
+ * tokens via `classNames` so the grid matches the rest of the system. Correct
+ * grid ARIA and keyboard navigation come from the underlying library.
+ *
+ *   <Calendar mode="single" selected={date} onSelect={setDate} />
+ */
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+/** @public */
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/** Renders an accessible month grid; compose it inside a Popover for the date inputs. */
+export declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/app/components/card.d.ts

@@ -6,7 +6,7 @@
  * Slot anatomy (DESIGN.md §"Card Anatomy"). Status, progress, and metadata are
  * layout-bearing — they live in slots, never inline next to prose.
  *
- *   <Card tone="accent">
+ *   <Card variant="accent">
  *     <Card.Header metadata={<Badge tone="warning">in-progress</Badge>}>
  *       <Card.Title>Discovery phase</Card.Title>
  *       <Card.Description>Stakeholder interviews and audit prep.</Card.Description>
@@ -28,9 +28,12 @@
  *   thin colored bars. Group sections via separate <Card.Body> blocks.
  * - Footer: actions, secondary metadata, timestamps.
  *
- * Tone prop: 'default' (neutral border) | 'accent' (border-accent + raised bg)
- * for highlighted variants like "recommended package", or feedback tones for
- * status-driven cards. Tone replaces hand-rolled `pkgHighlight`-style overrides.
+ * `variant`: 'default' (borderless) | 'accent' (2px accent border) — the
+ * structural axis, for highlighted entries like "recommended package".
+ * `tone`: neutral | danger | success | warning | info — the fixed feedback
+ * axis (#60 variant contract), for status-driven cards where the border IS
+ * the signal. `variant`/`tone` together replace hand-rolled
+ * `pkgHighlight`-style overrides.
  *
  * Legacy props (padding / gap / noPadding / as / style) are retained.
  * Existing callers that pass raw children continue to work; new callers
@@ -44,7 +47,15 @@ import * as React from 'react';
 import hds from '../design-system/tokens';
 import { type PaddingOption } from './surface-padding';
 type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;
-type CardTone = 'default' | 'accent' | 'success' | 'warning' | 'danger';
+/** @public */
+export type CardVariant = 'default' | 'accent';
+/** @public */
+export type CardTone = 'neutral' | 'danger' | 'success' | 'warning' | 'info';
+declare const cardVariants: (props?: {
+    variant?: "default" | "accent";
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+    bordered?: boolean;
+} & import("class-variance-authority/dist/types").ClassProp) => string;
 /** @public */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Render-as element for the root wrapper. */
@@ -55,13 +66,15 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     gap?: GapOption;
     /** Legacy convenience flag that removes inner padding. */
     noPadding?: boolean;
-    /** Visual tone — controls border color/weight. Default is BORDERLESS;
-     *  `accent` for highlighted entries (e.g. recommended package);
-     *  semantic tones for status-driven cards (border IS the signal).
-     *  For a neutral-bordered card without semantic meaning, pass
-     *  `bordered` instead of overloading tone. */
+    /** Structural treatment — `default` (borderless) or `accent` (2px accent
+     *  border) for highlighted entries (e.g. recommended package). For a
+     *  neutral-bordered card without semantic meaning, pass `bordered`
+     *  instead of `accent`. */
+    variant?: CardVariant;
+    /** Feedback tone — border IS the signal for status-driven cards. Defaults
+     *  to `neutral` (no feedback border; falls back to `variant`/`bordered`). */
     tone?: CardTone;
-    /** Opt in to a neutral 1px border on the default tone. Use for genuinely
+    /** Opt in to a neutral 1px border on the default variant. Use for genuinely
      *  discrete standalone records in sparse layouts where containment helps
      *  legibility. Default false — repeated cards in grids should stay
      *  borderless and rely on whitespace, rails, or section dividers. */
@@ -99,8 +112,9 @@ interface CardProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     /** Optional caption rendered beneath the bar. Reserved baseline so it
      *  never crowds the slot above. Accepts strings or react nodes. */
     label?: React.ReactNode;
-    /** Visual tone for the fill. Defaults to accent. Use feedback tones to
-     *  signal status without a separate badge (e.g. red bar for over-budget). */
+    /** Visual tone for the fill. Defaults to `neutral` (accent-blue fill). Use
+     *  feedback tones to signal status without a separate badge (e.g. red bar
+     *  for over-budget). */
     tone?: CardTone;
 }
 declare const CardProgress: React.ForwardRefExoticComponent<CardProgressProps & React.RefAttributes<HTMLDivElement>>;
@@ -117,3 +131,5 @@ interface CardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Card: CardComponent;
 export { CardHeader, CardTitle, CardDescription, CardBody, CardFooter, CardProgress, CardMetric };
+/** @internal — CVA variant helper; compose via Card props instead. */
+export { cardVariants };

package/dist/types/src/app/components/carousel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Carousel — a horizontally-scrollable, scroll-snap track of slides with
+ * Prev/Next affordances, implemented natively on top of CSS scroll-snap.
+ * @category Display
+ * @tier pattern
+ * @public
+ */
+import * as React from 'react';
+declare const carouselControlVariants: (props?: {
+    variant?: "next" | "prev";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+/** @public */
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Slides rendered inside the scroll-snap track. */
+    children: React.ReactNode;
+    /** Accessible name for the carousel region. Defaults to 'Carousel'. */
+    ariaLabel?: string;
+    /** Show the Prev/Next scroll affordance buttons. Defaults to true. */
+    showControls?: boolean;
+}
+/** Renders children as a snap-scrolling track with Prev/Next scroll buttons. */
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLElement>>;
+/** @internal — CVA variant helper; compose via Carousel instead. */
+export { carouselControlVariants };

package/dist/types/src/app/components/center.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Center — max-width column, auto-centered horizontally.
+ * @category Layout
+ * @tier primitive
+ * @ai-intent Solves the "centered prose/content column" problem — a
+ * max-width box with auto horizontal margins and, optionally, matching
+ * horizontal gutters — so agents stop hand-rolling `marginInline: auto` plus
+ * an ad hoc max-width value.
+ * @ai-rules Reach for this named layout intent before Box/sx. maxWidth MUST
+ * use the semantic width scale ('content' | 'max'), never a raw px value.
+ * gutter, when set, MUST use a semantic space step, never raw px. Do NOT use
+ * Center for full-bleed page shells — use Container. Do NOT use Center when
+ * you need the deprecated Container padding prop — gutter replaces it.
+ *
+ * Every Layout reference: https://every-layout.dev/layouts/center/
+ */
+import React from 'react';
+type CenterMaxWidth = 'content' | 'max';
+type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
+interface CenterProps {
+    /** Center content. */
+    children: React.ReactNode;
+    /** Max width: 'content' (760px prose) | 'max' (1200px full layouts). Defaults to 'content'. */
+    maxWidth?: CenterMaxWidth;
+    /** Optional matching horizontal gutter (padding-inline) from the semantic space scale. */
+    gutter?: LayoutGap;
+    /** Escape hatch: only use when tokenized props cannot express the required wrapper class. */
+    className?: string;
+    /** Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API. */
+    style?: React.CSSProperties;
+    /** Element rendered as the outer wrapper. Defaults to 'div'. */
+    as?: React.ElementType;
+}
+/** @public */
+export declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/src/app/components/circular-progress.d.ts

@@ -0,0 +1,28 @@
+/**
+ * CircularProgress — an SVG ring showing determinate or indeterminate progress.
+ * @category Feedback
+ * @tier primitive
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const circularProgressVariants: (props?: {
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+type CircularProgressVariantProps = VariantProps<typeof circularProgressVariants>;
+/** @public */
+export interface CircularProgressProps extends React.HTMLAttributes<HTMLSpanElement>, CircularProgressVariantProps {
+    /** Current value. Ignored (and the ring animates) when `indeterminate`. */
+    value?: number;
+    /** Upper bound for `value`. Defaults to 100. */
+    max?: number;
+    /** Ring diameter preset. Defaults to `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a continuous spinner instead of a measured arc. */
+    indeterminate?: boolean;
+    /** Accessible name for the progress indicator. */
+    label?: string;
+}
+/** A circular progress ring; pass `value`/`max` or set `indeterminate`. */
+export declare const CircularProgress: React.ForwardRefExoticComponent<CircularProgressProps & React.RefAttributes<HTMLSpanElement>>;
+/** @internal — CVA variant helper; compose via CircularProgress props instead. */
+export { circularProgressVariants };