@spinjs/components 0.1.0-preview.2 → 0.2.0-alpha.1

package/dist/color-picker/color-picker.presentation.js

@@ -1,7 +1,7 @@
-import { isOpenPhase, startOpen, valueAsString } from "./color-picker.state.js";
+import { parseColor } from "./color.js";
 import { colorPicker as colorPicker$1 } from "./color-picker.machine.js";
-import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOrientation, ariaRoleDescription, dataAttr, defineComponent, disclosureTrigger, isComposing, isRecord, sliderThumb } from "@spinjs/runtime";
-import { parseColor } from "@zag-js/color-utils";
+import { isOpenPhase, startOpen, valueAsString } from "./color-picker.state.js";
+import { ariaDisabled, ariaHidden, ariaLabelledBy, ariaOrientation, ariaRoleDescription, dataAttr, defineComponent, disclosureTrigger, isComposing, isRecord, sliderThumb } from "@spinjs/components/runtime";
 // src/color-picker/color-picker.presentation.ts
 const isColorFormat = (raw) => raw === "hex" || raw === "hexa" || raw === "rgb" || raw === "rgba" || raw === "hsl" || raw === "hsla" || raw === "hsb" || raw === "hsba";
 const openOf = (scope) => isOpenPhase(scope.state, scope.context.inline);
@@ -341,8 +341,7 @@ const def = {
 		} },
 		areaBackground: {
 			id: "area-background",
-			attrs: (scope, arg) => {
-				const { x, y } = areaChannels(arg);
+			attrs: (scope) => {
 				const area = scope.context.format.startsWith("hsl") ? "hsla" : "hsba";
 				let hue = 0;
 				try {

package/dist/color-picker/color-picker.state.d.ts

@@ -1,4 +1,4 @@
-import { ColorChannel, parseColor } from "@zag-js/color-utils";
+import { ColorChannel, parseColor } from "./color.js";
 export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba";
 export interface ColorPickerContext {
   value: string;
@@ -37,5 +37,4 @@ export declare function initial(args: ColorPickerArgs, authored: (name: string)
 export declare function startOpen(raw: Record<string, unknown>): boolean;
 /** True when the panel shows; inline is always open. */
 export declare const isOpenPhase: (phase: string, inline: boolean) => boolean;
-export declare const valueAsString: (ctx: ColorPickerContext) => string;
-//# sourceMappingURL=color-picker.state.d.ts.map
+export declare const valueAsString: (ctx: ColorPickerContext) => string;

package/dist/color-picker/color-picker.state.js

@@ -1,5 +1,5 @@
-import { defaultTwin } from "@spinjs/runtime";
-import { parseColor } from "@zag-js/color-utils";
+import { parseColor } from "./color.js";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/color-picker/color-picker.state.ts
 const parse = (value, fallback) => {
 	try {

package/dist/color-picker/color-picker.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ColorPickerContext } from "./color-picker.state.js";
 import { ColorPickerEvents } from "./color-picker.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { ColorPickerContext } from "./color-picker.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type ColorPickerAssign<K extends keyof ColorPickerEvents = keyof ColorPickerEvents> = AssignFor<ColorPickerContext, ColorPickerEvents, K>;
 type ColorPickerGuard<K extends keyof ColorPickerEvents = keyof ColorPickerEvents> = GuardFor<ColorPickerContext, ColorPickerEvents, K>;
 export declare const setValueFromSwatch: ColorPickerAssign<"SWATCH_TRIGGER.CLICK">;
@@ -17,5 +17,4 @@ export declare const boundAreaValue: ColorPickerAssign<"AREA.HOME_END">;
 export declare const stepChannelValue: ColorPickerAssign<"CHANNEL_SLIDER.ARROW">;
 export declare const boundChannelValue: ColorPickerAssign<"CHANNEL_SLIDER.HOME_END">;
 export declare const isOpenControlled: ColorPickerGuard;
-export {};
-//# sourceMappingURL=color-picker.transitions.d.ts.map
+export {};

package/dist/color-picker/color.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The color value: parse, convert, serialize, and step one channel.
+ *
+ * @zag-js/color-utils, MIT, (c) Zag. The upstream package owns the
+ * contract this file keeps: the parse shapes, the conversion formulas,
+ * the serialization cases, and the channel ranges. Vendored so the
+ * color-picker stands on the runtime's own math instead of the package.
+ */
+/** A channel the picker reads, writes, or steps. */
+export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+/** The three spaces a color converts between. */
+export type ColorFormat = "rgba" | "hsla" | "hsba";
+/** The serializations `toString` accepts. */
+export type ColorStringFormat = "hex" | "hexa" | "rgb" | "hsl" | "hsb" | ColorFormat | "css";
+/** The stepped range a channel moves within. */
+export interface ColorChannelRange {
+  readonly minValue: number;
+  readonly maxValue: number;
+  readonly step: number;
+  readonly pageSize: number;
+}
+/** The color contract: what the picker reads off any parsed value. */
+export interface Color {
+  toFormat(format: ColorFormat): Color;
+  toString(format?: ColorStringFormat): string;
+  getChannelValue(channel: ColorChannel): number;
+  withChannelValue(channel: ColorChannel, value: number): Color;
+  getChannelRange(channel: ColorChannel): ColorChannelRange;
+  getChannelValuePercent(channel: ColorChannel, value?: number): number;
+  getChannelPercentValue(channel: ColorChannel, percent: number): number;
+  incrementChannel(channel: ColorChannel, stepSize: number): Color;
+  decrementChannel(channel: ColorChannel, stepSize: number): Color;
+  toJSON(): Record<string, number>;
+  clone(): Color;
+  getFormat(): ColorFormat;
+  isEqual(color: Color): boolean;
+}
+/** Parse any supported color string; named colors resolve to hex first. */
+export declare function parseColor(value: string): Color;

package/dist/color-picker/color.js

@@ -0,0 +1,401 @@
+import { clampValue, getPercentValue, getValuePercent, snapValueToStep } from "@spinjs/components/runtime";
+// src/color-picker/color.ts
+/**
+* The color value: parse, convert, serialize, and step one channel.
+*
+* @zag-js/color-utils, MIT, (c) Zag. The upstream package owns the
+* contract this file keeps: the parse shapes, the conversion formulas,
+* the serialization cases, and the channel ranges. Vendored so the
+* color-picker stands on the runtime's own math instead of the package.
+*/
+const toFixedNumber = (value, digits) => {
+	const scale = 10 ** digits;
+	return Math.round(value * scale) / scale;
+};
+const mod = (value, m) => (value % m + m) % m;
+const equalsRecord = (a, b) => {
+	const keys = Object.keys(a);
+	if (keys.length !== Object.keys(b).length) return false;
+	for (const key of keys) if (a[key] !== b[key]) return false;
+	return true;
+};
+const NATIVE_COLORS = "aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgrey:d3d3d3,lightgreen:90ee90,lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:778899,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370d8,mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc,mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:d87093,papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080,rebeccapurple:663399,red:ff0000,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32";
+const nativeColorMap = (() => {
+	const map = /* @__PURE__ */ new Map();
+	for (const entry of NATIVE_COLORS.split(",")) {
+		const [name, hex] = entry.split(":");
+		if (name === void 0 || hex === void 0) continue;
+		map.set(name, `#${hex}`);
+		if (name.includes("gray")) map.set(name.replace("gray", "grey"), `#${hex}`);
+	}
+	return map;
+})();
+var ColorBase = class {
+	getChannelValue(channel) {
+		if (channel in this) return this[channel];
+		throw new Error(`Unsupported color channel: ${channel}`);
+	}
+	getChannelValuePercent(channel, value) {
+		const current = value ?? this.getChannelValue(channel);
+		const { minValue, maxValue } = this.getChannelRange(channel);
+		return getValuePercent(current, minValue, maxValue);
+	}
+	getChannelPercentValue(channel, percent) {
+		const { minValue, maxValue, step } = this.getChannelRange(channel);
+		return snapValueToStep(getPercentValue(percent, minValue, maxValue, step), minValue, maxValue, step);
+	}
+	withChannelValue(channel, value) {
+		const { minValue, maxValue } = this.getChannelRange(channel);
+		if (channel in this) {
+			const clone = this.clone();
+			clone[channel] = clampValue(value, minValue, maxValue);
+			return clone;
+		}
+		throw new Error(`Unsupported color channel: ${channel}`);
+	}
+	incrementChannel(channel, stepSize) {
+		const { minValue, maxValue, step } = this.getChannelRange(channel);
+		const value = snapValueToStep(clampValue(this.getChannelValue(channel) + stepSize, minValue, maxValue), minValue, maxValue, step);
+		return this.withChannelValue(channel, value);
+	}
+	decrementChannel(channel, stepSize) {
+		return this.incrementChannel(channel, -stepSize);
+	}
+	isEqual(color) {
+		return equalsRecord(this.toJSON(), color.toJSON()) && this.getChannelValue("alpha") === color.getChannelValue("alpha");
+	}
+};
+var RGBColor = class RGBColor extends ColorBase {
+	red;
+	green;
+	blue;
+	alpha;
+	constructor(red, green, blue, alpha) {
+		super();
+		this.red = red;
+		this.green = green;
+		this.blue = blue;
+		this.alpha = alpha;
+	}
+	static parse(value) {
+		const colors = [];
+		if (HEX_COLOR_REGEX.test(value) && [
+			4,
+			5,
+			7,
+			9
+		].includes(value.length)) {
+			const digits = (value.length < 6 ? value.replace(HEX_STARTING_REGEX, "$&$&") : value).slice(1).split("");
+			while (digits.length > 0) colors.push(parseInt(digits.splice(0, 2).join(""), 16));
+			colors[3] = colors[3] !== void 0 ? colors[3] / 255 : void 0;
+		}
+		const match = value.match(RGB_COLOR_REGEX);
+		if (match?.[1] !== void 0) {
+			const parsed = match[1].split(",").map((part) => Number(part.trim())).map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1));
+			colors.length = 0;
+			colors.push(...parsed);
+		}
+		if (colors.length < 3) return void 0;
+		return new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
+	}
+	toString(format = "css") {
+		switch (format) {
+			case "hex": return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
+			case "hexa": return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0") + Math.round(this.alpha * 255).toString(16).padStart(2, "0")).toUpperCase();
+			case "rgb": return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+			case "css":
+			case "rgba": return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
+			case "hsl": return this.toHSL().toString("hsl");
+			case "hsb": return this.toHSB().toString("hsb");
+			default: return this.toFormat(format).toString(format);
+		}
+	}
+	toFormat(format) {
+		switch (format) {
+			case "rgba": return this;
+			case "hsba": return this.toHSB();
+			case "hsla": return this.toHSL();
+			default: throw new Error(`Unsupported color conversion: rgb -> ${format}`);
+		}
+	}
+	toHSB() {
+		const red = this.red / 255;
+		const green = this.green / 255;
+		const blue = this.blue / 255;
+		const min = Math.min(red, green, blue);
+		const brightness = Math.max(red, green, blue);
+		const chroma = brightness - min;
+		const saturation = brightness === 0 ? 0 : chroma / brightness;
+		let hue = 0;
+		if (chroma !== 0) {
+			switch (brightness) {
+				case red:
+					hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+					break;
+				case green:
+					hue = (blue - red) / chroma + 2;
+					break;
+				case blue: hue = (red - green) / chroma + 4;
+			}
+			hue /= 6;
+		}
+		return new HSBColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(brightness * 100, 2), toFixedNumber(this.alpha, 2));
+	}
+	toHSL() {
+		const red = this.red / 255;
+		const green = this.green / 255;
+		const blue = this.blue / 255;
+		const min = Math.min(red, green, blue);
+		const max = Math.max(red, green, blue);
+		const lightness = (max + min) / 2;
+		const chroma = max - min;
+		let hue = 0;
+		let saturation = 0;
+		if (chroma !== 0) {
+			saturation = chroma / (lightness < .5 ? max + min : 2 - max - min);
+			switch (max) {
+				case red:
+					hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+					break;
+				case green:
+					hue = (blue - red) / chroma + 2;
+					break;
+				case blue: hue = (red - green) / chroma + 4;
+			}
+			hue /= 6;
+		}
+		return new HSLColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(lightness * 100, 2), toFixedNumber(this.alpha, 2));
+	}
+	clone() {
+		return new RGBColor(this.red, this.green, this.blue, this.alpha);
+	}
+	getChannelRange(channel) {
+		switch (channel) {
+			case "red":
+			case "green":
+			case "blue": return {
+				minValue: 0,
+				maxValue: 255,
+				step: 1,
+				pageSize: 17
+			};
+			case "alpha": return {
+				minValue: 0,
+				maxValue: 1,
+				step: .01,
+				pageSize: .1
+			};
+			default: throw new Error(`Unknown color channel: ${channel}`);
+		}
+	}
+	toJSON() {
+		return {
+			r: this.red,
+			g: this.green,
+			b: this.blue,
+			a: this.alpha
+		};
+	}
+	getFormat() {
+		return "rgba";
+	}
+};
+const HEX_COLOR_REGEX = /^#[\da-f]+$/i;
+const RGB_COLOR_REGEX = /^rgba?\((.*)\)$/;
+const HEX_STARTING_REGEX = /[^#]/gi;
+var HSLColor = class HSLColor extends ColorBase {
+	hue;
+	saturation;
+	lightness;
+	alpha;
+	constructor(hue, saturation, lightness, alpha) {
+		super();
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.alpha = alpha;
+	}
+	static parse(value) {
+		const match = value.match(HSL_REGEX);
+		if (match === null) return void 0;
+		const [h, s, l, a] = (match[1] ?? match[2] ?? "").split(",").map((n) => Number(n.trim().replace("%", "")));
+		return new HSLColor(mod(h ?? 0, 360), clampValue(s ?? 0, 0, 100), clampValue(l ?? 0, 0, 100), clampValue(a ?? 1, 0, 1));
+	}
+	toString(format = "css") {
+		switch (format) {
+			case "hex": return this.toRGB().toString("hex");
+			case "hexa": return this.toRGB().toString("hexa");
+			case "hsl": return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
+			case "css":
+			case "hsla": return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
+			case "hsb": return this.toHSB().toString("hsb");
+			case "rgb": return this.toRGB().toString("rgb");
+			default: return this.toFormat(format).toString(format);
+		}
+	}
+	toFormat(format) {
+		switch (format) {
+			case "hsla": return this;
+			case "hsba": return this.toHSB();
+			case "rgba": return this.toRGB();
+			default: throw new Error(`Unsupported color conversion: hsl -> ${format}`);
+		}
+	}
+	toHSB() {
+		const saturation = this.saturation / 100;
+		const lightness = this.lightness / 100;
+		const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+		const next = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+		return new HSBColor(toFixedNumber(this.hue, 2), toFixedNumber(next * 100, 2), toFixedNumber(brightness * 100, 2), toFixedNumber(this.alpha, 2));
+	}
+	toRGB() {
+		const hue = this.hue;
+		const saturation = this.saturation / 100;
+		const lightness = this.lightness / 100;
+		const a = saturation * Math.min(lightness, 1 - lightness);
+		const fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+		return new RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), toFixedNumber(this.alpha, 2));
+	}
+	clone() {
+		return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
+	}
+	getChannelRange(channel) {
+		switch (channel) {
+			case "hue": return {
+				minValue: 0,
+				maxValue: 360,
+				step: 1,
+				pageSize: 15
+			};
+			case "saturation":
+			case "lightness": return {
+				minValue: 0,
+				maxValue: 100,
+				step: 1,
+				pageSize: 10
+			};
+			case "alpha": return {
+				minValue: 0,
+				maxValue: 1,
+				step: .01,
+				pageSize: .1
+			};
+			default: throw new Error(`Unknown color channel: ${channel}`);
+		}
+	}
+	toJSON() {
+		return {
+			h: this.hue,
+			s: this.saturation,
+			l: this.lightness,
+			a: this.alpha
+		};
+	}
+	getFormat() {
+		return "hsla";
+	}
+};
+const HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
+var HSBColor = class HSBColor extends ColorBase {
+	hue;
+	saturation;
+	brightness;
+	alpha;
+	constructor(hue, saturation, brightness, alpha) {
+		super();
+		this.hue = hue;
+		this.saturation = saturation;
+		this.brightness = brightness;
+		this.alpha = alpha;
+	}
+	static parse(value) {
+		const match = value.match(HSB_REGEX);
+		if (match === null) return void 0;
+		const [h, s, b, a] = (match[1] ?? match[2] ?? "").split(",").map((n) => Number(n.trim().replace("%", "")));
+		return new HSBColor(mod(h ?? 0, 360), clampValue(s ?? 0, 0, 100), clampValue(b ?? 0, 0, 100), clampValue(a ?? 1, 0, 1));
+	}
+	toString(format = "css") {
+		switch (format) {
+			case "css": return this.toHSL().toString("css");
+			case "hex": return this.toRGB().toString("hex");
+			case "hexa": return this.toRGB().toString("hexa");
+			case "hsb": return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`;
+			case "hsba": return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
+			case "hsl": return this.toHSL().toString("hsl");
+			case "rgb": return this.toRGB().toString("rgb");
+			default: return this.toFormat(format).toString(format);
+		}
+	}
+	toFormat(format) {
+		switch (format) {
+			case "hsba": return this;
+			case "hsla": return this.toHSL();
+			case "rgba": return this.toRGB();
+			default: throw new Error(`Unsupported color conversion: hsb -> ${format}`);
+		}
+	}
+	toHSL() {
+		const saturation = this.saturation / 100;
+		const brightness = this.brightness / 100;
+		const lightness = brightness * (1 - saturation / 2);
+		const next = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+		return new HSLColor(toFixedNumber(this.hue, 2), toFixedNumber(next * 100, 2), toFixedNumber(lightness * 100, 2), toFixedNumber(this.alpha, 2));
+	}
+	toRGB() {
+		const hue = this.hue;
+		const saturation = this.saturation / 100;
+		const brightness = this.brightness / 100;
+		const fn = (n, k = (n + hue / 60) % 6) => brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+		return new RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), toFixedNumber(this.alpha, 2));
+	}
+	clone() {
+		return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
+	}
+	getChannelRange(channel) {
+		switch (channel) {
+			case "hue": return {
+				minValue: 0,
+				maxValue: 360,
+				step: 1,
+				pageSize: 15
+			};
+			case "saturation":
+			case "brightness": return {
+				minValue: 0,
+				maxValue: 100,
+				step: 1,
+				pageSize: 10
+			};
+			case "alpha": return {
+				minValue: 0,
+				maxValue: 1,
+				step: .01,
+				pageSize: .1
+			};
+			default: throw new Error(`Unknown color channel: ${channel}`);
+		}
+	}
+	toJSON() {
+		return {
+			h: this.hue,
+			s: this.saturation,
+			b: this.brightness,
+			a: this.alpha
+		};
+	}
+	getFormat() {
+		return "hsba";
+	}
+};
+const HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
+/** Parse any supported color string; named colors resolve to hex first. */
+function parseColor(value) {
+	const native = nativeColorMap.get(value);
+	if (native !== void 0) return parseColor(native);
+	const result = RGBColor.parse(value) ?? HSBColor.parse(value) ?? HSLColor.parse(value);
+	if (result === void 0) throw new Error(`Invalid color value: ${value}`);
+	return result;
+}
+export { parseColor };
+
+//# sourceMappingURL=color.js.map

package/dist/color-picker/examples/basic.html

@@ -10,7 +10,7 @@ const machine = colorPicker({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
   <label
-    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+    class={["block transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled }]}
     {...machine.getLabelProps()}
   >Color</label>
 
@@ -18,22 +18,22 @@ const machine = colorPicker({
     <button
       class={["secondary s-sm grid h-7 w-10 place-items-center", { "cursor-not-allowed opacity-60": machine.disabled }]}
       {...machine.getTriggerProps()}
-    ><span aria-hidden="true" class="h-4 w-8 rounded-sm border border-solid border-border" {...machine.getSwatchProps({ value: machine.valueAsString })}> </span></button>
+    ><span aria-hidden="true" class="h-4 w-8 rounded-sm border" {...machine.getSwatchProps({ value: machine.valueAsString })}> </span></button>
     <span
-      class="font-mono text-sm text-text transition-colors duration-fast ease-decelerate"
+      class="type-code transition-colors duration-fast ease-decelerate"
       {...machine.getValueTextProps()}
     >{machine.valueAsString}</span>
     <button
       class="ghost icon s-sm grid h-7 w-7 place-items-center"
       {...machine.getEyeDropperTriggerProps()}
-    ><span class="i-lucide-pipette text-sm" aria-hidden="true"></span></button>
+    ><span class="i-lucide-pipette type-code" aria-hidden="true"></span></button>
     <div
-      class={["absolute left-0 top-full z-dropdown mt-1 w-full max-w-[16rem] origin-top rounded-lg border border-solid border-border bg-surface-raised p-3 shadow-lg transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
+      class={["absolute left-0 top-full z-dropdown mt-1 w-full max-w-[16rem] origin-top rounded-lg border bg-surface-raised p-3 shadow-lg transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
       {...machine.getPositionerProps()}
     >
       <div class="flex flex-col gap-3" {...machine.getContentProps()}>
         <div
-          class="relative h-40 w-full rounded-md border border-solid border-border"
+          class="relative h-40 w-full rounded-md border"
           {...machine.getAreaProps()}
         >
           <div class="absolute inset-0 rounded-md"
@@ -54,10 +54,10 @@ const machine = colorPicker({
         </div>
         <div class="flex items-center gap-2"
           {...machine.getChannelSliderProps({ channel: "hue" })}>
-          <span class="w-12 text-xs text-text-muted"
+          <span class="w-12 type-caption text-muted"
             {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
           <div
-            class="relative h-3 flex-1 rounded-full border border-solid border-border"
+            class="relative h-3 flex-1 rounded-full border"
             {...machine.getChannelSliderTrackProps({ channel: "hue" })}
           >
             <div
@@ -65,15 +65,15 @@ const machine = colorPicker({
               {...machine.getChannelSliderThumbProps({ channel: "hue" })}
             ></div>
           </div>
-          <span class="w-8 text-right font-mono text-xs text-text-muted"
+          <span class="w-8 text-right type-code text-muted"
             {...machine.getChannelSliderValueTextProps({ channel: "hue" })}>{machine.getChannelValue("hue")}</span>
         </div>
         <div class="flex items-center gap-2"
           {...machine.getChannelSliderProps({ channel: "alpha" })}>
-          <span class="w-12 text-xs text-text-muted"
+          <span class="w-12 type-caption text-muted"
             {...machine.getChannelSliderLabelProps({ channel: "alpha" })}>Alpha</span>
           <div
-            class="relative h-3 flex-1 rounded-full border border-solid border-border"
+            class="relative h-3 flex-1 rounded-full border"
             {...machine.getChannelSliderTrackProps({ channel: "alpha" })}
           >
             <div
@@ -81,16 +81,16 @@ const machine = colorPicker({
               {...machine.getChannelSliderThumbProps({ channel: "alpha" })}
             ></div>
           </div>
-          <span class="w-8 text-right font-mono text-xs text-text-muted"
+          <span class="w-8 text-right type-code text-muted"
             {...machine.getChannelSliderValueTextProps({ channel: "alpha" })}>{machine.getChannelValue("alpha")}</span>
         </div>
         <div class="flex items-center gap-2">
           <input
-            class="w-full font-mono"
+            class="w-full"
             {...machine.getChannelInputProps({ channel: "hex" })}
           />
           <select
-            class="h-7 rounded-md border border-solid border-border bg-surface-raised px-1 text-xs text-text"
+            class="h-7"
             {...machine.getFormatSelectProps()}
           >
             <option value="hex">hex</option>

package/dist/color-picker/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/color-picker/examples/basic.html
+var basic_default = "<!-- reconstructed from the canonical element -->\n<script lang=\"ts\">\nimport { colorPicker } from \"../color-picker.presentation.ts\";\n\nconst machine = colorPicker({\n  value: \"#3b82f6\",\n  disabled: false,\n  name: \"\",\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label\n    class={[\"block transition-colors duration-fast ease-decelerate\", { \"opacity-50 cursor-not-allowed\": machine.disabled }]}\n    {...machine.getLabelProps()}\n  >Color</label>\n\n  <div class=\"relative flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary s-sm grid h-7 w-10 place-items-center\", { \"cursor-not-allowed opacity-60\": machine.disabled }]}\n      {...machine.getTriggerProps()}\n    ><span aria-hidden=\"true\" class=\"h-4 w-8 rounded-sm border\" {...machine.getSwatchProps({ value: machine.valueAsString })}> </span></button>\n    <span\n      class=\"type-code transition-colors duration-fast ease-decelerate\"\n      {...machine.getValueTextProps()}\n    >{machine.valueAsString}</span>\n    <button\n      class=\"ghost icon s-sm grid h-7 w-7 place-items-center\"\n      {...machine.getEyeDropperTriggerProps()}\n    ><span class=\"i-lucide-pipette type-code\" aria-hidden=\"true\"></span></button>\n    <div\n      class={[\"absolute left-0 top-full z-dropdown mt-1 w-full max-w-[16rem] origin-top rounded-lg border bg-surface-raised p-3 shadow-lg transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.open }]}\n      {...machine.getPositionerProps()}\n    >\n      <div class=\"flex flex-col gap-3\" {...machine.getContentProps()}>\n        <div\n          class=\"relative h-40 w-full rounded-md border\"\n          {...machine.getAreaProps()}\n        >\n          <div class=\"absolute inset-0 rounded-md\"\n            {...machine.getAreaBackgroundProps()}>\n            <div\n              class=\"absolute inset-0 rounded-md\"\n              style=\"background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))\"\n            ></div>\n            <div\n              class=\"absolute inset-0 rounded-md\"\n              style=\"background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))\"\n            ></div>\n          </div>\n          <div\n            class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg transition-transform duration-fast ease-decelerate\"\n            {...machine.getAreaThumbProps()}\n          ></div>\n        </div>\n        <div class=\"flex items-center gap-2\"\n          {...machine.getChannelSliderProps({ channel: \"hue\" })}>\n          <span class=\"w-12 type-caption text-muted\"\n            {...machine.getChannelSliderLabelProps({ channel: \"hue\" })}>Hue</span>\n          <div\n            class=\"relative h-3 flex-1 rounded-full border\"\n            {...machine.getChannelSliderTrackProps({ channel: \"hue\" })}\n          >\n            <div\n              class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n              {...machine.getChannelSliderThumbProps({ channel: \"hue\" })}\n            ></div>\n          </div>\n          <span class=\"w-8 text-right type-code text-muted\"\n            {...machine.getChannelSliderValueTextProps({ channel: \"hue\" })}>{machine.getChannelValue(\"hue\")}</span>\n        </div>\n        <div class=\"flex items-center gap-2\"\n          {...machine.getChannelSliderProps({ channel: \"alpha\" })}>\n          <span class=\"w-12 type-caption text-muted\"\n            {...machine.getChannelSliderLabelProps({ channel: \"alpha\" })}>Alpha</span>\n          <div\n            class=\"relative h-3 flex-1 rounded-full border\"\n            {...machine.getChannelSliderTrackProps({ channel: \"alpha\" })}\n          >\n            <div\n              class=\"absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg\"\n              {...machine.getChannelSliderThumbProps({ channel: \"alpha\" })}\n            ></div>\n          </div>\n          <span class=\"w-8 text-right type-code text-muted\"\n            {...machine.getChannelSliderValueTextProps({ channel: \"alpha\" })}>{machine.getChannelValue(\"alpha\")}</span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <input\n            class=\"w-full\"\n            {...machine.getChannelInputProps({ channel: \"hex\" })}\n          />\n          <select\n            class=\"h-7\"\n            {...machine.getFormatSelectProps()}\n          >\n            <option value=\"hex\">hex</option>\n            <option value=\"rgb\">rgb</option>\n            <option value=\"hsl\">hsl</option>\n            <option value=\"hsb\">hsb</option>\n          </select>\n        </div>\n        <input type=\"hidden\" {...machine.getHiddenInputProps()} />\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/color-picker/examples/hue-wheel.html

@@ -7,17 +7,17 @@ const machine = colorPicker({
 });
 </script>
 <div
-  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  class="mx-auto w-full max-w-[16rem] rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
   <div class="mb-3 flex items-center justify-between">
-    <label class="text-sm font-semibold text-text"
+    <label
       {...machine.getLabelProps()}>Spectrum</label>
-    <span class="font-mono text-xs text-text-muted"
+    <span class="type-code text-muted"
       {...machine.getValueTextProps()}>{machine.valueAsString}</span>
   </div>
   <div class="flex flex-col gap-3" {...machine.getContentProps()}>
     <div
-      class="relative h-36 w-full rounded-lg border border-solid border-border"
+      class="relative h-36 w-full rounded-lg border"
       {...machine.getAreaProps()}>
       <div class="absolute inset-0 rounded-lg"
         {...machine.getAreaBackgroundProps()}>
@@ -32,24 +32,24 @@ const machine = colorPicker({
     </div>
     <div class="flex items-center gap-2"
       {...machine.getChannelSliderProps({ channel: "hue" })}>
-      <span class="w-10 text-xs text-text-muted"
+      <span class="w-10 type-caption text-muted"
         {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
       <div
-        class="relative h-3 flex-1 rounded-full border border-solid border-border"
+        class="relative h-3 flex-1 rounded-full border"
         {...machine.getChannelSliderTrackProps({ channel: "hue" })}>
         <div
           class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
           {...machine.getChannelSliderThumbProps({ channel: "hue" })}></div>
       </div>
-      <span class="w-8 text-right font-mono text-xs text-text-muted"
+      <span class="w-8 text-right type-code text-muted"
         {...machine.getChannelSliderValueTextProps({ channel: "hue" })}>{machine.getChannelValue("hue")}</span>
     </div>
     <div class="flex items-center gap-2">
       <span aria-hidden="true"
-        class="h-7 w-7 shrink-0 rounded-md border border-solid border-border"
+        class="h-7 w-7 shrink-0 rounded-md border"
         {...machine.getSwatchProps({ value: machine.valueAsString })}></span>
       <input
-        class="w-full font-mono text-xs"
+        class="w-full"
         {...machine.getChannelInputProps({ channel: "hex" })} />
     </div>
     <input type="hidden" {...machine.getHiddenInputProps()} />