@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/color-field.js

@@ -0,0 +1,394 @@
+/*
+ * 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 { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createSignal, merge, omit, untrack } from "solid-js";
+import { escape, memo, mergeProps as mergeProps$1, ssr, ssrAttribute, ssrGroup, ssrHydrationKey } from "@solidjs/web";
+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$ = [
+	"<input",
+	" type=\"hidden\"",
+	"",
+	"",
+	">"
+];
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _d$ = {
+	get() {
+		const channel = this[_m$];
+		return channel();
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2) {
+	this[_m$] = _p;
+	this.ref = _p2;
+	Object.defineProperty(this, "channel", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		return this[_m$].channel;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$3 = {
+	get() {
+		const props = this[_m$];
+		const setRef = this[_m$2];
+		return HexColorField(mergeProps$1(props, { ref: (element) => {
+			setRef(element);
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p3, _p4, _p5) {
+	this[_m$] = _p3;
+	this[_m$2] = _p4;
+	Object.defineProperty(this, "when", _d$2);
+	Object.defineProperty(this, "fallback", _d$3);
+	this.children = _p5;
+}
+_P$2.prototype = Object.prototype;
+var _d$4 = {
+	get() {
+		const props = this[_m$];
+		return memo(() => {
+			return !!(typeof props.slot === "string" && props.slot.length > 0);
+		})() ? props.slot : void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		return this[_m$].channel ?? "hex";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$6 = {
+	get() {
+		return this[_m$].isDisabled === true ? true : void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$7 = {
+	get() {
+		return this[_m$2].isInvalid || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$8 = {
+	get() {
+		return this[_m$].isReadOnly === true ? true : void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$9 = {
+	get() {
+		return this[_m$].isRequired === true ? true : void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$10 = {
+	get() {
+		return this[_m$3].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p6, _p7, _p8, _p9) {
+	this[_m$] = _p6;
+	this[_m$2] = _p7;
+	this[_m$3] = _p8;
+	this.ref = _p9;
+	Object.defineProperty(this, "slot", _d$4);
+	Object.defineProperty(this, "data-channel", _d$5);
+	Object.defineProperty(this, "data-disabled", _d$6);
+	Object.defineProperty(this, "data-invalid", _d$7);
+	Object.defineProperty(this, "data-readonly", _d$8);
+	Object.defineProperty(this, "data-required", _d$9);
+	Object.defineProperty(this, "children", _d$10);
+}
+_P$3.prototype = Object.prototype;
+var _d$11 = {
+	get() {
+		const props = this[_m$];
+		const render = this[_m$2];
+		const aria = this[_m$3];
+		return dom.div(mergeProps$1(() => {
+			return omit(filterDOMProps(props, { global: true }), "id");
+		}, render, new _P$3(props, aria, render, (el) => {
+			assignRef(untrack(() => props.ref), el);
+		})));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p0, _p1, _p10, _p11) {
+	this[_m$] = _p0;
+	this[_m$2] = _p1;
+	this[_m$3] = _p10;
+	this.value = _p11;
+	Object.defineProperty(this, "children", _d$11);
+}
+_P$4.prototype = Object.prototype;
+var _d$12 = {
+	get() {
+		const props = this[_m$];
+		const render = this[_m$2];
+		const aria = this[_m$3];
+		return FieldErrorContext(new _P$4(props, render, aria, aria));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p12, _p13, _p14, _p15) {
+	this[_m$] = _p12;
+	this[_m$2] = _p13;
+	this[_m$3] = _p14;
+	this.value = _p15;
+	Object.defineProperty(this, "children", _d$12);
+}
+_P$5.prototype = Object.prototype;
+var _d$13 = {
+	get() {
+		const props = this[_m$];
+		const render = this[_m$2];
+		const aria = this[_m$3];
+		return TextContext(new _P$5(props, render, aria, { slots: {
+			get description() {
+				return aria.descriptionProps;
+			},
+			get errorMessage() {
+				return aria.errorMessageProps;
+			}
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p16, _p17, _p18, _p19) {
+	this[_m$] = _p16;
+	this[_m$2] = _p17;
+	this[_m$3] = _p18;
+	this.value = _p19;
+	Object.defineProperty(this, "children", _d$13);
+}
+_P$6.prototype = Object.prototype;
+var _d$14 = {
+	get() {
+		const aria = this[_m$];
+		const input = this[_m$2];
+		return mergeProps(merge(() => aria.labelProps), { get registerSlot() {
+			return input.registerLabel;
+		} });
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$15 = {
+	get() {
+		const props = this[_m$3];
+		const render = this[_m$4];
+		const aria = this[_m$];
+		return GroupContext(new _P$6(props, render, aria, {
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			get isInvalid() {
+				return aria.isInvalid;
+			},
+			role: "presentation"
+		}));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p20, _p21, _p22, _p23) {
+	this[_m$] = _p20;
+	this[_m$2] = _p21;
+	this[_m$3] = _p22;
+	this[_m$4] = _p23;
+	Object.defineProperty(this, "value", _d$14);
+	Object.defineProperty(this, "children", _d$15);
+}
+_P$7.prototype = Object.prototype;
+var _d$16 = {
+	get() {
+		const aria = this[_m$];
+		const input = this[_m$2];
+		return mergeProps(merge(() => aria.inputProps), { get ref() {
+			return input.inputRef;
+		} });
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$17 = {
+	get() {
+		const aria = this[_m$];
+		const input = this[_m$2];
+		const props = this[_m$3];
+		const render = this[_m$4];
+		return LabelContext(new _P$7(aria, input, props, render));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p24, _p25, _p26, _p27) {
+	this[_m$] = _p24;
+	this[_m$2] = _p25;
+	this[_m$3] = _p26;
+	this[_m$4] = _p27;
+	Object.defineProperty(this, "value", _d$16);
+	Object.defineProperty(this, "children", _d$17);
+}
+_P$8.prototype = Object.prototype;
+var _d$18 = {
+	get() {
+		const aria = this[_m$];
+		const input = this[_m$2];
+		const props = this[_m$3];
+		const render = this[_m$4];
+		return InputContext(new _P$8(aria, input, props, render));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p28, _p29, _p30, _p31, _p32) {
+	this[_m$] = _p28;
+	this[_m$2] = _p29;
+	this[_m$3] = _p30;
+	this[_m$4] = _p31;
+	this.value = _p32;
+	Object.defineProperty(this, "children", _d$18);
+}
+_P$9.prototype = Object.prototype;
+const ColorFieldContext = createContext(null);
+const ColorFieldStateContext = createContext(null);
+function ColorField(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ColorFieldContext);
+	return Show(new _P$2(props, setRef, (channel) => ColorChannelField(mergeProps$1(props, new _P$(channel, (element) => {
+		setRef(element);
+	})))));
+}
+function HexColorField(props) {
+	const options = mergeProps(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);
+	return ColorFieldChildren({
+		props,
+		state,
+		aria: createColorField(mergeProps(removeDataAttributes(options), { get label() {
+			return label();
+		} }), state, inputRef),
+		inputRef: (element) => {
+			setInputRef(element);
+		},
+		registerLabel
+	});
+}
+function ColorChannelField(props) {
+	const locale = createLocale();
+	const options = mergeProps(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);
+	return [ColorFieldChildren({
+		props,
+		state,
+		aria: createColorChannelField(mergeProps(removeDataAttributes(options), { get label() {
+			return label();
+		} }), state, inputRef),
+		inputRef: (element) => {
+			setInputRef(element);
+		},
+		registerLabel
+	}), memo(() => {
+		var _v$, _g$, _v$4;
+		return memo(() => {
+			return (props.name?.length ?? 0) > 0;
+		})() && (_v$ = ssrHydrationKey(), _g$ = ssrGroup(() => {
+			return [ssrAttribute("name", escape(props.name, true)), ssrAttribute("form", escape(props.form, true))];
+		}, 2), _v$4 = () => {
+			return ssrAttribute("value", Number.isNaN(state.numberValue) ? "" : escape(state.numberValue, true));
+		}, ssr(_tmpl$, _v$, _g$, _g$, _v$4));
+	})];
+}
+function ColorFieldChildren(input) {
+	const { props } = untrack(() => input);
+	const { state } = untrack(() => input);
+	const { aria } = untrack(() => input);
+	const render = createRenderProps(mergeProps(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 ColorFieldStateContext(new _P$9(aria, input, props, render, state));
+}
+export { ColorField, ColorFieldContext, ColorFieldStateContext };
+
+//# sourceMappingURL=color-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-field.js","names":["<HexColorField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n        />","ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}","typeof props.slot === \"string\" && props.slot.length > 0\n                      ? props.slot\n                      : undefined","dom.div","<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>","<ColorChannelField\n          {...props}\n          ref={(element: HTMLDivElement) => {\n            setRef(element);\n          }}\n          channel={channel()}\n        />","inputRef={(element: HTMLInputElement) => {\n        setInputRef(element);\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      )}","name={props.name}","props.name","form={props.form}","props.form","state.numberValue","<input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={Number.isNaN(state.numberValue) ? \"\" : state.numberValue}\n        />","value={Number.isNaN(state.numberValue) ? \"\" : state.numberValue}","_$mergeProps","_$memo","_$ssrHydrationKey","_$ssrGroup","_$ssrAttribute","_$escape","_$ssr"],"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/server/color-picker.js

@@ -0,0 +1,170 @@
+/*
+ * 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 { mergeProps } 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
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _d$ = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2) {
+	this[_m$] = _p;
+	this.value = _p2;
+	Object.defineProperty(this, "children", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		return ColorSwatchPickerContext(new _P$(render, value));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p3, _p4, _p5) {
+	this[_m$] = _p3;
+	this[_m$2] = _p4;
+	this.value = _p5;
+	Object.defineProperty(this, "children", _d$2);
+}
+_P$2.prototype = Object.prototype;
+var _d$3 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		const state = this[_m$3];
+		return ColorSwatchContext(new _P$2(render, value, { get color() {
+			return state.color;
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p6, _p7, _p8, _p9) {
+	this[_m$] = _p6;
+	this[_m$2] = _p7;
+	this[_m$3] = _p8;
+	this.value = _p9;
+	Object.defineProperty(this, "children", _d$3);
+}
+_P$3.prototype = Object.prototype;
+var _d$4 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		const state = this[_m$3];
+		return ColorFieldContext(new _P$3(render, value, state, value));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p0, _p1, _p10, _p11) {
+	this[_m$] = _p0;
+	this[_m$2] = _p1;
+	this[_m$3] = _p10;
+	this.value = _p11;
+	Object.defineProperty(this, "children", _d$4);
+}
+_P$4.prototype = Object.prototype;
+var _d$5 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		const state = this[_m$3];
+		return ColorWheelContext(new _P$4(render, value, state, value));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p12, _p13, _p14, _p15) {
+	this[_m$] = _p12;
+	this[_m$2] = _p13;
+	this[_m$3] = _p14;
+	this.value = _p15;
+	Object.defineProperty(this, "children", _d$5);
+}
+_P$5.prototype = Object.prototype;
+var _d$6 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		const state = this[_m$3];
+		return ColorAreaContext(new _P$5(render, value, state, value));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p16, _p17, _p18, _p19) {
+	this[_m$] = _p16;
+	this[_m$2] = _p17;
+	this[_m$3] = _p18;
+	this.value = _p19;
+	Object.defineProperty(this, "children", _d$6);
+}
+_P$6.prototype = Object.prototype;
+var _d$7 = {
+	get() {
+		const render = this[_m$];
+		const value = this[_m$2];
+		const state = this[_m$3];
+		return ColorSliderContext(new _P$6(render, value, state, value));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p20, _p21, _p22, _p23) {
+	this[_m$] = _p20;
+	this[_m$2] = _p21;
+	this[_m$3] = _p22;
+	this.value = _p23;
+	Object.defineProperty(this, "children", _d$7);
+}
+_P$7.prototype = Object.prototype;
+const ColorPickerContext = createContext(null);
+const ColorPickerStateContext = createContext(null);
+function ColorPicker(input) {
+	const props = mergeProps(createSlottedContext(ColorPickerContext, untrack(() => input.slot)) ?? {}, input);
+	const state = createColorPickerState(props);
+	const render = createRenderProps(mergeProps(props, { values: { get color() {
+		return state.color;
+	} } }));
+	const value = {
+		onChange: state.setColor,
+		get value() {
+			return state.color;
+		}
+	};
+	return ColorPickerStateContext(new _P$7(render, value, state, state));
+}
+export { ColorPicker, ColorPickerContext, ColorPickerStateContext };
+
+//# sourceMappingURL=color-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","names":[],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGkB,O,SAAC,CAAO;;;;;;;;;;;;;;;EADV,OAAA,yBAAA,IAAA,IACG,QAD8B,KAEP,CAAA;;;;;;;;;;;;;;;;;EAT5B,OAAA,mBAAA,IAAA,KAQK,QAD8B,OAN1B,EACL,IAAI,QAAQ;GACV,OAAO,MAAM;EACf,EACF,CAKkB,CAAA;;;;;;;;;;;;;;;;;;EAXtB,OAAA,kBAAA,IAAA,KASO,QAD8B,OAJtB,OAJW,KAYP,CAAA;;;;;;;;;;;;;;;;;;EAbrB,OAAA,kBAAA,IAAA,KAUS,QAD8B,OAJtB,OALS,KAcP,CAAA;;;;;;;;;;;;;;;;;;EAfrB,OAAA,iBAAA,IAAA,KAWW,QAD8B,OAJtB,OANM,KAgBP,CAAA;;;;;;;;;;;;;;;;;;EAjBpB,OAAA,mBAAA,IAAA,KAYa,QAD8B,OAJtB,OAPM,KAkBP,CAAA;;;;;;;;;;;;;AAvD1B,MAAa,qBACX,cAAqD,IAAI;AAE3D,MAAa,0BAA0B,cACrC,IACF;AAEA,SAAgB,YAAY,OAAsC;CAChE,MAAM,QAAQ,WACZ,qBACE,oBACA,cAAc,MAAM,IAAI,CAC1B,KAAK,CAAC,GACN,KACF;CAEA,MAAM,QAAQ,uBAAuB,KAAK;CAE1C,MAAM,SAAS,kBACb,WAAW,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,OAAA,wBACE,IAAA,KAae,QAD8B,OAJtB,OARS,KAoBP,CAAA;AAE7B"}