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

package/dist/cascade-select/cascade.state.d.ts

@@ -0,0 +1,58 @@
+import { CascadeNode } from "./cascade.presentation.js";
+export type CascadeState = "idle" | "focused" | "open";
+export interface CascadeArgs {
+  value?: string;
+  highlightedValue?: string;
+  closeOnSelect?: boolean;
+  allowParentSelection?: boolean;
+  multiple?: boolean;
+  loopFocus?: boolean;
+  highlightTrigger?: string;
+  defaultHighlightTrigger?: string;
+  collection?: unknown;
+  disabled?: boolean;
+  readOnly?: boolean;
+  dir?: string;
+  formatValue?: unknown;
+  placement?: string;
+  form?: unknown;
+  name?: string;
+  required?: boolean;
+  invalid?: boolean;
+  onFocusOutside?: unknown;
+  onInteractOutside?: unknown;
+  onPointerDownOutside?: unknown;
+  scrollToIndexFn?: unknown;
+  defaultOpen?: boolean;
+  open?: boolean;
+}
+export interface CascadeContext {
+  value: string[][];
+  highlightedValue: string[];
+  closeOnSelect: boolean;
+  allowParentSelection: boolean;
+  multiple: boolean;
+  loopFocus: boolean;
+  highlightTrigger: "click" | "hover";
+  collection: readonly CascadeNode[];
+  disabled: boolean;
+  readOnly: boolean;
+  dir: "ltr" | "rtl";
+  formatValue: unknown;
+  placement: string;
+  form: unknown;
+  name: string;
+  required: boolean;
+  invalid: boolean;
+  onFocusOutside: unknown;
+  onInteractOutside: unknown;
+  onPointerDownOutside: unknown;
+  scrollToIndexFn: unknown;
+}
+export declare function parsePath(raw: unknown): readonly string[];
+export declare function parsePaths(raw: unknown): readonly string[][];
+export declare const parseCollection: (raw: unknown) => readonly CascadeNode[];
+export declare function initial(args: CascadeArgs | undefined, authored: (name: string) => boolean): CascadeContext;
+export declare function startOpen(raw: Record<string, unknown>): boolean;
+export type { CascadeNode };
+//# sourceMappingURL=cascade.state.d.ts.map

package/dist/cascade-select/cascade.state.js

@@ -0,0 +1,97 @@
+import { coerceJsonArray, defaultTwin, isRecord } from "@spinjs/runtime";
+// src/cascade-select/cascade.state.ts
+const coerceList = (raw) => {
+	if (Array.isArray(raw)) return raw;
+	if (typeof raw !== "string" || raw.length === 0) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+};
+function parsePath(raw) {
+	if (typeof raw === "string") return raw.split(",");
+	return coerceList(raw).filter((v) => typeof v === "string");
+}
+function parsePaths(raw) {
+	const list = coerceList(raw);
+	const out = [];
+	for (const entry of list) {
+		if (typeof entry === "string") {
+			out.push(entry.split(","));
+			continue;
+		}
+		if (Array.isArray(entry)) out.push(entry.filter((v) => typeof v === "string"));
+	}
+	return out;
+}
+const parseNode = (raw) => {
+	if (!isRecord(raw)) return void 0;
+	const value = raw["value"];
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const label = typeof raw["label"] === "string" ? raw["label"] : value;
+	const disabled = raw["disabled"] === true;
+	const childrenRaw = raw["children"];
+	return {
+		value,
+		label,
+		disabled,
+		children: Array.isArray(childrenRaw) ? childrenRaw.map(parseNode).filter((n) => n !== void 0) : void 0
+	};
+};
+const parseNodes = (list) => list.flatMap((raw) => {
+	const node = parseNode(raw);
+	return node === void 0 ? [] : [node];
+});
+const collectionCache = /* @__PURE__ */ new WeakMap();
+const jsonCollections = /* @__PURE__ */ new Map();
+const parseCollection = (raw) => {
+	if (typeof raw === "object" && raw !== null) {
+		const hit = collectionCache.get(raw);
+		if (hit !== void 0) return hit;
+		const shaped = Array.isArray(raw) ? parseNodes(raw) : [];
+		collectionCache.set(raw, shaped);
+		return shaped;
+	}
+	if (typeof raw !== "string") return [];
+	const hit = jsonCollections.get(raw);
+	if (hit !== void 0) return hit;
+	const shaped = parseNodes(coerceJsonArray(raw, []));
+	jsonCollections.set(raw, shaped);
+	return shaped;
+};
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const collection = parseCollection(args["collection"]);
+	return {
+		value: written("value") ? parsePaths(args.value).map((path) => [...path]) : [],
+		highlightedValue: written("highlightedValue") ? [...parsePath(args.highlightedValue)] : [],
+		closeOnSelect: written("closeOnSelect") ? args.closeOnSelect !== false : true,
+		allowParentSelection: written("allowParentSelection") ? args.allowParentSelection === true : false,
+		multiple: written("multiple") ? args.multiple === true : false,
+		loopFocus: written("loopFocus") ? args.loopFocus === true : false,
+		highlightTrigger: written("highlightTrigger") ? args.highlightTrigger === "hover" ? "hover" : "click" : "click",
+		collection,
+		disabled: written("disabled") ? args.disabled === true : false,
+		readOnly: written("readOnly") ? args.readOnly === true : false,
+		dir: written("dir") ? args.dir === "rtl" ? "rtl" : "ltr" : "ltr",
+		formatValue: written("formatValue") ? args.formatValue : void 0,
+		placement: written("placement") && typeof args.placement === "string" && args.placement.length > 0 ? args.placement : "bottom-start",
+		form: written("form") ? args.form : void 0,
+		name: written("name") ? typeof args.name === "string" ? args.name : "" : "",
+		required: written("required") ? args.required === true : false,
+		invalid: written("invalid") ? args.invalid === true : false,
+		onFocusOutside: written("onFocusOutside") ? args.onFocusOutside : void 0,
+		onInteractOutside: written("onInteractOutside") ? args.onInteractOutside : void 0,
+		onPointerDownOutside: written("onPointerDownOutside") ? args.onPointerDownOutside : void 0,
+		scrollToIndexFn: written("scrollToIndexFn") ? args.scrollToIndexFn : void 0
+	};
+}
+function startOpen(raw) {
+	if (typeof raw["open"] === "boolean") return raw["open"];
+	return raw["defaultOpen"] === true;
+}
+export { initial, parseCollection, parsePath, parsePaths, startOpen };
+
+//# sourceMappingURL=cascade.state.js.map

package/dist/cascade-select/cascade.transitions.d.ts

@@ -0,0 +1,21 @@
+import { CascadeEvents } from "./cascade.events.js";
+import { CascadeContext } from "./cascade.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type CascadeAssign<K extends keyof CascadeEvents = keyof CascadeEvents> = AssignFor<CascadeContext, CascadeEvents, K>;
+type CascadeGuard<K extends keyof CascadeEvents = keyof CascadeEvents> = GuardFor<CascadeContext, CascadeEvents, K>;
+export declare const restoresFocus: CascadeGuard;
+export declare const setValue: CascadeAssign<"VALUE_SET">;
+export declare const clearValue: CascadeAssign<"VALUE_CLEAR">;
+export declare const setHighlightedValue: CascadeAssign<"HIGHLIGHTED_VALUE_SET">;
+export declare const clearHighlightedValue: CascadeAssign;
+export declare const selectItem: CascadeAssign<"ITEM_SELECT" | "ITEM_CLICK">;
+export declare const openWithHighlight: CascadeAssign<"TRIGGER_OPEN">;
+export declare const highlightSelected: CascadeAssign<"TRIGGER_CLICK">;
+export declare const itemClickCloseGuard: CascadeGuard<"ITEM_CLICK">;
+export declare const itemClickSelectableGuard: CascadeGuard<"ITEM_CLICK">;
+export declare const hoverHighlightGuard: CascadeGuard;
+export declare const hoverHighlightAssign: CascadeAssign<"ITEM_POINTER_ENTER">;
+export declare const itemClearAssign: CascadeAssign<"ITEM_CLEAR">;
+export declare const clearTriggerAssign: CascadeAssign<"CLEAR_TRIGGER_CLICK">;
+export {};
+//# sourceMappingURL=cascade.transitions.d.ts.map

package/dist/cascade-select/cascade.transitions.js

@@ -0,0 +1,54 @@
+import { parsePath, parsePaths } from "./cascade.state.js";
+// src/cascade-select/cascade.transitions.ts
+const samePath = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+const samePaths = (a, b) => a.length === b.length && a.every((path, i) => samePath(path, b[i] ?? []));
+const clonePath = (path) => [...path];
+const clonePaths = (paths) => paths.map((path) => [...path]);
+const related = (a, b) => {
+	const short = a.length <= b.length ? a : b;
+	return (a.length <= b.length ? b : a).slice(0, short.length).every((v, i) => v === short[i]);
+};
+const withoutRelated = (paths, path) => paths.filter((candidate) => !related(candidate, path)).map((candidate) => [...candidate]);
+const restoresFocus = (_ctx, event) => {
+	if (!("restoreFocus" in event)) return true;
+	return event.restoreFocus !== false;
+};
+const setValue = (ctx, event) => {
+	const paths = parsePaths(event.value);
+	return samePaths(ctx.value, paths) ? {} : { value: clonePaths(paths) };
+};
+const clearValue = () => ({ value: [] });
+const setHighlightedValue = (ctx, event) => {
+	const raw = event.highlightedValue !== void 0 ? event.highlightedValue : event.value;
+	const path = parsePath(raw);
+	return samePath(ctx.highlightedValue, path) ? {} : { highlightedValue: clonePath(path) };
+};
+const clearHighlightedValue = (ctx) => ctx.highlightedValue.length === 0 ? {} : { highlightedValue: [] };
+const selectPath = (ctx, path, hasChildren) => {
+	if (ctx.allowParentSelection) return {
+		value: [...withoutRelated(ctx.value, path), clonePath(path)],
+		...hasChildren ? { highlightedValue: clonePath(path) } : {}
+	};
+	if (hasChildren) return {
+		value: ctx.multiple && ctx.value.length > 0 ? [...ctx.value.slice(0, -1).map((p) => [...p]), clonePath(path)] : [clonePath(path)],
+		highlightedValue: clonePath(path)
+	};
+	if (ctx.multiple) return { value: ctx.value.some((candidate) => samePath(candidate, path)) ? ctx.value.filter((candidate) => !samePath(candidate, path)).map((candidate) => [...candidate]) : [...ctx.value.map((candidate) => [...candidate]), clonePath(path)] };
+	return { value: [clonePath(path)] };
+};
+const selectItem = (ctx, event) => selectPath(ctx, event.value, event.hasChildren);
+const openWithHighlight = (_ctx, event) => ({ highlightedValue: clonePath(event.highlight) });
+const highlightSelected = (ctx) => {
+	const last = ctx.value[ctx.value.length - 1];
+	if (last === void 0 || samePath(ctx.highlightedValue, last)) return {};
+	return { highlightedValue: clonePath(last) };
+};
+const itemClickCloseGuard = (ctx, event) => ctx.closeOnSelect && !event.hasChildren && !ctx.multiple;
+const itemClickSelectableGuard = (ctx, event) => ctx.allowParentSelection || !event.hasChildren;
+const hoverHighlightGuard = (ctx) => ctx.highlightTrigger === "hover";
+const hoverHighlightAssign = (_ctx, event) => ({ highlightedValue: event.hasChildren ? clonePath(event.value) : event.value.slice(0, -1) });
+const itemClearAssign = (ctx, event) => ctx.value.some((path) => samePath(path, event.value)) ? { value: ctx.value.filter((path) => !samePath(path, event.value)).map((path) => [...path]) } : {};
+const clearTriggerAssign = () => ({ value: [] });
+export { clearHighlightedValue, clearTriggerAssign, clearValue, highlightSelected, hoverHighlightAssign, hoverHighlightGuard, itemClearAssign, itemClickCloseGuard, itemClickSelectableGuard, openWithHighlight, restoresFocus, selectItem, setHighlightedValue, setValue };
+
+//# sourceMappingURL=cascade.transitions.js.map

package/dist/cascade-select/examples/basic.html

@@ -0,0 +1,77 @@
+<script lang="ts">
+import { cascade } from "../cascade.presentation.js";
+
+const machine = cascade({
+  collection:
+    '[{"value":"asia","label":"Asia","children":[{"value":"india","label":"India"},{"value":"japan","label":"Japan"}]},{"value":"europe","label":"Europe","children":[{"value":"france","label":"France"},{"value":"germany","label":"Germany"}]}]',
+});
+</script>
+<div class="relative w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Region</label>
+
+  <div class="flex items-center gap-1" {...machine.getControlProps()}>
+    <button
+      class={["secondary s-sm flex min-w-0 flex-1 items-center gap-2", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      {...machine.getTriggerProps()}
+    >
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getValueTextRows()} as={row} key={row.value}>
+          <span>{row.value}</span>
+        </template>
+      </span>
+      <span
+        aria-hidden="true"
+        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        {...machine.getIndicatorProps()}
+      ><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+    </button>
+    <button
+      aria-hidden="true"
+      tabindex="-1"
+      class="ghost icon s-sm flex h-6 w-6 shrink-0 items-center justify-center"
+      {...machine.getClearTriggerProps()}
+    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+  </div>
+
+  <div
+    class={["absolute z-dropdown inset-x-0 top-full mt-1 origin-top-left transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
+    {...machine.getPositionerProps()}
+  >
+    <panel
+      class="flex w-max max-w-[calc(100vw-2rem)] gap-1 overflow-x-auto"
+      {...machine.getContentProps()}
+    >
+      <template for={machine.getLevels()} as={level} key={level.key}>
+        <panel-list
+          class="max-h-56 w-40 overflow-y-auto overscroll-contain"
+          {...machine.getListProps(level)}
+        >
+          <template for={machine.getItems(level)} as={row} key={row.key}>
+            <div
+              class="bare flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate"
+              {...machine.getItemProps(row)}
+            >
+              <span class="min-w-0 flex-1 truncate"
+                {...machine.getItemTextProps(row)}>{row.label}</span>
+              <span
+                aria-hidden="true"
+                class="shrink-0 text-xs text-text-muted"
+                hidden={!row.hasChildren}
+              ><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+              <span
+                aria-hidden="true"
+                class="shrink-0 text-xs text-primary"
+                {...machine.getItemIndicatorProps(row)}
+              ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+            </div>
+          </template>
+        </panel-list>
+      </template>
+    </panel>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+</div>

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

@@ -0,0 +1,83 @@
+import { ColorFormat } from "./color-picker.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+import { ColorChannel } from "@zag-js/color-utils";
+export interface ColorPickerEvents {
+  "VALUE.SET": {
+    value: string;
+  };
+  "FORMAT.SET": {
+    format: ColorFormat | string;
+  };
+  "OPEN": {};
+  "CLOSE": {};
+  "CONTROLLED.OPEN": {};
+  "CONTROLLED.CLOSE": {};
+  "TRIGGER.CLICK": {};
+  "TRIGGER.BLUR": {};
+  "LAYER.INTERACT_OUTSIDE": {};
+  "CHANNEL_INPUT.FOCUS": {
+    channel: ColorChannel | "hex";
+  };
+  "CHANNEL_INPUT.BLUR": {
+    channel: ColorChannel | "hex";
+    value: string;
+  };
+  "CHANNEL_INPUT.CHANGE": {
+    channel: ColorChannel | "hex";
+    value: string;
+  };
+  "AREA.POINTER_DOWN": {
+    x: number;
+    y: number;
+  };
+  "AREA.ACTIVATE": {};
+  "AREA.POINTER_MOVE": {
+    x: number;
+    y: number;
+  };
+  "AREA.POINTER_UP": {};
+  "AREA.ARROW": {
+    channel: "x" | "y";
+    delta: number;
+  };
+  "AREA.HOME_END": {
+    channel: "x" | "y";
+    toMax: boolean;
+  };
+  "CHANNEL_SLIDER.POINTER_DOWN": {
+    channel: ColorChannel;
+    percent: number;
+  };
+  "CHANNEL_SLIDER.ACTIVATE": {
+    channel: ColorChannel;
+  };
+  "CHANNEL_SLIDER.POINTER_MOVE": {
+    channel: ColorChannel;
+    percent: number;
+  };
+  "CHANNEL_SLIDER.POINTER_UP": {};
+  "CHANNEL_SLIDER.ARROW": {
+    channel: ColorChannel;
+    delta: number;
+  };
+  "CHANNEL_SLIDER.HOME_END": {
+    channel: ColorChannel;
+    toMax: boolean;
+  };
+  "SWATCH_TRIGGER.CLICK": {
+    value: string;
+  };
+  "EYEDROPPER.CLICK": {};
+}
+export type ColorPickerEvent = EventUnion<ColorPickerEvents>;
+export interface ColorPickerValueChange {
+  readonly value: string;
+  readonly format: ColorFormat;
+}
+export interface ColorPickerOpenChange {
+  readonly open: boolean;
+}
+export interface ColorPickerFormatChange {
+  readonly format: ColorFormat;
+}
+//# sourceMappingURL=color-picker.events.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+import { ColorPickerArgs, ColorPickerContext, ColorPickerState } from "./color-picker.state.js";
+import { ColorPickerEvents } from "./color-picker.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function colorPicker(args: ColorPickerArgs | undefined, authored: (name: string) => boolean): Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
+//# sourceMappingURL=color-picker.machine.d.ts.map

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

@@ -0,0 +1,130 @@
+import { initial } from "./color-picker.state.js";
+import { boundAreaValue, boundChannelValue, clearActiveChannel, isOpenControlled, setActiveChannel, setAreaFromPoint, setChannelFromInput, setChannelFromPoint, setFormat, setSliderChannel, setValue, setValueFromSwatch, stepAreaValue, stepChannelValue } from "./color-picker.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/color-picker/color-picker.machine.ts
+/** Color-picker machine: chart only. */
+const config = {
+	id: "color-picker",
+	initial: "idle",
+	context: {
+		value: "#000000",
+		format: "hex",
+		activeChannel: null,
+		areaX: "saturation",
+		areaY: "brightness",
+		disabled: false,
+		readOnly: false,
+		closeOnSelect: false,
+		inline: false,
+		dir: "ltr",
+		name: void 0
+	},
+	on: {
+		"VALUE.SET": { assign: setValue },
+		"FORMAT.SET": { assign: setFormat },
+		"CHANNEL_INPUT.CHANGE": { assign: setChannelFromInput }
+	},
+	states: {
+		idle: { on: {
+			"CONTROLLED.OPEN": { target: "active" },
+			OPEN: [{ cond: isOpenControlled }, { target: "active" }],
+			"TRIGGER.CLICK": [{ cond: isOpenControlled }, { target: "active" }],
+			"CHANNEL_INPUT.FOCUS": {
+				target: "focused",
+				assign: setActiveChannel
+			},
+			"AREA.POINTER_DOWN": {
+				target: "dragging",
+				assign: setAreaFromPoint
+			},
+			"CHANNEL_SLIDER.POINTER_DOWN": {
+				target: "dragging",
+				assign: setChannelFromPoint
+			},
+			"SWATCH_TRIGGER.CLICK": { assign: setValueFromSwatch },
+			"AREA.ARROW": { assign: stepAreaValue },
+			"CHANNEL_SLIDER.ARROW": { assign: stepChannelValue }
+		} },
+		focused: { on: {
+			"CONTROLLED.OPEN": { target: "active" },
+			OPEN: [{ cond: isOpenControlled }, { target: "active" }],
+			"TRIGGER.CLICK": [{ cond: isOpenControlled }, { target: "active" }],
+			"CHANNEL_INPUT.FOCUS": { assign: setActiveChannel },
+			"CHANNEL_INPUT.BLUR": {
+				target: "idle",
+				assign: setChannelFromInput
+			},
+			"TRIGGER.BLUR": { target: "idle" },
+			"SWATCH_TRIGGER.CLICK": { assign: setValueFromSwatch },
+			"AREA.POINTER_DOWN": {
+				target: "dragging",
+				assign: setAreaFromPoint
+			},
+			"CHANNEL_SLIDER.POINTER_DOWN": {
+				target: "dragging",
+				assign: setChannelFromPoint
+			},
+			"AREA.ARROW": { assign: stepAreaValue },
+			"CHANNEL_SLIDER.ARROW": { assign: stepChannelValue }
+		} },
+		active: { on: {
+			"CONTROLLED.CLOSE": { target: "idle" },
+			CLOSE: [{ cond: isOpenControlled }, { target: "idle" }],
+			"LAYER.INTERACT_OUTSIDE": [{ cond: isOpenControlled }, { target: "idle" }],
+			"TRIGGER.CLICK": [{ cond: isOpenControlled }, { target: "focused" }],
+			"AREA.POINTER_DOWN": {
+				target: "dragging",
+				assign: setAreaFromPoint
+			},
+			"AREA.ACTIVATE": { assign: clearActiveChannel },
+			"CHANNEL_SLIDER.POINTER_DOWN": {
+				target: "dragging",
+				assign: setChannelFromPoint
+			},
+			"CHANNEL_SLIDER.ACTIVATE": { assign: setSliderChannel },
+			"AREA.ARROW": { assign: stepAreaValue },
+			"AREA.HOME_END": { assign: boundAreaValue },
+			"CHANNEL_SLIDER.ARROW": { assign: stepChannelValue },
+			"CHANNEL_SLIDER.HOME_END": { assign: boundChannelValue },
+			"CHANNEL_INPUT.BLUR": { assign: setChannelFromInput },
+			"SWATCH_TRIGGER.CLICK": [{
+				cond: (ctx) => {
+					return ctx.closeOnSelect;
+				},
+				target: "focused",
+				assign: setValueFromSwatch
+			}, { assign: setValueFromSwatch }]
+		} },
+		dragging: { on: {
+			"AREA.POINTER_MOVE": { assign: setAreaFromPoint },
+			"AREA.POINTER_UP": [{
+				cond: (ctx) => ctx.inline === true,
+				target: "idle"
+			}, { target: "active" }],
+			"CHANNEL_SLIDER.POINTER_MOVE": { assign: setChannelFromPoint },
+			"CHANNEL_SLIDER.POINTER_UP": [{
+				cond: (ctx) => ctx.inline === true,
+				target: "idle"
+			}, { target: "active" }]
+		} }
+	}
+};
+function colorPicker(args = {}, authored) {
+	return createMachine({
+		...config,
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			format: { event: "FORMAT.SET" },
+			disabled: {},
+			readOnly: {},
+			closeOnSelect: {},
+			inline: {},
+			dir: {},
+			name: {}
+		}
+	});
+}
+export { colorPicker };
+
+//# sourceMappingURL=color-picker.machine.js.map