@unpunnyfuns/swatchbook-blocks 1.1.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/host-e2nSv-sA.mjs +791 -0
- package/dist/host-e2nSv-sA.mjs.map +1 -0
- package/dist/host.d.mts +57 -0
- package/dist/host.mjs +2 -0
- package/dist/index.d.mts +273 -328
- package/dist/index.mjs +536 -1112
- package/dist/index.mjs.map +1 -1
- package/dist/registry-Dm25Go94.d.mts +244 -0
- package/dist/style.css +237 -240
- package/package.json +6 -2
package/dist/index.d.mts
CHANGED
|
@@ -1,162 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FormatColorResult, NormalizedColor, formatColor } from "@unpunnyfuns/swatchbook-core/format-color";
|
|
3
|
-
import * as _$react from "react";
|
|
1
|
+
import { C as useOptionalSwatchbookData, D as NormalizedColor, E as FormatColorResult, O as formatColor, S as useColorFormat, T as ColorFormat, _ as VirtualTokenGraph, a as usePresenter, b as useActiveAxes, c as PresenterRegistry, d as ProjectSnapshot, f as SwatchbookContext, g as VirtualPresetShape, h as VirtualDiagnosticShape, l as AxesContext, m as VirtualAxisShape, n as PresenterContext, o as PresenterComponent, p as ThemeContext, r as mergePresenters, s as PresenterProps, t as DEFAULT_PRESENTERS, u as ColorFormatContext, v as VirtualTokenListing, w as COLOR_FORMATS, x as useActiveTheme, y as VirtualTokenShape } from "./registry-Dm25Go94.mjs";
|
|
4
2
|
import { ReactElement, ReactNode } from "react";
|
|
5
|
-
import {
|
|
6
|
-
import { Axis
|
|
7
|
-
import {
|
|
3
|
+
import { formatTokenValue } from "@unpunnyfuns/swatchbook-core/token-value-css";
|
|
4
|
+
import { Axis } from "@unpunnyfuns/swatchbook-core";
|
|
5
|
+
import { SnapshotForWire } from "@unpunnyfuns/swatchbook-core/snapshot-for-wire";
|
|
6
|
+
import { RealisedToken, RealisedToken as RealisedToken$1, TokenType } from "@unpunnyfuns/swatchbook-core/token-value-types";
|
|
8
7
|
|
|
9
|
-
//#region src/contexts.d.ts
|
|
10
|
-
/**
|
|
11
|
-
* Typed shape of the addon's `virtual:swatchbook/tokens` module.
|
|
12
|
-
*
|
|
13
|
-
* The axis / permutation / diagnostic / preset entries are deliberate
|
|
14
|
-
* type-aliases of core's authoritative shapes — the virtual module
|
|
15
|
-
* publishes those shapes verbatim, so single-sourcing the types prevents
|
|
16
|
-
* silent drift the moment core grows a field the plugin doesn't
|
|
17
|
-
* serialise.
|
|
18
|
-
*
|
|
19
|
-
* Token / listing shapes stay as narrowed interfaces because blocks
|
|
20
|
-
* only read a subset of Terrazzo's full token / listing structure; the
|
|
21
|
-
* narrower shape documents what's actually relied on.
|
|
22
|
-
*
|
|
23
|
-
* The ambient `declare module 'virtual:swatchbook/tokens'` declarations
|
|
24
|
-
* in `packages/addon/src/virtual.d.ts` describe the same payload.
|
|
25
|
-
*/
|
|
26
|
-
type VirtualAxisShape = Axis;
|
|
27
|
-
type VirtualDiagnosticShape = Diagnostic;
|
|
28
|
-
interface VirtualTokenShape {
|
|
29
|
-
$type?: string | undefined;
|
|
30
|
-
$value?: unknown;
|
|
31
|
-
$description?: string | undefined;
|
|
32
|
-
/**
|
|
33
|
-
* DTCG `$deprecated` — `true` or a message string. Mirrors core's
|
|
34
|
-
* `SwatchbookToken.$deprecated`; reaches blocks via the resolved token
|
|
35
|
-
* map reconstructed from the wire `tokenGraph`.
|
|
36
|
-
*/
|
|
37
|
-
$deprecated?: string | boolean | undefined;
|
|
38
|
-
aliasOf?: string | undefined;
|
|
39
|
-
aliasChain?: readonly string[] | undefined;
|
|
40
|
-
aliasedBy?: readonly string[] | undefined;
|
|
41
|
-
/**
|
|
42
|
-
* Per-sub-field alias map for composite tokens whose value blends
|
|
43
|
-
* primitives with aliased fragments — Terrazzo populates this when
|
|
44
|
-
* one or more component fields of a composite ($type: 'border',
|
|
45
|
-
* 'shadow', 'typography', 'gradient', 'transition') resolve through
|
|
46
|
-
* an alias. The `CompositeBreakdown` block reads it to render the
|
|
47
|
-
* source path beside each component value. Typed as `unknown` because
|
|
48
|
-
* the shape varies per composite type (color carries a
|
|
49
|
-
* `{components: (string | undefined)[]}` sub-shape; typography/border
|
|
50
|
-
* carry a flat `Record<string, string | undefined>`); the block
|
|
51
|
-
* narrows it at the consumer.
|
|
52
|
-
*/
|
|
53
|
-
partialAliasOf?: unknown;
|
|
54
|
-
}
|
|
55
|
-
/**
|
|
56
|
-
* Subset of `@terrazzo/plugin-token-listing`'s `ListedToken` that the
|
|
57
|
-
* snapshot carries. Blocks read `names.css` for the authoritative CSS
|
|
58
|
-
* variable name and `previewValue` for the display-ready CSS string.
|
|
59
|
-
* `source.loc` enables "jump to authoring source" affordances.
|
|
60
|
-
*
|
|
61
|
-
* Aliases `SlimListedToken` from core's `/snapshot-for-wire` subpath —
|
|
62
|
-
* the single canonical wire shape; both the addon's plugin (server-side
|
|
63
|
-
* emit) and blocks (consumer-side read) reference the same definition.
|
|
64
|
-
*/
|
|
65
|
-
type VirtualTokenListing = SlimListedToken;
|
|
66
|
-
type VirtualPresetShape = Preset;
|
|
67
|
-
/**
|
|
68
|
-
* Wire shape of the token graph — aliased from core's authoritative
|
|
69
|
-
* `TokenGraph` so both the virtual module declaration and the React
|
|
70
|
-
* context stay aligned with the same definition.
|
|
71
|
-
*/
|
|
72
|
-
type VirtualTokenGraph = TokenGraph;
|
|
73
|
-
/**
|
|
74
|
-
* Full project data read by blocks. Populated by the addon's preview
|
|
75
|
-
* decorator (from the virtual module) or constructed by hand in
|
|
76
|
-
* non-Storybook consumers.
|
|
77
|
-
*/
|
|
78
|
-
interface ProjectSnapshot {
|
|
79
|
-
axes: readonly VirtualAxisShape[];
|
|
80
|
-
activeTheme: string;
|
|
81
|
-
activeAxes: Readonly<Record<string, string>>;
|
|
82
|
-
cssVarPrefix: string;
|
|
83
|
-
/**
|
|
84
|
-
* Project-wide baseline for the row-indicator strip from
|
|
85
|
-
* `config.indicators`. Sits between the hard-coded indicator defaults
|
|
86
|
-
* and a block's `indicators` prop. Optional — hand-built snapshots
|
|
87
|
-
* (tests, MDX) omit it and blocks fall back to the bare defaults.
|
|
88
|
-
*/
|
|
89
|
-
indicators?: Readonly<Record<string, boolean>>;
|
|
90
|
-
diagnostics: readonly VirtualDiagnosticShape[];
|
|
91
|
-
/**
|
|
92
|
-
* Raw stylesheet text for the active theme. Optional — nothing on the
|
|
93
|
-
* `SwatchbookProvider` read path consumes it (`useProject()` never reads
|
|
94
|
-
* `snapshot.css`); the addon populates it incidentally when constructing
|
|
95
|
-
* its snapshot but injects CSS through its own independent mechanism.
|
|
96
|
-
*/
|
|
97
|
-
css?: string;
|
|
98
|
-
/**
|
|
99
|
-
* Path-indexed Token Listing data produced by
|
|
100
|
-
* `@terrazzo/plugin-token-listing`. Blocks prefer reading authoritative
|
|
101
|
-
* CSS var names and preview values from here; empty for non-resolver
|
|
102
|
-
* projects. Treat as enrichment — fall back gracefully when a path is
|
|
103
|
-
* absent.
|
|
104
|
-
*/
|
|
105
|
-
listing?: Readonly<Record<string, VirtualTokenListing>>;
|
|
106
|
-
/**
|
|
107
|
-
* Pre-built token graph for the project. JSON-serializable; nodes
|
|
108
|
-
* carry per-axis writes plus alias edges. The blocks hook backs
|
|
109
|
-
* `resolveAt` and variance from this graph.
|
|
110
|
-
*/
|
|
111
|
-
tokenGraph?: VirtualTokenGraph;
|
|
112
|
-
/** The default tuple — `{ axis: axis.default }` for every axis. */
|
|
113
|
-
defaultTuple: Record<string, string>;
|
|
114
|
-
/**
|
|
115
|
-
* Pre-built `resolveAt(tuple)` accessor. The addon's preview decorator
|
|
116
|
-
* instantiates this once per iframe lifetime. When present, use-project
|
|
117
|
-
* prefers it over building its own from `tokenGraph`, so it MUST preserve
|
|
118
|
-
* alias provenance — back it with `resolveAllWithProvenanceAt`, not the raw
|
|
119
|
-
* leaf `resolveAllAt`, or axis-varying aliases silently lose their chain /
|
|
120
|
-
* reverse refs / description at non-default tuples. Hand-built snapshots
|
|
121
|
-
* (tests, MDX) can omit this; blocks then fall back to a provenance-aware
|
|
122
|
-
* graph-backed resolver built from `tokenGraph`.
|
|
123
|
-
*/
|
|
124
|
-
resolveAt?: (tuple: Record<string, string>) => Record<string, VirtualTokenShape>;
|
|
125
|
-
}
|
|
126
|
-
declare function useOptionalSwatchbookData(): ProjectSnapshot | null;
|
|
127
|
-
/**
|
|
128
|
-
* Active swatchbook theme for the current story/docs render. Populated by
|
|
129
|
-
* the addon's preview decorator and consumed by `useToken` + any future
|
|
130
|
-
* consumer hooks.
|
|
131
|
-
*
|
|
132
|
-
* This runs through plain React context rather than Storybook's
|
|
133
|
-
* `useGlobals` so the same hook works in autodocs / MDX renders where the
|
|
134
|
-
* preview-hooks context isn't available.
|
|
135
|
-
*/
|
|
136
|
-
declare const ThemeContext: _$react.Context<string>;
|
|
137
|
-
declare function useActiveTheme(): string;
|
|
138
|
-
/**
|
|
139
|
-
* Active axis tuple for the current story/docs render — `Record<axisName,
|
|
140
|
-
* contextName>`. Derived from the same input as {@link ThemeContext}; split
|
|
141
|
-
* out so consumers needing per-axis info (toolbar, panel, tuple-aware
|
|
142
|
-
* blocks) don't have to reparse the composed theme name.
|
|
143
|
-
*/
|
|
144
|
-
declare const AxesContext: _$react.Context<Readonly<Record<string, string>>>;
|
|
145
|
-
declare function useActiveAxes(): Readonly<Record<string, string>>;
|
|
146
|
-
/**
|
|
147
|
-
* Active color-display format for the current story/docs render. Populated
|
|
148
|
-
* by the addon's preview decorator from the `swatchbookColorFormat` global
|
|
149
|
-
* (per-story `globals` or toolbar dropdown) and consumed by blocks that
|
|
150
|
-
* render color-token values. Emitted CSS is unaffected.
|
|
151
|
-
*
|
|
152
|
-
* Runs through plain React context rather than Storybook's `useGlobals` so
|
|
153
|
-
* per-story seeded globals flow through on first render and the same hook
|
|
154
|
-
* is safe to call from MDX doc blocks (where the preview-hooks context
|
|
155
|
-
* isn't available).
|
|
156
|
-
*/
|
|
157
|
-
declare const ColorFormatContext: _$react.Context<ColorFormat | null>;
|
|
158
|
-
declare function useColorFormat(): ColorFormat;
|
|
159
|
-
//#endregion
|
|
160
8
|
//#region src/internal/sort-tokens.d.ts
|
|
161
9
|
type SortBy = 'path' | 'value' | 'none';
|
|
162
10
|
type SortDir = 'asc' | 'desc';
|
|
@@ -178,21 +26,28 @@ interface BorderPreviewProps {
|
|
|
178
26
|
sortBy?: SortBy;
|
|
179
27
|
/** `'asc'` (default) or `'desc'`. */
|
|
180
28
|
sortDir?: SortDir;
|
|
29
|
+
/**
|
|
30
|
+
* Highest-precedence color format for this preview's values, overriding
|
|
31
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
32
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
33
|
+
*/
|
|
34
|
+
colorFormat?: ColorFormat;
|
|
181
35
|
}
|
|
182
36
|
declare function BorderPreview({
|
|
183
37
|
filter,
|
|
184
38
|
caption,
|
|
185
39
|
sortBy,
|
|
186
|
-
sortDir
|
|
40
|
+
sortDir,
|
|
41
|
+
colorFormat
|
|
187
42
|
}: BorderPreviewProps): ReactElement;
|
|
188
43
|
//#endregion
|
|
189
44
|
//#region src/border-preview/BorderSample.d.ts
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
path: string;
|
|
193
|
-
}
|
|
45
|
+
/** Props for the connected {@link BorderSample} block. */
|
|
46
|
+
type BorderSampleProps = PresenterProps<'border'>;
|
|
194
47
|
declare function BorderSample({
|
|
195
|
-
|
|
48
|
+
token,
|
|
49
|
+
cssVar,
|
|
50
|
+
colorFormat
|
|
196
51
|
}: BorderSampleProps): ReactElement;
|
|
197
52
|
//#endregion
|
|
198
53
|
//#region src/ColorPalette.d.ts
|
|
@@ -227,15 +82,45 @@ interface ColorPaletteProps {
|
|
|
227
82
|
sortBy?: SortBy;
|
|
228
83
|
/** `'asc'` (default) or `'desc'`. */
|
|
229
84
|
sortDir?: SortDir;
|
|
85
|
+
/**
|
|
86
|
+
* Highest-precedence color format for this palette's values, overriding
|
|
87
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
88
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
89
|
+
*/
|
|
90
|
+
colorFormat?: ColorFormat;
|
|
230
91
|
}
|
|
231
92
|
declare function ColorPalette({
|
|
232
93
|
filter,
|
|
233
94
|
groupBy,
|
|
234
95
|
caption,
|
|
235
96
|
sortBy,
|
|
236
|
-
sortDir
|
|
97
|
+
sortDir,
|
|
98
|
+
colorFormat
|
|
237
99
|
}: ColorPaletteProps): ReactElement;
|
|
238
100
|
//#endregion
|
|
101
|
+
//#region src/presenters/ColorSwatch.d.ts
|
|
102
|
+
/** Props for the {@link ColorSwatch} presenter. */
|
|
103
|
+
type ColorSwatchProps = PresenterProps<'color'>;
|
|
104
|
+
/**
|
|
105
|
+
* Presenter for `$type: color` tokens: a color chip, leaf label, and
|
|
106
|
+
* formatted value with an out-of-gamut marker. The chip's background is
|
|
107
|
+
* `cssVar` when supplied (R3); otherwise it is computed straight from
|
|
108
|
+
* `token.$value`, with `raw` guarded to `hex` (`cssColorFormat`) so the chip
|
|
109
|
+
* always paints a real color even when the display format is a JSON debug
|
|
110
|
+
* string. The value text below the chip uses the actual `colorFormat`,
|
|
111
|
+
* `raw` included. `options.label` lets a grouped consumer (e.g.
|
|
112
|
+
* `ColorPalette`) supply a group-relative label instead of the bare leaf
|
|
113
|
+
* segment, so context lost to grouping (`blue` in `color.palette.blue.50`)
|
|
114
|
+
* still reads on the swatch; standalone usage falls back to `leafOf(path)`.
|
|
115
|
+
*/
|
|
116
|
+
declare function ColorSwatch({
|
|
117
|
+
path,
|
|
118
|
+
token,
|
|
119
|
+
cssVar,
|
|
120
|
+
colorFormat,
|
|
121
|
+
options
|
|
122
|
+
}: ColorSwatchProps): ReactElement;
|
|
123
|
+
//#endregion
|
|
239
124
|
//#region src/indicators/resolve.d.ts
|
|
240
125
|
/** The individually-toggleable indicators in the row strip. `alias` covers the whole alias unit (forward chain + reverse count). */
|
|
241
126
|
type IndicatorName = 'alias' | 'variance' | 'gamut' | 'deprecation' | 'description' | 'composes';
|
|
@@ -303,6 +188,12 @@ interface ColorTableProps {
|
|
|
303
188
|
id?: string;
|
|
304
189
|
/** Configure the per-row indicator strip. See `IndicatorsProp`. Gamut stays in the Value cell, so it is not part of this strip. */
|
|
305
190
|
indicators?: IndicatorsProp;
|
|
191
|
+
/**
|
|
192
|
+
* Highest-precedence color format for this table's values, overriding
|
|
193
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
194
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
195
|
+
*/
|
|
196
|
+
colorFormat?: ColorFormat;
|
|
306
197
|
}
|
|
307
198
|
/**
|
|
308
199
|
* A grouped, searchable table of `$type: color` tokens. Suffix-matched
|
|
@@ -319,7 +210,8 @@ declare function ColorTable({
|
|
|
319
210
|
onSelect,
|
|
320
211
|
variants,
|
|
321
212
|
id,
|
|
322
|
-
indicators
|
|
213
|
+
indicators,
|
|
214
|
+
colorFormat
|
|
323
215
|
}: ColorTableProps): ReactElement;
|
|
324
216
|
//#endregion
|
|
325
217
|
//#region src/Diagnostics.d.ts
|
|
@@ -344,22 +236,14 @@ declare function Diagnostics({
|
|
|
344
236
|
//#region src/dimension-scale/DimensionSample.d.ts
|
|
345
237
|
/** The visual treatment for a dimension sample: a length bar, a radius square, or a sized square. */
|
|
346
238
|
type DimensionVisual = 'length' | 'radius' | 'size';
|
|
347
|
-
/** Props for the connected {@link DimensionSample} block. */
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
path: string;
|
|
351
|
-
/**
|
|
352
|
-
* Visualization kind:
|
|
353
|
-
* - `'length'` (default): horizontal bar whose width equals the token's dimension.
|
|
354
|
-
* - `'radius'`: 56×56 square with the token applied as `border-radius`.
|
|
355
|
-
* - `'size'`: a square sized to the token's dimension.
|
|
356
|
-
*/
|
|
357
|
-
visual?: DimensionVisual;
|
|
358
|
-
}
|
|
359
|
-
/** Connected block: resolves `path` against the active project and renders its dimension sample. */
|
|
239
|
+
/** Props for the connected {@link DimensionSample} block. `options.visual` selects the visualization kind (see {@link DimensionVisual}); defaults to `'length'`. */
|
|
240
|
+
type DimensionSampleProps = PresenterProps<'dimension'>;
|
|
241
|
+
/** Connected block: renders a realised dimension token's sample, capped for oversized values. */
|
|
360
242
|
declare function DimensionSample({
|
|
361
|
-
|
|
362
|
-
|
|
243
|
+
token,
|
|
244
|
+
cssVar,
|
|
245
|
+
colorFormat,
|
|
246
|
+
options
|
|
363
247
|
}: DimensionSampleProps): ReactElement;
|
|
364
248
|
//#endregion
|
|
365
249
|
//#region src/DimensionScale.d.ts
|
|
@@ -425,6 +309,20 @@ declare function FontFamilyPreview({
|
|
|
425
309
|
sortDir
|
|
426
310
|
}: FontFamilyPreviewProps): ReactElement;
|
|
427
311
|
//#endregion
|
|
312
|
+
//#region src/presenters/FontFamilySpecimen.d.ts
|
|
313
|
+
/** Props for the {@link FontFamilySpecimen} presenter. `options.sample` overrides the rendered sample text; defaults to a pangram. */
|
|
314
|
+
type FontFamilySpecimenProps = PresenterProps<'fontFamily'>;
|
|
315
|
+
/**
|
|
316
|
+
* Presenter for `$type: fontFamily` tokens: path, resolved stack, a sample
|
|
317
|
+
* line styled per R3, and the css var in use.
|
|
318
|
+
*/
|
|
319
|
+
declare function FontFamilySpecimen({
|
|
320
|
+
path,
|
|
321
|
+
token,
|
|
322
|
+
cssVar,
|
|
323
|
+
options
|
|
324
|
+
}: FontFamilySpecimenProps): ReactElement;
|
|
325
|
+
//#endregion
|
|
428
326
|
//#region src/FontWeightScale.d.ts
|
|
429
327
|
interface FontWeightScaleProps {
|
|
430
328
|
/**
|
|
@@ -454,6 +352,20 @@ declare function FontWeightScale({
|
|
|
454
352
|
sortDir
|
|
455
353
|
}: FontWeightScaleProps): ReactElement;
|
|
456
354
|
//#endregion
|
|
355
|
+
//#region src/presenters/FontWeightSpecimen.d.ts
|
|
356
|
+
/** Props for the {@link FontWeightSpecimen} presenter. `options.sample` overrides the rendered sample text; defaults to `'Aa'`. */
|
|
357
|
+
type FontWeightSpecimenProps = PresenterProps<'fontWeight'>;
|
|
358
|
+
/**
|
|
359
|
+
* Presenter for `$type: fontWeight` tokens: path, the raw weight value, a
|
|
360
|
+
* sample glyph styled per R3, and the css var in use.
|
|
361
|
+
*/
|
|
362
|
+
declare function FontWeightSpecimen({
|
|
363
|
+
path,
|
|
364
|
+
token,
|
|
365
|
+
cssVar,
|
|
366
|
+
options
|
|
367
|
+
}: FontWeightSpecimenProps): ReactElement;
|
|
368
|
+
//#endregion
|
|
457
369
|
//#region src/GradientPalette.d.ts
|
|
458
370
|
interface GradientPaletteProps {
|
|
459
371
|
/**
|
|
@@ -471,32 +383,63 @@ interface GradientPaletteProps {
|
|
|
471
383
|
sortBy?: SortBy;
|
|
472
384
|
/** `'asc'` (default) or `'desc'`. */
|
|
473
385
|
sortDir?: SortDir;
|
|
386
|
+
/**
|
|
387
|
+
* Highest-precedence color format for this palette's values, overriding
|
|
388
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
389
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
390
|
+
*/
|
|
391
|
+
colorFormat?: ColorFormat;
|
|
474
392
|
}
|
|
475
393
|
declare function GradientPalette({
|
|
476
394
|
filter,
|
|
477
395
|
caption,
|
|
478
396
|
sortBy,
|
|
479
|
-
sortDir
|
|
397
|
+
sortDir,
|
|
398
|
+
colorFormat
|
|
480
399
|
}: GradientPaletteProps): ReactElement;
|
|
481
400
|
//#endregion
|
|
401
|
+
//#region src/presenters/GradientSwatch.d.ts
|
|
402
|
+
/** Props for the {@link GradientSwatch} presenter. */
|
|
403
|
+
type GradientSwatchProps = PresenterProps<'gradient'>;
|
|
404
|
+
/**
|
|
405
|
+
* Presenter for `$type: gradient` tokens: a gradient chip. Unlike the
|
|
406
|
+
* other composite presenters, a gradient's css var (per Terrazzo's
|
|
407
|
+
* `transformGradient`) resolves to a bare `<color> <pct>, ...` stop list,
|
|
408
|
+
* not a complete property value: DTCG gradients carry no direction, so
|
|
409
|
+
* both branches need one supplied at render time. `90deg` (`to right`)
|
|
410
|
+
* matches the direction the standalone block previously hard-coded.
|
|
411
|
+
*/
|
|
412
|
+
declare function GradientSwatch({
|
|
413
|
+
token,
|
|
414
|
+
cssVar,
|
|
415
|
+
colorFormat
|
|
416
|
+
}: GradientSwatchProps): ReactElement;
|
|
417
|
+
//#endregion
|
|
482
418
|
//#region src/motion-preview/MotionSample.d.ts
|
|
483
419
|
type MotionSpeed = 0.25 | 0.5 | 1 | 2;
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
420
|
+
/**
|
|
421
|
+
* Props for the connected {@link MotionSample} block. `token` accepts any
|
|
422
|
+
* of the three motion `$type`s (`transition`, `duration`, `cubicBezier`) —
|
|
423
|
+
* looser than a single-type `PresenterProps<'transition'>` because
|
|
424
|
+
* `resolveMotionSpec` dispatches on the realised `$type` at runtime and
|
|
425
|
+
* TokenNavigator/MotionPreview feed it all three from one call site.
|
|
426
|
+
* `options.speed` is the playback speed multiplier (defaults to `1`);
|
|
427
|
+
* `options.runKey` forces the animation to restart when changed, e.g. from
|
|
428
|
+
* an outer block's "replay" button re-triggering every sample at once.
|
|
429
|
+
*/
|
|
430
|
+
type MotionSampleProps = PresenterProps;
|
|
431
|
+
/**
|
|
432
|
+
* Connected block: renders a realised motion token's animated sample. Both
|
|
433
|
+
* `durationMs` and `easing` come from the realised `$value`; the ball's
|
|
434
|
+
* setInterval loop needs a JS-readable duration, and (see the comment below)
|
|
435
|
+
* `cssVar` cannot stand in for `easing` here. `cssVar` is still accepted, per
|
|
436
|
+
* the uniform `PresenterProps` contract every presenter shares, but this
|
|
437
|
+
* View has nowhere safe to apply it.
|
|
438
|
+
*/
|
|
496
439
|
declare function MotionSample({
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
440
|
+
token,
|
|
441
|
+
cssVar: _cssVar,
|
|
442
|
+
options
|
|
500
443
|
}: MotionSampleProps): ReactElement;
|
|
501
444
|
//#endregion
|
|
502
445
|
//#region src/MotionPreview.d.ts
|
|
@@ -569,81 +512,71 @@ declare function OpacityScale({
|
|
|
569
512
|
sortDir
|
|
570
513
|
}: OpacityScaleProps): ReactElement;
|
|
571
514
|
//#endregion
|
|
572
|
-
//#region src/
|
|
573
|
-
/**
|
|
574
|
-
* Shared subscription to Storybook's globals channel, lifted out of React
|
|
575
|
-
* component state so the values survive docs-mode remounts.
|
|
576
|
-
*
|
|
577
|
-
* On MDX docs pages, Storybook force-rerenders the docs container on every
|
|
578
|
-
* `updateGlobals` (see `preview/runtime.js` → `onUpdateGlobals`), which
|
|
579
|
-
* unmounts and remounts any embedded blocks. A `useState(null)` initializer
|
|
580
|
-
* inside the block would reset to null on each remount — the symptom is a
|
|
581
|
-
* one-frame flicker to the correct value, then revert to the defaults.
|
|
582
|
-
* Module-level state persists; React reads it through `useSyncExternalStore`
|
|
583
|
-
* and stays concurrent-safe.
|
|
584
|
-
*/
|
|
585
|
-
interface ChannelGlobals {
|
|
586
|
-
axes: Record<string, string> | null;
|
|
587
|
-
format: ColorFormat | null;
|
|
588
|
-
}
|
|
589
|
-
declare function useChannelGlobals(): ChannelGlobals;
|
|
590
|
-
//#endregion
|
|
591
|
-
//#region src/internal/channel.d.ts
|
|
592
|
-
/**
|
|
593
|
-
* Host adapter API — a distinct tier from the components/hooks/
|
|
594
|
-
* `SwatchbookProvider` surface that MDX/story authors use. This is how a
|
|
595
|
-
* host (Storybook's addon, or an alternative embedding) injects live data
|
|
596
|
-
* into blocks without blocks depending on that host. Most consumers never
|
|
597
|
-
* touch this; it exists for whoever builds the next integration.
|
|
598
|
-
*
|
|
599
|
-
* Minimal event-source contract blocks need from their host. Storybook's
|
|
600
|
-
* preview Channel satisfies it structurally; a plain emitter or a test double
|
|
601
|
-
* does too. Blocks never import `storybook/preview-api` — the addon, which
|
|
602
|
-
* owns the Storybook relationship, injects the channel at preview init via
|
|
603
|
-
* {@link registerChannel}, mirroring how `registerTokenSource` injects the
|
|
604
|
-
* initial token snapshot.
|
|
605
|
-
*/
|
|
606
|
-
interface BlockChannel {
|
|
607
|
-
on<T>(event: string, listener: (payload: T) => void): void;
|
|
608
|
-
}
|
|
515
|
+
//#region src/presenters/OpacitySwatch.d.ts
|
|
609
516
|
/**
|
|
610
|
-
*
|
|
611
|
-
*
|
|
612
|
-
*
|
|
613
|
-
* Inject the host channel. Runs any subscribers that queued before the
|
|
614
|
-
* channel existed, then clears the queue. The host contract does NOT dedupe:
|
|
615
|
-
* on HMR a subscriber's module re-runs {@link onChannel}, which re-attaches
|
|
616
|
-
* immediately once the channel is set, so each subscriber MUST guard its own
|
|
617
|
-
* attach to stay single-wired.
|
|
517
|
+
* Props for the {@link OpacitySwatch} presenter. `options.sampleColorVar`
|
|
518
|
+
* sets the chip's fill color (a resolved css var or literal); defaults to
|
|
519
|
+
* the swatchbook accent surface.
|
|
618
520
|
*/
|
|
619
|
-
|
|
521
|
+
type OpacitySwatchProps = PresenterProps<'number'>;
|
|
620
522
|
/**
|
|
621
|
-
*
|
|
622
|
-
*
|
|
623
|
-
*
|
|
624
|
-
*
|
|
625
|
-
* module load; the queue absorbs the gap until the addon injects the channel.
|
|
523
|
+
* Presenter for `$type: number` opacity tokens: a colored chip over a
|
|
524
|
+
* checkerboard backdrop, with the chip's `opacity` set from the token per
|
|
525
|
+
* R3. The number alone (`0.4`) doesn't convey what the token looks like
|
|
526
|
+
* applied to a surface; the chip does.
|
|
626
527
|
*/
|
|
627
|
-
declare function
|
|
528
|
+
declare function OpacitySwatch({
|
|
529
|
+
token,
|
|
530
|
+
cssVar,
|
|
531
|
+
options
|
|
532
|
+
}: OpacitySwatchProps): ReactElement;
|
|
628
533
|
//#endregion
|
|
629
534
|
//#region src/provider.d.ts
|
|
630
535
|
interface SwatchbookProviderProps {
|
|
631
|
-
|
|
536
|
+
snapshot: SnapshotForWire;
|
|
537
|
+
/** Controlled active tuple. Mutually exclusive with `defaultAxes`. */
|
|
538
|
+
axes?: Record<string, string> | undefined;
|
|
539
|
+
/** Uncontrolled initial tuple; the provider owns state and `useSetAxes` flips it. */
|
|
540
|
+
defaultAxes?: Record<string, string> | undefined;
|
|
541
|
+
/** Overrides merged over {@link DEFAULT_PRESENTERS} for this subtree. */
|
|
542
|
+
presenters?: PresenterRegistry | undefined;
|
|
543
|
+
/**
|
|
544
|
+
* Mount the snapshot's emitted CSS into `document.head` through the shared
|
|
545
|
+
* managed style element (default `true`). Pass `false` when the host places
|
|
546
|
+
* the stylesheet itself: SSR frameworks, shadow roots, the Storybook addon
|
|
547
|
+
* (which injects its own combined stylesheet). The element is shared by ID,
|
|
548
|
+
* so a page hosting providers with different snapshots should opt out and
|
|
549
|
+
* manage stylesheets itself; same-snapshot providers are idempotent.
|
|
550
|
+
*/
|
|
551
|
+
mountCss?: boolean | undefined;
|
|
632
552
|
children: ReactNode;
|
|
633
553
|
}
|
|
634
554
|
/**
|
|
635
|
-
* Wraps a tree of blocks with the token data they need to render
|
|
555
|
+
* Wraps a tree of blocks with the token data they need to render, assembled
|
|
556
|
+
* from core's wire snapshot plus an active axis tuple.
|
|
636
557
|
*
|
|
637
|
-
* The Storybook addon's preview decorator mounts this automatically
|
|
638
|
-
* story/MDX authors typically never
|
|
639
|
-
* tests, custom React apps, non-Storybook
|
|
640
|
-
* a {@link
|
|
641
|
-
*
|
|
558
|
+
* The Storybook addon's preview decorator mounts this automatically
|
|
559
|
+
* (`axes` controlled by the toolbar), so story/MDX authors typically never
|
|
560
|
+
* see it. Outside Storybook: unit tests, custom React apps, non-Storybook
|
|
561
|
+
* doc sites. Consumers pass a {@link SnapshotForWire} (often imported from
|
|
562
|
+
* a JSON file) and either drive `axes` themselves or let the provider own
|
|
563
|
+
* the tuple via `defaultAxes` + {@link useSetAxes}.
|
|
642
564
|
*/
|
|
643
565
|
declare function SwatchbookProvider({
|
|
644
|
-
|
|
566
|
+
snapshot,
|
|
567
|
+
axes,
|
|
568
|
+
defaultAxes,
|
|
569
|
+
presenters,
|
|
570
|
+
mountCss,
|
|
645
571
|
children
|
|
646
572
|
}: SwatchbookProviderProps): ReactElement;
|
|
573
|
+
/**
|
|
574
|
+
* Flip the active tuple on an uncontrolled {@link SwatchbookProvider}
|
|
575
|
+
* (mounted with `defaultAxes`, not `axes`). Throws when the nearest
|
|
576
|
+
* provider is controlled (the host owns `axes`) or absent, since there's
|
|
577
|
+
* no internal state to flip in either case.
|
|
578
|
+
*/
|
|
579
|
+
declare function useSetAxes(): (tuple: Record<string, string>) => void;
|
|
647
580
|
/**
|
|
648
581
|
* Read the current {@link ProjectSnapshot}. Throws if called outside a
|
|
649
582
|
* {@link SwatchbookProvider}; blocks that need to fall back to the
|
|
@@ -651,66 +584,6 @@ declare function SwatchbookProvider({
|
|
|
651
584
|
*/
|
|
652
585
|
declare function useSwatchbookData(): ProjectSnapshot;
|
|
653
586
|
//#endregion
|
|
654
|
-
//#region src/internal/channel-tokens.d.ts
|
|
655
|
-
/**
|
|
656
|
-
* Host adapter API — same integration tier as {@link BlockChannel} /
|
|
657
|
-
* {@link registerChannel} / {@link onChannel}, distinct from the
|
|
658
|
-
* components/hooks/`SwatchbookProvider` surface MDX/story authors use.
|
|
659
|
-
* Most consumers never touch this; it exists for whoever builds the next
|
|
660
|
-
* host integration.
|
|
661
|
-
*
|
|
662
|
-
* Live token snapshot backed by the addon's preview dev-time HMR event.
|
|
663
|
-
*
|
|
664
|
-
* The initial snapshot is *injected* by the addon preview via
|
|
665
|
-
* {@link registerTokenSource} rather than imported from the addon's
|
|
666
|
-
* `virtual:swatchbook/tokens` build artifact — so blocks carries no
|
|
667
|
-
* dependency on that module and imports cleanly standalone (outside
|
|
668
|
-
* Storybook, in unit tests, in the docs site). Until something registers
|
|
669
|
-
* a source, blocks render from empty defaults.
|
|
670
|
-
*
|
|
671
|
-
* For dev-time updates this module subscribes to `TOKENS_UPDATED_EVENT`
|
|
672
|
-
* on Storybook's channel (which the addon preview re-broadcasts from its
|
|
673
|
-
* own HMR listener) and exposes the latest snapshot via
|
|
674
|
-
* `useSyncExternalStore`, so hooks re-render in place on each token save.
|
|
675
|
-
*/
|
|
676
|
-
declare const TOKENS_UPDATED_EVENT = "swatchbook/tokens-updated";
|
|
677
|
-
/** Host adapter API — see {@link registerTokenSource}. */
|
|
678
|
-
interface TokenSnapshot {
|
|
679
|
-
readonly axes: readonly VirtualAxisShape[];
|
|
680
|
-
readonly presets: readonly {
|
|
681
|
-
name: string;
|
|
682
|
-
axes: Partial<Record<string, string>>;
|
|
683
|
-
description?: string;
|
|
684
|
-
}[];
|
|
685
|
-
readonly diagnostics: readonly VirtualDiagnosticShape[];
|
|
686
|
-
readonly css: string;
|
|
687
|
-
readonly cssVarPrefix: string;
|
|
688
|
-
/** Project-wide baseline for the row-indicator strip from `config.indicators`. */
|
|
689
|
-
readonly indicators: Readonly<Record<string, boolean>>;
|
|
690
|
-
readonly listing: Readonly<Record<string, VirtualTokenListing>>;
|
|
691
|
-
readonly tokenGraph: VirtualTokenGraph;
|
|
692
|
-
readonly defaultTuple: Record<string, string>;
|
|
693
|
-
/** Monotonic counter, bumped on each update. Useful as a React key. */
|
|
694
|
-
readonly version: number;
|
|
695
|
-
}
|
|
696
|
-
/**
|
|
697
|
-
* Host adapter API — same integration tier as {@link registerChannel}.
|
|
698
|
-
*
|
|
699
|
-
* Seed the initial token snapshot. The addon preview calls this once at
|
|
700
|
-
* init with the build-time `virtual:swatchbook/tokens` data. Keeping the
|
|
701
|
-
* virtual-module read on the addon side (the package that owns it) lets
|
|
702
|
-
* blocks import cleanly without it. No-op fields fall back to the current
|
|
703
|
-
* snapshot, so a partial source is safe.
|
|
704
|
-
*/
|
|
705
|
-
declare function registerTokenSource(source: Partial<TokenSnapshot>): void;
|
|
706
|
-
/**
|
|
707
|
-
* Host adapter API — same integration tier as {@link registerChannel}. Most
|
|
708
|
-
* consumers read project data through `useSwatchbookData()` /
|
|
709
|
-
* `SwatchbookProvider` instead; this is the internal subscription
|
|
710
|
-
* `useProject()`'s fallback path uses to read the live channel-fed snapshot.
|
|
711
|
-
*/
|
|
712
|
-
declare function useTokenSnapshot(): TokenSnapshot;
|
|
713
|
-
//#endregion
|
|
714
587
|
//#region src/ShadowPreview.d.ts
|
|
715
588
|
interface ShadowPreviewProps {
|
|
716
589
|
/**
|
|
@@ -728,23 +601,43 @@ interface ShadowPreviewProps {
|
|
|
728
601
|
sortBy?: SortBy;
|
|
729
602
|
/** `'asc'` (default) or `'desc'`. */
|
|
730
603
|
sortDir?: SortDir;
|
|
604
|
+
/**
|
|
605
|
+
* Highest-precedence color format for this preview's values, overriding
|
|
606
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
607
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
608
|
+
*/
|
|
609
|
+
colorFormat?: ColorFormat;
|
|
731
610
|
}
|
|
732
611
|
declare function ShadowPreview({
|
|
733
612
|
filter,
|
|
734
613
|
caption,
|
|
735
614
|
sortBy,
|
|
736
|
-
sortDir
|
|
615
|
+
sortDir,
|
|
616
|
+
colorFormat
|
|
737
617
|
}: ShadowPreviewProps): ReactElement;
|
|
738
618
|
//#endregion
|
|
739
619
|
//#region src/shadow-preview/ShadowSample.d.ts
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
path: string;
|
|
743
|
-
}
|
|
620
|
+
/** Props for the connected {@link ShadowSample} block. */
|
|
621
|
+
type ShadowSampleProps = PresenterProps<'shadow'>;
|
|
744
622
|
declare function ShadowSample({
|
|
745
|
-
|
|
623
|
+
token,
|
|
624
|
+
cssVar,
|
|
625
|
+
colorFormat
|
|
746
626
|
}: ShadowSampleProps): ReactElement;
|
|
747
627
|
//#endregion
|
|
628
|
+
//#region src/presenters/StrokeSample.d.ts
|
|
629
|
+
/** Props for the {@link StrokeSample} presenter. */
|
|
630
|
+
type StrokeSampleProps = PresenterProps<'strokeStyle'>;
|
|
631
|
+
/**
|
|
632
|
+
* Presenter for `$type: strokeStyle` tokens: a line styled with the
|
|
633
|
+
* token's `border-top-style` per R3, or the object-form fallback message
|
|
634
|
+
* when `$value` is a dash pattern with no pure CSS equivalent.
|
|
635
|
+
*/
|
|
636
|
+
declare function StrokeSample({
|
|
637
|
+
token,
|
|
638
|
+
cssVar
|
|
639
|
+
}: StrokeSampleProps): ReactElement;
|
|
640
|
+
//#endregion
|
|
748
641
|
//#region src/StrokeStylePreview.d.ts
|
|
749
642
|
interface StrokeStylePreviewProps {
|
|
750
643
|
/**
|
|
@@ -776,10 +669,18 @@ interface TokenDetailProps {
|
|
|
776
669
|
path: string;
|
|
777
670
|
/** Override the heading. Defaults to the path. */
|
|
778
671
|
heading?: string;
|
|
672
|
+
/**
|
|
673
|
+
* Highest-precedence color format for this block's values, overriding
|
|
674
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
675
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
676
|
+
* Also governs the composed `CompositeBreakdown` / `AxisVariance` sub-parts.
|
|
677
|
+
*/
|
|
678
|
+
colorFormat?: ColorFormat;
|
|
779
679
|
}
|
|
780
680
|
declare function TokenDetail({
|
|
781
681
|
path,
|
|
782
|
-
heading
|
|
682
|
+
heading,
|
|
683
|
+
colorFormat
|
|
783
684
|
}: TokenDetailProps): ReactElement;
|
|
784
685
|
//#endregion
|
|
785
686
|
//#region src/token-detail/AliasChain.d.ts
|
|
@@ -804,18 +705,32 @@ declare function AliasedBy({
|
|
|
804
705
|
interface AxisVarianceProps {
|
|
805
706
|
/** Full dot-path of the token. */
|
|
806
707
|
path: string;
|
|
708
|
+
/**
|
|
709
|
+
* Highest-precedence color format for this block's values, overriding
|
|
710
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
711
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
712
|
+
*/
|
|
713
|
+
colorFormat?: ColorFormat;
|
|
807
714
|
}
|
|
808
715
|
declare function AxisVariance({
|
|
809
|
-
path
|
|
716
|
+
path,
|
|
717
|
+
colorFormat
|
|
810
718
|
}: AxisVarianceProps): ReactElement;
|
|
811
719
|
//#endregion
|
|
812
720
|
//#region src/token-detail/CompositeBreakdown.d.ts
|
|
813
721
|
interface CompositeBreakdownProps {
|
|
814
722
|
/** Full dot-path of the token. */
|
|
815
723
|
path: string;
|
|
724
|
+
/**
|
|
725
|
+
* Highest-precedence color format for this block's values, overriding
|
|
726
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
727
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
728
|
+
*/
|
|
729
|
+
colorFormat?: ColorFormat;
|
|
816
730
|
}
|
|
817
731
|
declare function CompositeBreakdown({
|
|
818
|
-
path
|
|
732
|
+
path,
|
|
733
|
+
colorFormat
|
|
819
734
|
}: CompositeBreakdownProps): ReactElement | null;
|
|
820
735
|
//#endregion
|
|
821
736
|
//#region src/token-detail/CompositePreview.d.ts
|
|
@@ -909,6 +824,13 @@ interface TokenNavigatorProps {
|
|
|
909
824
|
id?: string;
|
|
910
825
|
/** Configure the per-row indicator strip. See `IndicatorsProp`. */
|
|
911
826
|
indicators?: IndicatorsProp;
|
|
827
|
+
/**
|
|
828
|
+
* Highest-precedence color format for this tree's values, overriding
|
|
829
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
830
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
831
|
+
* Also governs the composed row-detail `TokenDetail` slide-over.
|
|
832
|
+
*/
|
|
833
|
+
colorFormat?: ColorFormat;
|
|
912
834
|
}
|
|
913
835
|
/**
|
|
914
836
|
* A collapsible, searchable tree of tokens with roving-tabindex keyboard
|
|
@@ -922,7 +844,8 @@ declare function TokenNavigator({
|
|
|
922
844
|
searchable,
|
|
923
845
|
onSelect,
|
|
924
846
|
id,
|
|
925
|
-
indicators
|
|
847
|
+
indicators,
|
|
848
|
+
colorFormat
|
|
926
849
|
}: TokenNavigatorProps): ReactElement;
|
|
927
850
|
//#endregion
|
|
928
851
|
//#region src/TokenTable.d.ts
|
|
@@ -967,6 +890,13 @@ interface TokenTableProps {
|
|
|
967
890
|
id?: string;
|
|
968
891
|
/** Configure the per-row indicator strip. See `IndicatorsProp`. */
|
|
969
892
|
indicators?: IndicatorsProp;
|
|
893
|
+
/**
|
|
894
|
+
* Highest-precedence color format for this table's values, overriding
|
|
895
|
+
* an outer `ColorFormatContext` and the project's `defaultColorFormat`.
|
|
896
|
+
* Omit to inherit the existing precedence chain (see `useColorFormat`).
|
|
897
|
+
* Also governs the composed row-detail `TokenDetail` slide-over.
|
|
898
|
+
*/
|
|
899
|
+
colorFormat?: ColorFormat;
|
|
970
900
|
}
|
|
971
901
|
/**
|
|
972
902
|
* A sortable, searchable table of tokens. Click a row to inspect it in a
|
|
@@ -982,9 +912,24 @@ declare function TokenTable({
|
|
|
982
912
|
searchable,
|
|
983
913
|
onSelect,
|
|
984
914
|
id,
|
|
985
|
-
indicators
|
|
915
|
+
indicators,
|
|
916
|
+
colorFormat
|
|
986
917
|
}: TokenTableProps): ReactElement;
|
|
987
918
|
//#endregion
|
|
919
|
+
//#region src/presenters/TypeSpecimen.d.ts
|
|
920
|
+
/** Props for the connected {@link TypeSpecimen} block. `options.sample` overrides the rendered sample text; defaults to a pangram. */
|
|
921
|
+
type TypeSpecimenProps = PresenterProps<'typography'>;
|
|
922
|
+
/**
|
|
923
|
+
* Presenter for `$type: typography` tokens: a spec summary and a sample line
|
|
924
|
+
* styled per R3. Token identity (the path) is the consuming block's
|
|
925
|
+
* responsibility, not this presenter's; see `TypographyScale`.
|
|
926
|
+
*/
|
|
927
|
+
declare function TypeSpecimen({
|
|
928
|
+
token,
|
|
929
|
+
cssVar: _cssVar,
|
|
930
|
+
options
|
|
931
|
+
}: TypeSpecimenProps): ReactElement;
|
|
932
|
+
//#endregion
|
|
988
933
|
//#region src/TypographyScale.d.ts
|
|
989
934
|
interface TypographyScaleProps {
|
|
990
935
|
/**
|
|
@@ -1013,5 +958,5 @@ declare function TypographyScale({
|
|
|
1013
958
|
sortDir
|
|
1014
959
|
}: TypographyScaleProps): ReactElement;
|
|
1015
960
|
//#endregion
|
|
1016
|
-
export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps,
|
|
961
|
+
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, ColorSwatch, type ColorSwatchProps, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, DEFAULT_PRESENTERS, Diagnostics, type DiagnosticsProps, DimensionSample, type DimensionSampleProps, DimensionScale, type DimensionScaleProps, type DimensionVisual, FontFamilyPreview, type FontFamilyPreviewProps, FontFamilySpecimen, type FontFamilySpecimenProps, FontWeightScale, type FontWeightScaleProps, FontWeightSpecimen, type FontWeightSpecimenProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, GradientSwatch, type GradientSwatchProps, type IndicatorName, type IndicatorsProp, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, OpacityScale, type OpacityScaleProps, OpacitySwatch, type OpacitySwatchProps, type PresenterComponent, PresenterContext, type PresenterProps, type PresenterRegistry, type ProjectSnapshot, type RealisedToken, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, type SortBy, type SortDir, StrokeSample, type StrokeSampleProps, StrokeStylePreview, type StrokeStylePreviewProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, type TokenType, TokenUsageSnippet, type TokenUsageSnippetProps, TypeSpecimen, type TypeSpecimenProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualPresetShape as VirtualPreset, type VirtualTokenShape as VirtualToken, type VirtualTokenGraph, type VirtualTokenListing, formatColor, formatTokenValue, mergePresenters, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, usePresenter, useSetAxes, useSwatchbookData };
|
|
1017
962
|
//# sourceMappingURL=index.d.mts.map
|