@solid2-aria/components 0.0.0-stage → 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-area.js","names":["<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        merge(() => aria.colorAreaProps),\n        render\n      )}\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-disabled={props.isDisabled === true ? true : undefined}\n    >\n      <ColorAreaStateContext value={state}>\n        <InternalColorThumbContext value={thumb}>\n          {render.children}\n        </InternalColorThumbContext>\n      </ColorAreaStateContext>\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","<ColorAreaStateContext value={state}>\n        <InternalColorThumbContext value={thumb}>\n          {render.children}\n        </InternalColorThumbContext>\n      </ColorAreaStateContext>","value={state}","<InternalColorThumbContext value={thumb}>\n          {render.children}\n        </InternalColorThumbContext>","value={thumb}","mergeProps","_$createComponent","_$mergeProps","_$memo"],"sources":["../../src/color-area.tsx"],"sourcesContent":["/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorArea.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 { createColorArea } from \"@solid2-aria/core/color/create-color-area\";\nimport type { AriaColorAreaProps } from \"@solid2-aria/core/color/create-color-area\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { createColorAreaState } from \"@solid2-aria/stately/color/create-color-area-state\";\nimport type { ColorAreaState } from \"@solid2-aria/stately/color/create-color-area-state\";\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 { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { ContextValue, RenderProps, SlotProps, Ref } from \"./utils\";\n\nexport interface ColorAreaRenderProps {\n  isDisabled: boolean;\n  state: ColorAreaState;\n}\n\nexport interface ColorAreaProps\n  extends\n    AriaColorAreaProps,\n    RenderProps<ColorAreaRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ColorAreaContext =\n  createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);\n\nexport const ColorAreaStateContext = createContext<ColorAreaState | null>(null);\n\nexport function ColorArea(input: ColorAreaProps): JSX.Element {\n  const [inputXRef, setInputXRef] = createSignal<HTMLInputElement | null>(\n    null,\n    { ownedWrite: true }\n  );\n\n  const [inputYRef, setInputYRef] = createSignal<HTMLInputElement | null>(\n    null,\n    { ownedWrite: true }\n  );\n\n  const [props, ref, setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorAreaContext\n  );\n\n  const state = createColorAreaState(props);\n\n  const aria = createColorArea(\n    mergeProps(props, { containerRef: ref, inputXRef, inputYRef }),\n    state\n  );\n\n  const values: ColorAreaRenderProps = {\n    get isDisabled() {\n      return props.isDisabled ?? false;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-ColorArea\",\n      get defaultStyle() {\n        const { style } = aria.colorAreaProps;\n\n        return typeof style === \"object\" ? style : undefined;\n      },\n      values,\n    })\n  );\n\n  const thumb = {\n    inputXRef,\n    inputYRef,\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    setInputXRef: (element: HTMLInputElement) => {\n      setInputXRef(element);\n    },\n    setInputYRef: (element: HTMLInputElement) => {\n      setInputYRef(element);\n    },\n    state,\n    get thumbProps() {\n      return aria.thumbProps;\n    },\n    get xInputProps() {\n      return aria.xInputProps;\n    },\n    get yInputProps() {\n      return aria.yInputProps;\n    },\n  };\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\"),\n        merge(() => aria.colorAreaProps),\n        render\n      )}\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-disabled={props.isDisabled === true ? true : undefined}\n    >\n      <ColorAreaStateContext value={state}>\n        <InternalColorThumbContext value={thumb}>\n          {render.children}\n        </InternalColorThumbContext>\n      </ColorAreaStateContext>\n    </dom.div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAkCA,MAAa,mBACX,cAAqE,IAAI;AAE3E,MAAa,wBAAwB,cAAqC,IAAI;AAE9E,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,WAAW,gBAAgB,aAChC,MACA,EAAE,YAAY,KAAK,CACrB;CAEA,MAAM,CAAC,WAAW,gBAAgB,aAChC,MACA,EAAE,YAAY,KAAK,CACrB;CAEA,MAAM,CAAC,OAAO,KAAK,UAAU,mBAC3B,OACA,cAAc,MAAM,GAAG,GACvB,gBACF;CAEA,MAAM,QAAQ,qBAAqB,KAAK;CAExC,MAAM,OAAO,gBACXQ,aAAW,OAAO;EAAE,cAAc;EAAK;EAAW;CAAU,CAAC,GAC7D,KACF;CASA,MAAM,SAAS,kBACbA,aAAW,OAAO;EAChB,cAAc;EACd,IAAI,eAAe;GACjB,MAAM,EAAE,UAAU,KAAK;GAEvB,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAA;EAC7C;EACA,QAAA;GAdF,IAAI,aAAa;IACf,OAAO,MAAM,cAAc;GAC7B;GACA;EAWE;CACF,CAAC,CACH;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,eAAe,YAA8B;GAC3C,aAAa,OAAO;EACtB;EACA,eAAe,YAA8B;GAC3C,aAAa,OAAO;EACtB;EACA;EACA,IAAI,aAAa;GACf,OAAO,KAAK;EACd;EACA,IAAI,cAAc;GAChB,OAAO,KAAK;EACd;EACA,IAAI,cAAc;GAChB,OAAO,KAAK;EACd;CACF;CAEA,OACER,gBAAAA,IAACC,KAADD,iBACE;EAAI,OAAAQ,aACF,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI,GAClD,YAAY,KAAK,cAAc,GAC/B,MACF;CAAC,GALH;EAMEN,MAAM,YAA4B;GAChC,OAAO,OAAO;EAChB;EACA,IAAA,OAAA;GACEC,OAAAA,WAAAA;IAAO,OAAA,CAAA,EAAA,OAAA,MAAM,SAAS,YAAY,MAAM,KAAK,SAAS;GAE1C,CAAA,CAAC,CAAD,IADR,MAAM,OACN,KAAA;EACN;EACA,IAAA,kBAAA;GAAe,OAAA,MAAM,eAAe,OAAO,OAAO,KAAA;EAAS;EAd7D,IAAA,WAAA;GAgBEC,OAAAA,gBAAAA,uBAAAA;IAAuBC,OAAO;IAA9B,IAAA,WAAA;KACEC,OAAAA,gBAAAA,2BAAAA;MAA2BC,OAAO;MAAlC,IAAA,WAAA;OACG,OAAA,OAAO;MACiB;;IACN;;EAChB;;AAEb"}

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 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-aria-components/src/ColorField.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, RACValidation, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaColorFieldProps } from "@solid2-aria/core/color/create-color-field";
+import { ColorFieldState } from "@solid2-aria/stately/color/create-color-field-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+import { ColorChannel, ColorSpace } from "@solid2-aria/stately/color/types";
+export interface ColorFieldRenderProps {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isReadOnly: boolean;
+  isRequired: boolean;
+  channel: ColorChannel | "hex";
+  state: ColorFieldState;
+}
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, "label" | "placeholder" | "description" | "errorMessage" | "validationState" | "validationBehavior">, RACValidation, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  channel?: ColorChannel;
+  colorSpace?: ColorSpace;
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ColorFieldContext: import("solid-js").Context<ContextValue<ColorFieldProps, HTMLDivElement>>;
+export declare const ColorFieldStateContext: import("solid-js").Context<ColorFieldState | null>;
+export declare function ColorField(input: ColorFieldProps): JSX.Element;
+//# sourceMappingURL=color-field.d.ts.map

package/dist/browser/color-field.js

@@ -0,0 +1,232 @@
+/*
+ * Copyright 2022 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-aria-components/src/ColorField.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, createRenderProps, createSlot, dom, removeDataAttributes } from "./utils.js";
+import { LabelContext } from "./label.js";
+import { TextContext } from "./text.js";
+import { FieldErrorContext } from "./field-error.js";
+import { GroupContext } from "./group.js";
+import { InputContext } from "./input.js";
+import { createComponent, effect, getNextElement, memo, mergeProps, setAttribute, setProperty, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createSignal, merge, omit, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { createColorChannelField } from "@solid2-aria/core/color/create-color-channel-field";
+import { createColorField } from "@solid2-aria/core/color/create-color-field";
+import { createColorChannelFieldState } from "@solid2-aria/stately/color/create-color-channel-field-state";
+import { createColorFieldState } from "@solid2-aria/stately/color/create-color-field-state";
+// src/color-field.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input type=hidden>`);
+const ColorFieldContext = createContext(null);
+const ColorFieldStateContext = createContext(null);
+function ColorField(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorFieldContext);
+	return createComponent(Show, {
+		get when() {
+			return props.channel;
+		},
+		get fallback() {
+			return createComponent(HexColorField, mergeProps(props, { ref: (element) => {
+				setRef(element);
+			} }));
+		},
+		children: (channel) => createComponent(ColorChannelField, mergeProps(props, {
+			ref: (element) => {
+				setRef(element);
+			},
+			get channel() {
+				return channel();
+			}
+		}))
+	});
+}
+function HexColorField(props) {
+	const options = mergeProps$1(props, { get validationBehavior() {
+		return props.validationBehavior ?? "native";
+	} });
+	const state = createColorFieldState(options);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => (props["aria-label"]?.length ?? 0) === 0 && (props["aria-labelledby"]?.length ?? 0) === 0);
+	const aria = createColorField(mergeProps$1(removeDataAttributes(options), { get label() {
+		return label();
+	} }), state, inputRef);
+	return createComponent(ColorFieldChildren, {
+		props,
+		state,
+		aria,
+		inputRef: (element) => {
+			setInputRef(element);
+		},
+		registerLabel
+	});
+}
+function ColorChannelField(props) {
+	const locale = createLocale();
+	const options = mergeProps$1(props, {
+		get locale() {
+			return locale.locale;
+		},
+		get validationBehavior() {
+			return props.validationBehavior ?? "native";
+		}
+	});
+	const state = createColorChannelFieldState(options);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => (props["aria-label"]?.length ?? 0) === 0 && (props["aria-labelledby"]?.length ?? 0) === 0);
+	const aria = createColorChannelField(mergeProps$1(removeDataAttributes(options), { get label() {
+		return label();
+	} }), state, inputRef);
+	return [createComponent(ColorFieldChildren, {
+		props,
+		state,
+		aria,
+		inputRef: (element) => {
+			setInputRef(element);
+		},
+		registerLabel
+	}), memo(() => {
+		return memo(() => {
+			return (props.name?.length ?? 0) > 0;
+		})() && (() => {
+			var _el$ = getNextElement(_tmpl$);
+			effect(() => {
+				return {
+					e: props.name,
+					t: props.form,
+					a: Number.isNaN(state.numberValue) ? "" : state.numberValue
+				};
+			}, ({ e, t, a }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$, "name", e);
+				t !== _p$?.t && setAttribute(_el$, "form", t);
+				setProperty(_el$, "value", a);
+			});
+			return _el$;
+		})();
+	})];
+}
+function ColorFieldChildren(input) {
+	const { props } = untrack(() => input);
+	const { state } = untrack(() => input);
+	const { aria } = untrack(() => input);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorField",
+		values: {
+			get channel() {
+				return props.channel ?? "hex";
+			},
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			get isInvalid() {
+				return aria.isInvalid;
+			},
+			get isReadOnly() {
+				return props.isReadOnly ?? false;
+			},
+			get isRequired() {
+				return props.isRequired ?? false;
+			},
+			state
+		}
+	}));
+	return createComponent(ColorFieldStateContext, {
+		value: state,
+		get children() {
+			return createComponent(InputContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.inputProps), { get ref() {
+						return input.inputRef;
+					} });
+				},
+				get children() {
+					return createComponent(LabelContext, {
+						get value() {
+							return mergeProps$1(merge(() => aria.labelProps), { get registerSlot() {
+								return input.registerLabel;
+							} });
+						},
+						get children() {
+							return createComponent(GroupContext, {
+								value: {
+									get isDisabled() {
+										return props.isDisabled ?? false;
+									},
+									get isInvalid() {
+										return aria.isInvalid;
+									},
+									role: "presentation"
+								},
+								get children() {
+									return createComponent(TextContext, {
+										value: { slots: {
+											get description() {
+												return aria.descriptionProps;
+											},
+											get errorMessage() {
+												return aria.errorMessageProps;
+											}
+										} },
+										get children() {
+											return createComponent(FieldErrorContext, {
+												value: aria,
+												get children() {
+													return createComponent(dom.div, mergeProps(() => {
+														return omit(filterDOMProps(props, { global: true }), "id");
+													}, render, {
+														ref: (el) => {
+															assignRef(untrack(() => props.ref), el);
+														},
+														get slot() {
+															return memo(() => {
+																return !!(typeof props.slot === "string" && props.slot.length > 0);
+															})() ? props.slot : void 0;
+														},
+														get "data-channel"() {
+															return props.channel ?? "hex";
+														},
+														get "data-disabled"() {
+															return props.isDisabled === true ? true : void 0;
+														},
+														get "data-invalid"() {
+															return aria.isInvalid || void 0;
+														},
+														get "data-readonly"() {
+															return props.isReadOnly === true ? true : void 0;
+														},
+														get "data-required"() {
+															return props.isRequired === true ? true : void 0;
+														},
+														get children() {
+															return render.children;
+														}
+													}));
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+export { ColorField, ColorFieldContext, ColorFieldStateContext };
+
+//# sourceMappingURL=color-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-field.js","names":["<Show\n      when={props.channel}\n      fallback={\n        <HexColorField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n        />\n      }\n    >\n      {(channel) => (\n        <ColorChannelField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n          channel={channel()}\n        />\n      )}\n    </Show>","<HexColorField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n        />","ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}","<ColorChannelField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n          channel={channel()}\n        />","<ColorFieldChildren\n      props={props}\n      state={state}\n      aria={aria}\n      inputRef={(element: HTMLInputElement) => {\n        setInputRef(element);\n      }}\n      registerLabel={registerLabel}\n    />","inputRef={(element: HTMLInputElement) => {\n        setInputRef(element);\n      }}","<ColorFieldChildren\n        props={props}\n        state={state}\n        aria={aria}\n        inputRef={(element: HTMLInputElement) => {\n          setInputRef(element);\n        }}\n        registerLabel={registerLabel}\n      />","inputRef={(element: HTMLInputElement) => {\n          setInputRef(element);\n        }}","{(props.name?.length ?? 0) > 0 && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={Number.isNaN(state.numberValue) ? \"\" : state.numberValue}\n        />\n      )}","form={props.form}","value={Number.isNaN(state.numberValue) ? \"\" : state.numberValue}","<ColorFieldStateContext value={state}>\n      <InputContext\n        value={mergeProps(\n          merge(() => aria.inputProps),\n          {\n            get ref() {\n              return input.inputRef;\n            },\n          }\n        )}\n      >\n        <LabelContext\n          value={mergeProps(\n            merge(() => aria.labelProps),\n            {\n              get registerSlot() {\n                return input.registerLabel;\n              },\n            }\n          )}\n        >\n          <GroupContext\n            value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}\n          >\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>\n          </GroupContext>\n        </LabelContext>\n      </InputContext>\n    </ColorFieldStateContext>","value={state}","<InputContext\n        value={mergeProps(\n          merge(() => aria.inputProps),\n          {\n            get ref() {\n              return input.inputRef;\n            },\n          }\n        )}\n      >\n        <LabelContext\n          value={mergeProps(\n            merge(() => aria.labelProps),\n            {\n              get registerSlot() {\n                return input.registerLabel;\n              },\n            }\n          )}\n        >\n          <GroupContext\n            value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}\n          >\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>\n          </GroupContext>\n        </LabelContext>\n      </InputContext>","<LabelContext\n          value={mergeProps(\n            merge(() => aria.labelProps),\n            {\n              get registerSlot() {\n                return input.registerLabel;\n              },\n            }\n          )}\n        >\n          <GroupContext\n            value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}\n          >\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>\n          </GroupContext>\n        </LabelContext>","<GroupContext\n            value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}\n          >\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>\n          </GroupContext>","value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}","<TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>","value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}","<FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>","value={aria}","<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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>","dom.div","ref={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}","typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined","_$createComponent","_$mergeProps","mergeProps","_$memo","_$getNextElement","_$setAttribute"],"sources":["../../src/color-field.tsx"],"sourcesContent":["/*\n * Copyright 2022 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-aria-components/src/ColorField.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 { createColorChannelField } from \"@solid2-aria/core/color/create-color-channel-field\";\nimport { createColorField } from \"@solid2-aria/core/color/create-color-field\";\nimport type {\n  AriaColorFieldProps,\n  ColorFieldAria,\n} from \"@solid2-aria/core/color/create-color-field\";\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 { createColorChannelFieldState } from \"@solid2-aria/stately/color/create-color-channel-field-state\";\nimport { createColorFieldState } from \"@solid2-aria/stately/color/create-color-field-state\";\nimport type { ColorFieldState } from \"@solid2-aria/stately/color/create-color-field-state\";\nimport type {\n  ColorChannel,\n  ColorSpace,\n} from \"@solid2-aria/stately/color/types\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  untrack,\n  createSignal,\n  merge,\n  createContext,\n  Show,\n  omit,\n} from \"solid-js\";\n\nimport { FieldErrorContext } from \"./field-error\";\nimport { GroupContext } from \"./group\";\nimport { InputContext } from \"./input\";\nimport { LabelContext } from \"./label\";\nimport { TextContext } from \"./text\";\nimport {\n  dom,\n  assignRef,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n  removeDataAttributes,\n} from \"./utils\";\nimport type {\n  ContextValue,\n  RenderProps,\n  SlotProps,\n  Ref,\n  RACValidation,\n} from \"./utils\";\n\nexport interface ColorFieldRenderProps {\n  isDisabled: boolean;\n  isInvalid: boolean;\n  isReadOnly: boolean;\n  isRequired: boolean;\n  channel: ColorChannel | \"hex\";\n  state: ColorFieldState;\n}\n\nexport interface ColorFieldProps\n  extends\n    Omit<\n      AriaColorFieldProps,\n      | \"label\"\n      | \"placeholder\"\n      | \"description\"\n      | \"errorMessage\"\n      | \"validationState\"\n      | \"validationBehavior\"\n    >,\n    RACValidation,\n    RenderProps<ColorFieldRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  channel?: ColorChannel;\n  colorSpace?: ColorSpace;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ColorFieldContext =\n  createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);\n\nexport const ColorFieldStateContext = createContext<ColorFieldState | null>(\n  null\n);\n\nexport function ColorField(input: ColorFieldProps): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ColorFieldContext\n  );\n\n  return (\n    <Show\n      when={props.channel}\n      fallback={\n        <HexColorField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n        />\n      }\n    >\n      {(channel) => (\n        <ColorChannelField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n          channel={channel()}\n        />\n      )}\n    </Show>\n  );\n}\n\nfunction HexColorField(props: ColorFieldProps): JSX.Element {\n  const options = mergeProps(props, {\n    get validationBehavior() {\n      return props.validationBehavior ?? \"native\";\n    },\n  });\n\n  const state = createColorFieldState(options);\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 = createColorField(\n    mergeProps(removeDataAttributes(options), {\n      get label() {\n        return label();\n      },\n    }),\n    state,\n    inputRef\n  );\n\n  return (\n    <ColorFieldChildren\n      props={props}\n      state={state}\n      aria={aria}\n      inputRef={(element: HTMLInputElement) => {\n        setInputRef(element);\n      }}\n      registerLabel={registerLabel}\n    />\n  );\n}\n\nfunction ColorChannelField(\n  props: ColorFieldProps & { channel: ColorChannel }\n): JSX.Element {\n  const locale = createLocale();\n\n  const options = mergeProps(props, {\n    get locale() {\n      return locale.locale;\n    },\n    get validationBehavior() {\n      return props.validationBehavior ?? \"native\";\n    },\n  });\n\n  const state = createColorChannelFieldState(options);\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 = createColorChannelField(\n    mergeProps(removeDataAttributes(options), {\n      get label() {\n        return label();\n      },\n    }),\n    state,\n    inputRef\n  );\n\n  return (\n    <>\n      <ColorFieldChildren\n        props={props}\n        state={state}\n        aria={aria}\n        inputRef={(element: HTMLInputElement) => {\n          setInputRef(element);\n        }}\n        registerLabel={registerLabel}\n      />\n      {(props.name?.length ?? 0) > 0 && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={Number.isNaN(state.numberValue) ? \"\" : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\nfunction ColorFieldChildren(input: {\n  props: ColorFieldProps;\n  state: ColorFieldState;\n  aria: ColorFieldAria | ReturnType<typeof createColorChannelField>;\n  inputRef: (element: HTMLInputElement) => void;\n  registerLabel: ReturnType<typeof createSlot>[0];\n}): JSX.Element {\n  const { props } = untrack(() => input);\n  const { state } = untrack(() => input);\n  const { aria } = untrack(() => input);\n\n  const values: ColorFieldRenderProps = {\n    get channel() {\n      return props.channel ?? \"hex\";\n    },\n    get isDisabled() {\n      return props.isDisabled ?? false;\n    },\n    get isInvalid() {\n      return aria.isInvalid;\n    },\n    get isReadOnly() {\n      return props.isReadOnly ?? false;\n    },\n    get isRequired() {\n      return props.isRequired ?? false;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-ColorField\", values })\n  );\n\n  return (\n    <ColorFieldStateContext value={state}>\n      <InputContext\n        value={mergeProps(\n          merge(() => aria.inputProps),\n          {\n            get ref() {\n              return input.inputRef;\n            },\n          }\n        )}\n      >\n        <LabelContext\n          value={mergeProps(\n            merge(() => aria.labelProps),\n            {\n              get registerSlot() {\n                return input.registerLabel;\n              },\n            }\n          )}\n        >\n          <GroupContext\n            value={{\n              get isDisabled() {\n                return props.isDisabled ?? false;\n              },\n              get isInvalid() {\n                return aria.isInvalid;\n              },\n              role: \"presentation\",\n            }}\n          >\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              <FieldErrorContext value={aria}>\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={(el: HTMLDivElement) => {\n                    assignRef(\n                      untrack(() => props.ref),\n                      el\n                    );\n                  }}\n                  slot={\n                    typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined\n                  }\n                  data-channel={props.channel ?? \"hex\"}\n                  data-disabled={props.isDisabled === true ? true : undefined}\n                  data-invalid={aria.isInvalid || undefined}\n                  data-readonly={props.isReadOnly === true ? true : undefined}\n                  data-required={props.isRequired === true ? true : undefined}\n                >\n                  {render.children}\n                </dom.div>\n              </FieldErrorContext>\n            </TextContext>\n          </GroupContext>\n        </LabelContext>\n      </InputContext>\n    </ColorFieldStateContext>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 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-aria-components/src/ColorPicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ChildrenOrFunction, SlotProps, SlottedContextValue } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { ColorPickerProps as ColorPickerProps$1, ColorPickerState } from "@solid2-aria/stately/color/create-color-picker-state";
+import { Color } from "@solid2-aria/stately/color/types";
+export interface ColorPickerRenderProps {
+  color: Color;
+}
+export interface ColorPickerProps extends ColorPickerProps$1, SlotProps {
+  children: ChildrenOrFunction<ColorPickerRenderProps>;
+}
+export declare const ColorPickerContext: import("solid-js").Context<SlottedContextValue<ColorPickerProps>>;
+export declare const ColorPickerStateContext: import("solid-js").Context<ColorPickerState | null>;
+export declare function ColorPicker(input: ColorPickerProps): JSX.Element;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/browser/color-picker.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2024 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-aria-components/src/ColorPicker.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createRenderProps, createSlottedContext } from "./utils.js";
+import { ColorAreaContext } from "./color-area.js";
+import { ColorFieldContext } from "./color-field.js";
+import { ColorSliderContext } from "./color-slider.js";
+import { ColorSwatchContext } from "./color-swatch.js";
+import { ColorSwatchPickerContext } from "./color-swatch-picker.js";
+import { ColorWheelContext } from "./color-wheel.js";
+import { createComponent } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, untrack } from "solid-js";
+import { createColorPickerState } from "@solid2-aria/stately/color/create-color-picker-state";
+// src/color-picker.tsx
+const ColorPickerContext = createContext(null);
+const ColorPickerStateContext = createContext(null);
+function ColorPicker(input) {
+	const props = mergeProps$1(createSlottedContext(ColorPickerContext, untrack(() => input.slot)) ?? {}, input);
+	const state = createColorPickerState(props);
+	const render = createRenderProps(mergeProps$1(props, { values: { get color() {
+		return state.color;
+	} } }));
+	const value = {
+		onChange: state.setColor,
+		get value() {
+			return state.color;
+		}
+	};
+	return createComponent(ColorPickerStateContext, {
+		value: state,
+		get children() {
+			return createComponent(ColorSliderContext, {
+				value,
+				get children() {
+					return createComponent(ColorAreaContext, {
+						value,
+						get children() {
+							return createComponent(ColorWheelContext, {
+								value,
+								get children() {
+									return createComponent(ColorFieldContext, {
+										value,
+										get children() {
+											return createComponent(ColorSwatchContext, {
+												value: { get color() {
+													return state.color;
+												} },
+												get children() {
+													return createComponent(ColorSwatchPickerContext, {
+														value,
+														get children() {
+															return render.children;
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+export { ColorPicker, ColorPickerContext, ColorPickerStateContext };
+
+//# sourceMappingURL=color-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","names":["<ColorPickerStateContext value={state}>\n      <ColorSliderContext value={value}>\n        <ColorAreaContext value={value}>\n          <ColorWheelContext value={value}>\n            <ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>\n          </ColorWheelContext>\n        </ColorAreaContext>\n      </ColorSliderContext>\n    </ColorPickerStateContext>","value={state}","<ColorSliderContext value={value}>\n        <ColorAreaContext value={value}>\n          <ColorWheelContext value={value}>\n            <ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>\n          </ColorWheelContext>\n        </ColorAreaContext>\n      </ColorSliderContext>","<ColorAreaContext value={value}>\n          <ColorWheelContext value={value}>\n            <ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>\n          </ColorWheelContext>\n        </ColorAreaContext>","<ColorWheelContext value={value}>\n            <ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>\n          </ColorWheelContext>","<ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>","<ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>","value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}","<ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>","mergeProps","_$createComponent"],"sources":["../../src/color-picker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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-aria-components/src/ColorPicker.tsx.\n * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { createColorPickerState } from \"@solid2-aria/stately/color/create-color-picker-state\";\nimport type {\n  ColorPickerProps as StatelyColorPickerProps,\n  ColorPickerState,\n} from \"@solid2-aria/stately/color/create-color-picker-state\";\nimport type { Color } from \"@solid2-aria/stately/color/types\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, createContext } from \"solid-js\";\n\nimport { ColorAreaContext } from \"./color-area\";\nimport { ColorFieldContext } from \"./color-field\";\nimport { ColorSliderContext } from \"./color-slider\";\nimport { ColorSwatchContext } from \"./color-swatch\";\nimport { ColorSwatchPickerContext } from \"./color-swatch-picker\";\nimport { ColorWheelContext } from \"./color-wheel\";\nimport { createRenderProps, createSlottedContext } from \"./utils\";\nimport type {\n  ChildrenOrFunction,\n  SlotProps,\n  SlottedContextValue,\n} from \"./utils\";\n\nexport interface ColorPickerRenderProps {\n  color: Color;\n}\n\nexport interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {\n  children: ChildrenOrFunction<ColorPickerRenderProps>;\n}\n\nexport const ColorPickerContext =\n  createContext<SlottedContextValue<ColorPickerProps>>(null);\n\nexport const ColorPickerStateContext = createContext<ColorPickerState | null>(\n  null\n);\n\nexport function ColorPicker(input: ColorPickerProps): JSX.Element {\n  const props = mergeProps(\n    createSlottedContext(\n      ColorPickerContext,\n      untrack(() => input.slot)\n    ) ?? {},\n    input\n  );\n\n  const state = createColorPickerState(props);\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      values: {\n        get color() {\n          return state.color;\n        },\n      },\n    })\n  );\n\n  const value = {\n    onChange: state.setColor,\n    get value() {\n      return state.color;\n    },\n  };\n\n  return (\n    <ColorPickerStateContext value={state}>\n      <ColorSliderContext value={value}>\n        <ColorAreaContext value={value}>\n          <ColorWheelContext value={value}>\n            <ColorFieldContext value={value}>\n              <ColorSwatchContext\n                value={{\n                  get color() {\n                    return state.color;\n                  },\n                }}\n              >\n                <ColorSwatchPickerContext value={value}>\n                  {render.children}\n                </ColorSwatchPickerContext>\n              </ColorSwatchContext>\n            </ColorFieldContext>\n          </ColorWheelContext>\n        </ColorAreaContext>\n      </ColorSliderContext>\n    </ColorPickerStateContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAa,qBACX,cAAqD,IAAI;AAE3D,MAAa,0BAA0B,cACrC,IACF;AAEA,SAAgB,YAAY,OAAsC;CAChE,MAAM,QAAQS,aACZ,qBACE,oBACA,cAAc,MAAM,IAAI,CAC1B,KAAK,CAAC,GACN,KACF;CAEA,MAAM,QAAQ,uBAAuB,KAAK;CAE1C,MAAM,SAAS,kBACbA,aAAW,OAAO,EAChB,QAAQ,EACN,IAAI,QAAQ;EACV,OAAO,MAAM;CACf,EACF,EACF,CAAC,CACH;CAEA,MAAM,QAAQ;EACZ,UAAU,MAAM;EAChB,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;CACF;CAEA,OACET,gBAAAA,yBAAAA;EAAyBC,OAAO;EAAhC,IAAA,WAAA;GACEC,OAAAA,gBAAAA,oBAAAA;IAA2B;IAA3B,IAAA,WAAA;KACEC,OAAAA,gBAAAA,kBAAAA;MAAyB;MAAzB,IAAA,WAAA;OACEC,OAAAA,gBAAAA,mBAAAA;QAA0B;QAA1B,IAAA,WAAA;SACEC,OAAAA,gBAAAA,mBAAAA;UAA0B;UAA1B,IAAA,WAAA;WACEC,OAAAA,gBAAAA,oBAAAA;YACEC,OAAO,EACL,IAAI,QAAQ;aACV,OAAO,MAAM;YACf,EACF;YALF,IAAA,WAAA;aAOEC,OAAAA,gBAAAA,0BAAAA;cAAiC;cAAjC,IAAA,WAAA;eACG,OAAA,OAAO;cACgB;;YACR;;UACH;;QACF;;MACH;;IACA;;EACG;;AAE7B"}

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

@@ -0,0 +1,23 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSlider.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 } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaColorSliderProps } from "@solid2-aria/core/color/create-color-slider";
+import { ColorSliderState } from "@solid2-aria/stately/color/create-color-slider-state";
+import { Orientation } from "@solid2-aria/types-shared";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export interface ColorSliderRenderProps {
+  orientation: Orientation;
+  isDisabled: boolean;
+  state: ColorSliderState;
+}
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, "label">, RenderProps<ColorSliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ColorSliderContext: import("solid-js").Context<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>;
+export declare const ColorSliderStateContext: import("solid-js").Context<ColorSliderState | null>;
+export declare function ColorSlider(input: ColorSliderProps): JSX.Element;
+//# sourceMappingURL=color-slider.d.ts.map

package/dist/browser/color-slider.js

@@ -0,0 +1,132 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorSlider.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, createSlot, dom } from "./utils.js";
+import { LabelContext } from "./label.js";
+import { InternalColorThumbContext } from "./color-thumb.js";
+import { SliderOutputContext, SliderStateContext, SliderTrackContext } from "./slider.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 } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { createColorSlider } from "@solid2-aria/core/color/create-color-slider";
+import { createColorSliderState } from "@solid2-aria/stately/color/create-color-slider-state";
+// src/color-slider.tsx
+const ColorSliderContext = createContext(null);
+const ColorSliderStateContext = createContext(null);
+function ColorSlider(input) {
+	const [trackRef, setTrackRef] = createSignal(null, { ownedWrite: true });
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorSliderContext);
+	const locale = createLocale();
+	const state = createColorSliderState(mergeProps$1(props, { get locale() {
+		return locale.locale;
+	} }));
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => (props["aria-label"]?.length ?? 0) === 0 && (props["aria-labelledby"]?.length ?? 0) === 0);
+	const aria = createColorSlider(mergeProps$1(props, {
+		inputRef,
+		get label() {
+			return label();
+		},
+		trackRef
+	}), state);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorSlider",
+		values: {
+			get isDisabled() {
+				return state.isDisabled;
+			},
+			get orientation() {
+				return state.orientation;
+			},
+			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(ColorSliderStateContext, {
+		value: state,
+		get children() {
+			return createComponent(SliderStateContext, {
+				value: state,
+				get children() {
+					return createComponent(SliderTrackContext, {
+						get value() {
+							return mergeProps$1(merge(() => aria.trackProps), {
+								ref: (element) => {
+									setTrackRef(element);
+								},
+								trackRef
+							});
+						},
+						get children() {
+							return createComponent(SliderOutputContext, {
+								get value() {
+									return merge(() => aria.outputProps);
+								},
+								get children() {
+									return createComponent(LabelContext, {
+										get value() {
+											return mergeProps$1(merge(() => aria.labelProps), {
+												get children() {
+													return state.value.getChannelName(props.channel, locale.locale);
+												},
+												registerSlot: registerLabel
+											});
+										},
+										get children() {
+											return createComponent(InternalColorThumbContext, {
+												value: thumb,
+												get children() {
+													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-orientation"() {
+															return state.orientation;
+														},
+														get "data-disabled"() {
+															return state.isDisabled || void 0;
+														},
+														get children() {
+															return render.children;
+														}
+													}));
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+export { ColorSlider, ColorSliderContext, ColorSliderStateContext };
+
+//# sourceMappingURL=color-slider.js.map