@sprawlify/react 0.0.6 → 0.0.8

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

@@ -0,0 +1,617 @@
+const require_chunk = require('../../chunk-BYnRvbsk.cjs');
+const require_core = require('../../core-DCWyxy9D.cjs');
+const require_create_context = require('../../create-context-CQ4U0lLj.cjs');
+const require_environment = require('../../environment-CvilmfQt.cjs');
+const require_locale = require('../../locale-BcnWD1Hf.cjs');
+require('../../providers-BNAArubQ.cjs');
+const require_compose_refs = require('../../compose-refs-C5QNDywq.cjs');
+const require_factory = require('../../factory-C166evrS.cjs');
+const require_create_split_props = require('../../create-split-props-Dp4TWOyM.cjs');
+const require_presence = require('../../presence-CPov8wyU.cjs');
+require('../../use-event-CLH8zHoJ.cjs');
+require('../../use-fieldset-context-CCQLmNLL.cjs');
+require('../../use-safe-layout-effect-C2GgvNT3.cjs');
+const require_field = require('../../field-C-57Gj2E.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __sprawlify_primitives_machines_color_picker = require("@sprawlify/primitives/machines/color-picker");
+__sprawlify_primitives_machines_color_picker = require_chunk.__toESM(__sprawlify_primitives_machines_color_picker);
+let __sprawlify_primitives_core = require("@sprawlify/primitives/core");
+
+//#region src/components/color-picker/use-color-picker-area-props-context.ts
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = require_create_context.createContext({
+	name: "ColorPickerAreaContext",
+	hookName: "useColorPickerAreaContext",
+	providerName: "<ColorPickerAreaProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-context.ts
+const [ColorPickerProvider, useColorPickerContext] = require_create_context.createContext({
+	name: "ColorPickerContext",
+	hookName: "useColorPickerContext",
+	providerName: "<ColorPickerProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-area.tsx
+const splitAreaProps = require_create_split_props.createSplitProps();
+const ColorPickerArea = (0, react.forwardRef)((props, ref) => {
+	const [areaProps, localProps] = splitAreaProps(props, ["xChannel", "yChannel"]);
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getAreaProps(areaProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerAreaPropsProvider, {
+		value: areaProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerArea.displayName = "ColorPickerArea";
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-background.tsx
+const ColorPickerAreaBackground = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getAreaBackgroundProps(areaProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
+
+//#endregion
+//#region src/components/color-picker/color-picker-area-thumb.tsx
+const ColorPickerAreaThumb = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getAreaThumbProps(areaProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-input.tsx
+const splitChannelInputProps = require_create_split_props.createSplitProps();
+const ColorPickerChannelInput = (0, react.forwardRef)((props, ref) => {
+	const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getChannelInputProps(channelProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.input, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelInput.displayName = "ColorPickerChannelInput";
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-channel-props-context.ts
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = require_create_context.createContext({
+	name: "ColorPickerChannelSliderContext",
+	hookName: "useColorPickerChannelSliderContext",
+	providerName: "<ColorPickerChannelSliderProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-format-context.ts
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = require_create_context.createContext({
+	name: "ColorPickerFormatContext",
+	hookName: "useColorPickerFormatPropsContext",
+	providerName: "<ColorPickerFormatPropsProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider.tsx
+const splitChannelProps = require_create_split_props.createSplitProps();
+const ColorPickerChannelSlider = (0, react.forwardRef)((props, ref) => {
+	const [channelProps, localProps] = splitChannelProps(props, ["channel", "orientation"]);
+	const colorPicker = useColorPickerContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getChannelSliderProps(channelSliderProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerChannelPropsProvider, {
+		value: channelProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerChannelSlider.displayName = "ColorPickerChannelSlider";
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-label.tsx
+const ColorPickerChannelSliderLabel = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getChannelSliderLabelProps(channelProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.label, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-thumb.tsx
+const ColorPickerChannelSliderThumb = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-track.tsx
+const ColorPickerChannelSliderTrack = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getChannelSliderTrackProps(channelSliderProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
+
+//#endregion
+//#region src/components/color-picker/color-picker-channel-slider-value-text.tsx
+const ColorPickerChannelSliderValueText = (0, react.forwardRef)((props, ref) => {
+	const { locale } = require_locale.useLocaleContext();
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getChannelSliderValueTextProps(channelProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.span, {
+		...mergedProps,
+		ref,
+		children: props.children || colorPicker.getChannelValueText(channelProps.channel, locale)
+	});
+});
+ColorPickerChannelSliderValueText.displayName = "ColorPickerChannelSliderValueText";
+
+//#endregion
+//#region src/components/color-picker/color-picker-content.tsx
+const ColorPickerContent = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const presence = require_presence.usePresenceContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getContentProps(), presence.getPresenceProps(), props);
+	if (presence.unmounted) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	});
+});
+ColorPickerContent.displayName = "ColorPickerContent";
+
+//#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 = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getControlProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerControl.displayName = "ColorPickerControl";
+
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper-trigger.tsx
+const ColorPickerEyeDropperTrigger = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getEyeDropperTriggerProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-select.tsx
+const ColorPickerFormatSelect = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getFormatSelectProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.select, {
+		...mergedProps,
+		ref,
+		children: [
+			"rgba",
+			"hsla",
+			"hsba"
+		].map((format) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.option, {
+			value: format,
+			children: format
+		}, format))
+	});
+});
+ColorPickerFormatSelect.displayName = "ColorPickerFormatSelect";
+
+//#endregion
+//#region src/components/color-picker/color-picker-format-trigger.tsx
+const ColorPickerFormatTrigger = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getFormatTriggerProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";
+
+//#endregion
+//#region src/components/color-picker/color-picker-hidden-input.tsx
+const ColorPickerHiddenInput = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getHiddenInputProps(), props);
+	const field = require_field.useFieldContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.input, {
+		"aria-describedby": field?.ariaDescribedby,
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";
+
+//#endregion
+//#region src/components/color-picker/color-picker-label.tsx
+const ColorPickerLabel = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getLabelProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.label, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerLabel.displayName = "ColorPickerLabel";
+
+//#endregion
+//#region src/components/color-picker/color-picker-positioner.tsx
+const ColorPickerPositioner = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getPositionerProps(), props);
+	if (require_presence.usePresenceContext().unmounted) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerPositioner.displayName = "ColorPickerPositioner";
+
+//#endregion
+//#region src/components/color-picker/use-color-picker.ts
+const useColorPicker = (props) => {
+	const id = (0, react.useId)();
+	const { getRootNode } = require_environment.useEnvironmentContext();
+	const { dir } = require_locale.useLocaleContext();
+	const field = require_field.useFieldContext();
+	const machineProps = {
+		id,
+		ids: {
+			label: field?.ids.label,
+			input: field?.ids.control
+		},
+		dir,
+		disabled: field?.disabled,
+		invalid: field?.invalid,
+		readOnly: field?.readOnly,
+		required: field?.required,
+		getRootNode,
+		...props
+	};
+	const service = require_core.useMachine(__sprawlify_primitives_machines_color_picker.machine, machineProps);
+	return __sprawlify_primitives_machines_color_picker.connect(service, require_core.normalizeProps);
+};
+
+//#endregion
+//#region src/components/color-picker/color-picker-root.tsx
+const splitRootProps = require_create_split_props.createSplitProps();
+const ColorPickerRoot = (0, react.forwardRef)((props, ref) => {
+	const [presenceProps, colorPickerProps] = require_presence.splitPresenceProps(props);
+	const [useColorPickerProps, localProps] = splitRootProps(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 colorPicker = useColorPicker(useColorPickerProps);
+	const presence = require_presence.usePresence((0, __sprawlify_primitives_core.mergeProps)({ present: colorPicker.open }, presenceProps));
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getRootProps(), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerProvider, {
+		value: colorPicker,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence.PresenceProvider, {
+			value: presence,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+ColorPickerRoot.displayName = "ColorPickerRoot";
+
+//#endregion
+//#region src/components/color-picker/color-picker-root-provider.tsx
+const splitRootProviderProps = require_create_split_props.createSplitProps();
+const ColorPickerRootProvider = (0, react.forwardRef)((props, ref) => {
+	const [presenceProps, colorPickerProps] = require_presence.splitPresenceProps(props);
+	const [{ value: colorPicker }, localProps] = splitRootProviderProps(colorPickerProps, ["value"]);
+	const presence = require_presence.usePresence((0, __sprawlify_primitives_core.mergeProps)({ present: colorPicker.open }, presenceProps));
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getRootProps(), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerProvider, {
+		value: colorPicker,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence.PresenceProvider, {
+			value: presence,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+ColorPickerRootProvider.displayName = "ColorPickerRootProvider";
+
+//#endregion
+//#region src/components/color-picker/use-color-picker-swatch-props-context.ts
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = require_create_context.createContext({
+	name: "ColorPickerSwatchContext",
+	hookName: "useColorPickerSwatchContext",
+	providerName: "<ColorPickerSwatchProvider />"
+});
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch.tsx
+const splitSwatchProps = require_create_split_props.createSplitProps();
+const ColorPickerSwatch = (0, react.forwardRef)((props, ref) => {
+	const [swatwchProps, localProps] = splitSwatchProps(props, ["respectAlpha", "value"]);
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getSwatchProps(swatwchProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerSwatchPropsProvider, {
+		value: swatwchProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerSwatch.displayName = "ColorPickerSwatch";
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-group.tsx
+const ColorPickerSwatchGroup = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getSwatchGroupProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-indicator.tsx
+const ColorPickerSwatchIndicator = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const swatchProps = useColorPickerSwatchPropsContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getSwatchIndicatorProps(swatchProps), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchIndicator.displayName = "ColorPickerSwatchIndicator";
+
+//#endregion
+//#region src/components/color-picker/color-picker-swatch-trigger.tsx
+const splitSwatchTriggerProps = require_create_split_props.createSplitProps();
+const ColorPickerSwatchTrigger = (0, react.forwardRef)((props, ref) => {
+	const [triggerProps, localProps] = splitSwatchTriggerProps(props, ["value", "disabled"]);
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getSwatchTriggerProps(triggerProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchTrigger.displayName = "ColorPickerSwatchTrigger";
+
+//#endregion
+//#region src/components/color-picker/color-picker-transparency-grid.tsx
+const splitTransparencyGridProps = require_create_split_props.createSplitProps();
+const ColorPickerTransparencyGrid = (0, react.forwardRef)((props, ref) => {
+	const [gridProps, localProps] = splitTransparencyGridProps(props, ["size"]);
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getTransparencyGridProps(gridProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
+
+//#endregion
+//#region src/components/color-picker/color-picker-trigger.tsx
+const ColorPickerTrigger = (0, react.forwardRef)((props, ref) => {
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(useColorPickerContext().getTriggerProps(), props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-swatch.tsx
+const splitValueSwatchProps = require_create_split_props.createSplitProps();
+const ColorPickerValueSwatch = (0, react.forwardRef)((props, ref) => {
+	const [{ respectAlpha }, localProps] = splitValueSwatchProps(props, ["respectAlpha"]);
+	const colorPicker = useColorPickerContext();
+	const swatchProps = {
+		respectAlpha,
+		value: colorPicker.valueAsString
+	};
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getSwatchProps(swatchProps), localProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerSwatchPropsProvider, {
+		value: swatchProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
+
+//#endregion
+//#region src/components/color-picker/color-picker-value-text.tsx
+const ColorPickerValueText = (0, react.forwardRef)((props, ref) => {
+	const { children, format, ...localProps } = props;
+	const colorPicker = useColorPickerContext();
+	const mergedProps = (0, __sprawlify_primitives_core.mergeProps)(colorPicker.getValueTextProps(), localProps);
+	const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.span, {
+		...mergedProps,
+		ref,
+		children: children || valueAsString
+	});
+});
+ColorPickerValueText.displayName = "ColorPickerValueText";
+
+//#endregion
+//#region src/components/color-picker/color-picker-anatomy.ts
+const colorPickerAnatomy = __sprawlify_primitives_machines_color_picker.anatomy.extendWith("view");
+
+//#endregion
+//#region src/components/color-picker/color-picker-view.tsx
+const splitFormatOptions = require_create_split_props.createSplitProps();
+const ColorPickerView = (0, react.forwardRef)((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const [formatProps, restProps] = splitFormatOptions(props, ["format"]);
+	if (colorPicker.format !== formatProps.format) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerFormatPropsProvider, {
+		value: formatProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.sprawlify.div, {
+			ref,
+			"data-format": props.format,
+			...colorPickerAnatomy.build().view.attrs,
+			...restProps
+		})
+	});
+});
+ColorPickerView.displayName = "ColorPickerView";
+
+//#endregion
+//#region src/components/color-picker/color-picker.ts
+var color_picker_exports = /* @__PURE__ */ require_chunk.__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
+Object.defineProperty(exports, 'ColorPicker', {
+  enumerable: true,
+  get: function () {
+    return color_picker_exports;
+  }
+});
+exports.ColorPickerArea = ColorPickerArea;
+exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
+exports.ColorPickerAreaThumb = ColorPickerAreaThumb;
+exports.ColorPickerChannelInput = ColorPickerChannelInput;
+exports.ColorPickerChannelSlider = ColorPickerChannelSlider;
+exports.ColorPickerChannelSliderLabel = ColorPickerChannelSliderLabel;
+exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;
+exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;
+exports.ColorPickerChannelSliderValueText = ColorPickerChannelSliderValueText;
+exports.ColorPickerContent = ColorPickerContent;
+exports.ColorPickerContext = ColorPickerContext;
+exports.ColorPickerControl = ColorPickerControl;
+exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;
+exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
+exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;
+exports.ColorPickerHiddenInput = ColorPickerHiddenInput;
+exports.ColorPickerLabel = ColorPickerLabel;
+exports.ColorPickerPositioner = ColorPickerPositioner;
+exports.ColorPickerRoot = ColorPickerRoot;
+exports.ColorPickerRootProvider = ColorPickerRootProvider;
+exports.ColorPickerSwatch = ColorPickerSwatch;
+exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;
+exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
+exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;
+exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
+exports.ColorPickerTrigger = ColorPickerTrigger;
+exports.ColorPickerValueSwatch = ColorPickerValueSwatch;
+exports.ColorPickerValueText = ColorPickerValueText;
+exports.ColorPickerView = ColorPickerView;
+exports.colorPickerAnatomy = colorPickerAnatomy;
+Object.defineProperty(exports, 'parseColor', {
+  enumerable: true,
+  get: function () {
+    return __sprawlify_primitives_machines_color_picker.parse;
+  }
+});
+exports.useColorPicker = useColorPicker;
+exports.useColorPickerContext = useColorPickerContext;