@sprawlify/solid 0.0.14 → 0.0.16

package/dist/components/color-picker/index.js

@@ -0,0 +1,500 @@
+import { t as __export } from "../../chunk-B93cd-Dz.js";
+import { i as useMachine, n as normalizeProps, r as mergeProps$2 } from "../../core-oNB2jGcl.js";
+import { t as runIfFn } from "../../run-if-fn-D5794CxE.js";
+import { t as createContext$1 } from "../../create-context-GfQ_MylE.js";
+import { i as useLocaleContext, o as useEnvironmentContext } from "../../providers-Bo0OFe08.js";
+import { t as createSplitProps } from "../../create-split-props-pQu7jijw.js";
+import "../../render-strategy-DFlz7Uc4.js";
+import { t as sprawlify } from "../../factory-PGDAvOKb.js";
+import { t as composeRefs } from "../../compose-refs-BVVIB7xn.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "../../presence-BpwBRlZW.js";
+import "../../fieldset-BrJqMLEd.js";
+import { m as useFieldContext } from "../../field-CoYiA2ek.js";
+import { Index, Show, createMemo, createUniqueId } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+import * as colorPicker from "@sprawlify/primitives/machines/color-picker";
+import { anatomy, parse as parseColor } from "@sprawlify/primitives/machines/color-picker";
+
+//#region src/components/color-picker/use-color-picker-area-props-context.ts
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext$1({
+	hookName: "useColorPickerAreaContext",
+	providerName: "<ColorPickerAreaProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-context.ts
+const [ColorPickerProvider, useColorPickerContext] = createContext$1({
+	hookName: "useColorPickerContext",
+	providerName: "<ColorPickerProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-area.tsx
+const ColorPickerArea = (props) => {
+	const [channelProps, divprops] = createSplitProps()(props, ["xChannel", "yChannel"]);
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getAreaProps(channelProps), divprops);
+	return createComponent(ColorPickerAreaPropsProvider, {
+		value: channelProps,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-background.tsx
+const ColorPickerAreaBackground = (props) => {
+	const api = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = mergeProps$2(() => api().getAreaBackgroundProps(areaProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-thumb.tsx
+const ColorPickerAreaThumb = (props) => {
+	const api = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = mergeProps$2(() => api().getAreaThumbProps(areaProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-input.tsx
+const ColorPickerChannelInput = (props) => {
+	const [channelProps, inputProps] = createSplitProps()(props, ["channel", "orientation"]);
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getChannelInputProps(channelProps), inputProps);
+	return createComponent(sprawlify.input, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-channel-props-context.ts
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext$1({
+	hookName: "useColorPickerChannelSliderContext",
+	providerName: "<ColorPickerChannelSliderProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-format-context.ts
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext$1({
+	hookName: "useColorPickerFormatPropsContext",
+	providerName: "<ColorPickerFormatPropsProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider.tsx
+const ColorPickerChannelSlider = (props) => {
+	const [channelProps, localProps] = createSplitProps()(props, ["channel", "orientation"]);
+	const api = useColorPickerContext();
+	const channelSliderProps = mergeProps$2(channelProps, useColorPickerFormatPropsContext());
+	const mergedProps = mergeProps$2(() => api().getChannelSliderProps(channelSliderProps), localProps);
+	return createComponent(ColorPickerChannelPropsProvider, {
+		value: channelProps,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-label.tsx
+const ColorPickerChannelSliderLabel = (props) => {
+	const colorPicker$1 = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = mergeProps$2(() => colorPicker$1().getChannelSliderLabelProps(channelProps), props);
+	return createComponent(sprawlify.label, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-thumb.tsx
+const ColorPickerChannelSliderThumb = (props) => {
+	const api = useColorPickerContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = mergeProps$2(useColorPickerChannelPropsContext(), formatProps);
+	const mergedProps = mergeProps$2(() => api().getChannelSliderThumbProps(channelSliderProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-track.tsx
+const ColorPickerChannelSliderTrack = (props) => {
+	const api = useColorPickerContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = mergeProps$2(useColorPickerChannelPropsContext(), formatProps);
+	const mergedProps = mergeProps$2(() => api().getChannelSliderTrackProps(channelSliderProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-value-text.tsx
+const ColorPickerChannelSliderValueText = (props) => {
+	const colorPicker$1 = useColorPickerContext();
+	const localeContext = useLocaleContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = mergeProps$2(() => colorPicker$1().getChannelSliderValueTextProps(channelProps), props);
+	return createComponent(sprawlify.span, mergeProps$1(mergedProps, { get children() {
+		return props.children || colorPicker$1().getChannelValueText(channelProps.channel, localeContext().locale);
+	} }));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-content.tsx
+const ColorPickerContent = (props) => {
+	const api = useColorPickerContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getContentProps(), () => presenceApi().presenceProps, props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceApi().unmounted;
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(presenceApi().ref, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-context.tsx
+const ColorPickerContext = (props) => props.children(useColorPickerContext());
+
+//#endregion
+//#region src/components/color-picker/color-picker-control.tsx
+const ColorPickerControl = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getControlProps(), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper-trigger.tsx
+const ColorPickerEyeDropperTrigger = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getEyeDropperTriggerProps(), props);
+	return createComponent(sprawlify.button, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-select.tsx
+const ColorPickerFormatSelect = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getFormatSelectProps(), props);
+	return createComponent(sprawlify.select, mergeProps$1(mergedProps, { get children() {
+		return createComponent(Index, {
+			each: [
+				"rgba",
+				"hsla",
+				"hsba"
+			],
+			children: (format) => createComponent(sprawlify.option, {
+				get value() {
+					return format();
+				},
+				get children() {
+					return format();
+				}
+			})
+		});
+	} }));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-trigger.tsx
+const ColorPickerFormatTrigger = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getFormatTriggerProps(), props);
+	return createComponent(sprawlify.button, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-hidden-input.tsx
+const ColorPickerHiddenInput = (props) => {
+	const colorPicker$1 = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => colorPicker$1().getHiddenInputProps(), props);
+	const field = useFieldContext();
+	return createComponent(sprawlify.input, mergeProps$1({ get ["aria-describedby"]() {
+		return field?.().ariaDescribedby;
+	} }, mergedProps));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-label.tsx
+const ColorPickerLabel = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getLabelProps(), props);
+	return createComponent(sprawlify.label, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-positioner.tsx
+const ColorPickerPositioner = (props) => {
+	const api = useColorPickerContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getPositionerProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceApi().unmounted;
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/use-color-picker.ts
+const useColorPicker = (props) => {
+	const id = createUniqueId();
+	const locale = useLocaleContext();
+	const environment = useEnvironmentContext();
+	const field = useFieldContext();
+	const machineProps = createMemo(() => ({
+		id,
+		ids: {
+			label: field?.().ids.label,
+			input: field?.().ids.control
+		},
+		dir: locale().dir,
+		disabled: field?.().disabled,
+		invalid: field?.().invalid,
+		readOnly: field?.().readOnly,
+		required: field?.().required,
+		getRootNode: environment().getRootNode,
+		...runIfFn(props)
+	}));
+	const service = useMachine(colorPicker.machine, machineProps);
+	return createMemo(() => colorPicker.connect(service, normalizeProps));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-root.tsx
+const ColorPickerRoot = (props) => {
+	const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+	const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
+		"closeOnSelect",
+		"defaultOpen",
+		"defaultValue",
+		"defaultFormat",
+		"disabled",
+		"format",
+		"id",
+		"ids",
+		"initialFocusEl",
+		"invalid",
+		"name",
+		"name",
+		"onFocusOutside",
+		"onFormatChange",
+		"onInteractOutside",
+		"onOpenChange",
+		"onPointerDownOutside",
+		"onValueChange",
+		"onValueChangeEnd",
+		"open",
+		"openAutoFocus",
+		"positioning",
+		"readOnly",
+		"required",
+		"inline",
+		"value"
+	]);
+	const api = useColorPicker(useColorPickerProps);
+	const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({ present: api().open })));
+	const mergedProps = mergeProps$2(() => api().getRootProps(), localProps);
+	return createComponent(ColorPickerProvider, {
+		value: api,
+		get children() {
+			return createComponent(PresenceProvider, {
+				value: apiPresence,
+				get children() {
+					return createComponent(sprawlify.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-root-provider.tsx
+const ColorPickerRootProvider = (props) => {
+	const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+	const [{ value: colorPicker$1 }, localProps] = createSplitProps()(colorPickerProps, ["value"]);
+	const apiPresence = usePresence(mergeProps$2(presenceProps, () => ({ present: colorPicker$1().open })));
+	const mergedProps = mergeProps$2(() => colorPicker$1().getRootProps(), localProps);
+	return createComponent(ColorPickerProvider, {
+		value: colorPicker$1,
+		get children() {
+			return createComponent(PresenceProvider, {
+				value: apiPresence,
+				get children() {
+					return createComponent(sprawlify.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-swatch-props-context.ts
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext$1({
+	hookName: "useColorPickerSwatchContext",
+	providerName: "<ColorPickerSwatchProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch.tsx
+const ColorPickerSwatch = (props) => {
+	const [swatchProps, localProps] = createSplitProps()(props, ["respectAlpha", "value"]);
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getSwatchProps(swatchProps), localProps);
+	return createComponent(ColorPickerSwatchPropsProvider, {
+		value: swatchProps,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-group.tsx
+const ColorPickerSwatchGroup = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getSwatchGroupProps(), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-indicator.tsx
+const ColorPickerSwatchIndicator = (props) => {
+	const api = useColorPickerContext();
+	const swatchProps = useColorPickerSwatchPropsContext();
+	const mergedProps = mergeProps$2(() => api().getSwatchIndicatorProps(swatchProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-trigger.tsx
+const ColorPickerSwatchTrigger = (props) => {
+	const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getSwatchTriggerProps(triggerProps), localProps);
+	return createComponent(sprawlify.button, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-transparency-grid.tsx
+const ColorPickerTransparencyGrid = (props) => {
+	const [gridProps, localProps] = createSplitProps()(props, ["size"]);
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getTransparencyGridProps(gridProps), localProps);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-trigger.tsx
+const ColorPickerTrigger = (props) => {
+	const api = useColorPickerContext();
+	const mergedProps = mergeProps$2(() => api().getTriggerProps(), props);
+	return createComponent(sprawlify.button, mergedProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-swatch.tsx
+const ColorPickerValueSwatch = (props) => {
+	const [{ respectAlpha }, localProps] = createSplitProps()(props, ["respectAlpha"]);
+	const colorPicker$1 = useColorPickerContext();
+	const swatchProps = createMemo(() => ({
+		respectAlpha,
+		value: colorPicker$1().value
+	}));
+	const mergedProps = mergeProps$2(() => colorPicker$1().getSwatchProps(swatchProps()), localProps);
+	return createComponent(ColorPickerSwatchPropsProvider, {
+		get value() {
+			return swatchProps();
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-text.tsx
+const ColorPickerValueText = (props) => {
+	const colorPicker$1 = useColorPickerContext();
+	const [formatProps, localProps] = createSplitProps()(props, ["format"]);
+	const mergedProps = mergeProps$2(() => colorPicker$1().getValueTextProps(), localProps);
+	const valueAsString = createMemo(() => formatProps.format ? colorPicker$1().value.toString(formatProps.format) : colorPicker$1().valueAsString);
+	return createComponent(sprawlify.span, mergeProps$1(mergedProps, { get children() {
+		return props.children || valueAsString();
+	} }));
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-anatomy.ts
+const colorPickerAnatomy = anatomy.extendWith("view");
+
+//#endregion
+//#region src/components/color-picker/color-picker-view.tsx
+const ColorPickerView = (props) => {
+	const api = useColorPickerContext();
+	const [formatProps, localProps] = createSplitProps()(props, ["format"]);
+	const mergedProps = mergeProps$2(() => colorPickerAnatomy.build().view.attrs, localProps);
+	return createComponent(ColorPickerFormatPropsProvider, {
+		value: formatProps,
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return api().format === props.format;
+				},
+				get children() {
+					return createComponent(sprawlify.div, mergeProps$1({ get ["data-format"]() {
+						return props.format;
+					} }, mergedProps));
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker.ts
+var color_picker_exports = /* @__PURE__ */ __export({
+	Area: () => ColorPickerArea,
+	AreaBackground: () => ColorPickerAreaBackground,
+	AreaThumb: () => ColorPickerAreaThumb,
+	ChannelInput: () => ColorPickerChannelInput,
+	ChannelSlider: () => ColorPickerChannelSlider,
+	ChannelSliderLabel: () => ColorPickerChannelSliderLabel,
+	ChannelSliderThumb: () => ColorPickerChannelSliderThumb,
+	ChannelSliderTrack: () => ColorPickerChannelSliderTrack,
+	ChannelSliderValueText: () => ColorPickerChannelSliderValueText,
+	Content: () => ColorPickerContent,
+	Context: () => ColorPickerContext,
+	Control: () => ColorPickerControl,
+	EyeDropperTrigger: () => ColorPickerEyeDropperTrigger,
+	FormatSelect: () => ColorPickerFormatSelect,
+	FormatTrigger: () => ColorPickerFormatTrigger,
+	HiddenInput: () => ColorPickerHiddenInput,
+	Label: () => ColorPickerLabel,
+	Positioner: () => ColorPickerPositioner,
+	Root: () => ColorPickerRoot,
+	RootProvider: () => ColorPickerRootProvider,
+	Swatch: () => ColorPickerSwatch,
+	SwatchGroup: () => ColorPickerSwatchGroup,
+	SwatchIndicator: () => ColorPickerSwatchIndicator,
+	SwatchTrigger: () => ColorPickerSwatchTrigger,
+	TransparencyGrid: () => ColorPickerTransparencyGrid,
+	Trigger: () => ColorPickerTrigger,
+	ValueSwatch: () => ColorPickerValueSwatch,
+	ValueText: () => ColorPickerValueText,
+	View: () => ColorPickerView
+});
+
+//#endregion
+export { color_picker_exports as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, colorPickerAnatomy, parseColor, useColorPicker, useColorPickerContext };