@spinjs/components 0.0.0-stage → 0.1.0-preview.1

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

@@ -0,0 +1,41 @@
+import { ColorChannel, parseColor } from "@zag-js/color-utils";
+export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba";
+export interface ColorPickerContext {
+  value: string;
+  format: ColorFormat;
+  activeChannel: ColorChannel | null;
+  areaX: ColorChannel;
+  areaY: ColorChannel;
+  disabled: boolean;
+  readOnly: boolean;
+  closeOnSelect: boolean;
+  inline: boolean;
+  dir: "ltr" | "rtl";
+  name: string | undefined;
+}
+export type ColorPickerState = "idle" | "focused" | "active" | "dragging";
+/** The color-picker's arguments: the values the host may set. */
+export interface ColorPickerArgs {
+  value?: string;
+  format?: string;
+  inline?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  closeOnSelect?: boolean;
+  defaultInline?: boolean;
+  dir?: string;
+  name?: string;
+}
+export declare const parse: (value: string, fallback: string) => {
+  color: ReturnType<typeof parseColor>;
+  raw: string;
+};
+export declare const serialize: (color: ReturnType<typeof parseColor>, format: ColorFormat) => string;
+export type AreaFormat = "hsla" | "hsba";
+export declare const isFormat: (raw: unknown) => raw is ColorFormat;
+export declare function initial(args: ColorPickerArgs, authored: (name: string) => boolean): ColorPickerContext;
+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

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

@@ -0,0 +1,71 @@
+import { defaultTwin } from "@spinjs/runtime";
+import { parseColor } from "@zag-js/color-utils";
+// src/color-picker/color-picker.state.ts
+const parse = (value, fallback) => {
+	try {
+		return {
+			color: parseColor(value),
+			raw: value
+		};
+	} catch {
+		return {
+			color: parseColor(fallback),
+			raw: fallback
+		};
+	}
+};
+const serialize = (color, format) => {
+	try {
+		return color.toString(format);
+	} catch {
+		return color.toString("hex");
+	}
+};
+const FORMATS = [
+	"hex",
+	"hexa",
+	"rgb",
+	"rgba",
+	"hsl",
+	"hsla",
+	"hsb",
+	"hsba"
+];
+const isFormat = (raw) => typeof raw === "string" && FORMATS.includes(raw);
+const textOf = (raw, fallback) => typeof raw === "string" && raw.length > 0 ? raw : fallback;
+/**
+* The color the host wrote, normalized the way the machine's own assigns
+* would: the value first in hex, then reserialized in the format — a color
+* with an alpha loses it in hex and keeps it in the format.
+*/
+const valueOf = (raw, format) => {
+	const hex = serialize(parse(textOf(raw, "#000000"), "#000000").color, "hex");
+	return serialize(parse(hex, "#000000").color, format);
+};
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const format = written("format") ? isFormat(args.format) ? args.format : "hex" : "hex";
+	return {
+		value: written("value") ? valueOf(args.value, format) : valueOf("#000000", format),
+		format,
+		activeChannel: null,
+		areaX: "saturation",
+		areaY: "brightness",
+		disabled: written("disabled") ? args.disabled === true : false,
+		readOnly: written("readOnly") ? args.readOnly === true : false,
+		closeOnSelect: written("closeOnSelect") ? args.closeOnSelect === true : false,
+		inline: written("inline") ? args.inline === true : false,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0
+	};
+}
+function startOpen(raw) {
+	if (typeof raw["open"] === "boolean") return raw["open"];
+	return raw["inline"] === true || raw["defaultOpen"] === true;
+}
+/** True when the panel shows; inline is always open. */
+const isOpenPhase = (phase, inline) => inline || phase === "active" || phase === "dragging";
+const valueAsString = (ctx) => ctx.value;
+export { initial, isFormat, isOpenPhase, parse, serialize, startOpen, valueAsString };
+
+//# sourceMappingURL=color-picker.state.js.map

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

@@ -0,0 +1,21 @@
+import { ColorPickerContext } from "./color-picker.state.js";
+import { ColorPickerEvents } from "./color-picker.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/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">;
+export declare const setActiveChannel: ColorPickerAssign<"CHANNEL_INPUT.FOCUS">;
+export declare const setChannelFromInput: ColorPickerAssign<"CHANNEL_INPUT.BLUR" | "CHANNEL_INPUT.CHANGE">;
+export declare const setAreaFromPoint: ColorPickerAssign<"AREA.POINTER_DOWN" | "AREA.POINTER_MOVE">;
+export declare const setChannelFromPoint: ColorPickerAssign<"CHANNEL_SLIDER.POINTER_DOWN" | "CHANNEL_SLIDER.POINTER_MOVE">;
+export declare const setValue: ColorPickerAssign<"VALUE.SET">;
+export declare const setFormat: ColorPickerAssign<"FORMAT.SET">;
+export declare const clearActiveChannel: ColorPickerAssign<"AREA.ACTIVATE">;
+export declare const setSliderChannel: ColorPickerAssign<"CHANNEL_SLIDER.ACTIVATE">;
+export declare const stepAreaValue: ColorPickerAssign<"AREA.ARROW">;
+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

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

@@ -0,0 +1,99 @@
+import { isFormat, parse, serialize } from "./color-picker.state.js";
+// src/color-picker/color-picker.transitions.ts
+const setValueFromSwatch = (ctx, event) => {
+	const { color } = parse(event.value, ctx.value);
+	return { value: serialize(color, ctx.format) };
+};
+const setActiveChannel = (_ctx, event) => {
+	return event.channel === "hex" ? {} : { activeChannel: event.channel };
+};
+const setChannelFromInput = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	if (event.channel === "alpha") {
+		const n = parseFloat(event.value);
+		if (Number.isNaN(n)) return {};
+		return { value: serialize(color.withChannelValue("alpha", n), ctx.format) };
+	}
+	if (event.channel === "hex") {
+		const { color: next } = parse(event.value.startsWith("#") ? event.value : `#${event.value}`, ctx.value);
+		const alpha = color.getChannelValue("alpha");
+		return { value: serialize(next.withChannelValue("alpha", alpha), ctx.format) };
+	}
+	const n = parseFloat(event.value);
+	if (Number.isNaN(n)) return {};
+	return { value: serialize(color.withChannelValue(event.channel, n), ctx.format) };
+};
+const setAreaFromPoint = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const v = color.toFormat(areaFormat);
+	const next = v.withChannelValue(ctx.areaX, v.getChannelPercentValue(ctx.areaX, event.x)).withChannelValue(ctx.areaY, v.getChannelPercentValue(ctx.areaY, 1 - event.y));
+	return { value: serialize(next, ctx.format) };
+};
+const setChannelFromPoint = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const channel = event.channel;
+	const native = () => {
+		const next = color.withChannelValue(channel, color.getChannelPercentValue(channel, event.percent));
+		return serialize(next, ctx.format);
+	};
+	if (channel === "alpha" || channel === "red" || channel === "green" || channel === "blue") return { value: native() };
+	try {
+		const source = color.toFormat(areaFormat);
+		const next = source.withChannelValue(channel, source.getChannelPercentValue(channel, event.percent));
+		return { value: serialize(next, ctx.format) };
+	} catch {
+		return { value: native() };
+	}
+};
+const setValue = (ctx, event) => {
+	const { color } = parse(event.value, ctx.value);
+	return { value: serialize(color, ctx.format) };
+};
+const setFormat = (ctx, event) => {
+	if (!isFormat(event.format)) return {};
+	const { color } = parse(ctx.value, "#000000");
+	return {
+		format: event.format,
+		value: serialize(color, event.format)
+	};
+};
+const clearActiveChannel = () => ({ activeChannel: null });
+const setSliderChannel = (_ctx, event) => ({ activeChannel: event.channel });
+const stepAreaValue = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const v = color.toFormat(areaFormat);
+	const channel = event.channel === "x" ? ctx.areaX : ctx.areaY;
+	const stepped = event.delta > 0 ? v.incrementChannel(channel, event.delta) : v.decrementChannel(channel, -event.delta);
+	return { value: serialize(stepped, ctx.format) };
+};
+const boundAreaValue = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const v = color.toFormat(areaFormat);
+	const channel = event.channel === "x" ? ctx.areaX : ctx.areaY;
+	const range = v.getChannelRange(channel);
+	if (range === void 0) return {};
+	return { value: serialize(v.withChannelValue(channel, event.toMax ? range.maxValue : range.minValue), ctx.format) };
+};
+const stepChannelValue = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const v = event.channel === "alpha" || event.channel === "red" || event.channel === "green" || event.channel === "blue" ? color : color.toFormat(areaFormat);
+	const stepped = event.delta > 0 ? v.incrementChannel(event.channel, event.delta) : v.decrementChannel(event.channel, -event.delta);
+	return { value: serialize(stepped, ctx.format) };
+};
+const boundChannelValue = (ctx, event) => {
+	const { color } = parse(ctx.value, "#000000");
+	const areaFormat = ctx.format.startsWith("hsl") ? "hsla" : "hsba";
+	const v = event.channel === "alpha" || event.channel === "red" || event.channel === "green" || event.channel === "blue" ? color : color.toFormat(areaFormat);
+	const range = v.getChannelRange(event.channel);
+	if (range === void 0) return {};
+	return { value: serialize(v.withChannelValue(event.channel, event.toMax ? range.maxValue : range.minValue), ctx.format) };
+};
+const isOpenControlled = (ctx) => ctx.inline;
+export { boundAreaValue, boundChannelValue, clearActiveChannel, isOpenControlled, setActiveChannel, setAreaFromPoint, setChannelFromInput, setChannelFromPoint, setFormat, setSliderChannel, setValue, setValueFromSwatch, stepAreaValue, stepChannelValue };
+
+//# sourceMappingURL=color-picker.transitions.js.map

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

@@ -0,0 +1,106 @@
+<!-- reconstructed from the canonical element -->
+<script lang="ts">
+import { colorPicker } from "../color-picker.presentation.js";
+
+const machine = colorPicker({
+  value: "#3b82f6",
+  disabled: false,
+  name: "",
+});
+</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 }]}
+    {...machine.getLabelProps()}
+  >Color</label>
+
+  <div class="relative flex items-center gap-2" {...machine.getControlProps()}>
+    <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
+      class="font-mono text-sm text-text 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>
+    <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 }]}
+      {...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"
+          {...machine.getAreaProps()}
+        >
+          <div class="absolute inset-0 rounded-md"
+            {...machine.getAreaBackgroundProps()}>
+            <div
+              class="absolute inset-0 rounded-md"
+              style="background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))"
+            ></div>
+            <div
+              class="absolute inset-0 rounded-md"
+              style="background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))"
+            ></div>
+          </div>
+          <div
+            class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg transition-transform duration-fast ease-decelerate"
+            {...machine.getAreaThumbProps()}
+          ></div>
+        </div>
+        <div class="flex items-center gap-2"
+          {...machine.getChannelSliderProps({ channel: "hue" })}>
+          <span class="w-12 text-xs text-text-muted"
+            {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
+          <div
+            class="relative h-3 flex-1 rounded-full border border-solid border-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"
+            {...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"
+            {...machine.getChannelSliderLabelProps({ channel: "alpha" })}>Alpha</span>
+          <div
+            class="relative h-3 flex-1 rounded-full border border-solid border-border"
+            {...machine.getChannelSliderTrackProps({ channel: "alpha" })}
+          >
+            <div
+              class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
+              {...machine.getChannelSliderThumbProps({ channel: "alpha" })}
+            ></div>
+          </div>
+          <span class="w-8 text-right font-mono text-xs text-text-muted"
+            {...machine.getChannelSliderValueTextProps({ channel: "alpha" })}>{machine.getChannelValue("alpha")}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <input
+            class="w-full font-mono"
+            {...machine.getChannelInputProps({ channel: "hex" })}
+          />
+          <select
+            class="h-7 rounded-md border border-solid border-border bg-surface-raised px-1 text-xs text-text"
+            {...machine.getFormatSelectProps()}
+          >
+            <option value="hex">hex</option>
+            <option value="rgb">rgb</option>
+            <option value="hsl">hsl</option>
+            <option value="hsb">hsb</option>
+          </select>
+        </div>
+        <input type="hidden" {...machine.getHiddenInputProps()} />
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { colorPicker } from "../color-picker.presentation.js";
+
+const machine = colorPicker({
+  value: "#8b5cf6",
+  inline: true,
+});
+</script>
+<div
+  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-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"
+      {...machine.getLabelProps()}>Spectrum</label>
+    <span class="font-mono text-xs text-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"
+      {...machine.getAreaProps()}>
+      <div class="absolute inset-0 rounded-lg"
+        {...machine.getAreaBackgroundProps()}>
+        <div class="absolute inset-0 rounded-lg"
+          style="background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))"></div>
+        <div class="absolute inset-0 rounded-lg"
+          style="background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))"></div>
+      </div>
+      <div
+        class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
+        {...machine.getAreaThumbProps()}></div>
+    </div>
+    <div class="flex items-center gap-2"
+      {...machine.getChannelSliderProps({ channel: "hue" })}>
+      <span class="w-10 text-xs text-text-muted"
+        {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
+      <div
+        class="relative h-3 flex-1 rounded-full border border-solid border-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"
+        {...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"
+        {...machine.getSwatchProps({ value: machine.valueAsString })}></span>
+      <input
+        class="w-full font-mono text-xs"
+        {...machine.getChannelInputProps({ channel: "hex" })} />
+    </div>
+    <input type="hidden" {...machine.getHiddenInputProps()} />
+  </div>
+</div>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { colorPicker } from "../color-picker.presentation.js";
+
+const machine = colorPicker({
+  value: "#10b981ff",
+  format: "hexa",
+  inline: true,
+});
+</script>
+<div
+  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  {...machine.getRootProps()}>
+  <div class="mb-3 flex items-center justify-between">
+    <label class="text-sm font-medium text-text"
+      {...machine.getLabelProps()}>Inline Picker</label>
+    <span
+      class="rounded-md border border-solid border-border bg-surface px-2 py-1 font-mono text-xs text-text"
+      {...machine.getValueTextProps()}>{machine.valueAsString}</span>
+  </div>
+  <div class="flex flex-col gap-3" {...machine.getContentProps()}>
+    <div
+      class="relative h-40 w-full rounded-md border border-solid border-border"
+      {...machine.getAreaProps()}>
+      <div class="absolute inset-0 rounded-md"
+        {...machine.getAreaBackgroundProps()}>
+        <div class="absolute inset-0 rounded-md"
+          style="background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))"></div>
+        <div class="absolute inset-0 rounded-md"
+          style="background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))"></div>
+      </div>
+      <div
+        class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
+        {...machine.getAreaThumbProps()}></div>
+    </div>
+    <div class="flex items-center gap-2"
+      {...machine.getChannelSliderProps({ channel: "hue" })}>
+      <span class="w-12 text-xs text-text-muted"
+        {...machine.getChannelSliderLabelProps({ channel: "hue" })}>Hue</span>
+      <div
+        class="relative h-3 flex-1 rounded-full border border-solid border-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>
+    </div>
+    <div class="flex items-center gap-2"
+      {...machine.getChannelSliderProps({ channel: "alpha" })}>
+      <span class="w-12 text-xs text-text-muted"
+        {...machine.getChannelSliderLabelProps({ channel: "alpha" })}>Alpha</span>
+      <div
+        class="relative h-3 flex-1 rounded-full border border-solid border-border"
+        {...machine.getChannelSliderTrackProps({ channel: "alpha" })}>
+        <div
+          class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
+          {...machine.getChannelSliderThumbProps({ channel: "alpha" })}></div>
+      </div>
+    </div>
+    <input type="hidden" {...machine.getHiddenInputProps()} />
+  </div>
+</div>

package/dist/color-picker/examples/with-presets.html

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { colorPicker } from "../color-picker.presentation.js";
+
+const machine = colorPicker({
+  value: "#3b82f6",
+  inline: true,
+});
+</script>
+<div
+  class="mx-auto w-full max-w-[16rem] rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  {...machine.getRootProps()}>
+  <div class="mb-3 flex items-center justify-between">
+    <label class="text-sm font-medium text-text"
+      {...machine.getLabelProps()}>Brand Swatches</label>
+    <span class="font-mono text-xs text-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-md border border-solid border-border"
+      {...machine.getAreaProps()}>
+      <div class="absolute inset-0 rounded-md"
+        {...machine.getAreaBackgroundProps()}>
+        <div class="absolute inset-0 rounded-md"
+          style="background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))"></div>
+        <div class="absolute inset-0 rounded-md"
+          style="background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))"></div>
+      </div>
+      <div
+        class="absolute h-4 w-4 rounded-full border-2 border-solid border-on-primary shadow-lg"
+        {...machine.getAreaThumbProps()}></div>
+    </div>
+    <div class="grid grid-cols-6 gap-2" {...machine.getSwatchGroupProps()}>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#ef4444" })}></button>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#f59e0b" })}></button>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#10b981" })}></button>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#3b82f6" })}></button>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#8b5cf6" })}></button>
+      <button class="bare h-6 w-6 rounded-md border border-solid border-border"
+        {...machine.getSwatchTriggerProps({ value: "#ec4899" })}></button>
+    </div>
+    <input type="hidden" {...machine.getHiddenInputProps()} />
+  </div>
+</div>

package/dist/combobox/combobox.events.d.ts

@@ -0,0 +1,61 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface ComboboxEvents {
+  "SELECTED_ITEMS.SYNC": {};
+  "HIGHLIGHTED_VALUE.SET": {
+    value: string | null;
+    keypress?: boolean;
+  };
+  "HIGHLIGHTED_VALUE.CLEAR": {};
+  "ITEM.SELECT": {
+    value: string;
+  };
+  "ITEM.CLEAR": {
+    value: string;
+  };
+  "VALUE.SET": {
+    value: readonly string[];
+  };
+  "VALUE.CLEAR": {};
+  "INPUT_VALUE.SET": {
+    value: string;
+  };
+  "OPEN": {};
+  "CLOSE": {};
+  "INPUT.FOCUS": {};
+  "INPUT.BLUR": {};
+  "INPUT.CLICK": {};
+  "INPUT.CHANGE": {
+    value: string;
+  };
+  "INPUT.ESCAPE": {};
+  "INPUT.ENTER": {};
+  "INPUT.ARROW_DOWN": {
+    value?: string;
+    keypress?: boolean;
+  };
+  "INPUT.ARROW_UP": {
+    value?: string;
+    keypress?: boolean;
+  };
+  "INPUT.HOME": {
+    value?: string;
+    keypress?: boolean;
+  };
+  "INPUT.END": {
+    value?: string;
+    keypress?: boolean;
+  };
+  "TRIGGER.CLICK": {};
+  "ITEM.CLICK": {
+    value: string;
+  };
+  "ITEM.POINTER_MOVE": {
+    value: string;
+  };
+  "ITEM.POINTER_LEAVE": {};
+  "LAYER.ESCAPE": {};
+  "LAYER.INTERACT_OUTSIDE": {};
+  "CHILDREN_CHANGE": {};
+}
+export type ComboboxEvent = EventUnion<ComboboxEvents>;
+//# sourceMappingURL=combobox.events.d.ts.map

package/dist/combobox/combobox.events.js

@@ -0,0 +1 @@
+export {};

package/dist/combobox/combobox.machine.d.ts

@@ -0,0 +1,7 @@
+import { ComboboxEvents } from "./combobox.events.js";
+import { ComboboxArgs, ComboboxContext, ComboboxState, isCustomValue, pickOutcome, stringifyValues } from "./combobox.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare const isOpenPhase: (phase: string) => boolean;
+export declare function combobox(args: ComboboxArgs | undefined, authored: (name: string) => boolean): Machine<ComboboxContext, ComboboxEvents, ComboboxState>;
+export { isCustomValue, pickOutcome, stringifyValues };
+//# sourceMappingURL=combobox.machine.d.ts.map