@wirekyt/react 0.0.1 → 0.0.2

package/dist/color-picker.js

@@ -0,0 +1,530 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { c as createSplitProps, l as useComposedRefs, u as createContext$1 } from "./utils-CqLmqrgj.js";
+import { n as useEnvironmentContext } from "./environment-BTgKwk5E.js";
+import { a as useMachine, i as normalizeProps, t as mergeProps } from "./core-CEYOEcVI.js";
+import { n as wire } from "./factory-Nm__-4xn.js";
+import { a as useLocaleContext } from "./providers-FEHnDTvb.js";
+import { h as useFieldContext } from "./field-Cy1E02DH.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "./presence-I8Rceflw.js";
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as colorPicker from "@wirekyt/dom/machines/color-picker";
+import { anatomy, parse as parseColor } from "@wirekyt/dom/machines/color-picker";
+//#region src/components/color-picker/use-color-picker-area-props-context.ts
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext$1({
+	name: "ColorPickerAreaContext",
+	hookName: "useColorPickerAreaContext",
+	providerName: "<ColorPickerAreaProvider />"
+});
+//#endregion
+//#region src/components/color-picker/use-color-picker-context.ts
+const [ColorPickerProvider, useColorPickerContext] = createContext$1({
+	name: "ColorPickerContext",
+	hookName: "useColorPickerContext",
+	providerName: "<ColorPickerProvider />"
+});
+//#endregion
+//#region src/components/color-picker/area.tsx
+const splitAreaProps = createSplitProps();
+const ColorPickerArea = forwardRef((props, ref) => {
+	const [areaProps, localProps] = splitAreaProps(props, ["xChannel", "yChannel"]);
+	const mergedProps = mergeProps(useColorPickerContext().getAreaProps(areaProps), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerAreaPropsProvider, {
+		value: areaProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerArea.displayName = "ColorPickerArea";
+//#endregion
+//#region src/components/color-picker/area-background.tsx
+const ColorPickerAreaBackground = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
+//#endregion
+//#region src/components/color-picker/area-thumb.tsx
+const ColorPickerAreaThumb = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const areaProps = useColorPickerAreaPropsContext();
+	const mergedProps = mergeProps(colorPicker.getAreaThumbProps(areaProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
+//#endregion
+//#region src/components/color-picker/channel-input.tsx
+const splitChannelInputProps = createSplitProps();
+const ColorPickerChannelInput = forwardRef((props, ref) => {
+	const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
+	const mergedProps = mergeProps(useColorPickerContext().getChannelInputProps(channelProps), localProps);
+	return /* @__PURE__ */ jsx(wire.input, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelInput.displayName = "ColorPickerChannelInput";
+//#endregion
+//#region src/components/color-picker/use-color-picker-channel-props-context.ts
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext$1({
+	name: "ColorPickerChannelSliderContext",
+	hookName: "useColorPickerChannelSliderContext",
+	providerName: "<ColorPickerChannelSliderProvider />"
+});
+//#endregion
+//#region src/components/color-picker/use-color-picker-format-context.ts
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext$1({
+	name: "ColorPickerFormatContext",
+	hookName: "useColorPickerFormatPropsContext",
+	providerName: "<ColorPickerFormatPropsProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/color-picker/channel-slider.tsx
+const splitChannelProps = createSplitProps();
+const ColorPickerChannelSlider = forwardRef((props, ref) => {
+	const [channelProps, localProps] = splitChannelProps(props, ["channel", "orientation"]);
+	const colorPicker = useColorPickerContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = mergeProps(colorPicker.getChannelSliderProps(channelSliderProps), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerChannelPropsProvider, {
+		value: channelProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerChannelSlider.displayName = "ColorPickerChannelSlider";
+//#endregion
+//#region src/components/color-picker/channel-slider-label.tsx
+const ColorPickerChannelSliderLabel = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
+	return /* @__PURE__ */ jsx(wire.label, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
+//#endregion
+//#region src/components/color-picker/channel-slider-thumb.tsx
+const ColorPickerChannelSliderThumb = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
+//#endregion
+//#region src/components/color-picker/channel-slider-track.tsx
+const ColorPickerChannelSliderTrack = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const formatProps = useColorPickerFormatPropsContext();
+	const channelSliderProps = {
+		...channelProps,
+		...formatProps
+	};
+	const mergedProps = mergeProps(colorPicker.getChannelSliderTrackProps(channelSliderProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
+//#endregion
+//#region src/components/color-picker/channel-slider-value-text.tsx
+const ColorPickerChannelSliderValueText = forwardRef((props, ref) => {
+	const { locale } = useLocaleContext();
+	const colorPicker = useColorPickerContext();
+	const channelProps = useColorPickerChannelPropsContext();
+	const mergedProps = mergeProps(colorPicker.getChannelSliderValueTextProps(channelProps), props);
+	return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref,
+		children: props.children || colorPicker.getChannelValueText(channelProps.channel, locale)
+	});
+});
+ColorPickerChannelSliderValueText.displayName = "ColorPickerChannelSliderValueText";
+//#endregion
+//#region src/components/color-picker/content.tsx
+const ColorPickerContent = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps(colorPicker.getContentProps(), presence.getPresenceProps(), props);
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	if (presence.unmounted) return null;
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref: composedRefs
+	});
+});
+ColorPickerContent.displayName = "ColorPickerContent";
+//#endregion
+//#region src/components/color-picker/context.tsx
+const ColorPickerContext = (props) => props.children(useColorPickerContext());
+//#endregion
+//#region src/components/color-picker/control.tsx
+const ColorPickerControl = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getControlProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerControl.displayName = "ColorPickerControl";
+//#endregion
+//#region src/components/color-picker/eye-dropper-trigger.tsx
+const ColorPickerEyeDropperTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getEyeDropperTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";
+//#endregion
+//#region src/components/color-picker/format-select.tsx
+const ColorPickerFormatSelect = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getFormatSelectProps(), props);
+	return /* @__PURE__ */ jsx(wire.select, {
+		...mergedProps,
+		ref,
+		children: [
+			"rgba",
+			"hsla",
+			"hsba"
+		].map((format) => /* @__PURE__ */ jsx(wire.option, {
+			value: format,
+			children: format
+		}, format))
+	});
+});
+ColorPickerFormatSelect.displayName = "ColorPickerFormatSelect";
+//#endregion
+//#region src/components/color-picker/format-trigger.tsx
+const ColorPickerFormatTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getFormatTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";
+//#endregion
+//#region src/components/color-picker/hidden-input.tsx
+const ColorPickerHiddenInput = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getHiddenInputProps(), props);
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(wire.input, {
+		"aria-describedby": field?.ariaDescribedby,
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";
+//#endregion
+//#region src/components/color-picker/label.tsx
+const ColorPickerLabel = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getLabelProps(), props);
+	return /* @__PURE__ */ jsx(wire.label, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerLabel.displayName = "ColorPickerLabel";
+//#endregion
+//#region src/components/color-picker/positioner.tsx
+const ColorPickerPositioner = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getPositionerProps(), props);
+	if (usePresenceContext().unmounted) return null;
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerPositioner.displayName = "ColorPickerPositioner";
+//#endregion
+//#region src/components/color-picker/use-color-picker.ts
+const useColorPicker = (props) => {
+	const id = useId();
+	const { getRootNode } = useEnvironmentContext();
+	const { dir } = useLocaleContext();
+	const 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 = useMachine(colorPicker.machine, machineProps);
+	return colorPicker.connect(service, normalizeProps);
+};
+//#endregion
+//#region src/components/color-picker/root.tsx
+const splitRootProps = createSplitProps();
+const ColorPickerRoot = forwardRef((props, ref) => {
+	const [presenceProps, colorPickerProps] = 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 = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
+	const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerProvider, {
+		value: colorPicker,
+		children: /* @__PURE__ */ jsx(PresenceProvider, {
+			value: presence,
+			children: /* @__PURE__ */ jsx(wire.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+ColorPickerRoot.displayName = "ColorPickerRoot";
+//#endregion
+//#region src/components/color-picker/root-provider.tsx
+const splitRootProviderProps = createSplitProps();
+const ColorPickerRootProvider = forwardRef((props, ref) => {
+	const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+	const [{ value: colorPicker }, localProps] = splitRootProviderProps(colorPickerProps, ["value"]);
+	const presence = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
+	const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerProvider, {
+		value: colorPicker,
+		children: /* @__PURE__ */ jsx(PresenceProvider, {
+			value: presence,
+			children: /* @__PURE__ */ jsx(wire.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+ColorPickerRootProvider.displayName = "ColorPickerRootProvider";
+//#endregion
+//#region src/components/color-picker/use-color-picker-swatch-props-context.ts
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext$1({
+	name: "ColorPickerSwatchContext",
+	hookName: "useColorPickerSwatchContext",
+	providerName: "<ColorPickerSwatchProvider />"
+});
+//#endregion
+//#region src/components/color-picker/swatch.tsx
+const splitSwatchProps = createSplitProps();
+const ColorPickerSwatch = forwardRef((props, ref) => {
+	const [swatwchProps, localProps] = splitSwatchProps(props, ["respectAlpha", "value"]);
+	const mergedProps = mergeProps(useColorPickerContext().getSwatchProps(swatwchProps), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, {
+		value: swatwchProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerSwatch.displayName = "ColorPickerSwatch";
+//#endregion
+//#region src/components/color-picker/swatch-group.tsx
+const ColorPickerSwatchGroup = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getSwatchGroupProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
+//#endregion
+//#region src/components/color-picker/swatch-indicator.tsx
+const ColorPickerSwatchIndicator = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const swatchProps = useColorPickerSwatchPropsContext();
+	const mergedProps = mergeProps(colorPicker.getSwatchIndicatorProps(swatchProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchIndicator.displayName = "ColorPickerSwatchIndicator";
+//#endregion
+//#region src/components/color-picker/swatch-trigger.tsx
+const splitSwatchTriggerProps = createSplitProps();
+const ColorPickerSwatchTrigger = forwardRef((props, ref) => {
+	const [triggerProps, localProps] = splitSwatchTriggerProps(props, ["value", "disabled"]);
+	const mergedProps = mergeProps(useColorPickerContext().getSwatchTriggerProps(triggerProps), localProps);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerSwatchTrigger.displayName = "ColorPickerSwatchTrigger";
+//#endregion
+//#region src/components/color-picker/transparency-grid.tsx
+const splitTransparencyGridProps = createSplitProps();
+const ColorPickerTransparencyGrid = forwardRef((props, ref) => {
+	const [gridProps, localProps] = splitTransparencyGridProps(props, ["size"]);
+	const mergedProps = mergeProps(useColorPickerContext().getTransparencyGridProps(gridProps), localProps);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
+//#endregion
+//#region src/components/color-picker/trigger.tsx
+const ColorPickerTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useColorPickerContext().getTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
+//#endregion
+//#region src/components/color-picker/value-swatch.tsx
+const splitValueSwatchProps = createSplitProps();
+const ColorPickerValueSwatch = forwardRef((props, ref) => {
+	const [{ respectAlpha }, localProps] = splitValueSwatchProps(props, ["respectAlpha"]);
+	const colorPicker = useColorPickerContext();
+	const swatchProps = {
+		respectAlpha,
+		value: colorPicker.valueAsString
+	};
+	const mergedProps = mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
+	return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, {
+		value: swatchProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
+//#endregion
+//#region src/components/color-picker/value-text.tsx
+const ColorPickerValueText = forwardRef((props, ref) => {
+	const { children, format, ...localProps } = props;
+	const colorPicker = useColorPickerContext();
+	const mergedProps = mergeProps(colorPicker.getValueTextProps(), localProps);
+	const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+	return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref,
+		children: children || valueAsString
+	});
+});
+ColorPickerValueText.displayName = "ColorPickerValueText";
+//#endregion
+//#region src/components/color-picker/anatomy.ts
+const colorPickerAnatomy = anatomy.extendWith("view");
+//#endregion
+//#region src/components/color-picker/view.tsx
+const splitFormatOptions = createSplitProps();
+const ColorPickerView = forwardRef((props, ref) => {
+	const colorPicker = useColorPickerContext();
+	const [formatProps, restProps] = splitFormatOptions(props, ["format"]);
+	if (colorPicker.format !== formatProps.format) return null;
+	return /* @__PURE__ */ jsx(ColorPickerFormatPropsProvider, {
+		value: formatProps,
+		children: /* @__PURE__ */ jsx(wire.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__ */ __exportAll({
+	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 };