@unpunnyfuns/swatchbook-blocks 0.14.1 → 0.16.0

package/dist/index.d.mts

@@ -226,6 +226,66 @@ declare function ColorPalette({
   sortDir
 }: ColorPaletteProps): ReactElement;
 //#endregion
+//#region src/ColorTable.d.ts
+interface ColorTableProps {
+  /**
+   * Token-path filter. Defaults to every `$type: color` token. `"color.*"`
+   * scopes to the semantic layer; `"color.palette.blue.*"` to a single ramp.
+   */
+  filter?: string;
+  /** Override the table caption. */
+  caption?: string;
+  /**
+   * Sort order.
+   * - `'path'` (default) — lexicographic on the dot-path.
+   * - `'value'` — perceptual (oklch L → C → H). Ramps read light→dark, then
+   *   warm→cool within each lightness band.
+   * - `'none'` — preserve project iteration order.
+   */
+  sortBy?: SortBy;
+  /** `'asc'` (default) or `'desc'`. */
+  sortDir?: SortDir;
+  /**
+   * Render a fuzzy-search input above the table (case-insensitive,
+   * single-char typo tolerance, out-of-order terms, matches across path +
+   * any format value). Defaults to `true`.
+   */
+  searchable?: boolean;
+  /**
+   * Called with the clicked row's dot-path. When set, the built-in
+   * `<TokenDetail>` drawer is suppressed — the consumer owns follow-up UI.
+   */
+  onSelect?(path: string): void;
+  /**
+   * Map from a display label to a suffix matched against each token's
+   * trailing path segment. A row whose leaf matches one of the suffixes
+   * gets the corresponding label rendered as a pill after the token name.
+   *
+   * Accepts both DTCG-idiomatic and Backmarket-style conventions:
+   * - **Dot segment** (`color.bg.hi.disabled`): the last dot-segment equals
+   *   the suffix exactly (`suffix === 'disabled'`).
+   * - **Hyphen tail** (`color.bg.hi-d`): the last dot-segment ends in
+   *   `-<suffix>` (`suffix === 'd'`).
+   *
+   * Longest-suffix-wins: `{ hover: 'h', hoverDark: 'h-dark' }` picks
+   * `hoverDark` for a path ending in `-h-dark`. The hyphen-tail form
+   * requires an actual hyphen boundary — suffix `0` does not match
+   * `neutral-900`. Tokens that don't match any suffix render with no pill.
+   *
+   * Empty map (default) → no pills; the block behaves exactly as before.
+   */
+  variants?: Record<string, string>;
+}
+declare function ColorTable({
+  filter,
+  caption,
+  sortBy,
+  sortDir,
+  searchable,
+  onSelect,
+  variants
+}: ColorTableProps): ReactElement;
+//#endregion
 //#region src/Diagnostics.d.ts
 interface DiagnosticsProps {
   /** Override the section caption. Defaults to a severity summary. */
@@ -605,11 +665,12 @@ interface TokenNavigatorProps {
    */
   initiallyExpanded?: number;
   /**
-   * Render a runtime search input above the tree. Matches are
-   * case-insensitive substrings against a leaf's token path; groups
-   * that contain no matching leaves collapse out, and every group on
-   * the path to a match auto-expands so hits are visible without
-   * clicking. Defaults to `true`.
+   * Render a runtime search input above the tree. Matches are fuzzy
+   * (case-insensitive, out-of-order terms, single-character typo
+   * tolerance) against a leaf's token path; groups that contain no
+   * matching leaves collapse out, and every group on the path to a
+   * match auto-expands so hits are visible without clicking. Defaults
+   * to `true`.
    */
   searchable?: boolean;
   /**
@@ -652,10 +713,11 @@ interface TokenTableProps {
   sortDir?: SortDir;
   /**
    * Render a runtime search input above the table that narrows rows by
-   * case-insensitive substring against the token path, type, or value.
-   * Defaults to `true` because browsing a multi-hundred-token reference
-   * without search is painful. Pass `false` to hide the input (the
-   * `filter` / `type` props still apply at authoring time).
+   * fuzzy match (case-insensitive, out-of-order terms, single-character
+   * typo tolerance) against the token path, type, or value. Defaults to
+   * `true` because browsing a multi-hundred-token reference without
+   * search is painful. Pass `false` to hide the input (the `filter` /
+   * `type` props still apply at authoring time).
    */
   searchable?: boolean;
   /**
@@ -703,5 +765,5 @@ declare function TypographyScale({
   sortDir
 }: 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, Diagnostics, type DiagnosticsProps, 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 };
+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, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, 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