@unpunnyfuns/swatchbook-blocks 0.19.9 → 0.20.1

package/dist/index.d.mts

@@ -513,6 +513,58 @@ declare function MotionPreview({
   caption
 }: MotionPreviewProps): ReactElement;
 //#endregion
+//#region src/OpacityScale.d.ts
+interface OpacityScaleProps {
+  /**
+   * Token-path filter. Use `"number.opacity.*"` or `"opacity.*"` depending
+   * on your layout. Omit to match every `$type: 'number'` token whose
+   * value is in `[0, 1]` — the value-range check (applied alongside
+   * the glob) keeps line-heights / z-indexes out.
+   */
+  filter?: string;
+  /**
+   * DTCG `$type` filter. `opacity` tokens where DTCG ships them as a
+   * dedicated type; otherwise `number` (the common placement pre-spec).
+   * Accepts either.
+   */
+  type?: 'number' | 'opacity';
+  /**
+   * Sample token rendered at each opacity. Defaults to `color.accent.bg`
+   * — swap to whatever colour your system uses to demonstrate scrim /
+   * overlay behaviour.
+   */
+  sampleColor?: string;
+  /** Override the caption. */
+  caption?: string;
+  /**
+   * Sort order.
+   * - `'value'` (default) — numeric, low opacity first.
+   * - `'path'` — lexicographic on the dot-path.
+   * - `'none'` — preserve project iteration order.
+   */
+  sortBy?: SortBy;
+  /** `'asc'` (default) or `'desc'`. */
+  sortDir?: SortDir;
+}
+/**
+ * Render each opacity token as a colored sample at that opacity over a
+ * checkerboard backdrop, so the transparency is visually readable. The
+ * number by itself (`0.4`) doesn't convey what the token looks like
+ * applied to a surface; the sample does.
+ *
+ * Only tokens whose `$value` is a finite number between 0 and 1
+ * inclusive are rendered — non-opacity `number` siblings (`line-height`,
+ * `z-index`) fall out naturally.
+ */
+declare function OpacityScale({
+  filter,
+  type,
+  sampleColor,
+  caption,
+  sortBy,
+  sortDir
+}: OpacityScaleProps): ReactElement;
+//#endregion
 //#region src/provider.d.ts
 interface SwatchbookProviderProps {
   value: ProjectSnapshot;
@@ -803,5 +855,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, 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, type VirtualTokenListingShape, 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, OpacityScale, type OpacityScaleProps, 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, type VirtualTokenListingShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2068,13 +2068,31 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 //#endregion
 //#region src/internal/prefers-reduced-motion.ts
 /**
+* True when rendering inside Chromatic's snapshot runner. Chromatic's
+* browser ships a recognisable user-agent string; checked here so
+* motion-looping components can fall back to their static state for
+* deterministic snapshots without needing a global Chromatic parameter
+* (globally forcing `prefersReducedMotion: true` broke Chromatic's
+* verification parser in our setup — see commit 893331f).
+*/
+function isChromatic() {
+	if (typeof navigator === "undefined") return false;
+	return navigator.userAgent.includes("Chromatic");
+}
+/**
 * Reactive `prefers-reduced-motion: reduce` detector. Returns the current
-* match and updates if the user toggles the OS-level preference.
+* match and updates if the user toggles the OS-level preference. Also
+* returns `true` under Chromatic to keep animated samples deterministic
+* during visual regression capture.
 */
 function usePrefersReducedMotion() {
 	const [reduced, setReduced] = useState(false);
 	useEffect(() => {
 		if (typeof window === "undefined") return;
+		if (isChromatic()) {
+			setReduced(true);
+			return;
+		}
 		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
 		setReduced(query.matches);
 		const onChange = (e) => setReduced(e.matches);
@@ -2337,6 +2355,97 @@ function MotionPreview({ filter, caption }) {
 	});
 }
 //#endregion
+//#region src/OpacityScale.tsx
+function toOpacity(raw) {
+	if (typeof raw === "number") return raw;
+	return NaN;
+}
+/**
+* Render each opacity token as a colored sample at that opacity over a
+* checkerboard backdrop, so the transparency is visually readable. The
+* number by itself (`0.4`) doesn't convey what the token looks like
+* applied to a surface; the sample does.
+*
+* Only tokens whose `$value` is a finite number between 0 and 1
+* inclusive are rendered — non-opacity `number` siblings (`line-height`,
+* `z-index`) fall out naturally.
+*/
+function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	const rows = useMemo(() => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== type) return false;
+			const v = toOpacity(token.$value);
+			if (!Number.isFinite(v) || v < 0 || v > 1) return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => {
+			const opacity = toOpacity(token.$value);
+			return {
+				path,
+				cssVar: resolveCssVar(path, project),
+				opacity,
+				displayValue: String(opacity)
+			};
+		});
+	}, [
+		resolved,
+		filter,
+		type,
+		project,
+		sortBy,
+		sortDir
+	]);
+	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No opacity tokens match this filter."
+		})
+	});
+	const sampleColorVar = resolveCssVar(sampleColor, project);
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-opacity-scale__grid",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "sb-opacity-scale__card",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "sb-opacity-scale__swatch",
+					style: {
+						"--sb-opacity-scale-color": sampleColorVar,
+						"--sb-opacity-scale-alpha": String(row.opacity)
+					},
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "sb-opacity-scale__meta",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "sb-opacity-scale__path",
+							children: row.path
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sb-opacity-scale__value",
+							children: row.displayValue
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sb-opacity-scale__css-var",
+							children: row.cssVar
+						})
+					]
+				})]
+			}, row.path))
+		})]
+	});
+}
+//#endregion
 //#region src/provider.tsx
 /**
 * Wraps a tree of blocks with the token data they need to render.
@@ -4177,6 +4286,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map