@weasel-js/ui 1.7.0 → 1.7.1

package/dist/chunks/SwatchStrip-Cw0l8Om7.js

@@ -0,0 +1,577 @@
+import { n as e, o as t, r as n, t as r } from "./RecentColorsProvider-DHcfk25u.js";
+import { t as i } from "./Select-BppLsJTz.js";
+import { t as a } from "./SwatchGrid-9ZPiDmxd.js";
+import { getAlpha01 as o } from "@weasel-js/core";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useId as u, useState as d } from "react";
+//#region src/components/SwatchStrip/palettes.ts
+var f = {
+	id: "standard",
+	name: "Standard",
+	columns: 10,
+	colors: [
+		{
+			value: null,
+			label: "None"
+		},
+		{
+			value: "#ffffffff",
+			label: "White"
+		},
+		{
+			value: "#000000ff",
+			label: "Black"
+		},
+		{
+			value: "#ff0000ff",
+			label: "Red"
+		},
+		{
+			value: "#00ff00ff",
+			label: "Green"
+		},
+		{
+			value: "#0000ffff",
+			label: "Blue"
+		},
+		{
+			value: "#00ffffff",
+			label: "Cyan"
+		},
+		{
+			value: "#ff00ffff",
+			label: "Magenta"
+		},
+		{
+			value: "#ffff00ff",
+			label: "Yellow"
+		},
+		{
+			value: "#ff8800ff",
+			label: "Orange"
+		},
+		{
+			value: "#fafafaff",
+			label: "Gray 50"
+		},
+		{
+			value: "#f5f5f5ff",
+			label: "Gray 100"
+		},
+		{
+			value: "#e5e5e5ff",
+			label: "Gray 200"
+		},
+		{
+			value: "#d4d4d4ff",
+			label: "Gray 300"
+		},
+		{
+			value: "#a3a3a3ff",
+			label: "Gray 400"
+		},
+		{
+			value: "#737373ff",
+			label: "Gray 500"
+		},
+		{
+			value: "#525252ff",
+			label: "Gray 600"
+		},
+		{
+			value: "#404040ff",
+			label: "Gray 700"
+		},
+		{
+			value: "#262626ff",
+			label: "Gray 800"
+		},
+		{
+			value: "#171717ff",
+			label: "Gray 900"
+		},
+		{
+			value: "#fef2f2ff",
+			label: "Red 50"
+		},
+		{
+			value: "#fee2e2ff",
+			label: "Red 100"
+		},
+		{
+			value: "#fecacaff",
+			label: "Red 200"
+		},
+		{
+			value: "#fca5a5ff",
+			label: "Red 300"
+		},
+		{
+			value: "#f87171ff",
+			label: "Red 400"
+		},
+		{
+			value: "#ef4444ff",
+			label: "Red 500"
+		},
+		{
+			value: "#dc2626ff",
+			label: "Red 600"
+		},
+		{
+			value: "#b91c1cff",
+			label: "Red 700"
+		},
+		{
+			value: "#991b1bff",
+			label: "Red 800"
+		},
+		{
+			value: "#7f1d1dff",
+			label: "Red 900"
+		},
+		{
+			value: "#fff7edff",
+			label: "Orange 50"
+		},
+		{
+			value: "#ffedd5ff",
+			label: "Orange 100"
+		},
+		{
+			value: "#fed7aaff",
+			label: "Orange 200"
+		},
+		{
+			value: "#fdba74ff",
+			label: "Orange 300"
+		},
+		{
+			value: "#fb923cff",
+			label: "Orange 400"
+		},
+		{
+			value: "#f97316ff",
+			label: "Orange 500"
+		},
+		{
+			value: "#ea580cff",
+			label: "Orange 600"
+		},
+		{
+			value: "#c2410cff",
+			label: "Orange 700"
+		},
+		{
+			value: "#9a3412ff",
+			label: "Orange 800"
+		},
+		{
+			value: "#7c2d12ff",
+			label: "Orange 900"
+		},
+		{
+			value: "#fefce8ff",
+			label: "Yellow 50"
+		},
+		{
+			value: "#fef9c3ff",
+			label: "Yellow 100"
+		},
+		{
+			value: "#fef08aff",
+			label: "Yellow 200"
+		},
+		{
+			value: "#fde047ff",
+			label: "Yellow 300"
+		},
+		{
+			value: "#facc15ff",
+			label: "Yellow 400"
+		},
+		{
+			value: "#eab308ff",
+			label: "Yellow 500"
+		},
+		{
+			value: "#ca8a04ff",
+			label: "Yellow 600"
+		},
+		{
+			value: "#a16207ff",
+			label: "Yellow 700"
+		},
+		{
+			value: "#854d0eff",
+			label: "Yellow 800"
+		},
+		{
+			value: "#713f12ff",
+			label: "Yellow 900"
+		},
+		{
+			value: "#f0fdf4ff",
+			label: "Green 50"
+		},
+		{
+			value: "#dcfce7ff",
+			label: "Green 100"
+		},
+		{
+			value: "#bbf7d0ff",
+			label: "Green 200"
+		},
+		{
+			value: "#86efacff",
+			label: "Green 300"
+		},
+		{
+			value: "#4ade80ff",
+			label: "Green 400"
+		},
+		{
+			value: "#22c55eff",
+			label: "Green 500"
+		},
+		{
+			value: "#16a34aff",
+			label: "Green 600"
+		},
+		{
+			value: "#15803dff",
+			label: "Green 700"
+		},
+		{
+			value: "#166534ff",
+			label: "Green 800"
+		},
+		{
+			value: "#14532dff",
+			label: "Green 900"
+		},
+		{
+			value: "#ecfeffff",
+			label: "Cyan 50"
+		},
+		{
+			value: "#cffafeff",
+			label: "Cyan 100"
+		},
+		{
+			value: "#a5f3fcff",
+			label: "Cyan 200"
+		},
+		{
+			value: "#67e8f9ff",
+			label: "Cyan 300"
+		},
+		{
+			value: "#22d3eeff",
+			label: "Cyan 400"
+		},
+		{
+			value: "#06b6d4ff",
+			label: "Cyan 500"
+		},
+		{
+			value: "#0891b2ff",
+			label: "Cyan 600"
+		},
+		{
+			value: "#0e7490ff",
+			label: "Cyan 700"
+		},
+		{
+			value: "#155e75ff",
+			label: "Cyan 800"
+		},
+		{
+			value: "#164e63ff",
+			label: "Cyan 900"
+		},
+		{
+			value: "#eff6ffff",
+			label: "Blue 50"
+		},
+		{
+			value: "#dbeafeff",
+			label: "Blue 100"
+		},
+		{
+			value: "#bfdbfeff",
+			label: "Blue 200"
+		},
+		{
+			value: "#93c5fdff",
+			label: "Blue 300"
+		},
+		{
+			value: "#60a5faff",
+			label: "Blue 400"
+		},
+		{
+			value: "#3b82f6ff",
+			label: "Blue 500"
+		},
+		{
+			value: "#2563ebff",
+			label: "Blue 600"
+		},
+		{
+			value: "#1d4ed8ff",
+			label: "Blue 700"
+		},
+		{
+			value: "#1e40afff",
+			label: "Blue 800"
+		},
+		{
+			value: "#1e3a8aff",
+			label: "Blue 900"
+		},
+		{
+			value: "#faf5ffff",
+			label: "Purple 50"
+		},
+		{
+			value: "#f3e8ffff",
+			label: "Purple 100"
+		},
+		{
+			value: "#e9d5ffff",
+			label: "Purple 200"
+		},
+		{
+			value: "#d8b4feff",
+			label: "Purple 300"
+		},
+		{
+			value: "#c084fcff",
+			label: "Purple 400"
+		},
+		{
+			value: "#a855f7ff",
+			label: "Purple 500"
+		},
+		{
+			value: "#9333eaff",
+			label: "Purple 600"
+		},
+		{
+			value: "#7e22ceff",
+			label: "Purple 700"
+		},
+		{
+			value: "#6b21a8ff",
+			label: "Purple 800"
+		},
+		{
+			value: "#581c87ff",
+			label: "Purple 900"
+		},
+		{
+			value: "#fdf2f8ff",
+			label: "Pink 50"
+		},
+		{
+			value: "#fce7f3ff",
+			label: "Pink 100"
+		},
+		{
+			value: "#fbcfe8ff",
+			label: "Pink 200"
+		},
+		{
+			value: "#f9a8d4ff",
+			label: "Pink 300"
+		},
+		{
+			value: "#f472b6ff",
+			label: "Pink 400"
+		},
+		{
+			value: "#ec4899ff",
+			label: "Pink 500"
+		},
+		{
+			value: "#db2777ff",
+			label: "Pink 600"
+		},
+		{
+			value: "#be185dff",
+			label: "Pink 700"
+		},
+		{
+			value: "#9d174dff",
+			label: "Pink 800"
+		},
+		{
+			value: "#831843ff",
+			label: "Pink 900"
+		}
+	]
+}, p = {
+	id: "basic",
+	name: "Basic",
+	columns: 10,
+	colors: [
+		{
+			value: null,
+			label: "None"
+		},
+		{
+			value: "#000000ff",
+			label: "Black"
+		},
+		{
+			value: "#ffffffff",
+			label: "White"
+		},
+		{
+			value: "#808080ff",
+			label: "Gray"
+		},
+		{
+			value: "#c0c0c0ff",
+			label: "Silver"
+		},
+		{
+			value: "#800000ff",
+			label: "Maroon"
+		},
+		{
+			value: "#ff0000ff",
+			label: "Red"
+		},
+		{
+			value: "#ffa500ff",
+			label: "Orange"
+		},
+		{
+			value: "#ffff00ff",
+			label: "Yellow"
+		},
+		{
+			value: "#808000ff",
+			label: "Olive"
+		},
+		{
+			value: "#00ff00ff",
+			label: "Lime"
+		},
+		{
+			value: "#008000ff",
+			label: "Green"
+		},
+		{
+			value: "#008080ff",
+			label: "Teal"
+		},
+		{
+			value: "#00ffffff",
+			label: "Cyan"
+		},
+		{
+			value: "#000080ff",
+			label: "Navy"
+		},
+		{
+			value: "#0000ffff",
+			label: "Blue"
+		},
+		{
+			value: "#800080ff",
+			label: "Purple"
+		},
+		{
+			value: "#ff00ffff",
+			label: "Magenta"
+		},
+		{
+			value: "#ffc0cbff",
+			label: "Pink"
+		},
+		{
+			value: "#a52a2aff",
+			label: "Brown"
+		}
+	]
+}, m = [f, p], h = {
+	root: "_root_hm3rh_1",
+	section: "_section_hm3rh_8",
+	heading: "_heading_hm3rh_15",
+	empty: "_empty_hm3rh_24"
+};
+//#endregion
+//#region src/components/SwatchStrip/SwatchStrip.tsx
+function g(e) {
+	let n = t(e) ?? e;
+	if (!n.startsWith("#") || n.length !== 9) return n;
+	let r = Math.round(o(n) * 100);
+	return r === 100 ? n.slice(0, 7) : `${n.slice(0, 7)}, ${r}% opacity`;
+}
+function _(e, n) {
+	return e === null || n === null ? e === n : t(e) === t(n);
+}
+function v(t) {
+	let { value: o, onChange: f, onAltChange: p, className: v } = t, y = t.palettes ?? m, b = t.columns ?? 10, x = n(), S = t.store ?? x, C = e(S), w = u(), [T, E] = d(t.defaultPalette), D = t.palette ?? T, O = y.find((e) => e.id === D) ?? y[0], k = (e) => {
+		E(e), t.onPaletteChange?.(e);
+	}, A = C.map((e) => ({
+		value: e,
+		label: g(e)
+	})), j = (e) => o === void 0 ? void 0 : e.find((e) => _(e.value, o))?.value, M = /* @__PURE__ */ l(s, { children: [S && /* @__PURE__ */ l("section", {
+		className: h.section,
+		"aria-labelledby": w,
+		children: [/* @__PURE__ */ c("div", {
+			id: w,
+			className: h.heading,
+			children: "Recent"
+		}), A.length > 0 ? /* @__PURE__ */ c(a, {
+			"aria-label": "Recent colors",
+			options: A,
+			value: j(A),
+			columns: b,
+			onChange: f,
+			onAltChange: p
+		}) : /* @__PURE__ */ c("p", {
+			className: h.empty,
+			children: "No recent colors"
+		})]
+	}), O && /* @__PURE__ */ l("section", {
+		className: h.section,
+		children: [y.length > 1 ? /* @__PURE__ */ c(i, {
+			label: "Palette",
+			orientation: "row",
+			options: y.map((e) => ({
+				value: e.id,
+				label: e.name
+			})),
+			selectedKey: O.id,
+			onSelectionChange: k
+		}) : /* @__PURE__ */ c("div", {
+			className: h.heading,
+			children: O.name
+		}), /* @__PURE__ */ c(a, {
+			"aria-label": O.name,
+			options: O.colors,
+			value: j(O.colors),
+			columns: O.columns ?? b,
+			onChange: f,
+			onAltChange: p
+		}, O.id)]
+	})] });
+	return /* @__PURE__ */ c("div", {
+		className: [h.root, v].filter(Boolean).join(" "),
+		role: "group",
+		"aria-label": t["aria-label"] ?? "Swatches",
+		children: t.store && t.store !== x ? /* @__PURE__ */ c(r, {
+			store: t.store,
+			children: M
+		}) : M
+	});
+}
+//#endregion
+export { f as a, m as i, g as n, p as r, v as t };
+
+//# sourceMappingURL=SwatchStrip-Cw0l8Om7.js.map

package/dist/chunks/SwatchStrip-Cw0l8Om7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchStrip-Cw0l8Om7.js","names":["_Fragment","s","useRecentColors","normalizeRecentColor","useRecentColorsStore","RecentColorsProvider","Select","SwatchGrid","STANDARD_PALETTE","BASIC_PALETTE","BUILTIN_PALETTES","SwatchStrip_module_default","describeColor","c","color","alpha","getAlpha01","same","a","b","SwatchStrip","props","palettes","columns","ctxStore","store","recent","recentHeading","useId","ownPalette","setOwnPalette","useState","paletteId","shown","p","choosePalette","id","recentOptions","currentIn","value","options","o","grids","Fragment","className"],"sources":["../../src/components/SwatchStrip/palettes.ts","../../src/components/SwatchStrip/SwatchStrip.module.css","../../src/components/SwatchStrip/SwatchStrip.tsx"],"sourcesContent":["import type { SwatchGridOption } from '../SwatchGrid';\n\n/** A named set of swatches offered by {@link SwatchStrip}. */\nexport interface SwatchPalette {\n  /** Stable key, for the palette choice and for React. */\n  id: string;\n  /** What the palette picker shows. */\n  name: string;\n  /** `value: null` is the \"no paint\" swatch. Each `label` is the swatch's\n   *  accessible name, so it should say the color. */\n  colors: readonly SwatchGridOption[];\n  /** Swatches per row. Default: the strip's `columns`. */\n  columns?: number;\n}\n\n/** No paint, the named primaries and secondaries, a gray ramp, and eight hue\n *  ramps of ten shades each (50 → 900). */\nexport const STANDARD_PALETTE: SwatchPalette = {\n  id: 'standard',\n  name: 'Standard',\n  columns: 10,\n  colors: [\n    { value: null,        label: 'None' },\n    { value: '#ffffffff', label: 'White' },\n    { value: '#000000ff', label: 'Black' },\n    { value: '#ff0000ff', label: 'Red' },\n    { value: '#00ff00ff', label: 'Green' },\n    { value: '#0000ffff', label: 'Blue' },\n    { value: '#00ffffff', label: 'Cyan' },\n    { value: '#ff00ffff', label: 'Magenta' },\n    { value: '#ffff00ff', label: 'Yellow' },\n    { value: '#ff8800ff', label: 'Orange' },\n    { value: '#fafafaff', label: 'Gray 50' },\n    { value: '#f5f5f5ff', label: 'Gray 100' },\n    { value: '#e5e5e5ff', label: 'Gray 200' },\n    { value: '#d4d4d4ff', label: 'Gray 300' },\n    { value: '#a3a3a3ff', label: 'Gray 400' },\n    { value: '#737373ff', label: 'Gray 500' },\n    { value: '#525252ff', label: 'Gray 600' },\n    { value: '#404040ff', label: 'Gray 700' },\n    { value: '#262626ff', label: 'Gray 800' },\n    { value: '#171717ff', label: 'Gray 900' },\n    { value: '#fef2f2ff', label: 'Red 50' },\n    { value: '#fee2e2ff', label: 'Red 100' },\n    { value: '#fecacaff', label: 'Red 200' },\n    { value: '#fca5a5ff', label: 'Red 300' },\n    { value: '#f87171ff', label: 'Red 400' },\n    { value: '#ef4444ff', label: 'Red 500' },\n    { value: '#dc2626ff', label: 'Red 600' },\n    { value: '#b91c1cff', label: 'Red 700' },\n    { value: '#991b1bff', label: 'Red 800' },\n    { value: '#7f1d1dff', label: 'Red 900' },\n    { value: '#fff7edff', label: 'Orange 50' },\n    { value: '#ffedd5ff', label: 'Orange 100' },\n    { value: '#fed7aaff', label: 'Orange 200' },\n    { value: '#fdba74ff', label: 'Orange 300' },\n    { value: '#fb923cff', label: 'Orange 400' },\n    { value: '#f97316ff', label: 'Orange 500' },\n    { value: '#ea580cff', label: 'Orange 600' },\n    { value: '#c2410cff', label: 'Orange 700' },\n    { value: '#9a3412ff', label: 'Orange 800' },\n    { value: '#7c2d12ff', label: 'Orange 900' },\n    { value: '#fefce8ff', label: 'Yellow 50' },\n    { value: '#fef9c3ff', label: 'Yellow 100' },\n    { value: '#fef08aff', label: 'Yellow 200' },\n    { value: '#fde047ff', label: 'Yellow 300' },\n    { value: '#facc15ff', label: 'Yellow 400' },\n    { value: '#eab308ff', label: 'Yellow 500' },\n    { value: '#ca8a04ff', label: 'Yellow 600' },\n    { value: '#a16207ff', label: 'Yellow 700' },\n    { value: '#854d0eff', label: 'Yellow 800' },\n    { value: '#713f12ff', label: 'Yellow 900' },\n    { value: '#f0fdf4ff', label: 'Green 50' },\n    { value: '#dcfce7ff', label: 'Green 100' },\n    { value: '#bbf7d0ff', label: 'Green 200' },\n    { value: '#86efacff', label: 'Green 300' },\n    { value: '#4ade80ff', label: 'Green 400' },\n    { value: '#22c55eff', label: 'Green 500' },\n    { value: '#16a34aff', label: 'Green 600' },\n    { value: '#15803dff', label: 'Green 700' },\n    { value: '#166534ff', label: 'Green 800' },\n    { value: '#14532dff', label: 'Green 900' },\n    { value: '#ecfeffff', label: 'Cyan 50' },\n    { value: '#cffafeff', label: 'Cyan 100' },\n    { value: '#a5f3fcff', label: 'Cyan 200' },\n    { value: '#67e8f9ff', label: 'Cyan 300' },\n    { value: '#22d3eeff', label: 'Cyan 400' },\n    { value: '#06b6d4ff', label: 'Cyan 500' },\n    { value: '#0891b2ff', label: 'Cyan 600' },\n    { value: '#0e7490ff', label: 'Cyan 700' },\n    { value: '#155e75ff', label: 'Cyan 800' },\n    { value: '#164e63ff', label: 'Cyan 900' },\n    { value: '#eff6ffff', label: 'Blue 50' },\n    { value: '#dbeafeff', label: 'Blue 100' },\n    { value: '#bfdbfeff', label: 'Blue 200' },\n    { value: '#93c5fdff', label: 'Blue 300' },\n    { value: '#60a5faff', label: 'Blue 400' },\n    { value: '#3b82f6ff', label: 'Blue 500' },\n    { value: '#2563ebff', label: 'Blue 600' },\n    { value: '#1d4ed8ff', label: 'Blue 700' },\n    { value: '#1e40afff', label: 'Blue 800' },\n    { value: '#1e3a8aff', label: 'Blue 900' },\n    { value: '#faf5ffff', label: 'Purple 50' },\n    { value: '#f3e8ffff', label: 'Purple 100' },\n    { value: '#e9d5ffff', label: 'Purple 200' },\n    { value: '#d8b4feff', label: 'Purple 300' },\n    { value: '#c084fcff', label: 'Purple 400' },\n    { value: '#a855f7ff', label: 'Purple 500' },\n    { value: '#9333eaff', label: 'Purple 600' },\n    { value: '#7e22ceff', label: 'Purple 700' },\n    { value: '#6b21a8ff', label: 'Purple 800' },\n    { value: '#581c87ff', label: 'Purple 900' },\n    { value: '#fdf2f8ff', label: 'Pink 50' },\n    { value: '#fce7f3ff', label: 'Pink 100' },\n    { value: '#fbcfe8ff', label: 'Pink 200' },\n    { value: '#f9a8d4ff', label: 'Pink 300' },\n    { value: '#f472b6ff', label: 'Pink 400' },\n    { value: '#ec4899ff', label: 'Pink 500' },\n    { value: '#db2777ff', label: 'Pink 600' },\n    { value: '#be185dff', label: 'Pink 700' },\n    { value: '#9d174dff', label: 'Pink 800' },\n    { value: '#831843ff', label: 'Pink 900' },\n  ],\n};\n\n/** No paint and CSS's basic named colors, with pink and brown. */\nexport const BASIC_PALETTE: SwatchPalette = {\n  id: 'basic',\n  name: 'Basic',\n  columns: 10,\n  colors: [\n    { value: null, label: 'None' },\n    { value: '#000000ff', label: 'Black' },\n    { value: '#ffffffff', label: 'White' },\n    { value: '#808080ff', label: 'Gray' },\n    { value: '#c0c0c0ff', label: 'Silver' },\n    { value: '#800000ff', label: 'Maroon' },\n    { value: '#ff0000ff', label: 'Red' },\n    { value: '#ffa500ff', label: 'Orange' },\n    { value: '#ffff00ff', label: 'Yellow' },\n    { value: '#808000ff', label: 'Olive' },\n    { value: '#00ff00ff', label: 'Lime' },\n    { value: '#008000ff', label: 'Green' },\n    { value: '#008080ff', label: 'Teal' },\n    { value: '#00ffffff', label: 'Cyan' },\n    { value: '#000080ff', label: 'Navy' },\n    { value: '#0000ffff', label: 'Blue' },\n    { value: '#800080ff', label: 'Purple' },\n    { value: '#ff00ffff', label: 'Magenta' },\n    { value: '#ffc0cbff', label: 'Pink' },\n    { value: '#a52a2aff', label: 'Brown' },\n  ],\n};\n\n/** What {@link SwatchStrip} offers when given no `palettes`. */\nexport const BUILTIN_PALETTES: readonly SwatchPalette[] = [STANDARD_PALETTE, BASIC_PALETTE];\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  min-inline-size: 0;\n}\n\n.heading {\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-medium);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  color: var(--wzl-fg-muted);\n}\n\n.empty {\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { useId, useState, type ReactElement } from 'react';\nimport { getAlpha01 } from '@weasel-js/core';\nimport { SwatchGrid, type SwatchGridOption } from '../SwatchGrid';\nimport { Select } from '../Select';\nimport {\n  RecentColorsProvider,\n  normalizeRecentColor,\n  useRecentColors,\n  useRecentColorsStore,\n  type RecentColorsStore,\n} from '../RecentColors';\nimport { BUILTIN_PALETTES, type SwatchPalette } from './palettes';\nimport s from './SwatchStrip.module.css';\n\n/** Props for {@link SwatchStrip}. */\nexport interface SwatchStripProps {\n  /** The color to mark current, in either row. `null` marks \"no paint\". */\n  value?: string | null;\n  /** A swatch applied: click, Enter or Space. */\n  onChange: (value: string | null) => void;\n  /** The alternate target, as on {@link SwatchGrid}: shift-click,\n   *  right-click, Shift+Enter. */\n  onAltChange?: (value: string | null) => void;\n  /** The preset palettes on offer. Default {@link BUILTIN_PALETTES}. More\n   *  than one adds a picker. */\n  palettes?: readonly SwatchPalette[];\n  /** The shown palette's id, controlled. */\n  palette?: string;\n  /** The shown palette's id to start on, uncontrolled. Default: the first. */\n  defaultPalette?: string;\n  onPaletteChange?: (id: string) => void;\n  /** Where the recent row reads from and applies record into. Default: the\n   *  nearest {@link RecentColorsProvider}'s. With neither there is no recent\n   *  row. */\n  store?: RecentColorsStore;\n  /** Swatches per row, for the recent row and any palette that sets none.\n   *  Default 10. */\n  columns?: number;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** A color as a screen reader should hear it: the hex, and the opacity\n *  when it is not opaque. Any other CSS color reads as written. */\nexport function describeColor(color: string): string {\n  const c = normalizeRecentColor(color) ?? color;\n  if (!c.startsWith('#') || c.length !== 9) return c;\n  const alpha = Math.round(getAlpha01(c) * 100);\n  return alpha === 100 ? c.slice(0, 7) : `${c.slice(0, 7)}, ${alpha}% opacity`;\n}\n\nfunction same(a: string | null, b: string | null): boolean {\n  if (a === null || b === null) return a === b;\n  return normalizeRecentColor(a) === normalizeRecentColor(b);\n}\n\n/**\n * The swatches a color picker sits beside: the recently used colors, most\n * recent first, above a preset palette. Applying any swatch records it, so\n * it moves to the head of the recent row — as does a color committed\n * through any other picker under the same {@link RecentColorsProvider}.\n *\n * Like {@link SwatchGrid} it applies nothing itself; `onChange` and\n * `onAltChange` hand the color to the app.\n */\nexport function SwatchStrip(props: SwatchStripProps): ReactElement {\n  const { value, onChange, onAltChange, className } = props;\n  const palettes = props.palettes ?? BUILTIN_PALETTES;\n  const columns = props.columns ?? 10;\n  const ctxStore = useRecentColorsStore();\n  const store = props.store ?? ctxStore;\n  const recent = useRecentColors(store);\n  const recentHeading = useId();\n\n  const [ownPalette, setOwnPalette] = useState(props.defaultPalette);\n  const paletteId = props.palette ?? ownPalette;\n  const shown = palettes.find((p) => p.id === paletteId) ?? palettes[0];\n  const choosePalette = (id: string): void => {\n    setOwnPalette(id);\n    props.onPaletteChange?.(id);\n  };\n\n  const recentOptions: SwatchGridOption[] = recent.map((c) => ({ value: c, label: describeColor(c) }));\n  // Match on the color, not its spelling, so `#F00` lights `#ff0000ff`.\n  const currentIn = (options: readonly SwatchGridOption[]): string | null | undefined =>\n    value === undefined ? undefined : options.find((o) => same(o.value, value))?.value;\n\n  const grids = (\n    <>\n      {store && (\n        <section className={s.section} aria-labelledby={recentHeading}>\n          <div id={recentHeading} className={s.heading}>Recent</div>\n          {recentOptions.length > 0 ? (\n            <SwatchGrid\n              aria-label=\"Recent colors\"\n              options={recentOptions}\n              value={currentIn(recentOptions)}\n              columns={columns}\n              onChange={onChange}\n              onAltChange={onAltChange}\n            />\n          ) : (\n            <p className={s.empty}>No recent colors</p>\n          )}\n        </section>\n      )}\n      {shown && (\n        <section className={s.section}>\n          {palettes.length > 1 ? (\n            <Select<string>\n              label=\"Palette\"\n              orientation=\"row\"\n              options={palettes.map((p) => ({ value: p.id, label: p.name }))}\n              selectedKey={shown.id}\n              onSelectionChange={choosePalette}\n            />\n          ) : (\n            <div className={s.heading}>{shown.name}</div>\n          )}\n          <SwatchGrid\n            key={shown.id}\n            aria-label={shown.name}\n            options={shown.colors}\n            value={currentIn(shown.colors)}\n            columns={shown.columns ?? columns}\n            onChange={onChange}\n            onAltChange={onAltChange}\n          />\n        </section>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={props['aria-label'] ?? 'Swatches'}\n    >\n      {/* A store given by prop is where applies here record too. */}\n      {props.store && props.store !== ctxStore\n        ? <RecentColorsProvider store={props.store}>{grids}</RecentColorsProvider>\n        : grids}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{ThemeSwitcher-BlsInAmR.js → ThemeSwitcher-DiBmMh_B.js}

@@ -1,5 +1,5 @@
-import { $ as e, Q as t, Z as n } from "./icons-BhcR1l64.js";
-import { t as r } from "./Button-BIdXHQOx.js";
+import { $ as e, Q as t, Z as n } from "./icons-Dr2-r30x.js";
+import { t as r } from "./Button-XB-T75YL.js";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/ThemeSwitcher/ThemeSwitcher.tsx
 var a = [
@@ -35,4 +35,4 @@ function o({ value: e, onChange: t, options: n = a, ariaLabel: o = "Theme", size
 //#endregion
 export { o as n, a as t };
 
-//# sourceMappingURL=ThemeSwitcher-BlsInAmR.js.map
+//# sourceMappingURL=ThemeSwitcher-DiBmMh_B.js.map

package/dist/chunks/{ThemeSwitcher-BlsInAmR.js.map → ThemeSwitcher-DiBmMh_B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher-BlsInAmR.js","names":["ModeLightIcon","ModeDarkIcon","ModeAutoIcon","Button","COLOR_MODE_OPTIONS","ThemeSwitcher","count","options","index","o","value","current","next","previous","name","ariaLabel","onChange","event"],"sources":["../../src/components/ThemeSwitcher/ThemeSwitcher.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { ColorModePreference } from '@weasel-js/theme';\nimport { ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '../../icons';\nimport { Button, type ButtonSize, type ButtonVariant } from '../Button/Button';\n\n/** One stop in a {@link ThemeSwitcher}'s rotation. */\nexport interface ThemeSwitcherOption<T extends string = string> {\n  value: T;\n  /** Drawn in the button while this option is current. */\n  icon: ReactNode;\n  /** The option's name, read in the accessible name and tooltip. */\n  label: string;\n}\n\n/** The color modes, in rotation order, as {@link ThemeSwitcher} cycles them by default. */\nexport const COLOR_MODE_OPTIONS: readonly ThemeSwitcherOption<ColorModePreference>[] = [\n  { value: 'auto', icon: <ModeAutoIcon size={16} />, label: 'Auto' },\n  { value: 'light', icon: <ModeLightIcon size={16} />, label: 'Light' },\n  { value: 'dark', icon: <ModeDarkIcon size={16} />, label: 'Dark' },\n];\n\n/** Props for {@link ThemeSwitcher}. */\nexport interface ThemeSwitcherProps<T extends string = ColorModePreference> {\n  value: T;\n  onChange: (next: T) => void;\n  /** The rotation, in order. Defaults to {@link COLOR_MODE_OPTIONS}. */\n  options?: readonly ThemeSwitcherOption<T>[];\n  /** What is being switched, leading the accessible name and tooltip\n   *  (`Theme: Auto — click for Light`). Defaults to `'Theme'`. */\n  ariaLabel?: string;\n  /** Defaults to `sm`, the size of a header's icon buttons. */\n  size?: ButtonSize;\n  /** Defaults to `ghost`. */\n  variant?: ButtonVariant;\n  className?: string;\n}\n\n/**\n * One icon button that steps through a list of options: a click moves to the\n * next, a shift-click to the previous, both wrapping. It shows the current\n * option's icon, and its name and tooltip say what is current and what a\n * click chooses. The compact alternative to `ColorModeControl`'s three\n * segments. Controlled: pair the default color modes with\n * `useColorModePreference` from `@weasel-js/theme/react`.\n */\nexport function ThemeSwitcher<T extends string = ColorModePreference>({\n  value,\n  onChange,\n  options = COLOR_MODE_OPTIONS as unknown as readonly ThemeSwitcherOption<T>[],\n  ariaLabel = 'Theme',\n  size = 'sm',\n  variant = 'ghost',\n  className,\n}: ThemeSwitcherProps<T>): ReactElement {\n  const count = options.length;\n  const index = Math.max(0, options.findIndex((o) => o.value === value));\n  const current = options[index];\n  const next = options[(index + 1) % count];\n  const previous = options[(index - 1 + count) % count];\n  const name = `${ariaLabel}: ${current.label} — click for ${next.label}`;\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      iconOnly\n      ariaLabel={name}\n      tooltip={name}\n      className={className}\n      onClick={(event) => onChange((event.shiftKey ? previous : next).value)}\n    >\n      {current.icon}\n    </Button>\n  );\n}\n"],"mappings":";;;;AAeA,IAAaI,IAA0E;CACrF;EAAE,OAAO;EAAQ,MAAM,kBAACF,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;CACjE;EAAE,OAAO;EAAS,MAAM,kBAACF,GAAD,EAAe,MAAM,GAAK,CAAA;EAAG,OAAO;CAAQ;CACpE;EAAE,OAAO;EAAQ,MAAM,kBAACC,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;AACnE;AA0BA,SAAgBI,EAAsD,EACpE,UACA,aACA,aAAUD,GACV,eAAY,SACZ,UAAO,MACP,aAAU,SACV,gBACsC;CACtC,IAAME,IAAQC,EAAQ,QAChBC,IAAQ,KAAK,IAAI,GAAGD,EAAQ,WAAW,MAAME,EAAE,UAAUC,CAAK,CAAC,GAC/DC,IAAUJ,EAAQC,IAClBI,IAAOL,GAASC,IAAQ,KAAKF,IAC7BO,IAAWN,GAASC,IAAQ,IAAIF,KAASA,IACzCQ,IAAO,GAAGC,EAAU,IAAIJ,EAAQ,MAAM,eAAeC,EAAK;CAEhE,OACE,kBAACT,GAAD;EACW;EACH;EACN,UAAA;EACA,WAAWW;EACX,SAASA;EACE;EACX,UAAU,MAAUE,GAAUC,EAAM,WAAWJ,IAAWD,EAAA,CAAM,KAAK;EAEpE,UAAAD,EAAQ;CACH,CAAA;AAEZ"}
+{"version":3,"file":"ThemeSwitcher-DiBmMh_B.js","names":["ModeLightIcon","ModeDarkIcon","ModeAutoIcon","Button","COLOR_MODE_OPTIONS","ThemeSwitcher","count","options","index","o","value","current","next","previous","name","ariaLabel","onChange","event"],"sources":["../../src/components/ThemeSwitcher/ThemeSwitcher.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { ColorModePreference } from '@weasel-js/theme';\nimport { ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '../../icons';\nimport { Button, type ButtonSize, type ButtonVariant } from '../Button/Button';\n\n/** One stop in a {@link ThemeSwitcher}'s rotation. */\nexport interface ThemeSwitcherOption<T extends string = string> {\n  value: T;\n  /** Drawn in the button while this option is current. */\n  icon: ReactNode;\n  /** The option's name, read in the accessible name and tooltip. */\n  label: string;\n}\n\n/** The color modes, in rotation order, as {@link ThemeSwitcher} cycles them by default. */\nexport const COLOR_MODE_OPTIONS: readonly ThemeSwitcherOption<ColorModePreference>[] = [\n  { value: 'auto', icon: <ModeAutoIcon size={16} />, label: 'Auto' },\n  { value: 'light', icon: <ModeLightIcon size={16} />, label: 'Light' },\n  { value: 'dark', icon: <ModeDarkIcon size={16} />, label: 'Dark' },\n];\n\n/** Props for {@link ThemeSwitcher}. */\nexport interface ThemeSwitcherProps<T extends string = ColorModePreference> {\n  value: T;\n  onChange: (next: T) => void;\n  /** The rotation, in order. Defaults to {@link COLOR_MODE_OPTIONS}. */\n  options?: readonly ThemeSwitcherOption<T>[];\n  /** What is being switched, leading the accessible name and tooltip\n   *  (`Theme: Auto — click for Light`). Defaults to `'Theme'`. */\n  ariaLabel?: string;\n  /** Defaults to `sm`, the size of a header's icon buttons. */\n  size?: ButtonSize;\n  /** Defaults to `ghost`. */\n  variant?: ButtonVariant;\n  className?: string;\n}\n\n/**\n * One icon button that steps through a list of options: a click moves to the\n * next, a shift-click to the previous, both wrapping. It shows the current\n * option's icon, and its name and tooltip say what is current and what a\n * click chooses. The compact alternative to `ColorModeControl`'s three\n * segments. Controlled: pair the default color modes with\n * `useColorModePreference` from `@weasel-js/theme/react`.\n */\nexport function ThemeSwitcher<T extends string = ColorModePreference>({\n  value,\n  onChange,\n  options = COLOR_MODE_OPTIONS as unknown as readonly ThemeSwitcherOption<T>[],\n  ariaLabel = 'Theme',\n  size = 'sm',\n  variant = 'ghost',\n  className,\n}: ThemeSwitcherProps<T>): ReactElement {\n  const count = options.length;\n  const index = Math.max(0, options.findIndex((o) => o.value === value));\n  const current = options[index];\n  const next = options[(index + 1) % count];\n  const previous = options[(index - 1 + count) % count];\n  const name = `${ariaLabel}: ${current.label} — click for ${next.label}`;\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      iconOnly\n      ariaLabel={name}\n      tooltip={name}\n      className={className}\n      onClick={(event) => onChange((event.shiftKey ? previous : next).value)}\n    >\n      {current.icon}\n    </Button>\n  );\n}\n"],"mappings":";;;;AAeA,IAAaI,IAA0E;CACrF;EAAE,OAAO;EAAQ,MAAM,kBAACF,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;CACjE;EAAE,OAAO;EAAS,MAAM,kBAACF,GAAD,EAAe,MAAM,GAAK,CAAA;EAAG,OAAO;CAAQ;CACpE;EAAE,OAAO;EAAQ,MAAM,kBAACC,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;AACnE;AA0BA,SAAgBI,EAAsD,EACpE,UACA,aACA,aAAUD,GACV,eAAY,SACZ,UAAO,MACP,aAAU,SACV,gBACsC;CACtC,IAAME,IAAQC,EAAQ,QAChBC,IAAQ,KAAK,IAAI,GAAGD,EAAQ,WAAW,MAAME,EAAE,UAAUC,CAAK,CAAC,GAC/DC,IAAUJ,EAAQC,IAClBI,IAAOL,GAASC,IAAQ,KAAKF,IAC7BO,IAAWN,GAASC,IAAQ,IAAIF,KAASA,IACzCQ,IAAO,GAAGC,EAAU,IAAIJ,EAAQ,MAAM,eAAeC,EAAK;CAEhE,OACE,kBAACT,GAAD;EACW;EACH;EACN,UAAA;EACA,WAAWW;EACX,SAASA;EACE;EACX,UAAU,MAAUE,GAAUC,EAAM,WAAWJ,IAAWD,EAAA,CAAM,KAAK;EAEpE,UAAAD,EAAQ;CACH,CAAA;AAEZ"}