@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/color-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-slider.js","names":["<ColorSliderStateContext value={state}>\n      <SliderStateContext value={state}>\n        <SliderTrackContext\n          value={mergeProps(\n            merge(() => aria.trackProps),\n            {\n              ref: (element: HTMLDivElement) => {\n                setTrackRef(element);\n              },\n              trackRef,\n            }\n          )}\n        >\n          <SliderOutputContext\n            value={\n              // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n              merge(() => aria.outputProps)\n              // oxlint-enable solid/reactivity\n            }\n          >\n            <LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>\n          </SliderOutputContext>\n        </SliderTrackContext>\n      </SliderStateContext>\n    </ColorSliderStateContext>","value={state}","<SliderStateContext value={state}>\n        <SliderTrackContext\n          value={mergeProps(\n            merge(() => aria.trackProps),\n            {\n              ref: (element: HTMLDivElement) => {\n                setTrackRef(element);\n              },\n              trackRef,\n            }\n          )}\n        >\n          <SliderOutputContext\n            value={\n              // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n              merge(() => aria.outputProps)\n              // oxlint-enable solid/reactivity\n            }\n          >\n            <LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>\n          </SliderOutputContext>\n        </SliderTrackContext>\n      </SliderStateContext>","<SliderTrackContext\n          value={mergeProps(\n            merge(() => aria.trackProps),\n            {\n              ref: (element: HTMLDivElement) => {\n                setTrackRef(element);\n              },\n              trackRef,\n            }\n          )}\n        >\n          <SliderOutputContext\n            value={\n              // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n              merge(() => aria.outputProps)\n              // oxlint-enable solid/reactivity\n            }\n          >\n            <LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>\n          </SliderOutputContext>\n        </SliderTrackContext>","<SliderOutputContext\n            value={\n              // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n              merge(() => aria.outputProps)\n              // oxlint-enable solid/reactivity\n            }\n          >\n            <LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>\n          </SliderOutputContext>","<LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>","<InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>","value={thumb}","<dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}","typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined","mergeProps","_$createComponent","_$mergeProps","_$memo"],"sources":["../../src/color-slider.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSlider.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createColorSlider } from \"@solid2-aria/core/color/create-color-slider\";\nimport type { AriaColorSliderProps } from \"@solid2-aria/core/color/create-color-slider\";\nimport { createLocale } from \"@solid2-aria/core/i18n/i18n-provider\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { createColorSliderState } from \"@solid2-aria/stately/color/create-color-slider-state\";\nimport type { ColorSliderState } from \"@solid2-aria/stately/color/create-color-slider-state\";\nimport type { Orientation } from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, createSignal, merge, createContext, omit } from \"solid-js\";\n\nimport { InternalColorThumbContext } from \"./color-thumb\";\nimport { LabelContext } from \"./label\";\nimport {\n  SliderStateContext,\n  SliderTrackContext,\n  SliderOutputContext,\n} from \"./slider\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n} from \"./utils\";\nimport type { ContextValue, RenderProps, SlotProps, Ref } from \"./utils\";\n\nexport interface ColorSliderRenderProps {\n  orientation: Orientation;\n  isDisabled: boolean;\n  state: ColorSliderState;\n}\n\nexport interface ColorSliderProps\n  extends\n    Omit<AriaColorSliderProps, \"label\">,\n    RenderProps<ColorSliderRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ColorSliderContext =\n  createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);\n\nexport const ColorSliderStateContext = createContext<ColorSliderState | null>(\n  null\n);\n\nexport function ColorSlider(input: ColorSliderProps): JSX.Element {\n  const [trackRef, setTrackRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorSliderContext\n  );\n\n  const locale = createLocale();\n\n  const state = createColorSliderState(\n    mergeProps(props, {\n      get locale() {\n        return locale.locale;\n      },\n    })\n  );\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const [registerLabel, label] = createSlot(\n    () =>\n      (props[\"aria-label\"]?.length ?? 0) === 0 &&\n      (props[\"aria-labelledby\"]?.length ?? 0) === 0\n  );\n\n  const aria = createColorSlider(\n    mergeProps(props, {\n      inputRef,\n      get label() {\n        return label();\n      },\n      trackRef,\n    }),\n    state\n  );\n\n  const values: ColorSliderRenderProps = {\n    get isDisabled() {\n      return state.isDisabled;\n    },\n    get orientation() {\n      return state.orientation;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-ColorSlider\", values })\n  );\n\n  const thumb = {\n    inputXRef: inputRef,\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    setInputXRef: setInputRef,\n    state,\n    get thumbProps() {\n      return aria.thumbProps;\n    },\n    get xInputProps() {\n      return aria.inputProps;\n    },\n  };\n\n  return (\n    <ColorSliderStateContext value={state}>\n      <SliderStateContext value={state}>\n        <SliderTrackContext\n          value={mergeProps(\n            merge(() => aria.trackProps),\n            {\n              ref: (element: HTMLDivElement) => {\n                setTrackRef(element);\n              },\n              trackRef,\n            }\n          )}\n        >\n          <SliderOutputContext\n            value={\n              // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n              merge(() => aria.outputProps)\n              // oxlint-enable solid/reactivity\n            }\n          >\n            <LabelContext\n              value={mergeProps(\n                merge(() => aria.labelProps),\n                {\n                  get children() {\n                    return state.value.getChannelName(\n                      props.channel,\n                      locale.locale\n                    );\n                  },\n                  registerSlot: registerLabel,\n                }\n              )}\n            >\n              <InternalColorThumbContext value={thumb}>\n                <dom.div\n                  {\n                    // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n                    ...omit(filterDOMProps(props, { global: true }), \"id\")\n                    // oxlint-enable solid/reactivity\n                  }\n                  {...render}\n                  ref={(element: HTMLDivElement) => {\n                    setRef(element);\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-orientation={state.orientation}\n                  data-disabled={state.isDisabled || undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </InternalColorThumbContext>\n            </LabelContext>\n          </SliderOutputContext>\n        </SliderTrackContext>\n      </SliderStateContext>\n    </ColorSliderStateContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgDA,MAAa,qBACX,cAAuE,IAAI;AAE7E,MAAa,0BAA0B,cACrC,IACF;AAEA,SAAgB,YAAY,OAAsC;CAChE,MAAM,CAAC,UAAU,eAAe,aAAoC,MAAM,EACxE,YAAY,KACd,CAAC;CAED,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,kBACF;CAEA,MAAM,SAAS,aAAa;CAE5B,MAAM,QAAQ,uBACZY,aAAW,OAAO,EAChB,IAAI,SAAS;EACX,OAAO,OAAO;CAChB,EACF,CAAC,CACH;CAEA,MAAM,CAAC,UAAU,eAAe,aAAsC,MAAM,EAC1E,YAAY,KACd,CAAC;CAED,MAAM,CAAC,eAAe,SAAS,kBAE1B,MAAM,aAAa,EAAE,UAAU,OAAO,MACtC,MAAM,kBAAkB,EAAE,UAAU,OAAO,CAChD;CAEA,MAAM,OAAO,kBACXA,aAAW,OAAO;EAChB;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA;CACF,CAAC,GACD,KACF;CAYA,MAAM,SAAS,kBACbA,aAAW,OAAO;EAAE,cAAc;EAA2B,QAAA;GAV7D,IAAI,aAAa;IACf,OAAO,MAAM;GACf;GACA,IAAI,cAAc;IAChB,OAAO,MAAM;GACf;GACA;EAI6D;CAAO,CAAC,CACvE;CAEA,MAAM,QAAQ;EACZ,WAAW;EACX,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,cAAc;EACd;EACA,IAAI,aAAa;GACf,OAAO,KAAK;EACd;EACA,IAAI,cAAc;GAChB,OAAO,KAAK;EACd;CACF;CAEA,OACEZ,gBAAAA,yBAAAA;EAAyBC,OAAO;EAAhC,IAAA,WAAA;GACEC,OAAAA,gBAAAA,oBAAAA;IAAoBD,OAAO;IAA3B,IAAA,WAAA;KACEE,OAAAA,gBAAAA,oBAAAA;MACE,IAAA,QAAA;OAAO,OAAAS,aACL,YAAY,KAAK,UAAU,GAC3B;QACE,MAAM,YAA4B;SAChC,YAAY,OAAO;QACrB;QACA;OACF,CACF;MAAC;MATH,IAAA,WAAA;OAWER,OAAAA,gBAAAA,qBAAAA;QACE,IAAA,QAAA;SAEE,OAAA,YAAY,KAAK,WAAW;QAE9B;QALF,IAAA,WAAA;SAOEC,OAAAA,gBAAAA,cAAAA;UACE,IAAA,QAAA;WAAO,OAAAO,aACL,YAAY,KAAK,UAAU,GAC3B;YACE,IAAI,WAAW;aACb,OAAO,MAAM,MAAM,eACjB,MAAM,SACN,OAAO,MACT;YACF;YACA,cAAc;WAChB,CACF;UAAC;UAZH,IAAA,WAAA;WAcEN,OAAAA,gBAAAA,2BAAAA;YAA2BC,OAAO;YAAlC,IAAA,WAAA;aACEC,OAAAA,gBAAAA,IAACC,KAADD,iBACE;cAEK,OAAA,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI;aAEvD,GACI,QANN;cAOEE,MAAM,YAA4B;eAChC,OAAO,OAAO;cAChB;cACA,IAAA,OAAA;eACEC,OAAAA,WAAAA;gBAAO,OAAA,CAAA,EAAA,OAAA,MAAM,SAAS,YAAY,MAAM,KAAK,SAAS;eAE1C,CAAA,CAAC,CAAD,IADR,MAAM,OACN,KAAA;cACN;cACA,IAAA,qBAAA;eAAkB,OAAA,MAAM;cAAW;cACnC,IAAA,kBAAA;eAAe,OAAA,MAAM,cAAc,KAAA;cAAS;cAhB9C,IAAA,WAAA;eAkBG,OAAA,OAAO;cACD;;YACgB;;UACf;;QACK;;MACH;;IACF;;EACG;;AAE7B"}

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

@@ -0,0 +1,29 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatchPicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ContextValue, Ref, RenderProps, StyleRenderProps } from "./utils.js";
+import { ListBoxItemRenderProps, ListBoxRenderProps } from "./list-box.js";
+import { JSX } from "@solidjs/web";
+import { AriaLabelingProps, HoverEvents, PressEvents, ValueBase } from "@solid2-aria/types-shared";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+import { Color } from "@solid2-aria/stately/color/types";
+export type ColorSwatchPickerRenderProps = Omit<ListBoxRenderProps, "isDropTarget">;
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  children?: JSX.Element;
+  layout?: "grid" | "stack";
+  ref?: Ref<HTMLDivElement>;
+}
+export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, "selectionMode" | "selectionBehavior"> {
+  color: Color;
+}
+export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, "onClick"> {
+  color: string | Color;
+  isDisabled?: boolean;
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ColorSwatchPickerContext: import("solid-js").Context<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>;
+export declare function ColorSwatchPicker(input: ColorSwatchPickerProps): JSX.Element;
+export declare function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.Element;
+//# sourceMappingURL=color-swatch-picker.d.ts.map

package/dist/browser/color-swatch-picker.js

@@ -0,0 +1,131 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatchPicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef, createContextProps } from "./utils.js";
+import { ColorSwatchContext } from "./color-swatch.js";
+import intl_default from "./intl/index.js";
+import { ListBox, ListBoxItem } from "./list-box.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createEffect, createMemo, omit, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { createColorPickerState } from "@solid2-aria/stately/color/create-color-picker-state";
+import { createLocalizedStringFormatter } from "@solid2-aria/core/i18n/create-localized-string-formatter";
+import { parseColor } from "@solid2-aria/stately/color/color";
+// src/color-swatch-picker.tsx
+const ColorSwatchPickerContext = createContext(null);
+const ColorMapContext = createContext(null);
+function ColorSwatchPicker(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorSwatchPickerContext);
+	const state = createColorPickerState(props);
+	const map = /* @__PURE__ */ new Map();
+	const formatter = createLocalizedStringFormatter(intl_default, "@solid2-aria/components");
+	return createComponent(ListBox, mergeProps(() => {
+		return filterDOMProps(props, { labelable: true });
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "class"() {
+			return props.class ?? "solid2-aria-ColorSwatchPicker";
+		},
+		get style() {
+			return props.style;
+		},
+		get render() {
+			return props.render;
+		},
+		get "aria-label"() {
+			return props["aria-label"] ?? ((props["aria-labelledby"]?.length ?? 0) > 0 ? void 0 : formatter.format("colorSwatchPicker"));
+		},
+		get layout() {
+			return props.layout ?? "grid";
+		},
+		selectionMode: "single",
+		get selectedKeys() {
+			return [state.color.toString("hexa")];
+		},
+		onSelectionChange: (keys) => {
+			if (keys !== "all") {
+				const first = keys.values().next().value;
+				const color = typeof first === "string" ? map.get(first) : void 0;
+				if (color) state.setColor(color);
+			}
+		},
+		disallowEmptySelection: true,
+		get children() {
+			return createComponent(ColorMapContext, {
+				value: map,
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	}));
+}
+function ColorSwatchPickerItem(props) {
+	const color = createMemo(() => typeof props.color === "string" ? parseColor(props.color || "#0000") : props.color);
+	const locale = createLocale();
+	const map = requireValue(useContext(ColorMapContext), "Expected required component value");
+	createEffect(color, (value) => {
+		const key = value.toString("hexa");
+		map.set(key, value);
+		return () => {
+			if (map.get(key) === value) map.delete(key);
+		};
+	});
+	const values = (original) => mergeProps$1(original, { get color() {
+		return color();
+	} });
+	return createComponent(ListBoxItem, mergeProps(() => {
+		return omit(props, "class", "style", "children", "render", "ref", "color");
+	}, {
+		ref: (el) => {
+			assignRef(untrack(() => props.ref), el);
+		},
+		get id() {
+			return color().toString("hexa");
+		},
+		get textValue() {
+			return color().getColorName(locale.locale);
+		},
+		get render() {
+			return props.render ? (domProps, original) => requireValue(props.render, "Expected required component value")(domProps, values(original)) : void 0;
+		},
+		class: (original) => {
+			const value = props.class;
+			return typeof value === "function" ? value(mergeProps$1(values(original), { get defaultClass() {
+				return original.defaultClass;
+			} })) : value ?? "solid2-aria-ColorSwatchPickerItem";
+		},
+		get style() {
+			return memo(() => {
+				return typeof props.style === "function";
+			})() ? (original) => {
+				const value = props.style;
+				return typeof value === "function" ? value(mergeProps$1(values(original), { get defaultStyle() {
+					return original.defaultStyle;
+				} })) : void 0;
+			} : props.style;
+		},
+		children: (original) => createComponent(ColorSwatchContext, {
+			value: { get color() {
+				return color();
+			} },
+			get children() {
+				return memo(() => {
+					return typeof props.children === "function";
+				})() ? props.children(mergeProps$1(values(original), { get defaultChildren() {
+					return original.defaultChildren;
+				} })) : props.children;
+			}
+		})
+	}));
+}
+export { ColorSwatchPicker, ColorSwatchPickerContext, ColorSwatchPickerItem };
+
+//# sourceMappingURL=color-swatch-picker.js.map

package/dist/browser/color-swatch-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch-picker.js","names":["<ListBox\n      {...filterDOMProps(props, { labelable: true })}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      class={props.class ?? \"solid2-aria-ColorSwatchPicker\"}\n      style={props.style}\n      render={props.render}\n      aria-label={\n        props[\"aria-label\"] ??\n        ((props[\"aria-labelledby\"]?.length ?? 0) > 0\n          ? undefined\n          : formatter.format(\"colorSwatchPicker\"))\n      }\n      layout={props.layout ?? \"grid\"}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString(\"hexa\")]}\n      onSelectionChange={(keys) => {\n        if (keys !== \"all\") {\n          const first = keys.values().next().value;\n          const color = typeof first === \"string\" ? map.get(first) : undefined;\n\n          if (color) {\n            state.setColor(color);\n          }\n        }\n      }}\n      disallowEmptySelection\n    >\n      <ColorMapContext value={map}>{props.children}</ColorMapContext>\n    </ListBox>","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","selectionMode=\"single\"","onSelectionChange={(keys) => {\n        if (keys !== \"all\") {\n          const first = keys.values().next().value;\n          const color = typeof first === \"string\" ? map.get(first) : undefined;\n\n          if (color) {\n            state.setColor(color);\n          }\n        }\n      }}","<ColorMapContext value={map}>{props.children}</ColorMapContext>","value={map}","<ListBoxItem\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(props, \"class\", \"style\", \"children\", \"render\", \"ref\", \"color\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={(el: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n      }}\n      id={color().toString(\"hexa\")}\n      textValue={color().getColorName(locale.locale)}\n      render={\n        props.render\n          ? (domProps, original) =>\n              requireValue(props.render, \"Expected required component value\")(\n                // SAFETY: ColorSwatchPickerItem has no link props, so ListBoxItem always renders a div.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Narrow the link-capable render API at this non-link component boundary.\n                domProps as JSX.IntrinsicElements[\"div\"],\n                values(original)\n              )\n          : undefined\n      }\n      class={(original) => {\n        const value = props.class;\n\n        return typeof value === \"function\"\n          ? value(\n              mergeProps(values(original), {\n                get defaultClass() {\n                  return original.defaultClass;\n                },\n              })\n            )\n          : (value ?? \"solid2-aria-ColorSwatchPickerItem\");\n      }}\n      style={\n        typeof props.style === \"function\"\n          ? (original) => {\n              const value = props.style;\n\n              return typeof value === \"function\"\n                ? value(\n                    mergeProps(values(original), {\n                      get defaultStyle() {\n                        return original.defaultStyle;\n                      },\n                    })\n                  )\n                : undefined;\n            }\n          : props.style\n      }\n    >\n      {(original) => (\n        <ColorSwatchContext\n          value={{\n            get color() {\n              return color();\n            },\n          }}\n        >\n          {typeof props.children === \"function\"\n            ? props.children(\n                mergeProps(values(original), {\n                  get defaultChildren() {\n                    return original.defaultChildren;\n                  },\n                })\n              )\n            : props.children}\n        </ColorSwatchContext>\n      )}\n    </ListBoxItem>","ref={(el: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n      }}","class={(original) => {\n        const value = props.class;\n\n        return typeof value === \"function\"\n          ? value(\n              mergeProps(values(original), {\n                get defaultClass() {\n                  return original.defaultClass;\n                },\n              })\n            )\n          : (value ?? \"solid2-aria-ColorSwatchPickerItem\");\n      }}","typeof props.style === \"function\"\n          ? (original) => {\n              const value = props.style;\n\n              return typeof value === \"function\"\n                ? value(\n                    mergeProps(values(original), {\n                      get defaultStyle() {\n                        return original.defaultStyle;\n                      },\n                    })\n                  )\n                : undefined;\n            }\n          : props.style","<ColorSwatchContext\n          value={{\n            get color() {\n              return color();\n            },\n          }}\n        >\n          {typeof props.children === \"function\"\n            ? props.children(\n                mergeProps(values(original), {\n                  get defaultChildren() {\n                    return original.defaultChildren;\n                  },\n                })\n              )\n            : props.children}\n        </ColorSwatchContext>","value={{\n            get color() {\n              return color();\n            },\n          }}","{typeof props.children === \"function\"\n            ? props.children(\n                mergeProps(values(original), {\n                  get defaultChildren() {\n                    return original.defaultChildren;\n                  },\n                })\n              )\n            : props.children}","intlMessages","_$createComponent","_$mergeProps","mergeProps","_$memo"],"sources":["../../src/color-swatch-picker.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatchPicker.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createLocalizedStringFormatter } from \"@solid2-aria/core/i18n/create-localized-string-formatter\";\nimport { createLocale } from \"@solid2-aria/core/i18n/i18n-provider\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { requireValue } from \"@solid2-aria/core/utils/require-value\";\nimport { parseColor } from \"@solid2-aria/stately/color/color\";\nimport { createColorPickerState } from \"@solid2-aria/stately/color/create-color-picker-state\";\nimport type { Color } from \"@solid2-aria/stately/color/types\";\nimport type {\n  AriaLabelingProps,\n  HoverEvents,\n  PressEvents,\n  ValueBase,\n} from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  untrack,\n  createContext,\n  createMemo,\n  createEffect,\n  useContext,\n  omit,\n} from \"solid-js\";\n\nimport intlMessages from \"../intl/index\";\nimport { ColorSwatchContext } from \"./color-swatch\";\nimport { ListBox, ListBoxItem } from \"./list-box\";\nimport type { ListBoxRenderProps, ListBoxItemRenderProps } from \"./list-box\";\nimport { createContextProps, assignRef } from \"./utils\";\nimport type { ContextValue, RenderProps, StyleRenderProps, Ref } from \"./utils\";\n\nexport type ColorSwatchPickerRenderProps = Omit<\n  ListBoxRenderProps,\n  \"isDropTarget\"\n>;\n\nexport interface ColorSwatchPickerProps\n  extends\n    ValueBase<string | Color, Color>,\n    AriaLabelingProps,\n    StyleRenderProps<ColorSwatchPickerRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  children?: JSX.Element;\n  layout?: \"grid\" | \"stack\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<\n  ListBoxItemRenderProps,\n  \"selectionMode\" | \"selectionBehavior\"\n> {\n  color: Color;\n}\n\nexport interface ColorSwatchPickerItemProps\n  extends\n    RenderProps<ColorSwatchPickerItemRenderProps>,\n    HoverEvents,\n    PressEvents,\n    Omit<GlobalDOMAttributes<HTMLDivElement>, \"onClick\"> {\n  color: string | Color;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ColorSwatchPickerContext =\n  createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\n\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\nexport function ColorSwatchPicker(input: ColorSwatchPickerProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorSwatchPickerContext\n  );\n\n  const state = createColorPickerState(props);\n  const map = new Map<string, Color>();\n\n  const formatter = createLocalizedStringFormatter(\n    intlMessages,\n    \"@solid2-aria/components\"\n  );\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, { labelable: true })}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      class={props.class ?? \"solid2-aria-ColorSwatchPicker\"}\n      style={props.style}\n      render={props.render}\n      aria-label={\n        props[\"aria-label\"] ??\n        ((props[\"aria-labelledby\"]?.length ?? 0) > 0\n          ? undefined\n          : formatter.format(\"colorSwatchPicker\"))\n      }\n      layout={props.layout ?? \"grid\"}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString(\"hexa\")]}\n      onSelectionChange={(keys) => {\n        if (keys !== \"all\") {\n          const first = keys.values().next().value;\n          const color = typeof first === \"string\" ? map.get(first) : undefined;\n\n          if (color) {\n            state.setColor(color);\n          }\n        }\n      }}\n      disallowEmptySelection\n    >\n      <ColorMapContext value={map}>{props.children}</ColorMapContext>\n    </ListBox>\n  );\n}\n\nexport function ColorSwatchPickerItem(\n  props: ColorSwatchPickerItemProps\n): JSX.Element {\n  const color = createMemo(() =>\n    typeof props.color === \"string\"\n      ? parseColor(props.color || \"#0000\")\n      : props.color\n  );\n\n  const locale = createLocale();\n\n  const map = requireValue(\n    useContext(ColorMapContext),\n    \"Expected required component value\"\n  );\n\n  createEffect(color, (value) => {\n    const key = value.toString(\"hexa\");\n    map.set(key, value);\n\n    return () => {\n      if (map.get(key) === value) {\n        map.delete(key);\n      }\n    };\n  });\n\n  const values = (\n    original: ListBoxItemRenderProps\n  ): ColorSwatchPickerItemRenderProps =>\n    mergeProps(original, {\n      get color() {\n        return color();\n      },\n    });\n\n  return (\n    <ListBoxItem\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(props, \"class\", \"style\", \"children\", \"render\", \"ref\", \"color\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={(el: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n      }}\n      id={color().toString(\"hexa\")}\n      textValue={color().getColorName(locale.locale)}\n      render={\n        props.render\n          ? (domProps, original) =>\n              requireValue(props.render, \"Expected required component value\")(\n                // SAFETY: ColorSwatchPickerItem has no link props, so ListBoxItem always renders a div.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Narrow the link-capable render API at this non-link component boundary.\n                domProps as JSX.IntrinsicElements[\"div\"],\n                values(original)\n              )\n          : undefined\n      }\n      class={(original) => {\n        const value = props.class;\n\n        return typeof value === \"function\"\n          ? value(\n              mergeProps(values(original), {\n                get defaultClass() {\n                  return original.defaultClass;\n                },\n              })\n            )\n          : (value ?? \"solid2-aria-ColorSwatchPickerItem\");\n      }}\n      style={\n        typeof props.style === \"function\"\n          ? (original) => {\n              const value = props.style;\n\n              return typeof value === \"function\"\n                ? value(\n                    mergeProps(values(original), {\n                      get defaultStyle() {\n                        return original.defaultStyle;\n                      },\n                    })\n                  )\n                : undefined;\n            }\n          : props.style\n      }\n    >\n      {(original) => (\n        <ColorSwatchContext\n          value={{\n            get color() {\n              return color();\n            },\n          }}\n        >\n          {typeof props.children === \"function\"\n            ? props.children(\n                mergeProps(values(original), {\n                  get defaultChildren() {\n                    return original.defaultChildren;\n                  },\n                })\n              )\n            : props.children}\n        </ColorSwatchContext>\n      )}\n    </ListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwEA,MAAa,2BACX,cAAoE,IAAI;AAE1E,MAAM,kBAAkB,cAAyC,IAAI;AAErE,SAAgB,kBAAkB,OAA4C;CAC5E,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,wBACF;CAEA,MAAM,QAAQ,uBAAuB,KAAK;CAC1C,MAAM,sBAAM,IAAI,IAAmB;CAEnC,MAAM,YAAY,+BAChBa,cACA,yBACF;CAEA,OACEb,gBAAAA,SAAAA,iBACE;EAAI,OAAA,eAAe,OAAO,EAAE,WAAW,KAAK,CAAC;CAAC,GADhD;EAEEC,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;EACA,IAAA,UAAA;GAAO,OAAA,MAAM,SAAS;EAA+B;EACrD,IAAA,QAAA;GAAO,OAAA,MAAM;EAAK;EAClB,IAAA,SAAA;GAAQ,OAAA,MAAM;EAAM;EACpB,IAAA,eAAA;GACE,OAAA,MAAM,mBACJ,MAAM,kBAAkB,EAAE,UAAU,KAAK,IACvC,KAAA,IACA,UAAU,OAAO,mBAAmB;EAC1C;EACA,IAAA,SAAA;GAAQ,OAAA,MAAM,UAAU;EAAM;EAC9BC,eAAc;EACd,IAAA,eAAA;GAAc,OAAA,CAAC,MAAM,MAAM,SAAS,MAAM,CAAC;EAAC;EAC5CC,oBAAoB,SAAS;GAC3B,IAAI,SAAS,OAAO;IAClB,MAAM,QAAQ,KAAK,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,QAAQ,OAAO,UAAU,WAAW,IAAI,IAAI,KAAK,IAAI,KAAA;IAE3D,IAAI,OACF,MAAM,SAAS,KAAK;GAExB;EACF;EACA,wBAAA;EA3BF,IAAA,WAAA;GA6BEC,OAAAA,gBAAAA,iBAAAA;IAAiBC,OAAO;IAAxB,IAAA,WAAA;KAA8B,OAAA,MAAM;IAA0B;;EACvD;;AAEb;AAEA,SAAgB,sBACd,OACa;CACb,MAAM,QAAQ,iBACZ,OAAO,MAAM,UAAU,WACnB,WAAW,MAAM,SAAS,OAAO,IACjC,MAAM,KACZ;CAEA,MAAM,SAAS,aAAa;CAE5B,MAAM,MAAM,aACV,WAAW,eAAe,GAC1B,mCACF;CAEA,aAAa,QAAQ,UAAU;EAC7B,MAAM,MAAM,MAAM,SAAS,MAAM;EACjC,IAAI,IAAI,KAAK,KAAK;EAElB,aAAa;GACX,IAAI,IAAI,IAAI,GAAG,MAAM,OACnB,IAAI,OAAO,GAAG;EAElB;CACF,CAAC;CAED,MAAM,UACJ,aAEAW,aAAW,UAAU,EACnB,IAAI,QAAQ;EACV,OAAO,MAAM;CACf,EACF,CAAC;CAEH,OACEV,gBAAAA,aAAAA,iBACE;EAEK,OAAA,KAAK,OAAO,SAAS,SAAS,YAAY,UAAU,OAAO,OAAO;CAEvE,GALF;EAMEC,MAAM,OAAuB;GAC3B,UACE,cAAc,MAAM,GAAG,GACvB,EACF;EACF;EACA,IAAA,KAAA;GAAI,OAAA,MAAM,CAAC,CAAC,SAAS,MAAM;EAAC;EAC5B,IAAA,YAAA;GAAW,OAAA,MAAM,CAAC,CAAC,aAAa,OAAO,MAAM;EAAC;EAC9C,IAAA,SAAA;GACE,OAAA,MAAM,UACD,UAAU,aACT,aAAa,MAAM,QAAQ,mCAAmC,CAAC,CAG7D,UACA,OAAO,QAAQ,CACjB,IACF,KAAA;EACN;EACAC,QAAQ,aAAa;GACnB,MAAM,QAAQ,MAAM;GAEpB,OAAO,OAAO,UAAU,aACpB,MACEQ,aAAW,OAAO,QAAQ,GAAG,EAC3B,IAAI,eAAe;IACjB,OAAO,SAAS;GAClB,EACF,CAAC,CACH,IACC,SAAS;EAChB;EACA,IAAA,QAAA;GACEP,OAAAA,WAAAA;IAAO,OAAA,OAAA,MAAM,UAAU;GAcT,CAAA,CAAC,CAAD,KAbT,aAAa;IACZ,MAAM,QAAQ,MAAM;IAEpB,OAAO,OAAO,UAAU,aACpB,MACEO,aAAW,OAAO,QAAQ,GAAG,EAC3B,IAAI,eAAe;KACjB,OAAO,SAAS;IAClB,EACF,CAAC,CACH,IACA,KAAA;GACN,IACA,MAAM;EACZ;EAtDFV,WAwDI,aACAI,gBAAAA,oBAAAA;GACEC,OAAO,EACL,IAAI,QAAQ;IACV,OAAO,MAAM;GACf,EACF;GALF,IAAA,WAAA;IAOEC,OAAAA,WAAAA;KAAC,OAAA,OAAO,MAAM,aAAa;IAQT,CAAA,CAAC,CAAD,IAPd,MAAM,SACJI,aAAW,OAAO,QAAQ,GAAG,EAC3B,IAAI,kBAAkB;KACpB,OAAO,SAAS;IAClB,EACF,CAAC,CACH,IACA,MAAM;GACQ;;CAEX,CAAA,CAAA;AAEjB"}

package/dist/browser/color-swatch.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatch.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ContextValue, Ref, SlotProps, StyleRenderProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaColorSwatchProps } from "@solid2-aria/core/color/create-color-swatch";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+import { Color } from "@solid2-aria/stately/color/types";
+export interface ColorSwatchRenderProps {
+  color: Color;
+}
+export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ColorSwatchContext: import("solid-js").Context<ContextValue<ColorSwatchProps, HTMLDivElement>>;
+export declare function ColorSwatch(input: ColorSwatchProps): JSX.Element;
+//# sourceMappingURL=color-swatch.d.ts.map

package/dist/browser/color-swatch.js

@@ -0,0 +1,42 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatch.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, dom } from "./utils.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, merge, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createColorSwatch } from "@solid2-aria/core/color/create-color-swatch";
+// src/color-swatch.tsx
+const ColorSwatchContext = createContext(null);
+function ColorSwatch(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorSwatchContext);
+	const aria = createColorSwatch(props);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorSwatch",
+		get defaultStyle() {
+			const { style } = aria.colorSwatchProps;
+			return style !== null && typeof style === "object" ? style : void 0;
+		},
+		values: { get color() {
+			return aria.color;
+		} }
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => aria.colorSwatchProps), render);
+	}, {
+		get slot() {
+			return memo(() => {
+				return !!(typeof props.slot === "string" && props.slot.length > 0);
+			})() ? props.slot : void 0;
+		},
+		ref: (element) => {
+			setRef(element);
+		}
+	}));
+}
+export { ColorSwatch, ColorSwatchContext };
+
+//# sourceMappingURL=color-swatch.js.map

package/dist/browser/color-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.js","names":["<dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => aria.colorSwatchProps),\n        render\n      )}\n      slot={\n        typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined\n      }\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n    />","dom.div","typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","mergeProps","_$createComponent","_$mergeProps","_$memo"],"sources":["../../src/color-swatch.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSwatch.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createColorSwatch } from \"@solid2-aria/core/color/create-color-swatch\";\nimport type { AriaColorSwatchProps } from \"@solid2-aria/core/color/create-color-swatch\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport type { Color } from \"@solid2-aria/stately/color/types\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, merge, createContext } from \"solid-js\";\n\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { ContextValue, StyleRenderProps, SlotProps, Ref } from \"./utils\";\n\nexport interface ColorSwatchRenderProps {\n  color: Color;\n}\n\nexport interface ColorSwatchProps\n  extends\n    AriaColorSwatchProps,\n    StyleRenderProps<ColorSwatchRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ColorSwatchContext =\n  createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);\n\nexport function ColorSwatch(input: ColorSwatchProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorSwatchContext\n  );\n\n  const aria = createColorSwatch(props);\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-ColorSwatch\",\n      get defaultStyle() {\n        const { style } = aria.colorSwatchProps;\n\n        return style !== null && typeof style === \"object\" ? style : undefined;\n      },\n      values: {\n        get color() {\n          return aria.color;\n        },\n      },\n    })\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => aria.colorSwatchProps),\n        render\n      )}\n      slot={\n        typeof props.slot === \"string\" && props.slot.length > 0\n          ? props.slot\n          : undefined\n      }\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAa,qBACX,cAA8D,IAAI;AAEpE,SAAgB,YAAY,OAAsC;CAChE,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,kBACF;CAEA,MAAM,OAAO,kBAAkB,KAAK;CAEpC,MAAM,SAAS,kBACbI,aAAW,OAAO;EAChB,cAAc;EACd,IAAI,eAAe;GACjB,MAAM,EAAE,UAAU,KAAK;GAEvB,OAAO,UAAU,QAAQ,OAAO,UAAU,WAAW,QAAQ,KAAA;EAC/D;EACA,QAAQ,EACN,IAAI,QAAQ;GACV,OAAO,KAAK;EACd,EACF;CACF,CAAC,CACH;CAEA,OACEJ,gBAAAA,IAACC,KAADD,iBACE;EAAI,OAAAI,aACF,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GACtC,YAAY,KAAK,gBAAgB,GACjC,MACF;CAAC,GALH;EAME,IAAA,OAAA;GACEF,OAAAA,WAAAA;IAAO,OAAA,CAAA,EAAA,OAAA,MAAM,SAAS,YAAY,MAAM,KAAK,SAAS;GAE1C,CAAA,CAAC,CAAD,IADR,MAAM,OACN,KAAA;EACN;EACAC,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;CACD,CAAA,CAAA;AAEL"}

package/dist/browser/color-thumb.d.ts

@@ -0,0 +1,42 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorThumb.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Ref, RenderProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { Accessor } from "solid-js";
+import { HoverEvents } from "@solid2-aria/types-shared";
+import { InputHTMLAttributes } from "@solid2-aria/core/types";
+import { DOMAttributes, GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+import { Color } from "@solid2-aria/stately/color/types";
+interface ColorState {
+  getDisplayColor: () => Color;
+  isDragging: boolean;
+}
+interface InternalColorThumbContextValue {
+  state: ColorState;
+  thumbProps: DOMAttributes;
+  inputXRef: Accessor<HTMLInputElement | null>;
+  setInputXRef: (element: HTMLInputElement) => void;
+  inputYRef?: Accessor<HTMLInputElement | null>;
+  setInputYRef?: (element: HTMLInputElement) => void;
+  xInputProps: InputHTMLAttributes;
+  yInputProps?: InputHTMLAttributes;
+  isDisabled?: boolean;
+}
+export declare const InternalColorThumbContext: import("solid-js").Context<InternalColorThumbContextValue | null>;
+export interface ColorThumbRenderProps {
+  color: Color;
+  isDragging: boolean;
+  isHovered: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDisabled: boolean;
+}
+export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare function ColorThumb(props: ColorThumbProps): JSX.Element;
+export {};
+//# sourceMappingURL=color-thumb.d.ts.map

package/dist/browser/color-thumb.js

@@ -0,0 +1,114 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorThumb.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef, createRenderProps, dom } from "./utils.js";
+import { createComponent, getNextElement, memo, mergeProps, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, merge, omit, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+// src/color-thumb.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input>`);
+const InternalColorThumbContext = createContext(null);
+function ColorThumb(props) {
+	const ctx = requireValue(useContext(InternalColorThumbContext), "Expected required component value");
+	const focus = createFocusRing();
+	const hover = createHover(props);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorThumb",
+		get defaultStyle() {
+			const { style } = ctx.thumbProps;
+			const background = { "background-color": ctx.state.getDisplayColor().toString() };
+			return typeof style === "object" ? {
+				...style,
+				...background
+			} : background;
+		},
+		values: {
+			get color() {
+				return ctx.state.getDisplayColor();
+			},
+			get isDisabled() {
+				return ctx.isDisabled ?? false;
+			},
+			get isDragging() {
+				return ctx.state.isDragging;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return focus.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			}
+		}
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(merge(() => ctx.thumbProps), merge(() => hover.hoverProps ?? {}), omit(filterDOMProps(props, { global: true }), "id"), render);
+	}, {
+		ref: (element) => {
+			assignRef(untrack(() => props.ref), element);
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-dragging"() {
+			return ctx.state.isDragging || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-disabled"() {
+			return ctx.isDisabled === true ? true : void 0;
+		},
+		get children() {
+			return [
+				(() => {
+					var _el$ = getNextElement(_tmpl$);
+					spread(_el$, () => {
+						return mergeProps$1(merge(() => ctx.xInputProps), merge(() => focus.focusProps ?? {}));
+					}, false);
+					ref(() => {
+						return (element) => {
+							ctx.setInputXRef(element);
+						};
+					}, _el$);
+					runHydrationEvents();
+					return _el$;
+				})(),
+				memo(() => {
+					return memo(() => {
+						return !!ctx.yInputProps;
+					})() ? (() => {
+						var _el$2 = getNextElement(_tmpl$);
+						spread(_el$2, () => {
+							return mergeProps$1(merge(() => ctx.yInputProps ?? {}), merge(() => focus.focusProps ?? {}));
+						}, false);
+						ref(() => {
+							return (el) => {
+								if (ctx.setInputYRef) ctx.setInputYRef(el);
+							};
+						}, _el$2);
+						runHydrationEvents();
+						return _el$2;
+					})() : ctx.yInputProps;
+				}),
+				memo(() => {
+					return render.children;
+				})
+			];
+		}
+	}));
+}
+export { ColorThumb, InternalColorThumbContext };
+
+//# sourceMappingURL=color-thumb.js.map

package/dist/browser/color-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-thumb.js","names":["<dom.div\n      {...mergeProps(\n        merge(() => ctx.thumbProps),\n        merge(() => hover.hoverProps ?? {}),\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n      data-hovered={hover.isHovered || undefined}\n      data-dragging={ctx.state.isDragging || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={ctx.isDisabled === true ? true : undefined}\n    >\n      <input\n        {...mergeProps(\n          merge(() => ctx.xInputProps),\n          merge(() => focus.focusProps ?? {})\n        )}\n        ref={(element: HTMLInputElement) => {\n          ctx.setInputXRef(element);\n        }}\n      />\n      {ctx.yInputProps && (\n        <input\n          {...mergeProps(\n            merge(() => ctx.yInputProps ?? {}),\n            merge(() => focus.focusProps ?? {})\n          )}\n          ref={(el: HTMLInputElement) => {\n            if (ctx.setInputYRef) {\n              ctx.setInputYRef(el);\n            }\n          }}\n        />\n      )}\n      {render.children}\n    </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","ref={(element: HTMLInputElement) => {\n          ctx.setInputXRef(element);\n        }}","{ctx.yInputProps && (\n        <input\n          {...mergeProps(\n            merge(() => ctx.yInputProps ?? {}),\n            merge(() => focus.focusProps ?? {})\n          )}\n          ref={(el: HTMLInputElement) => {\n            if (ctx.setInputYRef) {\n              ctx.setInputYRef(el);\n            }\n          }}\n        />\n      )}","ref={(el: HTMLInputElement) => {\n            if (ctx.setInputYRef) {\n              ctx.setInputYRef(el);\n            }\n          }}","render.children","mergeProps","_$createComponent","_$mergeProps","_$getNextElement","_$memo"],"sources":["../../src/color-thumb.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorThumb.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport type { InputHTMLAttributes } from \"@solid2-aria/core/types\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { requireValue } from \"@solid2-aria/core/utils/require-value\";\nimport type { Color } from \"@solid2-aria/stately/color/types\";\nimport type { HoverEvents } from \"@solid2-aria/types-shared\";\nimport type {\n  GlobalDOMAttributes,\n  DOMAttributes,\n} from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, merge, createContext, omit, useContext } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport { assignRef, dom, createRenderProps } from \"./utils\";\nimport type { RenderProps, Ref } from \"./utils\";\n\ninterface ColorState {\n  getDisplayColor: () => Color;\n  isDragging: boolean;\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState;\n  thumbProps: DOMAttributes;\n  inputXRef: Accessor<HTMLInputElement | null>;\n  setInputXRef: (element: HTMLInputElement) => void;\n  inputYRef?: Accessor<HTMLInputElement | null>;\n  setInputYRef?: (element: HTMLInputElement) => void;\n  xInputProps: InputHTMLAttributes;\n  yInputProps?: InputHTMLAttributes;\n  isDisabled?: boolean;\n}\n\nexport const InternalColorThumbContext =\n  createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  color: Color;\n  isDragging: boolean;\n  isHovered: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n}\n\nexport interface ColorThumbProps\n  extends\n    HoverEvents,\n    RenderProps<ColorThumbRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ColorThumb(props: ColorThumbProps): JSX.Element {\n  const ctx = requireValue(\n    useContext(InternalColorThumbContext),\n    \"Expected required component value\"\n  );\n\n  const focus = createFocusRing();\n  const hover = createHover(props);\n\n  const values: ColorThumbRenderProps = {\n    get color() {\n      return ctx.state.getDisplayColor();\n    },\n    get isDisabled() {\n      return ctx.isDisabled ?? false;\n    },\n    get isDragging() {\n      return ctx.state.isDragging;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isHovered() {\n      return hover.isHovered;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-ColorThumb\",\n      get defaultStyle() {\n        const { style } = ctx.thumbProps;\n\n        const background = {\n          \"background-color\": ctx.state.getDisplayColor().toString(),\n        };\n\n        return typeof style === \"object\"\n          ? { ...style, ...background }\n          : background;\n      },\n      values,\n    })\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        merge(() => ctx.thumbProps),\n        merge(() => hover.hoverProps ?? {}),\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n      data-hovered={hover.isHovered || undefined}\n      data-dragging={ctx.state.isDragging || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={ctx.isDisabled === true ? true : undefined}\n    >\n      <input\n        {...mergeProps(\n          merge(() => ctx.xInputProps),\n          merge(() => focus.focusProps ?? {})\n        )}\n        ref={(element: HTMLInputElement) => {\n          ctx.setInputXRef(element);\n        }}\n      />\n      {ctx.yInputProps && (\n        <input\n          {...mergeProps(\n            merge(() => ctx.yInputProps ?? {}),\n            merge(() => focus.focusProps ?? {})\n          )}\n          ref={(el: HTMLInputElement) => {\n            if (ctx.setInputYRef) {\n              ctx.setInputYRef(el);\n            }\n          }}\n        />\n      )}\n      {render.children}\n    </dom.div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAa,4BACX,cAAqD,IAAI;AAmB3D,SAAgB,WAAW,OAAqC;CAC9D,MAAM,MAAM,aACV,WAAW,yBAAyB,GACpC,mCACF;CAEA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,QAAQ,YAAY,KAAK;CAuB/B,MAAM,SAAS,kBACbO,aAAW,OAAO;EAChB,cAAc;EACd,IAAI,eAAe;GACjB,MAAM,EAAE,UAAU,IAAI;GAEtB,MAAM,aAAa,EACjB,oBAAoB,IAAI,MAAM,gBAAgB,CAAC,CAAC,SAAS,EAC3D;GAEA,OAAO,OAAO,UAAU,WACpB;IAAE,GAAG;IAAO,GAAG;GAAW,IAC1B;EACN;EACA,QAAA;GAlCF,IAAI,QAAQ;IACV,OAAO,IAAI,MAAM,gBAAgB;GACnC;GACA,IAAI,aAAa;IACf,OAAO,IAAI,cAAc;GAC3B;GACA,IAAI,aAAa;IACf,OAAO,IAAI,MAAM;GACnB;GACA,IAAI,iBAAiB;IACnB,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;EAiBE;CACF,CAAC,CACH;CAEA,OACEP,gBAAAA,IAACC,KAADD,iBACE;EAAI,OAAAO,aACF,YAAY,IAAI,UAAU,GAC1B,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI,GAClD,MACF;CAAC,GANH;EAOEL,MAAM,YAA4B;GAChC,UACE,cAAc,MAAM,GAAG,GACvB,OACF;EACF;EACA,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,kBAAA;GAAe,OAAA,IAAI,MAAM,cAAc,KAAA;EAAS;EAChD,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,uBAAA;GAAoB,OAAA,MAAM,kBAAkB,KAAA;EAAS;EACrD,IAAA,kBAAA;GAAe,OAAA,IAAI,eAAe,OAAO,OAAO,KAAA;EAAS;EAjB3D,IAAA,WAAA;GAkBC,OAAA;WACC;KAQC,IAAA,OAAAQ,eAAA,MAAA;KAPC,OAAA,YAAA;MAAI,OAAAH,aACF,YAAY,IAAI,WAAW,GAC3B,YAAY,MAAM,cAAc,CAAC,CAAC,CACpC;KAAC,GAAA,KAAA;KACD,UAAA;MAAM,QAAA,YAA8B;OAClC,IAAI,aAAa,OAAO;MAC1B;KAAC,GAFDJ,IAEC;KAPH,mBAQC;KARD,OAAA;IAQC,EAAA,CAAA;IACDC,WAAAA;;MAAC,OAAA,CAAA,CAAA,IAAI;KAYJ,CAAA,CAAC,CAAD,WAXC;MAUC,IAAA,QAAAM,eAAA,MAAA;MATC,OAAA,aAAA;OAAI,OAAAH,aACF,YAAY,IAAI,eAAe,CAAC,CAAC,GACjC,YAAY,MAAM,cAAc,CAAC,CAAC,CACpC;MAAC,GAAA,KAAA;MACD,UAAA;OAAM,QAAA,OAAyB;QAC7B,IAAI,IAAI,cACN,IAAI,aAAa,EAAE;OAEvB;MAAC,GAJDF,KAIC;MATH,mBAUC;MAVD,OAAA;KAUC,EAAA,CAAA,IAXF,IAAI;IAYJ,CAAA;IACAC,WAAAA;KAAO,OAAA,OAAA;IAAO,CAAA;GAtBhB;EAuBQ;;AAEb"}

package/dist/browser/color-wheel.d.ts

@@ -0,0 +1,29 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorWheel.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ContextValue, Ref, RenderProps, SlotProps, StyleRenderProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaColorWheelOptions } from "@solid2-aria/core/color/create-color-wheel";
+import { ColorWheelState } from "@solid2-aria/stately/color/create-color-wheel-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export interface ColorWheelRenderProps {
+  isDisabled: boolean;
+  state: ColorWheelState;
+}
+export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export type ColorWheelTrackRenderProps = ColorWheelRenderProps;
+export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+type TrackContext = Omit<ColorWheelTrackProps, keyof JSX.HTMLAttributes<HTMLDivElement>> & Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref" | "class" | "style" | "children"> & Pick<ColorWheelTrackProps, "class" | "style">;
+export declare const ColorWheelContext: import("solid-js").Context<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>;
+export declare const ColorWheelStateContext: import("solid-js").Context<ColorWheelState | null>;
+export declare const ColorWheelTrackContext: import("solid-js").Context<ContextValue<TrackContext, HTMLDivElement>>;
+export declare function ColorWheel(input: ColorWheelProps): JSX.Element;
+export declare function ColorWheelTrack(input: ColorWheelTrackProps): JSX.Element;
+export {};
+//# sourceMappingURL=color-wheel.d.ts.map

package/dist/browser/color-wheel.js

@@ -0,0 +1,109 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorWheel.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, dom } from "./utils.js";
+import { InternalColorThumbContext } from "./color-thumb.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createColorWheel } from "@solid2-aria/core/color/create-color-wheel";
+import { createColorWheelState } from "@solid2-aria/stately/color/create-color-wheel-state";
+// src/color-wheel.tsx
+const ColorWheelContext = createContext(null);
+const ColorWheelStateContext = createContext(null);
+const ColorWheelTrackContext = createContext(null);
+function ColorWheel(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorWheelContext);
+	const state = createColorWheelState(props);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const aria = createColorWheel(props, state, inputRef);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorWheel",
+		defaultStyle: { position: "relative" },
+		values: {
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			state
+		}
+	}));
+	const thumb = {
+		inputXRef: inputRef,
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		setInputXRef: setInputRef,
+		state,
+		get thumbProps() {
+			return aria.thumbProps;
+		},
+		get xInputProps() {
+			return aria.inputProps;
+		}
+	};
+	return createComponent(dom.div, mergeProps(() => {
+		return omit(filterDOMProps(props, { global: true }), "id");
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return memo(() => {
+				return !!(typeof props.slot === "string" && props.slot.length > 0);
+			})() ? props.slot : void 0;
+		},
+		get "data-disabled"() {
+			return props.isDisabled === true ? true : void 0;
+		},
+		get children() {
+			return createComponent(ColorWheelStateContext, {
+				value: state,
+				get children() {
+					return createComponent(ColorWheelTrackContext, {
+						get value() {
+							return merge(() => aria.trackProps);
+						},
+						get children() {
+							return createComponent(InternalColorThumbContext, {
+								value: thumb,
+								get children() {
+									return render.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function ColorWheelTrack(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorWheelTrackContext);
+	const state = requireValue(useContext(ColorWheelStateContext), "Expected required component value");
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorWheelTrack",
+		values: {
+			get isDisabled() {
+				return state.isDisabled;
+			},
+			state
+		}
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return omit(props, "ref");
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-disabled"() {
+			return state.isDisabled || void 0;
+		}
+	}));
+}
+export { ColorWheel, ColorWheelContext, ColorWheelStateContext, ColorWheelTrack, ColorWheelTrackContext };
+
+//# sourceMappingURL=color-wheel.js.map