@unpunnyfuns/swatchbook-switcher 0.10.2

package/dist/index.d.mts

@@ -0,0 +1,76 @@
+import { KeyboardEvent, ReactElement } from "react";
+
+//#region src/types.d.ts
+/**
+ * Structural types the switcher consumes. Mirror the shapes produced by
+ * `@unpunnyfuns/swatchbook-core` and by the addon's preview INIT payload —
+ * re-declared here so the switcher stays framework-agnostic and doesn't pull
+ * core / addon as runtime deps.
+ */
+interface SwitcherAxis {
+  name: string;
+  contexts: readonly string[];
+  default: string;
+  description?: string;
+  source?: 'resolver' | 'layered' | 'synthetic';
+}
+interface SwitcherPreset {
+  name: string;
+  axes: Partial<Record<string, string>>;
+  description?: string;
+}
+interface SwitcherTheme {
+  name: string;
+  input: Record<string, string>;
+}
+//#endregion
+//#region src/ThemeSwitcher.d.ts
+interface ThemeSwitcherProps {
+  /** Project axes the UI renders one section per. */
+  axes: readonly SwitcherAxis[];
+  /** Saved preset snapshots rendered above the axes, if any. */
+  presets?: readonly SwitcherPreset[];
+  /** Full theme list — only consulted for the "modified since preset applied" dot. */
+  themes?: readonly SwitcherTheme[];
+  /** Active axis tuple, keyed by axis name. */
+  activeTuple: Readonly<Record<string, string>>;
+  /** Default tuple used to fill in omitted preset axes. */
+  defaults: Readonly<Record<string, string>>;
+  /** Name of the most recently applied preset, or null. Drives the "modified" dot. */
+  lastApplied: string | null;
+  /** Receives an axis name + new context. */
+  onAxisChange(axisName: string, next: string): void;
+  /** Called with the full preset object when the user clicks a preset pill. */
+  onPresetApply(preset: SwitcherPreset): void;
+  /** Optional key handler, usually used by consumers to close a popover on Escape. */
+  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;
+  /** Host-specific content rendered after the axes (e.g. the Storybook addon's color-format picker). */
+  footer?: ReactElement | null;
+}
+/**
+ * Popover body for the swatchbook theme switcher. Renders preset pills
+ * (when the project ships any) and one row per axis. Color-format
+ * selection is specific to the Storybook addon (it toggles how blocks
+ * stringify colors); hosts that need it slot
+ * `<ColorFormatSelector>` into the `footer` prop rather than it being
+ * baked into every consumer.
+ *
+ * Consumers own the trigger + positioning — the switcher just draws
+ * the menu. Uses classic JSX so it survives embedding in Storybook's
+ * manager bundle (which doesn't expose `react/jsx-runtime`).
+ */
+declare function ThemeSwitcher({
+  axes,
+  presets,
+  themes,
+  activeTuple,
+  defaults,
+  lastApplied,
+  onAxisChange,
+  onPresetApply,
+  onKeyDown,
+  footer
+}: ThemeSwitcherProps): ReactElement;
+//#endregion
+export { type SwitcherAxis, type SwitcherPreset, type SwitcherTheme, ThemeSwitcher, type ThemeSwitcherProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,109 @@
+import './style.css';
+import cx from "clsx";
+import React from "react";
+//#region src/ThemeSwitcher.tsx
+/**
+* Popover body for the swatchbook theme switcher. Renders preset pills
+* (when the project ships any) and one row per axis. Color-format
+* selection is specific to the Storybook addon (it toggles how blocks
+* stringify colors); hosts that need it slot
+* `<ColorFormatSelector>` into the `footer` prop rather than it being
+* baked into every consumer.
+*
+* Consumers own the trigger + positioning — the switcher just draws
+* the menu. Uses classic JSX so it survives embedding in Storybook's
+* manager bundle (which doesn't expose `react/jsx-runtime`).
+*/
+function ThemeSwitcher({ axes, presets = [], themes = [], activeTuple, defaults, lastApplied, onAxisChange, onPresetApply, onKeyDown, footer }) {
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "menu",
+		tabIndex: -1,
+		className: "sb-switcher",
+		onKeyDown,
+		"data-testid": "swatchbook-switcher"
+	}, presets.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PresetsSection, {
+		presets,
+		axes,
+		themes,
+		defaults,
+		activeTuple,
+		lastApplied,
+		onApply: onPresetApply
+	}), /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__divider" })), axes.map((axis) => /* @__PURE__ */ React.createElement(AxisSection, {
+		key: `axis-${axis.name}`,
+		axis,
+		active: activeTuple[axis.name] ?? axis.default,
+		onSelect: (next) => onAxisChange(axis.name, next)
+	})), footer && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__divider" }), footer));
+}
+function OptionPill({ label, active, title, onClick, trailing }) {
+	return /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		title,
+		onClick,
+		onMouseDown: (event) => event.preventDefault(),
+		className: cx("sb-switcher__pill", active && "sb-switcher__pill--active")
+	}, label, trailing ?? null);
+}
+function PresetsSection({ presets, axes, defaults, activeTuple, lastApplied, onApply }) {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__section-label" }, "Presets"), /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__section-body" }, presets.map((preset) => {
+		const matches = tuplesEqual(presetTuple(preset, axes, defaults), activeTuple, axes);
+		const modified = !matches && preset.name === lastApplied;
+		const title = preset.description ? `${preset.name} — ${preset.description}` : preset.name;
+		return /* @__PURE__ */ React.createElement(OptionPill, {
+			key: `preset/${preset.name}`,
+			label: preset.name,
+			active: matches,
+			title,
+			onClick: () => onApply(preset),
+			trailing: modified ? /* @__PURE__ */ React.createElement("span", {
+				"aria-hidden": true,
+				className: "sb-switcher__pill-modified"
+			}) : null
+		});
+	})));
+}
+function AxisSection({ axis, active, onSelect }) {
+	return /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__axis-row" }, /* @__PURE__ */ React.createElement("div", {
+		className: "sb-switcher__axis-label",
+		title: axis.description
+	}, displayLabelFor(axis)), /* @__PURE__ */ React.createElement("div", { className: "sb-switcher__axis-pills" }, axis.contexts.map((ctx) => /* @__PURE__ */ React.createElement(OptionPill, {
+		key: `${axis.name}/${ctx}`,
+		label: ctx,
+		active: ctx === active,
+		onClick: () => onSelect(ctx)
+	}))));
+}
+/**
+* Treat the `{ name: 'theme', source: 'synthetic' }` axis — the one core
+* fabricates for single-theme projects with no resolver — as a special case
+* that reads as "Theme". Authored single-axis resolvers keep their real
+* name (e.g. `mode`, `brand`).
+*/
+function displayLabelFor(axis) {
+	if (axis.source === "synthetic" && axis.name === "theme") return "Theme";
+	return axis.name;
+}
+/**
+* Compose a preset's sanitized partial tuple with the axis defaults, so
+* applying a preset that only names some axes leaves the omitted ones at
+* their defaults (not blank). Mirrors the addon preview decorator's own
+* fallback logic so what the switcher sends out matches what the host
+* honors.
+*/
+function presetTuple(preset, axes, defaults) {
+	const out = { ...defaults };
+	for (const axis of axes) {
+		const candidate = preset.axes[axis.name];
+		if (candidate !== void 0 && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+	}
+	return out;
+}
+function tuplesEqual(a, b, axes) {
+	for (const axis of axes) if (a[axis.name] !== b[axis.name]) return false;
+	return true;
+}
+//#endregion
+export { ThemeSwitcher };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/ThemeSwitcher.tsx"],"sourcesContent":["import cx from 'clsx';\nimport React, { type KeyboardEvent, type ReactElement } from 'react';\nimport './ThemeSwitcher.css';\nimport type { SwitcherAxis, SwitcherPreset, SwitcherTheme } from '#/types.ts';\n\nexport interface ThemeSwitcherProps {\n  /** Project axes the UI renders one section per. */\n  axes: readonly SwitcherAxis[];\n  /** Saved preset snapshots rendered above the axes, if any. */\n  presets?: readonly SwitcherPreset[];\n  /** Full theme list — only consulted for the \"modified since preset applied\" dot. */\n  themes?: readonly SwitcherTheme[];\n  /** Active axis tuple, keyed by axis name. */\n  activeTuple: Readonly<Record<string, string>>;\n  /** Default tuple used to fill in omitted preset axes. */\n  defaults: Readonly<Record<string, string>>;\n  /** Name of the most recently applied preset, or null. Drives the \"modified\" dot. */\n  lastApplied: string | null;\n  /** Receives an axis name + new context. */\n  onAxisChange(axisName: string, next: string): void;\n  /** Called with the full preset object when the user clicks a preset pill. */\n  onPresetApply(preset: SwitcherPreset): void;\n  /** Optional key handler, usually used by consumers to close a popover on Escape. */\n  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;\n  /** Host-specific content rendered after the axes (e.g. the Storybook addon's color-format picker). */\n  footer?: ReactElement | null;\n}\n\n/**\n * Popover body for the swatchbook theme switcher. Renders preset pills\n * (when the project ships any) and one row per axis. Color-format\n * selection is specific to the Storybook addon (it toggles how blocks\n * stringify colors); hosts that need it slot\n * `<ColorFormatSelector>` into the `footer` prop rather than it being\n * baked into every consumer.\n *\n * Consumers own the trigger + positioning — the switcher just draws\n * the menu. Uses classic JSX so it survives embedding in Storybook's\n * manager bundle (which doesn't expose `react/jsx-runtime`).\n */\nexport function ThemeSwitcher({\n  axes,\n  presets = [],\n  themes = [],\n  activeTuple,\n  defaults,\n  lastApplied,\n  onAxisChange,\n  onPresetApply,\n  onKeyDown,\n  footer,\n}: ThemeSwitcherProps): ReactElement {\n  return (\n    <div\n      role=\"menu\"\n      tabIndex={-1}\n      className=\"sb-switcher\"\n      onKeyDown={onKeyDown}\n      data-testid=\"swatchbook-switcher\"\n    >\n      {presets.length > 0 && (\n        <>\n          <PresetsSection\n            presets={presets}\n            axes={axes}\n            themes={themes}\n            defaults={defaults}\n            activeTuple={activeTuple}\n            lastApplied={lastApplied}\n            onApply={onPresetApply}\n          />\n          <div className=\"sb-switcher__divider\" />\n        </>\n      )}\n\n      {axes.map((axis) => (\n        <AxisSection\n          key={`axis-${axis.name}`}\n          axis={axis}\n          active={activeTuple[axis.name] ?? axis.default}\n          onSelect={(next) => onAxisChange(axis.name, next)}\n        />\n      ))}\n\n      {footer && (\n        <>\n          <div className=\"sb-switcher__divider\" />\n          {footer}\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface OptionPillProps {\n  label: string;\n  active: boolean;\n  title?: string;\n  onClick(): void;\n  trailing?: ReactElement | null;\n}\n\nfunction OptionPill({ label, active, title, onClick, trailing }: OptionPillProps): ReactElement {\n  return (\n    <button\n      type=\"button\"\n      title={title}\n      onClick={onClick}\n      // Skip focus on mouse click so host themes that paint a :focus\n      // border-color don't stick it on the previously-clicked pill.\n      // Keyboard tabbing still lands focus normally; only preventDefault\n      // on mousedown blocks the implicit focus-on-click behavior.\n      onMouseDown={(event) => event.preventDefault()}\n      className={cx('sb-switcher__pill', active && 'sb-switcher__pill--active')}\n    >\n      {label}\n      {trailing ?? null}\n    </button>\n  );\n}\n\ninterface PresetsSectionProps {\n  presets: readonly SwitcherPreset[];\n  axes: readonly SwitcherAxis[];\n  themes: readonly SwitcherTheme[];\n  defaults: Readonly<Record<string, string>>;\n  activeTuple: Readonly<Record<string, string>>;\n  lastApplied: string | null;\n  onApply(preset: SwitcherPreset): void;\n}\n\nfunction PresetsSection({\n  presets,\n  axes,\n  defaults,\n  activeTuple,\n  lastApplied,\n  onApply,\n}: PresetsSectionProps): ReactElement {\n  return (\n    <div>\n      <div className=\"sb-switcher__section-label\">Presets</div>\n      <div className=\"sb-switcher__section-body\">\n        {presets.map((preset) => {\n          const tuple = presetTuple(preset, axes, defaults);\n          const matches = tuplesEqual(tuple, activeTuple, axes);\n          const modified = !matches && preset.name === lastApplied;\n          const title = preset.description ? `${preset.name} — ${preset.description}` : preset.name;\n          return (\n            <OptionPill\n              key={`preset/${preset.name}`}\n              label={preset.name}\n              active={matches}\n              title={title}\n              onClick={() => onApply(preset)}\n              trailing={\n                modified ? <span aria-hidden className=\"sb-switcher__pill-modified\" /> : null\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface AxisSectionProps {\n  axis: SwitcherAxis;\n  active: string;\n  onSelect(next: string): void;\n}\n\nfunction AxisSection({ axis, active, onSelect }: AxisSectionProps): ReactElement {\n  return (\n    <div className=\"sb-switcher__axis-row\">\n      <div className=\"sb-switcher__axis-label\" title={axis.description}>\n        {displayLabelFor(axis)}\n      </div>\n      <div className=\"sb-switcher__axis-pills\">\n        {axis.contexts.map((ctx) => (\n          <OptionPill\n            key={`${axis.name}/${ctx}`}\n            label={ctx}\n            active={ctx === active}\n            onClick={() => onSelect(ctx)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Treat the `{ name: 'theme', source: 'synthetic' }` axis — the one core\n * fabricates for single-theme projects with no resolver — as a special case\n * that reads as \"Theme\". Authored single-axis resolvers keep their real\n * name (e.g. `mode`, `brand`).\n */\nfunction displayLabelFor(axis: SwitcherAxis): string {\n  if (axis.source === 'synthetic' && axis.name === 'theme') return 'Theme';\n  return axis.name;\n}\n\n/**\n * Compose a preset's sanitized partial tuple with the axis defaults, so\n * applying a preset that only names some axes leaves the omitted ones at\n * their defaults (not blank). Mirrors the addon preview decorator's own\n * fallback logic so what the switcher sends out matches what the host\n * honors.\n */\nfunction presetTuple(\n  preset: SwitcherPreset,\n  axes: readonly SwitcherAxis[],\n  defaults: Readonly<Record<string, string>>,\n): Record<string, string> {\n  const out: Record<string, string> = { ...defaults };\n  for (const axis of axes) {\n    const candidate = preset.axes[axis.name];\n    if (candidate !== undefined && axis.contexts.includes(candidate)) {\n      out[axis.name] = candidate;\n    }\n  }\n  return out;\n}\n\nfunction tuplesEqual(\n  a: Readonly<Record<string, string>>,\n  b: Readonly<Record<string, string>>,\n  axes: readonly SwitcherAxis[],\n): boolean {\n  for (const axis of axes) {\n    if (a[axis.name] !== b[axis.name]) return false;\n  }\n  return true;\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,77 @@
+.sb-switcher {
+  outline: none;
+  min-width: 260px;
+  padding: 4px 0;
+}
+
+.sb-switcher__section-label {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  opacity: .6;
+  padding: 8px 12px 4px;
+  font-size: 11px;
+}
+
+.sb-switcher__section-body {
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 12px 10px;
+  display: flex;
+}
+
+.sb-switcher__axis-row {
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 0 12px 10px;
+  display: grid;
+}
+
+.sb-switcher__axis-label {
+  opacity: .85;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.sb-switcher__axis-pills {
+  flex-wrap: wrap;
+  gap: 4px;
+  display: flex;
+}
+
+.sb-switcher__pill {
+  cursor: pointer;
+  color: inherit;
+  box-shadow: none;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  outline: none;
+  padding: 3px 8px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.sb-switcher__pill--active {
+  background: #007aff1f;
+  border-color: #007aff73;
+  font-weight: 600;
+}
+
+.sb-switcher__pill-modified {
+  opacity: .6;
+  vertical-align: middle;
+  background: currentColor;
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  margin-left: 6px;
+  display: inline-block;
+}
+
+.sb-switcher__divider {
+  opacity: .1;
+  background: currentColor;
+  height: 1px;
+  margin: 2px 8px;
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@unpunnyfuns/swatchbook-switcher",
+  "version": "0.10.2",
+  "description": "Framework-agnostic theme-switcher UI for swatchbook — axis pills, preset pills, color-format selector. Consumed by the Storybook addon toolbar and any React host that knows how to set data-attributes on the document.",
+  "license": "MIT",
+  "author": "unpunnyfuns <unpunnyfuns@gmail.com>",
+  "homepage": "https://unpunnyfuns.github.io/swatchbook/",
+  "bugs": "https://github.com/unpunnyfuns/swatchbook/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unpunnyfuns/swatchbook.git",
+    "directory": "packages/switcher"
+  },
+  "keywords": [
+    "swatchbook",
+    "design-tokens",
+    "dtcg",
+    "theme-switcher",
+    "react"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=24.14.0"
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "oxlint --deny-warnings -c ../../.oxlintrc.json src test",
+    "format": "oxfmt -c ../../.oxfmtrc.json src test",
+    "format:check": "oxfmt --check -c ../../.oxfmtrc.json src test"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@tsdown/css": "^0.21.9",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsdown": "^0.21.9",
+    "typescript": "^6.0.0",
+    "vitest": "^4.1.4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  }
+}