@patternmode/swatch 0.1.1

package/dist/Swatch/SwatchColors.d.ts

@@ -0,0 +1,4 @@
+import type { SwatchColorStop } from "./SwatchTypes";
+export declare function isLightColor(color: string): boolean;
+export declare function getSwatchColorsBackground(colors: SwatchColorStop[] | undefined): string | undefined;
+//# sourceMappingURL=SwatchColors.d.ts.map

package/dist/Swatch/SwatchColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchColors.d.ts","sourceRoot":"","sources":["../../src/Swatch/SwatchColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAWnD;AAED,wBAAgB,yBAAyB,CACxC,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,GACnC,MAAM,GAAG,SAAS,CAyBpB"}

package/dist/Swatch/SwatchRoot.d.ts

@@ -0,0 +1,3 @@
+import type { SwatchProps } from "./SwatchTypes";
+export declare function Swatch({ "aria-label": ariaLabel, background, children, className, color, colors, icon: Icon, isLight, objectFit, objectPosition, onRemove, raised, role: _role, selected, shape, showRing, size, style, unavailable, ...props }: SwatchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SwatchRoot.d.ts.map

package/dist/Swatch/SwatchRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchRoot.d.ts","sourceRoot":"","sources":["../../src/Swatch/SwatchRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAgB,MAAM,CAAC,EACtB,YAAY,EAAE,SAAS,EACvB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,MAAc,EACd,IAAI,EAAE,KAAK,EACX,QAAgB,EAChB,KAAgB,EAChB,QAAe,EACf,IAAa,EACb,KAAK,EACL,WAAmB,EACnB,GAAG,KAAK,EACR,EAAE,WAAW,2CAqEb"}

package/dist/Swatch/SwatchTypes.d.ts

@@ -0,0 +1,29 @@
+import { type ObjectFit, type PatternmodeSize } from "@patternmode/system";
+import type { ComponentType, HTMLAttributes, SVGProps } from "react";
+export declare const SWATCH_SIZES: readonly ["2xs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl"];
+export declare const SWATCH_SHAPES: readonly ["circle", "pill", "square"];
+export type SwatchSize = PatternmodeSize;
+export type SwatchShape = (typeof SWATCH_SHAPES)[number];
+export type SwatchColorStop = string | {
+    color: string;
+    ratio?: number;
+};
+type SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface SwatchProps extends HTMLAttributes<HTMLSpanElement> {
+    background?: string;
+    color?: string;
+    colors?: SwatchColorStop[];
+    icon?: SwatchIcon;
+    isLight?: boolean;
+    objectFit?: ObjectFit;
+    objectPosition?: string;
+    onRemove?: () => void;
+    raised?: boolean;
+    selected?: boolean;
+    shape?: SwatchShape;
+    showRing?: boolean;
+    size?: SwatchSize;
+    unavailable?: boolean;
+}
+export {};
+//# sourceMappingURL=SwatchTypes.d.ts.map

package/dist/Swatch/SwatchTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchTypes.d.ts","sourceRoot":"","sources":["../../src/Swatch/SwatchTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,SAAS,EAEd,KAAK,eAAe,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,YAAY,gEAAoB,CAAC;AAE9C,eAAO,MAAM,aAAa,uCAAwC,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC;AACzC,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACzE,KAAK,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/Swatch/index.d.ts

@@ -0,0 +1,4 @@
+export { getSwatchColorsBackground } from "./SwatchColors";
+export { Swatch } from "./SwatchRoot";
+export { SWATCH_SHAPES, SWATCH_SIZES, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, } from "./SwatchTypes";
+//# sourceMappingURL=index.d.ts.map

package/dist/Swatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Swatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EACN,aAAa,EACb,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { getSwatchColorsBackground, SWATCH_SHAPES, SWATCH_SIZES, Swatch, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, } from "./swatch";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,yBAAyB,EACzB,aAAa,EACb,YAAY,EACZ,MAAM,EACN,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,UAAU,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,129 @@
+import { PATTERNMODE_SIZES, getObjectSizingStyle, getSizeVariableStyle, joinClassNames } from "@patternmode/system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Swatch/SwatchColors.ts
+function isLightColor(color) {
+	const normalized = normalizeHex(color);
+	if (!normalized) return false;
+	const red = Number.parseInt(normalized.slice(0, 2), 16);
+	const green = Number.parseInt(normalized.slice(2, 4), 16);
+	const blue = Number.parseInt(normalized.slice(4, 6), 16);
+	return (.299 * red + .587 * green + .114 * blue) / 255 > .62;
+}
+function getSwatchColorsBackground(colors) {
+	if (!colors || colors.length === 0) return;
+	if (colors.length === 1) return toColorStop(colors[0]).color;
+	const stops = colors.map(toColorStop);
+	const weights = stops.map((stop) => getRatioWeight(stop.ratio));
+	const rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);
+	const useEqualWeights = rawTotal <= 0;
+	const total = useEqualWeights ? stops.length : rawTotal;
+	let cursor = 0;
+	return `linear-gradient(90deg, ${stops.map((stop, index) => {
+		const ratio = useEqualWeights ? 1 : weights[index] ?? 0;
+		const start = cursor;
+		const end = index === stops.length - 1 ? 100 : cursor + ratio / total * 100;
+		cursor = end;
+		return `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;
+	}).join(", ")})`;
+}
+function normalizeHex(hex) {
+	const value = hex.trim().replace(/^#/, "");
+	if (/^[\da-f]{3}$/i.test(value)) return value.split("").map((part) => part + part).join("");
+	if (/^[\da-f]{6}$/i.test(value)) return value;
+	return null;
+}
+function toColorStop(stop) {
+	return typeof stop === "string" ? { color: stop } : stop;
+}
+function getRatioWeight(ratio) {
+	if (ratio === void 0) return 1;
+	return Number.isFinite(ratio) ? Math.max(0, ratio) : 0;
+}
+function formatPercent(value) {
+	return `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;
+}
+//#endregion
+//#region src/Swatch/SwatchRoot.tsx
+function Swatch({ "aria-label": ariaLabel, background, children, className, color, colors, icon: Icon, isLight, objectFit, objectPosition, onRemove, raised = false, role: _role, selected = false, shape = "circle", showRing = true, size = "base", style, unavailable = false, ...props }) {
+	const colorsBackground = getSwatchColorsBackground(colors);
+	const fill = background ?? colorsBackground ?? color;
+	const light = isLight ?? (color && !background && !colorsBackground ? isLightColor(color) : false);
+	const rootStyle = {
+		...getSizeVariableStyle(size, "--patternmode-swatch-size"),
+		"--patternmode-swatch-fill": fill,
+		...style
+	};
+	const mediaStyle = getObjectSizingStyle({
+		fit: objectFit,
+		position: objectPosition
+	});
+	function handleRemove(event) {
+		event.stopPropagation();
+		onRemove?.();
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"aria-label": ariaLabel,
+		className: joinClassNames("patternmode-swatch", className),
+		"data-raised": raised ? "true" : void 0,
+		"data-selected": selected ? "true" : void 0,
+		"data-shape": shape,
+		"data-show-ring": showRing ? "true" : "false",
+		"data-size": size,
+		"data-slot": "swatch",
+		"data-tone": light ? "light" : "dark",
+		"data-unavailable": unavailable ? "true" : void 0,
+		role: "img",
+		style: rootStyle,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "patternmode-swatch__fill"
+			}),
+			children ? /* @__PURE__ */ jsx("span", {
+				className: "patternmode-swatch__media",
+				style: mediaStyle,
+				children
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "patternmode-swatch__scrim"
+			}),
+			selected && Icon ? /* @__PURE__ */ jsx("span", {
+				className: "patternmode-swatch__icon",
+				children: /* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					focusable: "false"
+				})
+			}) : null,
+			unavailable ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "patternmode-swatch__slash"
+			}) : null,
+			onRemove ? /* @__PURE__ */ jsx("button", {
+				"aria-label": "Remove",
+				className: "patternmode-swatch__remove",
+				onClick: handleRemove,
+				type: "button",
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					fill: "none",
+					viewBox: "0 0 20 20",
+					children: /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l9 9M14.5 5.5l-9 9" })
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/Swatch/SwatchTypes.ts
+const SWATCH_SIZES = PATTERNMODE_SIZES;
+const SWATCH_SHAPES = [
+	"circle",
+	"pill",
+	"square"
+];
+//#endregion
+export { SWATCH_SHAPES, SWATCH_SIZES, Swatch, getSwatchColorsBackground };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/Swatch/SwatchColors.ts","../src/Swatch/SwatchRoot.tsx","../src/Swatch/SwatchTypes.ts"],"sourcesContent":["import type { SwatchColorStop } from \"./SwatchTypes\";\n\nexport function isLightColor(color: string): boolean {\n\tconst normalized = normalizeHex(color);\n\tif (!normalized) {\n\t\treturn false;\n\t}\n\n\tconst red = Number.parseInt(normalized.slice(0, 2), 16);\n\tconst green = Number.parseInt(normalized.slice(2, 4), 16);\n\tconst blue = Number.parseInt(normalized.slice(4, 6), 16);\n\tconst luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;\n\treturn luminance > 0.62;\n}\n\nexport function getSwatchColorsBackground(\n\tcolors: SwatchColorStop[] | undefined,\n): string | undefined {\n\tif (!colors || colors.length === 0) {\n\t\treturn undefined;\n\t}\n\n\tif (colors.length === 1) {\n\t\treturn toColorStop(colors[0] as SwatchColorStop).color;\n\t}\n\n\tconst stops = colors.map(toColorStop);\n\tconst weights = stops.map((stop) => getRatioWeight(stop.ratio));\n\tconst rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);\n\tconst useEqualWeights = rawTotal <= 0;\n\tconst total = useEqualWeights ? stops.length : rawTotal;\n\tlet cursor = 0;\n\tconst parts = stops.map((stop, index) => {\n\t\tconst ratio = useEqualWeights ? 1 : (weights[index] ?? 0);\n\t\tconst start = cursor;\n\t\tconst end =\n\t\t\tindex === stops.length - 1 ? 100 : cursor + (ratio / total) * 100;\n\t\tcursor = end;\n\t\treturn `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;\n\t});\n\n\treturn `linear-gradient(90deg, ${parts.join(\", \")})`;\n}\n\nfunction normalizeHex(hex: string): string | null {\n\tconst value = hex.trim().replace(/^#/, \"\");\n\tif (/^[\\da-f]{3}$/i.test(value)) {\n\t\treturn value\n\t\t\t.split(\"\")\n\t\t\t.map((part) => part + part)\n\t\t\t.join(\"\");\n\t}\n\tif (/^[\\da-f]{6}$/i.test(value)) {\n\t\treturn value;\n\t}\n\treturn null;\n}\n\nfunction toColorStop(stop: SwatchColorStop): { color: string; ratio?: number } {\n\treturn typeof stop === \"string\" ? { color: stop } : stop;\n}\n\nfunction getRatioWeight(ratio: number | undefined): number {\n\tif (ratio === undefined) {\n\t\treturn 1;\n\t}\n\n\treturn Number.isFinite(ratio) ? Math.max(0, ratio) : 0;\n}\n\nfunction formatPercent(value: number): string {\n\treturn `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;\n}\n","import {\n\tgetObjectSizingStyle,\n\tgetSizeVariableStyle,\n\tjoinClassNames,\n} from \"@patternmode/system\";\nimport type { CSSProperties, MouseEvent } from \"react\";\n\nimport { getSwatchColorsBackground, isLightColor } from \"./SwatchColors\";\nimport type { SwatchProps } from \"./SwatchTypes\";\n\nexport function Swatch({\n\t\"aria-label\": ariaLabel,\n\tbackground,\n\tchildren,\n\tclassName,\n\tcolor,\n\tcolors,\n\ticon: Icon,\n\tisLight,\n\tobjectFit,\n\tobjectPosition,\n\tonRemove,\n\traised = false,\n\trole: _role,\n\tselected = false,\n\tshape = \"circle\",\n\tshowRing = true,\n\tsize = \"base\",\n\tstyle,\n\tunavailable = false,\n\t...props\n}: SwatchProps) {\n\tconst colorsBackground = getSwatchColorsBackground(colors);\n\tconst fill = background ?? colorsBackground ?? color;\n\tconst light =\n\t\tisLight ??\n\t\t(color && !background && !colorsBackground\n\t\t\t? isLightColor(color as string)\n\t\t\t: false);\n\n\tconst rootStyle = {\n\t\t...getSizeVariableStyle(size, \"--patternmode-swatch-size\"),\n\t\t\"--patternmode-swatch-fill\": fill,\n\t\t...style,\n\t} as CSSProperties;\n\tconst mediaStyle = getObjectSizingStyle({\n\t\tfit: objectFit,\n\t\tposition: objectPosition,\n\t}) as CSSProperties;\n\n\tfunction handleRemove(event: MouseEvent<HTMLButtonElement>) {\n\t\tevent.stopPropagation();\n\t\tonRemove?.();\n\t}\n\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-swatch\", className)}\n\t\t\tdata-raised={raised ? \"true\" : undefined}\n\t\t\tdata-selected={selected ? \"true\" : undefined}\n\t\t\tdata-shape={shape}\n\t\t\tdata-show-ring={showRing ? \"true\" : \"false\"}\n\t\t\tdata-size={size}\n\t\t\tdata-slot=\"swatch\"\n\t\t\tdata-tone={light ? \"light\" : \"dark\"}\n\t\t\tdata-unavailable={unavailable ? \"true\" : undefined}\n\t\t\trole=\"img\"\n\t\t\tstyle={rootStyle}\n\t\t>\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__fill\" />\n\t\t\t{children ? (\n\t\t\t\t<span className=\"patternmode-swatch__media\" style={mediaStyle}>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__scrim\" />\n\t\t\t{selected && Icon ? (\n\t\t\t\t<span className=\"patternmode-swatch__icon\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" focusable=\"false\" />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t{unavailable ? (\n\t\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__slash\" />\n\t\t\t) : null}\n\t\t\t{onRemove ? (\n\t\t\t\t<button\n\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\tclassName=\"patternmode-swatch__remove\"\n\t\t\t\t\tonClick={handleRemove}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<svg aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t<path d=\"M5.5 5.5l9 9M14.5 5.5l-9 9\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t) : null}\n\t\t</span>\n\t);\n}\n","import {\n\ttype ObjectFit,\n\tPATTERNMODE_SIZES,\n\ttype PatternmodeSize,\n} from \"@patternmode/system\";\nimport type { ComponentType, HTMLAttributes, SVGProps } from \"react\";\n\nexport const SWATCH_SIZES = PATTERNMODE_SIZES;\n\nexport const SWATCH_SHAPES = [\"circle\", \"pill\", \"square\"] as const;\n\nexport type SwatchSize = PatternmodeSize;\nexport type SwatchShape = (typeof SWATCH_SHAPES)[number];\nexport type SwatchColorStop = string | { color: string; ratio?: number };\ntype SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport interface SwatchProps extends HTMLAttributes<HTMLSpanElement> {\n\tbackground?: string;\n\tcolor?: string;\n\tcolors?: SwatchColorStop[];\n\ticon?: SwatchIcon;\n\tisLight?: boolean;\n\tobjectFit?: ObjectFit;\n\tobjectPosition?: string;\n\tonRemove?: () => void;\n\traised?: boolean;\n\tselected?: boolean;\n\tshape?: SwatchShape;\n\tshowRing?: boolean;\n\tsize?: SwatchSize;\n\tunavailable?: boolean;\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -0,0 +1 @@
+@layer components{.patternmode-swatch{--patternmode-swatch-size:2rem;--patternmode-swatch-fill:#e3e1dc;--patternmode-swatch-radius:999px;aspect-ratio:1;border-radius:var(--patternmode-swatch-radius);color:#fff;height:var(--patternmode-swatch-size);vertical-align:middle;width:var(--patternmode-swatch-size);justify-content:center;align-items:center;transition:box-shadow .14s,opacity .14s,transform .14s;display:inline-flex;position:relative;box-shadow:0 1px 2px #1118271a}.patternmode-swatch[data-tone=light]{color:#1d1d1b}.patternmode-swatch[data-shape=pill]{--patternmode-swatch-radius:999px;aspect-ratio:auto;width:calc(var(--patternmode-swatch-size) * 3)}.patternmode-swatch[data-shape=square]{--patternmode-swatch-radius:7px}.patternmode-swatch[data-raised=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff)}.patternmode-swatch[data-selected=true][data-show-ring=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff), 0 0 0 4px var(--accent,#315c4b)}.patternmode-swatch[data-unavailable=true]{opacity:.5}.patternmode-swatch__fill,.patternmode-swatch__media,.patternmode-swatch__scrim{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.patternmode-swatch__fill{background:var(--patternmode-swatch-fill)}.patternmode-swatch__media>*{object-fit:inherit;object-position:inherit;width:100%;height:100%;display:block}.patternmode-swatch__scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0003 100%)}.patternmode-swatch__icon{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.patternmode-swatch__icon svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;width:48%;height:48%;display:block}.patternmode-swatch__slash{background:currentColor;border-radius:999px;width:112%;height:2px;position:absolute;transform:rotate(-45deg)}.patternmode-swatch__remove{background:var(--ink,#1d1d1b);color:var(--surface,#fff);cursor:pointer;opacity:0;border:0;border-radius:999px;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;padding:0;transition:background .14s,opacity .14s;display:inline-flex;position:absolute;top:-.35rem;right:-.35rem}.patternmode-swatch:hover .patternmode-swatch__remove,.patternmode-swatch__remove:focus-visible{opacity:1}.patternmode-swatch__remove:hover{background:var(--accent,#315c4b)}.patternmode-swatch__remove:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:2px}.patternmode-swatch__remove svg{stroke:currentColor;stroke-linecap:round;stroke-width:2px;width:.8rem;height:.8rem}}

package/dist/swatch.d.ts

@@ -0,0 +1,4 @@
+export { getSwatchColorsBackground } from "./Swatch/SwatchColors";
+export { Swatch } from "./Swatch/SwatchRoot";
+export { SWATCH_SHAPES, SWATCH_SIZES, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, } from "./Swatch/SwatchTypes";
+//# sourceMappingURL=swatch.d.ts.map

package/dist/swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../src/swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EACN,aAAa,EACb,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@patternmode/swatch",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Color, gradient, image, and palette swatch primitives for Patternmode interfaces.",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "author": "Daniel Howells",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/howells/patternmode.git",
+    "directory": "packages/swatch"
+  },
+  "bugs": {
+    "url": "https://github.com/howells/patternmode/issues"
+  },
+  "homepage": "https://github.com/howells/patternmode/tree/main/packages/swatch#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "swatch",
+    "palette",
+    "color",
+    "react",
+    "component",
+    "patternmode"
+  ],
+  "dependencies": {
+    "@patternmode/system": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@howells/lint": "^0.1.7",
+    "@howells/typescript-config": "^0.1.2",
+    "@tailwindcss/cli": "^4.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "concurrently": "^9.2.1",
+    "jsdom": "^29.1.1",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.6"
+  },
+  "scripts": {
+    "build": "tsdown && tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist --noEmit false && pnpm build:styles",
+    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "clean": "rm -rf dist .turbo",
+    "dev": "concurrently \"pnpm dev:js\" \"pnpm dev:types\" \"pnpm dev:styles\"",
+    "dev:js": "tsdown --watch",
+    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+    "dev:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist --noEmit false --watch --preserveWatchOutput",
+    "lint:check": "find src -type f \\( -name '*.ts' -o -name '*.tsx' \\) -print0 | xargs -0 howells-biome check",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}