@solid2-aria/stately 0.0.0-stage → 0.0.1

package/dist/color/create-color-channel-field-state.d.ts

@@ -0,0 +1,29 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorChannelFieldState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Color, ColorChannel, ColorSpace } from "./types.js";
+import { NumberFieldState } from "../numberfield/create-number-field-state.js";
+import { ColorFieldProps } from "./create-color-field-state.js";
+export interface ColorChannelFieldProps extends ColorFieldProps {
+  colorSpace?: ColorSpace;
+  channel: ColorChannel;
+}
+export interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {
+  locale: string;
+}
+export interface ColorChannelFieldState extends NumberFieldState {
+  /** The current value of the field. */
+  colorValue: Color;
+  /** The default value of the field. */
+  defaultColorValue: Color | null;
+  /** Sets the color value of the field. */
+  setColorValue: (value: Color | null) => void;
+}
+/**
+ * Provides state management for a color channel field, allowing users to edit the
+ * value of an individual color channel.
+ */
+export declare function createColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState;
+//# sourceMappingURL=create-color-channel-field-state.d.ts.map

package/dist/color/create-color-channel-field-state.js

@@ -0,0 +1,69 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorChannelFieldState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { parseColor } from "./color.js";
+import { createColor } from "./create-color.js";
+import { createNumberFieldState } from "../numberfield/create-number-field-state.js";
+import { createMemo, merge, untrack } from "solid-js";
+// src/color/create-color-channel-field-state.ts
+/**
+* Provides state management for a color channel field, allowing users to edit the
+* value of an individual color channel.
+*/
+function createColorChannelFieldState(props) {
+	const initialValue = createColor(() => props.value);
+	const initialDefault = createColor(() => props.defaultValue);
+	const [colorValue, setColor] = createControlledSignal(initialValue, untrack(initialDefault) ?? null, (v) => props.onChange?.(v));
+	const initial = untrack(colorValue);
+	const black = parseColor("#000");
+	const convert = (v) => props.colorSpace ? (v ?? black).toFormat(props.colorSpace) : v ?? black;
+	const color = createMemo(() => convert(colorValue()));
+	const defaultValue = () => initialDefault() ?? initial;
+	const defaultColor = createMemo(() => convert(defaultValue()));
+	const range = () => color().getChannelRange(props.channel);
+	const options = createMemo(() => color().getChannelFormatOptions(props.channel));
+	const multiplier = () => options().style === "percent" && range().maxValue === 100 ? 100 : 1;
+	const numberState = createNumberFieldState({
+		get defaultValue() {
+			return defaultValue() === null ? NaN : defaultColor().getChannelValue(props.channel) / multiplier();
+		},
+		get formatOptions() {
+			return options();
+		},
+		get locale() {
+			return props.locale;
+		},
+		get maxValue() {
+			return range().maxValue / multiplier();
+		},
+		get minValue() {
+			return range().minValue / multiplier();
+		},
+		onChange(v) {
+			setColor(Number.isNaN(v) ? null : color().withChannelValue(props.channel, v * multiplier()));
+		},
+		get step() {
+			return range().step / multiplier();
+		},
+		get value() {
+			return colorValue() === null ? NaN : color().getChannelValue(props.channel) / multiplier();
+		}
+	});
+	return merge(numberState, {
+		get colorValue() {
+			return color();
+		},
+		get defaultColorValue() {
+			return defaultValue();
+		},
+		setColorValue(v) {
+			setColor(v);
+		}
+	});
+}
+export { createColorChannelFieldState };
+
+//# sourceMappingURL=create-color-channel-field-state.js.map

package/dist/color/create-color-channel-field-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-color-channel-field-state.js","names":[],"sources":["../../src/color/create-color-channel-field-state.ts"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorChannelFieldState.ts.\n * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createMemo, merge, untrack } from \"solid-js\";\n\nimport { createNumberFieldState } from \"../numberfield/create-number-field-state\";\nimport type { NumberFieldState } from \"../numberfield/create-number-field-state\";\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { parseColor } from \"./color\";\nimport { createColor } from \"./create-color\";\nimport type { ColorFieldProps } from \"./create-color-field-state\";\nimport type { Color, ColorChannel, ColorSpace } from \"./types\";\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n  colorSpace?: ColorSpace;\n  channel: ColorChannel;\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n  locale: string;\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n  /** The current value of the field. */\n  colorValue: Color;\n  /** The default value of the field. */\n  defaultColorValue: Color | null;\n  /** Sets the color value of the field. */\n  setColorValue: (value: Color | null) => void;\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\n\nexport function createColorChannelFieldState(\n  props: ColorChannelFieldStateOptions\n): ColorChannelFieldState {\n  const initialValue = createColor(() => props.value);\n  const initialDefault = createColor(() => props.defaultValue);\n\n  const [colorValue, setColor] = createControlledSignal(\n    initialValue,\n    untrack(initialDefault) ?? null,\n    (v) => props.onChange?.(v)\n  );\n\n  const initial = untrack(colorValue);\n  const black = parseColor(\"#000\");\n\n  const convert = (v: Color | null | undefined) =>\n    props.colorSpace ? (v ?? black).toFormat(props.colorSpace) : (v ?? black);\n\n  const color = createMemo(() => convert(colorValue()));\n  const defaultValue = () => initialDefault() ?? initial;\n  const defaultColor = createMemo(() => convert(defaultValue()));\n  const range = () => color().getChannelRange(props.channel);\n\n  const options = createMemo(() =>\n    color().getChannelFormatOptions(props.channel)\n  );\n\n  const multiplier = () =>\n    options().style === \"percent\" && range().maxValue === 100 ? 100 : 1;\n\n  const numberState = createNumberFieldState({\n    get defaultValue() {\n      return defaultValue() === null\n        ? Number.NaN\n        : defaultColor().getChannelValue(props.channel) / multiplier();\n    },\n    get formatOptions() {\n      return options();\n    },\n    get locale() {\n      return props.locale;\n    },\n    get maxValue() {\n      return range().maxValue / multiplier();\n    },\n    get minValue() {\n      return range().minValue / multiplier();\n    },\n    onChange(v) {\n      setColor(\n        Number.isNaN(v)\n          ? null\n          : color().withChannelValue(props.channel, v * multiplier())\n      );\n    },\n    get step() {\n      return range().step / multiplier();\n    },\n    get value() {\n      return colorValue() === null\n        ? Number.NaN\n        : color().getChannelValue(props.channel) / multiplier();\n    },\n  });\n\n  return merge(numberState, {\n    get colorValue() {\n      return color();\n    },\n    get defaultColorValue() {\n      return defaultValue();\n    },\n    setColorValue(v: Color | null) {\n      setColor(v);\n    },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,SAAgB,6BACd,OACwB;CACxB,MAAM,eAAe,kBAAkB,MAAM,KAAK;CAClD,MAAM,iBAAiB,kBAAkB,MAAM,YAAY;CAE3D,MAAM,CAAC,YAAY,YAAY,uBAC7B,cACA,QAAQ,cAAc,KAAK,OAC1B,MAAM,MAAM,WAAW,CAAC,CAC3B;CAEA,MAAM,UAAU,QAAQ,UAAU;CAClC,MAAM,QAAQ,WAAW,MAAM;CAE/B,MAAM,WAAW,MACf,MAAM,cAAc,KAAK,MAAA,CAAO,SAAS,MAAM,UAAU,IAAK,KAAK;CAErE,MAAM,QAAQ,iBAAiB,QAAQ,WAAW,CAAC,CAAC;CACpD,MAAM,qBAAqB,eAAe,KAAK;CAC/C,MAAM,eAAe,iBAAiB,QAAQ,aAAa,CAAC,CAAC;CAC7D,MAAM,cAAc,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO;CAEzD,MAAM,UAAU,iBACd,MAAM,CAAC,CAAC,wBAAwB,MAAM,OAAO,CAC/C;CAEA,MAAM,mBACJ,QAAQ,CAAC,CAAC,UAAU,aAAa,MAAM,CAAC,CAAC,aAAa,MAAM,MAAM;CAEpE,MAAM,cAAc,uBAAuB;EACzC,IAAI,eAAe;GACjB,OAAO,aAAa,MAAM,OACtB,MACA,aAAa,CAAC,CAAC,gBAAgB,MAAM,OAAO,IAAI,WAAW;EACjE;EACA,IAAI,gBAAgB;GAClB,OAAO,QAAQ;EACjB;EACA,IAAI,SAAS;GACX,OAAO,MAAM;EACf;EACA,IAAI,WAAW;GACb,OAAO,MAAM,CAAC,CAAC,WAAW,WAAW;EACvC;EACA,IAAI,WAAW;GACb,OAAO,MAAM,CAAC,CAAC,WAAW,WAAW;EACvC;EACA,SAAS,GAAG;GACV,SACE,OAAO,MAAM,CAAC,IACV,OACA,MAAM,CAAC,CAAC,iBAAiB,MAAM,SAAS,IAAI,WAAW,CAAC,CAC9D;EACF;EACA,IAAI,OAAO;GACT,OAAO,MAAM,CAAC,CAAC,OAAO,WAAW;EACnC;EACA,IAAI,QAAQ;GACV,OAAO,WAAW,MAAM,OACpB,MACA,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,IAAI,WAAW;EAC1D;CACF,CAAC;CAED,OAAO,MAAM,aAAa;EACxB,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,aAAa;EACtB;EACA,cAAc,GAAiB;GAC7B,SAAS,CAAC;EACZ;CACF,CAAC;AACH"}

package/dist/color/create-color-field-state.d.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorFieldState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { FormValidationState } from "../form/create-form-validation-state.js";
+import { Color } from "./types.js";
+import { FocusableProps, HelpTextProps, InputBase, LabelableProps, TextInputBase, Validation, ValueBase } from "@solid2-aria/types-shared";
+export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, "onChange">, InputBase, Validation<Color | null>, FocusableProps, TextInputBase, LabelableProps, HelpTextProps {
+  /** Handler that is called when the value changes. */
+  onChange?: (color: Color | null) => void;
+}
+export interface ColorFieldState extends FormValidationState {
+  /**
+   * The current text value of the input. Updated as the user types,
+   * and formatted according to `formatOptions` on blur.
+   */
+  readonly inputValue: string;
+  /**
+   * The currently parsed color value, or null if the field is empty.
+   * Updated based on the `inputValue` as the user types.
+   */
+  readonly colorValue: Color | null;
+  /** The default value of the color field. */
+  readonly defaultColorValue: Color | null;
+  /** Sets the color value of the field. */
+  setColorValue: (value: Color | null) => void;
+  /** Sets the current text value of the input. */
+  setInputValue: (value: string) => void;
+  /**
+   * Updates the input value based on the currently parsed color value.
+   * Typically this is called when the field is blurred.
+   */
+  commit: () => void;
+  /** Increments the current input value to the next step boundary, and fires `onChange`. */
+  increment: () => void;
+  /** Decrements the current input value to the next step boundary, and fires `onChange`. */
+  decrement: () => void;
+  /** Sets the current value to the maximum color value, and fires `onChange`. */
+  incrementToMax: () => void;
+  /** Sets the current value to the minimum color value, and fires `onChange`. */
+  decrementToMin: () => void;
+  /**
+   * Validates a user input string. Values can be partially entered, and may be valid even if they
+   * cannot currently be parsed to a color. Can be used to implement validation as a user types.
+   */
+  validate: (value: string) => boolean;
+}
+export declare function createColorFieldState(props: ColorFieldProps): ColorFieldState;
+//# sourceMappingURL=create-color-field-state.d.ts.map

package/dist/color/create-color-field-state.js

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorFieldState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { createFormValidationState } from "../form/create-form-validation-state.js";
+import { parseColor } from "./color.js";
+import { createColor } from "./create-color.js";
+import { createMemo, createRenderEffect, createSignal, merge, untrack } from "solid-js";
+// src/color/create-color-field-state.ts
+const MIN_COLOR = parseColor("#000000");
+const MAX_COLOR = parseColor("#FFFFFF");
+const MIN_COLOR_INT = MIN_COLOR.toHexInt();
+const MAX_COLOR_INT = MAX_COLOR.toHexInt();
+/**
+* Provides state management for a color field component. Color fields allow
+* users to enter and adjust a hex color value.
+*/
+const format = (v) => v ? v.toString("hex") : "";
+function createColorFieldState(props) {
+	const value = createColor(() => props.value);
+	const defaultValue = createColor(() => props.defaultValue);
+	const [colorValue, setColorValue] = createControlledSignal(() => value() ?? (props.value === null ? null : void 0), untrack(defaultValue) ?? null, (v) => props.onChange?.(v));
+	const initialValue = untrack(colorValue);
+	const [inputValue, setInputValue] = createSignal(untrack(() => format(colorValue())), { ownedWrite: true });
+	let previous = initialValue;
+	createRenderEffect(colorValue, (v) => {
+		if (previous !== v) {
+			previous = v;
+			setInputValue(format(v));
+		}
+	});
+	const validation = createFormValidationState(merge(props, { get value() {
+		return colorValue();
+	} }));
+	const parsed = createMemo(() => {
+		try {
+			const v = inputValue();
+			return parseColor(v.startsWith("#") ? v : `#${v}`);
+		} catch {
+			return null;
+		}
+	});
+	const safelySet = (v) => {
+		if (!v || !colorValue() || v.toHexInt() !== colorValue()?.toHexInt()) setColorValue(v);
+	};
+	const add = (step) => {
+		const base = parsed() ?? MIN_COLOR;
+		const n = Math.min(Math.max(base.toHexInt() + step, MIN_COLOR_INT), MAX_COLOR_INT);
+		const next = n === base.toHexInt() ? base : parseColor(`#${n.toString(16).padStart(6, "0")}`);
+		if (next === colorValue()) setInputValue(format(next));
+		safelySet(next);
+		validation.commitValidation();
+	};
+	return merge(validation, {
+		get colorValue() {
+			return colorValue();
+		},
+		commit() {
+			if (!inputValue().length) {
+				safelySet(null);
+				setInputValue(props.value === void 0 || colorValue() === null ? "" : format(colorValue()));
+				return;
+			}
+			const next = parsed();
+			if (next === null) {
+				setInputValue(format(colorValue()));
+				return;
+			}
+			safelySet(next);
+			setInputValue(format(props.value === void 0 ? next : colorValue()));
+			validation.commitValidation();
+		},
+		decrement() {
+			add(-1);
+		},
+		decrementToMin() {
+			safelySet(MIN_COLOR);
+		},
+		get defaultColorValue() {
+			return defaultValue() ?? initialValue;
+		},
+		increment() {
+			add(1);
+		},
+		incrementToMax() {
+			safelySet(MAX_COLOR);
+		},
+		get inputValue() {
+			return inputValue();
+		},
+		setColorValue,
+		setInputValue,
+		validate(v) {
+			return /^#?[0-9a-f]{0,6}$/iu.test(v);
+		}
+	});
+}
+export { createColorFieldState };
+
+//# sourceMappingURL=create-color-field-state.js.map

package/dist/color/create-color-field-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-color-field-state.js","names":[],"sources":["../../src/color/create-color-field-state.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorFieldState.ts.\n * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type {\n  FocusableProps,\n  HelpTextProps,\n  InputBase,\n  LabelableProps,\n  TextInputBase,\n  Validation,\n  ValueBase,\n} from \"@solid2-aria/types-shared\";\nimport {\n  createMemo,\n  createSignal,\n  createRenderEffect,\n  merge,\n  untrack,\n} from \"solid-js\";\n\nimport { createFormValidationState } from \"../form/create-form-validation-state\";\nimport type { FormValidationState } from \"../form/create-form-validation-state\";\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { parseColor } from \"./color\";\nimport { createColor } from \"./create-color\";\nimport type { Color } from \"./types\";\n\nexport interface ColorFieldProps\n  extends\n    Omit<ValueBase<string | Color | null>, \"onChange\">,\n    InputBase,\n    Validation<Color | null>,\n    FocusableProps,\n    TextInputBase,\n    LabelableProps,\n    HelpTextProps {\n  /** Handler that is called when the value changes. */\n  onChange?: (color: Color | null) => void;\n}\n\nexport interface ColorFieldState extends FormValidationState {\n  /**\n   * The current text value of the input. Updated as the user types,\n   * and formatted according to `formatOptions` on blur.\n   */\n  readonly inputValue: string;\n  /**\n   * The currently parsed color value, or null if the field is empty.\n   * Updated based on the `inputValue` as the user types.\n   */\n  readonly colorValue: Color | null;\n  /** The default value of the color field. */\n  readonly defaultColorValue: Color | null;\n  /** Sets the color value of the field. */\n  setColorValue: (value: Color | null) => void;\n  /** Sets the current text value of the input. */\n  setInputValue: (value: string) => void;\n  /**\n   * Updates the input value based on the currently parsed color value.\n   * Typically this is called when the field is blurred.\n   */\n  commit: () => void;\n  /** Increments the current input value to the next step boundary, and fires `onChange`. */\n  increment: () => void;\n  /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n  decrement: () => void;\n  /** Sets the current value to the maximum color value, and fires `onChange`. */\n  incrementToMax: () => void;\n  /** Sets the current value to the minimum color value, and fires `onChange`. */\n  decrementToMin: () => void;\n  /**\n   * Validates a user input string. Values can be partially entered, and may be valid even if they\n   * cannot currently be parsed to a color. Can be used to implement validation as a user types.\n   */\n  validate: (value: string) => boolean;\n}\n\nconst MIN_COLOR = parseColor(\"#000000\");\nconst MAX_COLOR = parseColor(\"#FFFFFF\");\nconst MIN_COLOR_INT = MIN_COLOR.toHexInt();\nconst MAX_COLOR_INT = MAX_COLOR.toHexInt();\n\n/**\n * Provides state management for a color field component. Color fields allow\n * users to enter and adjust a hex color value.\n */\n\nconst format = (v: Color | null) => (v ? v.toString(\"hex\") : \"\");\n\nexport function createColorFieldState(props: ColorFieldProps): ColorFieldState {\n  const value = createColor(() => props.value);\n  const defaultValue = createColor(() => props.defaultValue);\n\n  const [colorValue, setColorValue] = createControlledSignal(\n    () => value() ?? (props.value === null ? null : undefined),\n    untrack(defaultValue) ?? null,\n    (v) => props.onChange?.(v)\n  );\n\n  const initialValue = untrack(colorValue);\n\n  const [inputValue, setInputValue] = createSignal(\n    untrack(() => format(colorValue())),\n    { ownedWrite: true }\n  );\n\n  let previous = initialValue;\n  createRenderEffect(colorValue, (v) => {\n    if (previous !== v) {\n      previous = v;\n      setInputValue(format(v));\n    }\n  });\n\n  const validation = createFormValidationState(\n    merge(props, {\n      get value() {\n        return colorValue();\n      },\n    })\n  );\n\n  const parsed = createMemo(() => {\n    try {\n      const v = inputValue();\n\n      return parseColor(v.startsWith(\"#\") ? v : `#${v}`);\n    } catch {\n      return null;\n    }\n  });\n\n  const safelySet = (v: Color | null) => {\n    if (!v || !colorValue() || v.toHexInt() !== colorValue()?.toHexInt()) {\n      setColorValue(v);\n    }\n  };\n\n  const add = (step: number) => {\n    const base = parsed() ?? MIN_COLOR;\n\n    const n = Math.min(\n      Math.max(base.toHexInt() + step, MIN_COLOR_INT),\n      MAX_COLOR_INT\n    );\n\n    const next =\n      n === base.toHexInt()\n        ? base\n        : parseColor(`#${n.toString(16).padStart(6, \"0\")}`);\n\n    if (next === colorValue()) {\n      setInputValue(format(next));\n    }\n\n    safelySet(next);\n    validation.commitValidation();\n  };\n\n  return merge(validation, {\n    get colorValue() {\n      return colorValue();\n    },\n    commit() {\n      if (!inputValue().length) {\n        safelySet(null);\n        setInputValue(\n          props.value === undefined || colorValue() === null\n            ? \"\"\n            : format(colorValue())\n        );\n\n        return;\n      }\n\n      const next = parsed();\n\n      if (next === null) {\n        setInputValue(format(colorValue()));\n\n        return;\n      }\n\n      safelySet(next);\n      setInputValue(format(props.value === undefined ? next : colorValue()));\n      validation.commitValidation();\n    },\n    decrement() {\n      add(-1);\n    },\n    decrementToMin() {\n      safelySet(MIN_COLOR);\n    },\n    get defaultColorValue() {\n      return defaultValue() ?? initialValue;\n    },\n    increment() {\n      add(1);\n    },\n    incrementToMax() {\n      safelySet(MAX_COLOR);\n    },\n    get inputValue() {\n      return inputValue();\n    },\n    setColorValue,\n    setInputValue,\n    validate(v: string) {\n      return /^#?[0-9a-f]{0,6}$/iu.test(v);\n    },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2FA,MAAM,YAAY,WAAW,SAAS;AACtC,MAAM,YAAY,WAAW,SAAS;AACtC,MAAM,gBAAgB,UAAU,SAAS;AACzC,MAAM,gBAAgB,UAAU,SAAS;;;;;AAOzC,MAAM,UAAU,MAAqB,IAAI,EAAE,SAAS,KAAK,IAAI;AAE7D,SAAgB,sBAAsB,OAAyC;CAC7E,MAAM,QAAQ,kBAAkB,MAAM,KAAK;CAC3C,MAAM,eAAe,kBAAkB,MAAM,YAAY;CAEzD,MAAM,CAAC,YAAY,iBAAiB,6BAC5B,MAAM,MAAM,MAAM,UAAU,OAAO,OAAO,KAAA,IAChD,QAAQ,YAAY,KAAK,OACxB,MAAM,MAAM,WAAW,CAAC,CAC3B;CAEA,MAAM,eAAe,QAAQ,UAAU;CAEvC,MAAM,CAAC,YAAY,iBAAiB,aAClC,cAAc,OAAO,WAAW,CAAC,CAAC,GAClC,EAAE,YAAY,KAAK,CACrB;CAEA,IAAI,WAAW;CACf,mBAAmB,aAAa,MAAM;EACpC,IAAI,aAAa,GAAG;GAClB,WAAW;GACX,cAAc,OAAO,CAAC,CAAC;EACzB;CACF,CAAC;CAED,MAAM,aAAa,0BACjB,MAAM,OAAO,EACX,IAAI,QAAQ;EACV,OAAO,WAAW;CACpB,EACF,CAAC,CACH;CAEA,MAAM,SAAS,iBAAiB;EAC9B,IAAI;GACF,MAAM,IAAI,WAAW;GAErB,OAAO,WAAW,EAAE,WAAW,GAAG,IAAI,IAAI,IAAI,GAAG;EACnD,QAAQ;GACN,OAAO;EACT;CACF,CAAC;CAED,MAAM,aAAa,MAAoB;EACrC,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,EAAE,SAAS,MAAM,WAAW,CAAC,EAAE,SAAS,GACjE,cAAc,CAAC;CAEnB;CAEA,MAAM,OAAO,SAAiB;EAC5B,MAAM,OAAO,OAAO,KAAK;EAEzB,MAAM,IAAI,KAAK,IACb,KAAK,IAAI,KAAK,SAAS,IAAI,MAAM,aAAa,GAC9C,aACF;EAEA,MAAM,OACJ,MAAM,KAAK,SAAS,IAChB,OACA,WAAW,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG;EAEtD,IAAI,SAAS,WAAW,GACtB,cAAc,OAAO,IAAI,CAAC;EAG5B,UAAU,IAAI;EACd,WAAW,iBAAiB;CAC9B;CAEA,OAAO,MAAM,YAAY;EACvB,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,SAAS;GACP,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ;IACxB,UAAU,IAAI;IACd,cACE,MAAM,UAAU,KAAA,KAAa,WAAW,MAAM,OAC1C,KACA,OAAO,WAAW,CAAC,CACzB;IAEA;GACF;GAEA,MAAM,OAAO,OAAO;GAEpB,IAAI,SAAS,MAAM;IACjB,cAAc,OAAO,WAAW,CAAC,CAAC;IAElC;GACF;GAEA,UAAU,IAAI;GACd,cAAc,OAAO,MAAM,UAAU,KAAA,IAAY,OAAO,WAAW,CAAC,CAAC;GACrE,WAAW,iBAAiB;EAC9B;EACA,YAAY;GACV,IAAI,EAAE;EACR;EACA,iBAAiB;GACf,UAAU,SAAS;EACrB;EACA,IAAI,oBAAoB;GACtB,OAAO,aAAa,KAAK;EAC3B;EACA,YAAY;GACV,IAAI,CAAC;EACP;EACA,iBAAiB;GACf,UAAU,SAAS;EACrB;EACA,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA;EACA;EACA,SAAS,GAAW;GAClB,OAAO,sBAAsB,KAAK,CAAC;EACrC;CACF,CAAC;AACH"}

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

@@ -0,0 +1,16 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorPickerState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Color } from "./types.js";
+import { ValueBase } from "@solid2-aria/types-shared";
+export type ColorPickerProps = ValueBase<string | Color, Color>;
+export interface ColorPickerState {
+  /** The current color value of the color picker. */
+  color: Color;
+  /** Sets the current color value of the color picker. */
+  setColor: (color: Color | null) => void;
+}
+export declare function createColorPickerState(props: ColorPickerProps): ColorPickerState;
+//# sourceMappingURL=create-color-picker-state.d.ts.map

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

@@ -0,0 +1,26 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorPickerState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { parseColor } from "./color.js";
+import { createColor } from "./create-color.js";
+import { untrack } from "solid-js";
+// src/color/create-color-picker-state.ts
+function createColorPickerState(props) {
+	const value = createColor(() => props.value);
+	const defaultValue = createColor(() => props.defaultValue ?? "#000000");
+	const [color, setColor] = createControlledSignal(() => value() ?? void 0, untrack(defaultValue) ?? parseColor("#000000"), (v) => props.onChange?.(v));
+	return {
+		get color() {
+			return color();
+		},
+		setColor(v) {
+			if (v !== null) setColor(v);
+		}
+	};
+}
+export { createColorPickerState };
+
+//# sourceMappingURL=create-color-picker-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-color-picker-state.js","names":[],"sources":["../../src/color/create-color-picker-state.ts"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorPickerState.ts.\n * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type { ValueBase } from \"@solid2-aria/types-shared\";\nimport { untrack } from \"solid-js\";\n\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { parseColor } from \"./color\";\nimport { createColor } from \"./create-color\";\nimport type { Color } from \"./types\";\n\nexport type ColorPickerProps = ValueBase<string | Color, Color>;\n\nexport interface ColorPickerState {\n  /** The current color value of the color picker. */\n  color: Color;\n  /** Sets the current color value of the color picker. */\n  setColor: (color: Color | null) => void;\n}\n\nexport function createColorPickerState(\n  props: ColorPickerProps\n): ColorPickerState {\n  const value = createColor(() => props.value);\n  const defaultValue = createColor(() => props.defaultValue ?? \"#000000\");\n\n  const [color, setColor] = createControlledSignal(\n    () => value() ?? undefined,\n    untrack(defaultValue) ?? parseColor(\"#000000\"),\n    (v) => props.onChange?.(v)\n  );\n\n  return {\n    get color() {\n      return color();\n    },\n    setColor(v) {\n      if (v !== null) {\n        setColor(v);\n      }\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,uBACd,OACkB;CAClB,MAAM,QAAQ,kBAAkB,MAAM,KAAK;CAC3C,MAAM,eAAe,kBAAkB,MAAM,gBAAgB,SAAS;CAEtE,MAAM,CAAC,OAAO,YAAY,6BAClB,MAAM,KAAK,KAAA,GACjB,QAAQ,YAAY,KAAK,WAAW,SAAS,IAC5C,MAAM,MAAM,WAAW,CAAC,CAC3B;CAEA,OAAO;EACL,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,SAAS,GAAG;GACV,IAAI,MAAM,MACR,SAAS,CAAC;EAEd;CACF;AACF"}

package/dist/color/create-color-slider-state.d.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorSliderState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Color, ColorChannel, ColorSpace } from "./types.js";
+import { SliderProps, SliderState } from "../slider/create-slider-state.js";
+export interface ColorSliderProps extends Omit<SliderProps<string | Color>, "minValue" | "maxValue" | "step" | "pageSize" | "onChange" | "onChangeEnd"> {
+  /**
+   * The color space that the slider operates in. The `channel` must be in this color space.
+   * If not provided, this defaults to the color space of the `color` or `defaultColor` value.
+   */
+  colorSpace?: ColorSpace;
+  /** The color channel that the slider manipulates. */
+  channel: ColorChannel;
+  /** Handler that is called when the value changes, as the user drags. */
+  onChange?: (value: Color) => void;
+  /** Handler that is called when the user stops dragging. */
+  onChangeEnd?: (value: Color) => void;
+}
+export interface ColorSliderState extends SliderState {
+  /** The current color value represented by the color slider. */
+  readonly value: Color;
+  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+  setValue: (value: string | Color) => void;
+  /**
+   * Returns the color that should be displayed in the slider instead of `value` or the optional
+   * parameter.
+   */
+  getDisplayColor: () => Color;
+  /** Whether the color slider is currently being dragged. */
+  readonly isDragging: boolean;
+}
+export interface ColorSliderStateOptions extends ColorSliderProps {
+  /** The locale to use for formatting the color channel value. */
+  locale: string;
+}
+export declare function createColorSliderState(props: ColorSliderStateOptions): ColorSliderState;
+//# sourceMappingURL=create-color-slider-state.d.ts.map

package/dist/color/create-color-slider-state.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorSliderState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { normalizeColor, parseColor } from "./color.js";
+import { createSliderState } from "../slider/create-slider-state.js";
+import { createMemo, merge, untrack } from "solid-js";
+// src/color/create-color-slider-state.ts
+/**
+* Provides state management for a color slider component.
+* Color sliders allow users to adjust an individual channel of a color value.
+*/
+const normalize = (v) => v !== void 0 && v !== "" ? normalizeColor(v) : void 0;
+function createColorSliderState(props) {
+	const initial = untrack(() => normalize(props.defaultValue) ?? normalize(props.value));
+	if (!initial) throw new Error("createColorSliderState requires a value or defaultValue");
+	const controlledValue = createMemo(() => normalize(props.value));
+	const [colorValue, setColor] = createControlledSignal(controlledValue, initial, (v) => props.onChange?.(v));
+	const initialValue = untrack(colorValue);
+	const color = createMemo(() => props.colorSpace ? colorValue().toFormat(props.colorSpace) : colorValue());
+	const defaultColor = createMemo(() => {
+		const c = normalize(props.defaultValue) ?? initialValue;
+		return props.colorSpace ? c.toFormat(props.colorSpace) : c;
+	});
+	const numberFormatter = new Intl.NumberFormat();
+	const sliderState = createSliderState(merge(props, {
+		get defaultValue() {
+			return defaultColor().getChannelValue(props.channel);
+		},
+		get maxValue() {
+			return color().getChannelRange(props.channel).maxValue;
+		},
+		get minValue() {
+			return color().getChannelRange(props.channel).minValue;
+		},
+		numberFormatter,
+		onChange(v) {
+			if (typeof v === "number") setColor(color().withChannelValue(props.channel, v));
+		},
+		onChangeEnd(v) {
+			if (typeof v === "number") props.onChangeEnd?.(color().withChannelValue(props.channel, v));
+		},
+		get step() {
+			return color().getChannelRange(props.channel).step;
+		},
+		get value() {
+			return color().getChannelValue(props.channel);
+		}
+	}));
+	return merge(sliderState, {
+		getDisplayColor() {
+			if (props.channel === "hue") return parseColor(`hsl(${color().getChannelValue("hue")}, 100%, 50%)`);
+			return props.channel === "alpha" ? color() : color().withChannelValue("alpha", 1);
+		},
+		getFormattedValue() {
+			return color().formatChannelValue(props.channel, props.locale);
+		},
+		getThumbValueLabel() {
+			return color().formatChannelValue(props.channel, props.locale);
+		},
+		get isDragging() {
+			return sliderState.isThumbDragging(0);
+		},
+		get pageSize() {
+			return color().getChannelRange(props.channel).pageSize;
+		},
+		setValue(v) {
+			setColor(normalizeColor(v));
+		},
+		get step() {
+			return color().getChannelRange(props.channel).step;
+		},
+		get value() {
+			return color();
+		}
+	});
+}
+export { createColorSliderState };
+
+//# sourceMappingURL=create-color-slider-state.js.map

package/dist/color/create-color-slider-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-color-slider-state.js","names":[],"sources":["../../src/color/create-color-slider-state.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorSliderState.ts.\n * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createMemo, merge, untrack } from \"solid-js\";\n\nimport { createSliderState } from \"../slider/create-slider-state\";\nimport type { SliderProps, SliderState } from \"../slider/create-slider-state\";\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { normalizeColor, parseColor } from \"./color\";\nimport type { Color, ColorChannel, ColorSpace } from \"./types\";\n\nexport interface ColorSliderProps extends Omit<\n  SliderProps<string | Color>,\n  \"minValue\" | \"maxValue\" | \"step\" | \"pageSize\" | \"onChange\" | \"onChangeEnd\"\n> {\n  /**\n   * The color space that the slider operates in. The `channel` must be in this color space.\n   * If not provided, this defaults to the color space of the `color` or `defaultColor` value.\n   */\n  colorSpace?: ColorSpace;\n  /** The color channel that the slider manipulates. */\n  channel: ColorChannel;\n  /** Handler that is called when the value changes, as the user drags. */\n  onChange?: (value: Color) => void;\n  /** Handler that is called when the user stops dragging. */\n  onChangeEnd?: (value: Color) => void;\n}\n\nexport interface ColorSliderState extends SliderState {\n  /** The current color value represented by the color slider. */\n  readonly value: Color;\n  /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n  setValue: (value: string | Color) => void;\n  /**\n   * Returns the color that should be displayed in the slider instead of `value` or the optional\n   * parameter.\n   */\n  getDisplayColor: () => Color;\n  /** Whether the color slider is currently being dragged. */\n  readonly isDragging: boolean;\n}\n\nexport interface ColorSliderStateOptions extends ColorSliderProps {\n  /** The locale to use for formatting the color channel value. */\n  locale: string;\n}\n\n/**\n * Provides state management for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\n\nconst normalize = (v: string | Color | undefined) =>\n  v !== undefined && v !== \"\" ? normalizeColor(v) : undefined;\n\nexport function createColorSliderState(\n  props: ColorSliderStateOptions\n): ColorSliderState {\n  const initial = untrack(\n    () => normalize(props.defaultValue) ?? normalize(props.value)\n  );\n\n  if (!initial) {\n    throw new Error(\"createColorSliderState requires a value or defaultValue\");\n  }\n\n  const controlledValue = createMemo(() => normalize(props.value));\n\n  const [colorValue, setColor] = createControlledSignal(\n    controlledValue,\n    initial,\n    (v) => props.onChange?.(v)\n  );\n\n  const initialValue = untrack(colorValue);\n\n  const color = createMemo(() =>\n    props.colorSpace ? colorValue().toFormat(props.colorSpace) : colorValue()\n  );\n\n  const defaultColor = createMemo(() => {\n    const c = normalize(props.defaultValue) ?? initialValue;\n\n    return props.colorSpace ? c.toFormat(props.colorSpace) : c;\n  });\n\n  const numberFormatter = new Intl.NumberFormat();\n\n  const sliderState = createSliderState(\n    merge(props, {\n      get defaultValue() {\n        return defaultColor().getChannelValue(props.channel);\n      },\n      get maxValue() {\n        return color().getChannelRange(props.channel).maxValue;\n      },\n      get minValue() {\n        return color().getChannelRange(props.channel).minValue;\n      },\n      numberFormatter,\n      onChange(v: number | number[]) {\n        if (typeof v === \"number\") {\n          setColor(color().withChannelValue(props.channel, v));\n        }\n      },\n      onChangeEnd(v: number | number[]) {\n        if (typeof v === \"number\") {\n          props.onChangeEnd?.(color().withChannelValue(props.channel, v));\n        }\n      },\n      get step() {\n        return color().getChannelRange(props.channel).step;\n      },\n      get value() {\n        return color().getChannelValue(props.channel);\n      },\n    })\n  );\n\n  return merge(sliderState, {\n    getDisplayColor() {\n      if (props.channel === \"hue\") {\n        return parseColor(`hsl(${color().getChannelValue(\"hue\")}, 100%, 50%)`);\n      }\n\n      return props.channel === \"alpha\"\n        ? color()\n        : color().withChannelValue(\"alpha\", 1);\n    },\n    getFormattedValue() {\n      return color().formatChannelValue(props.channel, props.locale);\n    },\n    getThumbValueLabel() {\n      return color().formatChannelValue(props.channel, props.locale);\n    },\n    get isDragging() {\n      return sliderState.isThumbDragging(0);\n    },\n    get pageSize() {\n      return color().getChannelRange(props.channel).pageSize;\n    },\n    setValue(v: string | Color) {\n      setColor(normalizeColor(v));\n    },\n    get step() {\n      return color().getChannelRange(props.channel).step;\n    },\n    get value() {\n      return color();\n    },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,aAAa,MACjB,MAAM,KAAA,KAAa,MAAM,KAAK,eAAe,CAAC,IAAI,KAAA;AAEpD,SAAgB,uBACd,OACkB;CAClB,MAAM,UAAU,cACR,UAAU,MAAM,YAAY,KAAK,UAAU,MAAM,KAAK,CAC9D;CAEA,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,kBAAkB,iBAAiB,UAAU,MAAM,KAAK,CAAC;CAE/D,MAAM,CAAC,YAAY,YAAY,uBAC7B,iBACA,UACC,MAAM,MAAM,WAAW,CAAC,CAC3B;CAEA,MAAM,eAAe,QAAQ,UAAU;CAEvC,MAAM,QAAQ,iBACZ,MAAM,aAAa,WAAW,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,WAAW,CAC1E;CAEA,MAAM,eAAe,iBAAiB;EACpC,MAAM,IAAI,UAAU,MAAM,YAAY,KAAK;EAE3C,OAAO,MAAM,aAAa,EAAE,SAAS,MAAM,UAAU,IAAI;CAC3D,CAAC;CAED,MAAM,kBAAkB,IAAI,KAAK,aAAa;CAE9C,MAAM,cAAc,kBAClB,MAAM,OAAO;EACX,IAAI,eAAe;GACjB,OAAO,aAAa,CAAC,CAAC,gBAAgB,MAAM,OAAO;EACrD;EACA,IAAI,WAAW;GACb,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,CAAC,CAAC;EAChD;EACA,IAAI,WAAW;GACb,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,CAAC,CAAC;EAChD;EACA;EACA,SAAS,GAAsB;GAC7B,IAAI,OAAO,MAAM,UACf,SAAS,MAAM,CAAC,CAAC,iBAAiB,MAAM,SAAS,CAAC,CAAC;EAEvD;EACA,YAAY,GAAsB;GAChC,IAAI,OAAO,MAAM,UACf,MAAM,cAAc,MAAM,CAAC,CAAC,iBAAiB,MAAM,SAAS,CAAC,CAAC;EAElE;EACA,IAAI,OAAO;GACT,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,CAAC,CAAC;EAChD;EACA,IAAI,QAAQ;GACV,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO;EAC9C;CACF,CAAC,CACH;CAEA,OAAO,MAAM,aAAa;EACxB,kBAAkB;GAChB,IAAI,MAAM,YAAY,OACpB,OAAO,WAAW,OAAO,MAAM,CAAC,CAAC,gBAAgB,KAAK,EAAE,aAAa;GAGvE,OAAO,MAAM,YAAY,UACrB,MAAM,IACN,MAAM,CAAC,CAAC,iBAAiB,SAAS,CAAC;EACzC;EACA,oBAAoB;GAClB,OAAO,MAAM,CAAC,CAAC,mBAAmB,MAAM,SAAS,MAAM,MAAM;EAC/D;EACA,qBAAqB;GACnB,OAAO,MAAM,CAAC,CAAC,mBAAmB,MAAM,SAAS,MAAM,MAAM;EAC/D;EACA,IAAI,aAAa;GACf,OAAO,YAAY,gBAAgB,CAAC;EACtC;EACA,IAAI,WAAW;GACb,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,CAAC,CAAC;EAChD;EACA,SAAS,GAAmB;GAC1B,SAAS,eAAe,CAAC,CAAC;EAC5B;EACA,IAAI,OAAO;GACT,OAAO,MAAM,CAAC,CAAC,gBAAgB,MAAM,OAAO,CAAC,CAAC;EAChD;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;CACF,CAAC;AACH"}

package/dist/color/create-color-wheel-state.d.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/color/useColorWheelState.ts.
+ * Modified for Solid Aria: adapted reactive state and public APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Color } from "./types.js";
+import { ValueBase } from "@solid2-aria/types-shared";
+export interface ColorWheelProps extends Omit<ValueBase<string | Color>, "onChange"> {
+  /** Whether the ColorWheel is disabled. */
+  isDisabled?: boolean;
+  /** Handler that is called when the value changes, as the user drags. */
+  onChange?: (value: Color) => void;
+  /** Handler that is called when the user stops dragging. */
+  onChangeEnd?: (value: Color) => void;
+  /**
+   * The default value (uncontrolled).
+   *
+   * @default 'hsl(0, 100%, 50%)'
+   */
+  defaultValue?: string | Color;
+}
+export interface ColorWheelState {
+  /** The current color value represented by the color wheel. */
+  readonly value: Color;
+  /** The default color value. */
+  readonly defaultValue: Color;
+  /** Sets the color value represented by the color wheel, and triggers `onChange`. */
+  setValue: (value: string | Color) => void;
+  /** The current value of the hue channel displayed by the color wheel. */
+  readonly hue: number;
+  /** Sets the hue channel of the current color value and triggers `onChange`. */
+  setHue: (value: number) => void;
+  /**
+   * Sets the hue channel of the current color value based on the given coordinates and radius of
+   * the color wheel, and triggers `onChange`.
+   */
+  setHueFromPoint: (x: number, y: number, radius: number) => void;
+  /** Returns the coordinates of the thumb relative to the center point of the color wheel. */
+  getThumbPosition: (radius: number) => {
+    x: number;
+    y: number;
+  };
+  /** Increments the hue by the given amount (defaults to 1). */
+  increment: (stepSize?: number) => void;
+  /** Decrements the hue by the given amount (defaults to 1). */
+  decrement: (stepSize?: number) => void;
+  /** Whether the color wheel is currently being dragged. */
+  readonly isDragging: boolean;
+  /** Sets whether the color wheel is being dragged. */
+  setDragging: (value: boolean) => void;
+  /** Returns the color that should be displayed in the color wheel instead of `value`. */
+  getDisplayColor: () => Color;
+  /** The step value of the hue channel, used when incrementing and decrementing. */
+  step: number;
+  /** The page step value of the hue channel, used when incrementing and decrementing. */
+  pageStep: number;
+  /** Whether the color wheel is disabled. */
+  readonly isDisabled: boolean;
+}
+/**
+ * Provides state management for a color wheel component.
+ * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export declare function createColorWheelState(props: ColorWheelProps): ColorWheelState;
+//# sourceMappingURL=create-color-wheel-state.d.ts.map