@unpunnyfuns/swatchbook-blocks 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,105 @@
+# Blocks
+
+Published as `@unpunnyfuns/swatchbook-blocks`. Storybook MDX doc blocks for DTCG design tokens. React components for rendering token documentation inside `.mdx` pages or regular stories. Self-mount the addon's CSS and react to axis changes from the toolbar; work inside the docs container even though story decorators don't.
+
+> **Documentation:** [unpunnyfuns.github.io/swatchbook](https://unpunnyfuns.github.io/swatchbook/). Token parsing powered by [Terrazzo](https://terrazzo.app/) by [Drew Powers](https://github.com/drwpow) via `@unpunnyfuns/swatchbook-core`.
+
+## Install
+
+```sh
+npm install @unpunnyfuns/swatchbook-blocks
+```
+
+Blocks read the token graph from a `SwatchbookProvider`. Inside Storybook, register `@unpunnyfuns/swatchbook-addon` alongside these blocks — its preview decorator mounts the provider automatically. Outside Storybook, wrap your tree in `SwatchbookProvider` and pass a `ProjectSnapshot` directly (see [Outside Storybook](#outside-storybook) below).
+
+## Blocks
+
+| Block               | What                                                                                |
+| ------------------- | ----------------------------------------------------------------------------------- |
+| `TokenTable`        | Searchable table of tokens, filterable by path glob and `$type`.                    |
+| `TokenNavigator`    | Expandable tree view of the token graph keyed on dot-path segments, with inline per-type previews. |
+| `ColorPalette`      | Swatch grid grouped by sub-path. Auto-groups from the filter; `groupBy` overrides.  |
+| `TypographyScale`   | Each typography composite token rendered as a sample line using its own value.      |
+| `FontFamilySample`  | Pangram rendered per `fontFamily` primitive.                                        |
+| `FontWeightScale`   | Same sample text rendered at each `fontWeight` primitive, sorted ascending.         |
+| `StrokeStyleSample` | Border rendered per `strokeStyle` primitive.                                        |
+| `GradientPalette`   | Wide swatch per `gradient` token with stop breakdown (linear-gradient default).      |
+| `MotionSample`      | Animated ball + track for one `transition` / `duration` / `cubicBezier` token. Accepts `speed` / `runKey`. |
+| `ShadowSample`      | Surface rectangle with one `shadow` token applied as `box-shadow`.                  |
+| `BorderSample`      | Surface rectangle with one `border` token applied as `border`.                      |
+| `DimensionBar`      | Width-driven bar (or square / radius sample, via `kind`) for one `dimension` token. |
+| `TokenDetail`       | Single-token inspector — composition of the subcomponents below. |
+| `TokenHeader`       | Heading + `$type` pill + cssVar + `$description`, or a missing-token empty state. |
+| `CompositePreview`  | Type-dispatched live preview (typography, shadow, border, transition, dimension, duration, cubicBezier, fontFamily, fontWeight, strokeStyle, gradient, color). |
+| `CompositeBreakdown`| Labelled sub-value grid for composite types (typography / border / transition / shadow / gradient). |
+| `AliasChain`        | Forward alias chain (`path → alias → …`). Renders nothing for non-aliases. |
+| `AliasedBy`         | Aliased-by tree (backward). Truncates at depth 6. |
+| `AxisVariance`      | Per-axis value table — constant, one-axis, or two-axis matrix view. |
+| `TokenUsageSnippet` | Copy-ready `color: var(--…);` snippet. |
+
+Shared: every block accepts a `caption` override and renders against the addon's `var(--<prefix>-…)` output.
+
+## Usage
+
+### Inside Storybook
+
+The addon's preview decorator wraps every story in a `SwatchbookProvider` for you, so MDX and story authors drop blocks in directly:
+
+```mdx
+import { TokenTable, ColorPalette, TokenDetail } from '@unpunnyfuns/swatchbook-blocks';
+
+# Color tokens
+
+<ColorPalette filter="color.sys.*" />
+
+## Every color token
+
+<TokenTable filter="color.sys.*" type="color" />
+
+## Inspect one
+
+<TokenDetail path="color.sys.accent.bg" />
+```
+
+### Outside Storybook
+
+Blocks are pure presentation — given a `ProjectSnapshot` they render without any Storybook or Vite plugin. Mount a `SwatchbookProvider` at the top of your tree:
+
+```tsx
+import { SwatchbookProvider, TokenTable } from '@unpunnyfuns/swatchbook-blocks';
+import snapshot from './tokens-snapshot.json';
+
+export function TokenDocs() {
+  return (
+    <SwatchbookProvider value={snapshot}>
+      <TokenTable filter='color.sys.*' />
+    </SwatchbookProvider>
+  );
+}
+```
+
+`SwatchbookProvider` is the canonical integration point. The `virtual:swatchbook/tokens` module is the Storybook addon's internal wiring, not a public API.
+
+## Props
+
+```ts
+<TokenTable filter="color.sys.*" type="color" />
+<ColorPalette filter="color.sys.*" />
+<TypographyScale filter="typography" sample="The quick brown fox" />
+<TokenDetail path="color.sys.accent.bg" />
+```
+
+## Do / don't
+
+- ✅ React to the active swatchbook theme — switching in the toolbar updates resolved values live, even on MDX docs pages.
+- ✅ Compose multiple blocks per MDX page — each mounts independently.
+- ✅ Render blocks outside Storybook by wrapping them in `SwatchbookProvider` with a hand-built or loaded `ProjectSnapshot`.
+- ❌ Don't import from `virtual:swatchbook/tokens` directly — it's the addon's internal wiring, not a public API. Use `SwatchbookProvider` instead.
+- ❌ Don't use `useGlobals` / `useArgs` from `storybook/preview-api` inside custom blocks you write — those are story-only hooks and throw in docs context. Subscribe to `addons.getChannel()` directly for globals reactivity.
+
+## See also
+
+- [`@unpunnyfuns/swatchbook-addon`](../addon) — required peer. Registers the virtual module and the toolbar.
+- [`@unpunnyfuns/swatchbook-core`](../core) — underlying loader.
+- [Project README](../../README.md) — install and wiring flow for the whole toolchain.
+- [Documentation](https://unpunnyfuns.github.io/swatchbook/) — concepts, guides, and full API reference.

package/dist/index.d.mts

@@ -0,0 +1,544 @@
+import * as _$react from "react";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/internal/format-color.d.ts
+/**
+ * Color display formats understood by {@link formatColor}.
+ *
+ * - `hex` — sRGB hex (`#rrggbb` or `#rrggbbaa`). Out-of-gamut or wide-gamut
+ *   colors fall back to `rgb()` and surface `outOfGamut: true` so callers
+ *   can render a ⚠ glyph.
+ * - `rgb` / `hsl` — modern CSS Color 4 space-separated syntax, converted
+ *   from the source colorspace. Out-of-gamut values are still stringified
+ *   (the browser will clip when actually rendering) and flagged.
+ * - `oklch` — perceptual wide-gamut form. Never marks out-of-gamut because
+ *   every color expressible in sRGB/P3 fits in oklch.
+ * - `raw` — compact JSON of the normalized Terrazzo shape. For DTCG
+ *   authors who want to see what the parser actually stored.
+ */
+type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch' | 'raw';
+declare const COLOR_FORMATS: readonly ColorFormat[];
+/**
+ * Terrazzo's `ColorValueNormalized`, copied inline to avoid a hard dep on
+ * `@terrazzo/token-tools` from blocks. Matches the shape documented at
+ * https://terrazzo.app/docs/cli/reference/token-tools/ColorValueNormalized.
+ *
+ * Some token payloads we see in the wild use the legacy DTCG-ish `channels`
+ * field in place of `components`; we accept either.
+ */
+interface NormalizedColor {
+  colorSpace: string;
+  components?: readonly (number | null)[];
+  channels?: readonly (number | null)[];
+  alpha?: number;
+  hex?: string;
+}
+interface FormatColorResult {
+  /** Display string — e.g. `rgb(59 132 246)`, `#3b82f6`. */
+  value: string;
+  /** True when the requested format can't losslessly represent the color. */
+  outOfGamut: boolean;
+}
+/**
+ * Convert Terrazzo's normalized color payload into a display string in the
+ * requested format. Pure function — never throws; returns `{ value: '—' }`
+ * for unrecognized input so calling blocks don't need try/catch.
+ */
+declare function formatColor(value: unknown, format: ColorFormat, fallback?: string): FormatColorResult;
+//#endregion
+//#region src/BorderPreview.d.ts
+interface BorderPreviewProps {
+  /**
+   * Token-path filter. Defaults to every `border` token. Use e.g.
+   * `"border.sys.*"` to scope to the semantic layer.
+   */
+  filter?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function BorderPreview({
+  filter,
+  caption
+}: BorderPreviewProps): ReactElement;
+//#endregion
+//#region src/border-preview/BorderSample.d.ts
+interface BorderSampleProps {
+  /** Full dot-path of the border token to preview. */
+  path: string;
+}
+declare function BorderSample({
+  path
+}: BorderSampleProps): ReactElement;
+//#endregion
+//#region src/ColorPalette.d.ts
+interface ColorPaletteProps {
+  /**
+   * Token-path filter. Defaults to every `color` token. Use e.g.
+   * `"color.sys.*"` to scope to the semantic layer, or `"color.ref.blue.*"`
+   * for a single ref ramp.
+   */
+  filter?: string;
+  /**
+   * Grouping depth. Tokens are grouped by the first `groupBy` dot-segments
+   * of their path. `2` yields groups like `color.sys`, `color.ref`; `3`
+   * yields `color.sys.surface`, `color.sys.text`, etc.
+   *
+   * If omitted, groupBy is derived from the filter: one level below the
+   * filter's fixed prefix (segments before the first `*`), clamped so each
+   * swatch still carries a leaf label. `"color.sys.*"` → groups at
+   * `color.sys.<family>`; `"color.ref.blue.*"` collapses all shades into
+   * one `color.ref.blue` group because the tokens have no deeper level.
+   */
+  groupBy?: number;
+  /** Override the section caption. */
+  caption?: string;
+}
+declare function ColorPalette({
+  filter,
+  groupBy,
+  caption
+}: ColorPaletteProps): ReactElement;
+//#endregion
+//#region src/dimension-scale/DimensionBar.d.ts
+type DimensionKind = 'length' | 'radius' | 'size';
+interface DimensionBarProps {
+  /** Full dot-path of the dimension token to preview. */
+  path: string;
+  /**
+   * Visualization kind:
+   * - `'length'` (default): horizontal bar whose width equals the token's dimension.
+   * - `'radius'`: 56×56 square with the token applied as `border-radius`.
+   * - `'size'`: a square sized to the token's dimension.
+   */
+  kind?: DimensionKind;
+}
+declare function DimensionBar({
+  path,
+  kind
+}: DimensionBarProps): ReactElement;
+//#endregion
+//#region src/DimensionScale.d.ts
+interface DimensionScaleProps {
+  /**
+   * Token-path filter. Defaults to every `dimension` token. Use e.g.
+   * `"space.sys.*"` to scope to the spacing scale.
+   */
+  filter?: string;
+  /**
+   * Visualization kind:
+   * - `'length'` (default): horizontal bar whose width equals the token's dimension.
+   * - `'radius'`: 56×56 square with the token applied as `border-radius`.
+   * - `'size'`: a square sized to the token's dimension.
+   */
+  kind?: DimensionKind;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function DimensionScale({
+  filter,
+  kind,
+  caption
+}: DimensionScaleProps): ReactElement;
+//#endregion
+//#region src/FontFamilySample.d.ts
+interface FontFamilySampleProps {
+  /**
+   * Token-path filter. Defaults to every `fontFamily` token. Use e.g.
+   * `"font.ref.family.*"` to scope to the ref layer.
+   */
+  filter?: string;
+  /** Override the sample text rendered for each token. */
+  sample?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function FontFamilySample({
+  filter,
+  sample,
+  caption
+}: FontFamilySampleProps): ReactElement;
+//#endregion
+//#region src/FontWeightScale.d.ts
+interface FontWeightScaleProps {
+  /**
+   * Token-path filter. Defaults to every `fontWeight` token. Use e.g.
+   * `"font.ref.weight.*"` to scope to the ref layer.
+   */
+  filter?: string;
+  /** Override the sample text rendered for each token. */
+  sample?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function FontWeightScale({
+  filter,
+  sample,
+  caption
+}: FontWeightScaleProps): ReactElement;
+//#endregion
+//#region src/GradientPalette.d.ts
+interface GradientPaletteProps {
+  /**
+   * Token-path filter. Defaults to every `gradient` token. Use e.g.
+   * `"gradient.ref.*"` or `"gradient.sys.accent"` to scope.
+   */
+  filter?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function GradientPalette({
+  filter,
+  caption
+}: GradientPaletteProps): ReactElement;
+//#endregion
+//#region src/motion-preview/MotionSample.d.ts
+type MotionSpeed = 0.25 | 0.5 | 1 | 2;
+interface MotionSampleProps {
+  /** Full dot-path of the motion token (`transition`, `duration`, or `cubicBezier`). */
+  path: string;
+  /** Playback speed multiplier. Defaults to `1`. */
+  speed?: MotionSpeed;
+  /**
+   * Change this value to force the animation to restart. Useful when an
+   * outer block exposes a "replay" button that should re-trigger every
+   * sample at once.
+   */
+  runKey?: number;
+}
+declare function MotionSample({
+  path,
+  speed,
+  runKey
+}: MotionSampleProps): ReactElement;
+//#endregion
+//#region src/MotionPreview.d.ts
+interface MotionPreviewProps {
+  /**
+   * Token-path filter. Defaults to transition + duration + cubicBezier
+   * tokens. Use e.g. `"motion.sys.*"` to scope to the semantic layer.
+   */
+  filter?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function MotionPreview({
+  filter,
+  caption
+}: MotionPreviewProps): ReactElement;
+//#endregion
+//#region src/contexts.d.ts
+/**
+ * Typed shape of the addon's `virtual:swatchbook/tokens` module, duplicated
+ * as value-importable interfaces so consumers outside the addon's Vite
+ * plugin (unit tests, custom React apps) can construct a snapshot by hand.
+ *
+ * The ambient `declare module 'virtual:swatchbook/tokens'` declarations in
+ * `packages/addon/src/virtual.d.ts` describe the same payload; the two
+ * stay in sync by eye.
+ */
+interface VirtualAxisShape {
+  name: string;
+  contexts: readonly string[];
+  default: string;
+  description?: string;
+  source: 'resolver' | 'synthetic';
+}
+interface VirtualThemeShape {
+  name: string;
+  input: Record<string, string>;
+  sources: string[];
+}
+interface VirtualDiagnosticShape {
+  severity: 'error' | 'warn' | 'info';
+  group: string;
+  message: string;
+  filename?: string;
+  line?: number;
+  column?: number;
+}
+interface VirtualTokenShape {
+  $type?: string;
+  $value?: unknown;
+  $description?: string;
+  aliasOf?: string;
+  aliasChain?: readonly string[];
+  aliasedBy?: readonly string[];
+}
+interface VirtualPresetShape {
+  name: string;
+  axes: Partial<Record<string, string>>;
+  description?: string;
+}
+/**
+ * Full project data read by blocks. Populated by the addon's preview
+ * decorator (from the virtual module) or constructed by hand in
+ * non-Storybook consumers.
+ */
+interface ProjectSnapshot {
+  axes: readonly VirtualAxisShape[];
+  /** Axis names suppressed via `config.disabledAxes` — pinned to their defaults, hidden from the toolbar. */
+  disabledAxes: readonly string[];
+  presets: readonly VirtualPresetShape[];
+  themes: readonly VirtualThemeShape[];
+  themesResolved: Record<string, Record<string, VirtualTokenShape>>;
+  activeTheme: string;
+  activeAxes: Readonly<Record<string, string>>;
+  cssVarPrefix: string;
+  diagnostics: readonly VirtualDiagnosticShape[];
+  css: string;
+}
+/**
+ * Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
+ * `useSwatchbookData()` tell "provider present" from "fall back to the
+ * virtual module".
+ */
+declare const SwatchbookContext: _$react.Context<ProjectSnapshot | null>;
+declare function useOptionalSwatchbookData(): ProjectSnapshot | null;
+/**
+ * Active swatchbook theme for the current story/docs render. Populated by
+ * the addon's preview decorator and consumed by `useToken` + any future
+ * consumer hooks.
+ *
+ * This runs through plain React context rather than Storybook's
+ * `useGlobals` so the same hook works in autodocs / MDX renders where the
+ * preview-hooks context isn't available.
+ */
+declare const ThemeContext: _$react.Context<string>;
+declare function useActiveTheme(): string;
+/**
+ * Active axis tuple for the current story/docs render — `Record<axisName,
+ * contextName>`. Derived from the same input as {@link ThemeContext}; split
+ * out so consumers needing per-axis info (toolbar, panel, tuple-aware
+ * blocks) don't have to reparse the composed permutation ID.
+ */
+declare const AxesContext: _$react.Context<Readonly<Record<string, string>>>;
+declare function useActiveAxes(): Readonly<Record<string, string>>;
+/**
+ * Active color-display format for the current story/docs render. Populated
+ * by the addon's preview decorator from the `swatchbookColorFormat` global
+ * (per-story `globals` or toolbar dropdown) and consumed by blocks that
+ * render color-token values. Emitted CSS is unaffected.
+ *
+ * Runs through plain React context rather than Storybook's `useGlobals` so
+ * per-story seeded globals flow through on first render and the same hook
+ * is safe to call from MDX doc blocks (where the preview-hooks context
+ * isn't available).
+ */
+declare const ColorFormatContext: _$react.Context<ColorFormat>;
+declare function useColorFormat(): ColorFormat;
+//#endregion
+//#region src/provider.d.ts
+interface SwatchbookProviderProps {
+  value: ProjectSnapshot;
+  children: ReactNode;
+}
+/**
+ * Wraps a tree of blocks with the token data they need to render.
+ *
+ * The Storybook addon's preview decorator mounts this automatically, so
+ * story/MDX authors typically never see it. Outside Storybook — unit
+ * tests, custom React apps, non-Storybook doc sites — consumers construct
+ * a {@link ProjectSnapshot} (often imported from a JSON file) and wrap
+ * their blocks in this provider.
+ */
+declare function SwatchbookProvider({
+  value,
+  children
+}: SwatchbookProviderProps): ReactElement;
+/**
+ * Read the current {@link ProjectSnapshot}. Throws if called outside a
+ * {@link SwatchbookProvider}; blocks that need to fall back to the
+ * virtual module go through the internal `useProject()` hook instead.
+ */
+declare function useSwatchbookData(): ProjectSnapshot;
+//#endregion
+//#region src/ShadowPreview.d.ts
+interface ShadowPreviewProps {
+  /**
+   * Token-path filter. Defaults to every `shadow` token. Use e.g.
+   * `"shadow.sys.*"` to scope to the semantic layer.
+   */
+  filter?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function ShadowPreview({
+  filter,
+  caption
+}: ShadowPreviewProps): ReactElement;
+//#endregion
+//#region src/shadow-preview/ShadowSample.d.ts
+interface ShadowSampleProps {
+  /** Full dot-path of the shadow token to preview. */
+  path: string;
+}
+declare function ShadowSample({
+  path
+}: ShadowSampleProps): ReactElement;
+//#endregion
+//#region src/StrokeStyleSample.d.ts
+interface StrokeStyleSampleProps {
+  /**
+   * Token-path filter. Defaults to every `strokeStyle` token. Use e.g.
+   * `"stroke.ref.style.*"` to scope to the ref layer.
+   */
+  filter?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function StrokeStyleSample({
+  filter,
+  caption
+}: StrokeStyleSampleProps): ReactElement;
+//#endregion
+//#region src/TokenDetail.d.ts
+interface TokenDetailProps {
+  /** Full dot-path of the token to inspect. */
+  path: string;
+  /** Override the heading. Defaults to the path. */
+  heading?: string;
+}
+declare function TokenDetail({
+  path,
+  heading
+}: TokenDetailProps): ReactElement;
+//#endregion
+//#region src/token-detail/AliasChain.d.ts
+interface AliasChainProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function AliasChain({
+  path
+}: AliasChainProps): ReactElement | null;
+//#endregion
+//#region src/token-detail/AliasedBy.d.ts
+interface AliasedByProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function AliasedBy({
+  path
+}: AliasedByProps): ReactElement | null;
+//#endregion
+//#region src/token-detail/AxisVariance.d.ts
+interface AxisVarianceProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function AxisVariance({
+  path
+}: AxisVarianceProps): ReactElement;
+//#endregion
+//#region src/token-detail/CompositeBreakdown.d.ts
+interface CompositeBreakdownProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function CompositeBreakdown({
+  path
+}: CompositeBreakdownProps): ReactElement | null;
+//#endregion
+//#region src/token-detail/CompositePreview.d.ts
+interface CompositePreviewProps {
+  /** Full dot-path of the token to preview. */
+  path: string;
+}
+declare function CompositePreview({
+  path
+}: CompositePreviewProps): ReactElement | null;
+//#endregion
+//#region src/token-detail/ConsumerOutput.d.ts
+interface ConsumerOutputProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function ConsumerOutput({
+  path
+}: ConsumerOutputProps): ReactElement | null;
+//#endregion
+//#region src/token-detail/TokenHeader.d.ts
+interface TokenHeaderProps {
+  /** Full dot-path of the token. */
+  path: string;
+  /** Override the heading. Defaults to the path. */
+  heading?: string;
+}
+declare function TokenHeader({
+  path,
+  heading
+}: TokenHeaderProps): ReactElement;
+//#endregion
+//#region src/token-detail/TokenUsageSnippet.d.ts
+interface TokenUsageSnippetProps {
+  /** Full dot-path of the token. */
+  path: string;
+}
+declare function TokenUsageSnippet({
+  path
+}: TokenUsageSnippetProps): ReactElement | null;
+//#endregion
+//#region src/TokenNavigator.d.ts
+interface TokenNavigatorProps {
+  /** If provided, mount at this dot-path subtree and hide everything outside it. */
+  root?: string;
+  /**
+   * Depth (from the mounted root) that is expanded on first render.
+   * `0` = everything collapsed, `1` = top-level groups open (default),
+   * `2` = one level deeper, etc.
+   */
+  initiallyExpanded?: number;
+  /**
+   * Called with a leaf's full dot-path when it is clicked. When set, the
+   * inline `<TokenDetail>` slide-over is suppressed — the consumer owns
+   * the follow-up UI.
+   */
+  onSelect?(path: string): void;
+}
+declare function TokenNavigator({
+  root,
+  initiallyExpanded,
+  onSelect
+}: TokenNavigatorProps): ReactElement;
+//#endregion
+//#region src/TokenTable.d.ts
+interface TokenTableProps {
+  /**
+   * Token-path filter. `"color.sys.*"` matches every `color.sys.…` token;
+   * omit to include everything. Combines with `type` (both must match).
+   */
+  filter?: string;
+  /** Restrict to one DTCG `$type`. */
+  type?: string;
+  /** Show the CSS variable reference column. Defaults to `true`. */
+  showVar?: boolean;
+  /** Override the table caption. */
+  caption?: string;
+}
+declare function TokenTable({
+  filter,
+  type,
+  showVar,
+  caption
+}: TokenTableProps): ReactElement;
+//#endregion
+//#region src/TypographyScale.d.ts
+interface TypographyScaleProps {
+  /**
+   * Token-path filter. Defaults to every `typography` token. Use e.g.
+   * `"typography.sys.*"` to scope to the semantic layer.
+   */
+  filter?: string;
+  /** Override the sample text rendered for each token. */
+  sample?: string;
+  /** Override the caption. */
+  caption?: string;
+}
+declare function TypographyScale({
+  filter,
+  sample,
+  caption
+}: TypographyScaleProps): ReactElement;
+//#endregion
+export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps, BorderPreview, type BorderPreviewProps, BorderSample, type BorderSampleProps, COLOR_FORMATS, type ColorFormat, ColorFormatContext, ColorPalette, type ColorPaletteProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, DimensionBar, type DimensionBarProps, type DimensionKind, DimensionScale, type DimensionScaleProps, FontFamilySample, type FontFamilySampleProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, StrokeStyleSample, type StrokeStyleSampleProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualAxisShape, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualDiagnosticShape, type VirtualPresetShape as VirtualPreset, type VirtualPresetShape, type VirtualThemeShape as VirtualTheme, type VirtualThemeShape, type VirtualTokenShape as VirtualToken, type VirtualTokenShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+//# sourceMappingURL=index.d.mts.map