ropav 0.2.0 → 0.3.0

package/dist/collapse.js

@@ -1,94 +0,0 @@
-import './collapse.css';
-import { t as useStylesApi } from "./styles-api.js";
-import { n as toPresenceAttribute } from "./attributes.js";
-import { t as useCollapse } from "./useCollapse.js";
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
-//#region src/components/collapse/collapse.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-13f319ff><div data-v-13f319ff class=rp-collapse__inner>");
-var t1 = template("<div data-v-13f319ff>", 1);
-//#endregion
-//#region src/components/collapse/collapse.vue
-var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
-	name: "RpCollapse",
-	inheritAttrs: false,
-	__name: "collapse",
-	props: {
-		id: {},
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		unmountOnExit: {
-			type: Boolean,
-			default: false
-		},
-		role: { default: "region" },
-		ariaLabel: {},
-		ariaDescribedby: {},
-		ariaLabelledby: {},
-		classNames: {},
-		styles: {}
-	},
-	emits: ["update:open"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const { isOpen, isDisabled, state, shouldRenderContent, rootProps: internalRootProps, triggerProps, contentProps, triggerSlotProps, contentSlotProps } = useCollapse(props, (open) => {
-			emit("update:open", open);
-		});
-		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			...internalRootProps.value,
-			"data-disabled": toPresenceAttribute(isDisabled.value)
-		}));
-		const publicTriggerProps = computed(() => {
-			const partAttrs = getPartAttrs("trigger");
-			return {
-				...triggerProps.value,
-				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
-				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
-				"data-state": state.value,
-				"data-disabled": toPresenceAttribute(isDisabled.value)
-			};
-		});
-		const publicTriggerSlotProps = computed(() => ({
-			...triggerSlotProps.value,
-			triggerProps: publicTriggerProps.value
-		}));
-		const publicContentProps = computed(() => ({
-			...contentProps.value,
-			...getPartAttrs("content", { class: contentProps.value.class })
-		}));
-		const n7 = t1();
-		renderEffect(() => setDynamicProps(n7, [rootAttrs.value]));
-		setInsertionState(n7, null, 0);
-		createSlot("trigger", { $: [() => publicTriggerSlotProps.value] }, null, 1);
-		setInsertionState(n7, null, 1);
-		createComponent(VaporTransition, { name: "rp-collapse-content" }, extend(() => {
-			return createIf(() => unref(shouldRenderContent), () => {
-				const n5 = t0();
-				const n4 = child(n5);
-				renderEffect(() => setDynamicProps(n5, [publicContentProps.value]));
-				setInsertionState(n4, null, 0);
-				createSlot("default", { $: [() => unref(contentSlotProps)] }, null, 1);
-				applyVShow(n5, () => unref(isOpen));
-				return n5;
-			}, null, 129);
-		}, { _: 8 }));
-		return n7;
-	}
-}), [["__scopeId", "data-v-13f319ff"]]);
-//#endregion
-//#region src/components/collapse/types.ts
-var collapseParts = [
-	"root",
-	"trigger",
-	"content"
-];
-//#endregion
-export { collapse_default as n, collapseParts as t };

package/dist/collectionNavigation.js

@@ -1,23 +0,0 @@
-//#region src/utils/collectionNavigation.ts
-function getEnabledIndexes(items, isDisabled) {
-	return items.map((item, index) => isDisabled(item) ? -1 : index).filter((index) => index >= 0);
-}
-function getNextEnabledIndex(items, currentIndex, direction, isDisabled, loop = true) {
-	const enabledIndexes = getEnabledIndexes(items, isDisabled);
-	if (enabledIndexes.length === 0) return void 0;
-	const currentPosition = enabledIndexes.indexOf(currentIndex);
-	if (currentPosition < 0) {
-		if (direction === 1) return enabledIndexes.find((index) => index > currentIndex) ?? (loop ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1]);
-		for (let index = enabledIndexes.length - 1; index >= 0; index -= 1) {
-			const candidate = enabledIndexes[index];
-			if (candidate < currentIndex) return candidate;
-		}
-		return loop ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
-	}
-	const nextPosition = currentPosition + direction;
-	if (nextPosition >= 0 && nextPosition < enabledIndexes.length) return enabledIndexes[nextPosition];
-	if (!loop) return enabledIndexes[currentPosition];
-	return direction === 1 ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1];
-}
-//#endregion
-export { getNextEnabledIndex as n, getEnabledIndexes as t };

package/dist/color-input.css

@@ -1,134 +0,0 @@
-@layer ropav.components {
-.rp-color-input[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-md);
-    --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
-    --_rp-color-input-preview-inset: calc(
-        (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
-    );
-    --_rp-color-input-empty-tile: var(--rp-color-gray-5);
-    --_rp-color-input-empty-tile-alt: var(--rp-color-gray-1);
-    --_rp-color-input-empty-grid: conic-gradient(
-        var(--_rp-color-input-empty-tile) 25%,
-        var(--_rp-color-input-empty-tile-alt) 0 50%,
-        var(--_rp-color-input-empty-tile) 0 75%,
-        var(--_rp-color-input-empty-tile-alt) 0
-    );
-    display: inline-flex;
-    max-width: 100%;
-    font-family: var(--rp-font-family);
-    vertical-align: middle;
-}
-.rp-color-input--size-xs[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-xs);
-}
-.rp-color-input--size-sm[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-sm);
-}
-.rp-color-input--size-md[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-md);
-}
-.rp-color-input--size-lg[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-lg);
-}
-.rp-color-input--size-xl[data-v-fe0168d1] {
-    --_rp-color-input-height: var(--rp-size-control-xl);
-}
-.rp-color-input[data-v-fe0168d1] .rp-input {
-    width: 100%;
-    min-width: var(--rp-component-menu-min-width);
-    padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
-}
-.rp-color-input[data-v-fe0168d1] .rp-popover__content {
-    min-width: auto;
-    padding: var(--rp-spacing-3);
-    padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
-}
-.rp-color-input[data-v-fe0168d1] .rp-color-picker {
-    --_rp-color-picker-size: min(
-        var(--_rp-color-picker-saturation-width),
-        calc(100vw - var(--rp-spacing-12))
-    );
-}
-.rp-color-input__preview[data-v-fe0168d1] {
-    --_rp-color-swatch-radius: 50%;
-    width: var(--_rp-color-input-preview-size);
-    height: var(--_rp-color-input-preview-size);
-    flex-shrink: 0;
-    border-radius: 50%;
-    pointer-events: none;
-}
-.rp-color-input__preview--empty[data-v-fe0168d1] {
-    box-sizing: border-box;
-    display: inline-flex;
-    background: var(--_rp-color-input-empty-grid);
-    background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
-    border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
-}
-.rp-color-input__eye-dropper[data-v-fe0168d1] {
-    padding: 0;
-    font: inherit;
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--rp-radius-xs);
-    color: var(--rp-color-control-icon);
-    transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
-}
-.rp-color-input__eye-dropper[data-v-fe0168d1]:hover:not(:disabled) {
-    color: var(--rp-color-control-fg);
-}
-.rp-color-input__eye-dropper[data-v-fe0168d1]:focus-visible {
-    outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
-    outline-offset: 2px;
-}
-.rp-color-input__eye-dropper[data-v-fe0168d1]:disabled {
-    cursor: not-allowed;
-    opacity: var(--rp-opacity-disabled);
-}
-.rp-color-input__eye-dropper-icon[data-v-fe0168d1] {
-    display: inline-flex;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-}
-.rp-color-input__eye-dropper-icon svg[data-v-fe0168d1] {
-    width: 100%;
-    height: 100%;
-}
-.rp-color-input__eye-dropper-icon[data-v-fe0168d1] >  svg {
-    width: 100%;
-    height: 100%;
-}
-.rp-popover__content.rp-color-input__popover {
-    --_rp-color-input-height: var(--rp-size-control-md);
-    --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
-    --_rp-color-input-preview-inset: calc(
-        (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
-    );
-    min-width: auto;
-    padding: var(--rp-spacing-3);
-    padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
-}
-.rp-color-input__popover--size-xs {
-    --_rp-color-input-height: var(--rp-size-control-xs);
-}
-.rp-color-input__popover--size-sm {
-    --_rp-color-input-height: var(--rp-size-control-sm);
-}
-.rp-color-input__popover--size-lg {
-    --_rp-color-input-height: var(--rp-size-control-lg);
-}
-.rp-color-input__popover--size-xl {
-    --_rp-color-input-height: var(--rp-size-control-xl);
-}
-.rp-color-input__popover .rp-color-picker {
-    --_rp-color-picker-size: min(
-        var(--_rp-color-picker-saturation-width),
-        calc(100vw - var(--rp-spacing-12))
-    );
-}
-}

package/dist/color-input.js

@@ -1,438 +0,0 @@
-import './color-input.css';
-import { t as useControllableValue } from "./useControllableValue.js";
-import { t as useStylesApi } from "./styles-api.js";
-import { n as toPresenceAttribute } from "./attributes.js";
-import { t as bem } from "./bem.js";
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { a as useTextFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
-import { r as parseAriaIdRefs, t as hasAriaIdRef } from "./aria.js";
-import { t as useControlState } from "./useControlState.js";
-import { t as color_swatch_default } from "./color-swatch.js";
-import { i as parseColorPickerValue, r as formatColorPickerValue, t as color_picker_default } from "./color-picker.js";
-import { i as isNodeWithinElement } from "./events.js";
-import { t as input_default } from "./input.js";
-import { t as popover_default } from "./popover.js";
-import { child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, withModifiers } from "vue";
-//#region ~icons/lucide/crosshair
-var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=10></circle><path d=\"M22 12h-4M6 12H2m10-6V2m0 20v-4\">", 3, 1);
-function render(_ctx) {
-	return t0$1();
-}
-var crosshair_default = markRaw(defineVaporComponent({
-	name: "lucide-crosshair",
-	render
-}));
-//#endregion
-//#region src/components/color-input/useColorInputEyeDropper.ts
-function useColorInputEyeDropper(options) {
-	const eyeDropperApi = shallowRef();
-	const isPickingColor = ref(false);
-	const showEyeDropper = computed(() => options.enabled() && Boolean(eyeDropperApi.value));
-	onMounted(() => {
-		eyeDropperApi.value = window.EyeDropper;
-	});
-	async function pickScreenColor(closePicker) {
-		const EyeDropperApi = eyeDropperApi.value;
-		if (options.disabled() || isPickingColor.value || !EyeDropperApi) return;
-		closePicker();
-		isPickingColor.value = true;
-		try {
-			const color = parseColorPickerValue((await new EyeDropperApi().open()).sRGBHex);
-			if (!color || options.disabled()) return;
-			options.update(formatColorPickerValue(color, options.format()));
-		} catch {} finally {
-			isPickingColor.value = false;
-		}
-	}
-	return {
-		showEyeDropper,
-		isPickingColor,
-		pickScreenColor
-	};
-}
-//#endregion
-//#region src/components/color-input/useColorInputPopover.ts
-function onInputKeydown(event, popover) {
-	if (event.key === "ArrowDown") {
-		event.preventDefault();
-		const trigger = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-		popover.open();
-		nextTick(() => focusPickerFromTrigger(trigger));
-		return;
-	}
-	if (event.key === "Escape") popover.triggerProps.onKeydown(event);
-}
-function focusPickerFromTrigger(trigger) {
-	const contentId = parseAriaIdRefs(trigger?.getAttribute("aria-controls"))[0];
-	const picker = contentId ? trigger?.ownerDocument.getElementById(contentId)?.querySelector(".rp-color-picker") : null;
-	if (!picker) return;
-	(Boolean(picker.querySelector(".rp-color-picker__saturation")) ? picker.querySelector("input:not(:disabled), button:not(:disabled), [tabindex=\"0\"]") : picker.querySelector("[role=\"radio\"][aria-checked=\"true\"]") ?? picker.querySelector("[role=\"radio\"][tabindex=\"0\"]"))?.focus({ preventScroll: true });
-}
-function onPickerKeydown(event, popover) {
-	if (event.key !== "Escape") return;
-	const pickerRoot = event.currentTarget;
-	const content = pickerRoot instanceof Element ? pickerRoot.closest("[role=\"dialog\"]") : null;
-	const contentId = content?.id;
-	const focusTarget = contentId ? [...content.ownerDocument.querySelectorAll("[aria-controls]")].find((element) => hasAriaIdRef(element.getAttribute("aria-controls"), contentId)) : void 0;
-	event.stopPropagation();
-	focusTarget?.focus({ preventScroll: true });
-	popover.close();
-}
-function useColorInputPopover(getInputAttrs) {
-	let closePicker;
-	function getInputTriggerAttrs(slotProps) {
-		const popover = slotProps;
-		const trigger = popover.triggerProps;
-		const attrs = getInputAttrs() ?? {};
-		if (!trigger["aria-haspopup"]) return attrs;
-		return {
-			...attrs,
-			role: "combobox",
-			"aria-autocomplete": "none",
-			"aria-controls": trigger["aria-controls"],
-			"aria-expanded": trigger["aria-expanded"],
-			"aria-haspopup": trigger["aria-haspopup"],
-			onFocusin(event) {
-				rememberClose(popover);
-				popover.open();
-				attrs.onFocusin?.(event);
-			},
-			onClick(event) {
-				rememberClose(popover);
-				popover.open();
-				attrs.onClick?.(event);
-			},
-			onKeydown(event) {
-				onInputKeydown(event, popover);
-				attrs.onKeydown?.(event);
-			}
-		};
-	}
-	function rememberClose(slotProps) {
-		closePicker = slotProps.close;
-	}
-	function onFocusOut(event) {
-		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) return;
-		closePicker?.();
-	}
-	return {
-		getInputTriggerAttrs,
-		rememberClose,
-		onPickerKeydown,
-		onFocusOut
-	};
-}
-//#endregion
-//#region src/components/color-input/useColorInputValue.ts
-function useColorInputValue(props, isControlInvalid, getValue = () => props.modelValue ?? "") {
-	const currentValue = computed(getValue);
-	const parsedColor = computed(() => parseColorPickerValue(currentValue.value));
-	const previewColor = computed(() => parsedColor.value ? currentValue.value : void 0);
-	const hasValidSwatches = computed(() => Boolean(props.swatches?.some((swatch) => parseColorPickerValue(swatch))));
-	const hasInvalidColor = computed(() => props.validateColor && currentValue.value.trim().length > 0 && !parsedColor.value);
-	return {
-		previewColor,
-		hasValidSwatches,
-		hasInvalidColor,
-		isInvalid: computed(() => isControlInvalid() || hasInvalidColor.value),
-		colorValidationMessage: computed(() => hasInvalidColor.value ? props.invalidColorMessage : void 0)
-	};
-}
-//#endregion
-//#region src/components/color-input/useColorInput.ts
-function useColorInput(props, emit, getValue = () => props.modelValue ?? "") {
-	const control = useControlState(props);
-	const value = useColorInputValue(props, () => control.invalid, getValue);
-	const popover = useColorInputPopover(() => props.inputAttrs);
-	const popoverDisabled = computed(() => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly) && !value.hasValidSwatches.value);
-	const eyeDropper = useColorInputEyeDropper({
-		enabled: () => props.withEyeDropper !== false && !props.swatchesOnly,
-		disabled: () => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly),
-		format: () => props.format ?? "hex",
-		update: emit.modelValue
-	});
-	const rootClass = computed(() => bem("rp-color-input", {
-		[`size-${props.size}`]: Boolean(props.size),
-		[`radius-${props.radius}`]: Boolean(props.radius),
-		disabled: control.disabled,
-		invalid: value.isInvalid.value,
-		valid: control.valid && !value.isInvalid.value,
-		readonly: props.readonly
-	}));
-	function onInputUpdate(nextValue) {
-		if (control.disabled || props.readonly || props.disallowInput || props.swatchesOnly) return;
-		emit.modelValue(nextValue);
-	}
-	function onPickerUpdate(nextValue) {
-		if (control.disabled || props.readonly) return;
-		emit.modelValue(nextValue);
-	}
-	function onOpenUpdate(open) {
-		emit.open(open);
-	}
-	return {
-		control,
-		rootClass,
-		popoverDisabled,
-		...value,
-		...popover,
-		...eyeDropper,
-		onInputUpdate,
-		onPickerUpdate,
-		onOpenUpdate
-	};
-}
-//#endregion
-//#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-fe0168d1>");
-var t1 = template("<button data-v-fe0168d1><span data-v-fe0168d1 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
-//#endregion
-//#region src/components/color-input/color-input.vue
-var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
-	name: "RpColorInput",
-	inheritAttrs: false,
-	__name: "color-input",
-	props: {
-		id: {},
-		name: {},
-		form: {},
-		modelValue: { default: void 0 },
-		defaultValue: { default: "" },
-		format: { default: "hex" },
-		size: {},
-		radius: {},
-		placeholder: { default: "" },
-		disabled: {
-			type: Boolean,
-			default: void 0
-		},
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		disallowInput: {
-			type: Boolean,
-			default: false
-		},
-		swatchesOnly: {
-			type: Boolean,
-			default: false
-		},
-		required: {
-			type: Boolean,
-			default: void 0
-		},
-		invalid: {
-			type: Boolean,
-			default: void 0
-		},
-		valid: {
-			type: Boolean,
-			default: void 0
-		},
-		ariaLabel: {},
-		describedby: {},
-		labelledby: {},
-		inputAttrs: {},
-		validationMessage: {},
-		validateColor: {
-			type: Boolean,
-			default: false
-		},
-		invalidColorMessage: { default: "Enter a valid color." },
-		swatches: {},
-		swatchesPerRow: {},
-		placement: { default: "bottom-start" },
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		keepMounted: {
-			type: Boolean,
-			default: false
-		},
-		popoverId: {},
-		pickerAriaLabel: { default: "Choose color" },
-		withEyeDropper: {
-			type: Boolean,
-			default: true
-		},
-		eyeDropperAriaLabel: { default: "Pick color from screen" },
-		classNames: {},
-		styles: {}
-	},
-	emits: ["update:modelValue", "update:open"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const controllable = useControllableValue({
-			modelValue: () => props.modelValue,
-			defaultValue: () => props.defaultValue,
-			onChange: (value) => emit("update:modelValue", value)
-		});
-		const inputComponentRef = ref(null);
-		provideNestedFormControlOwner();
-		const { control, rootClass, previewColor, isInvalid, colorValidationMessage, popoverDisabled, getInputTriggerAttrs, rememberClose, onPickerKeydown, onFocusOut, showEyeDropper, isPickingColor, pickScreenColor, onInputUpdate, onPickerUpdate, onOpenUpdate } = useColorInput(props, {
-			modelValue: (value) => controllable.setValue(value),
-			open: (value) => emit("update:open", value)
-		}, () => controllable.value.value);
-		const effectiveValidationMessage = computed(() => props.validationMessage !== void 0 ? props.validationMessage : colorValidationMessage.value);
-		useTextFormControl(() => inputComponentRef.value?.nativeElement, controllable, () => effectiveValidationMessage.value);
-		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			"data-disabled": toPresenceAttribute(control.disabled),
-			"data-readonly": toPresenceAttribute(props.readonly),
-			"data-invalid": toPresenceAttribute(isInvalid.value),
-			onFocusout: onFocusOut
-		}));
-		const popoverClassNames = computed(() => ({
-			root: rootClass.value,
-			content: props.classNames?.content
-		}));
-		const popoverStyles = computed(() => ({ content: props.styles?.content }));
-		const inputClassNames = computed(() => ({
-			root: props.classNames?.control,
-			input: props.classNames?.input
-		}));
-		const inputStyles = computed(() => ({
-			root: props.styles?.control,
-			input: props.styles?.input
-		}));
-		const previewClassNames = computed(() => ({ root: ["rp-color-input__preview", props.classNames?.preview] }));
-		const previewStyles = computed(() => ({ root: props.styles?.preview }));
-		const pickerClassNames = computed(() => ({
-			root: props.classNames?.picker,
-			control: props.classNames?.pickerControl,
-			handle: props.classNames?.pickerHandle,
-			swatches: props.classNames?.pickerSwatches,
-			swatch: props.classNames?.pickerSwatch
-		}));
-		const pickerStyles = computed(() => ({
-			root: props.styles?.picker,
-			control: props.styles?.pickerControl,
-			handle: props.styles?.pickerHandle,
-			swatches: props.styles?.pickerSwatches,
-			swatch: props.styles?.pickerSwatch
-		}));
-		const _setTemplateRef = createTemplateRefSetter();
-		return createComponent(popover_default, { $: [() => rootAttrs.value, {
-			id: () => __props.popoverId,
-			"class-names": () => popoverClassNames.value,
-			styles: () => popoverStyles.value,
-			placement: () => __props.placement,
-			open: () => __props.open,
-			"keep-mounted": () => __props.keepMounted,
-			disabled: () => unref(popoverDisabled),
-			"aria-label": () => __props.pickerAriaLabel,
-			"content-class": () => `rp-color-input__popover rp-color-input__popover--size-${__props.size ?? "md"}`,
-			"onUpdate:open": () => unref(onOpenUpdate)
-		}] }, {
-			"default": (slotProps) => {
-				const n15 = createComponent(input_default, {
-					id: () => unref(control).id,
-					name: () => __props.name,
-					form: () => unref(control).form,
-					"model-value": () => unref(controllable).value.value,
-					type: "text",
-					size: () => __props.size,
-					radius: () => __props.radius,
-					placeholder: () => __props.placeholder,
-					disabled: () => unref(control).disabled || void 0,
-					readonly: () => __props.readonly || __props.disallowInput || __props.swatchesOnly || void 0,
-					required: () => unref(control).required || void 0,
-					invalid: () => unref(isInvalid) || void 0,
-					valid: () => unref(control).valid && !unref(isInvalid) ? true : void 0,
-					"aria-label": () => __props.ariaLabel,
-					describedby: () => __props.describedby,
-					labelledby: () => __props.labelledby,
-					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
-					"class-names": () => inputClassNames.value,
-					styles: () => inputStyles.value,
-					"validation-message": () => effectiveValidationMessage.value,
-					"onUpdate:modelValue": () => unref(onInputUpdate)
-				}, {
-					"left": extend(() => {
-						return createSlot("left", {
-							color: () => unref(previewColor),
-							empty: () => !unref(previewColor)
-						}, () => {
-							return createIf(() => unref(previewColor), () => {
-								return createComponent(color_swatch_default, {
-									"class-names": () => previewClassNames.value,
-									styles: () => previewStyles.value,
-									color: () => unref(previewColor),
-									size: "var(--_rp-color-input-preview-size)",
-									"aria-hidden": "true"
-								});
-							}, () => {
-								const n6 = t0();
-								renderEffect(() => setDynamicProps(n6, [unref(getPartAttrs)("preview", { class: ["rp-color-input__preview", "rp-color-input__preview--empty"] }), { "aria-hidden": "true" }]));
-								return n6;
-							}, 389);
-						}, 1);
-					}, { _: 8 }),
-					$: [() => unref(showEyeDropper) ? {
-						name: "right",
-						fn: () => {
-							const n13 = t1();
-							const n12 = child(n13);
-							renderEffect(() => {
-								const _isPickingColor = unref(isPickingColor);
-								setDynamicProps(n13, [unref(getPartAttrs)("eyeDropper", { class: "rp-color-input__eye-dropper" }), {
-									type: "button",
-									disabled: unref(control).disabled || __props.readonly || _isPickingColor,
-									"aria-label": __props.eyeDropperAriaLabel,
-									"aria-busy": _isPickingColor || void 0
-								}]);
-							});
-							setInsertionState(n12, null, 0);
-							createSlot("eye-dropper-icon", null, () => {
-								return createComponent(unref(crosshair_default));
-							}, 1);
-							on(n13, "click", withModifiers(() => unref(pickScreenColor)(slotProps.close), ["stop"]));
-							return n13;
-						}
-					} : void 0]
-				});
-				_setTemplateRef(n15, inputComponentRef, null, "inputComponentRef");
-				return n15;
-			},
-			"content": (slotProps) => {
-				const _on_focusin = () => unref(rememberClose)(slotProps);
-				const _on_keydown = ($event) => unref(onPickerKeydown)($event, slotProps);
-				return createComponent(color_picker_default, {
-					"model-value": () => unref(controllable).value.value,
-					format: () => __props.format,
-					size: () => __props.size,
-					readonly: () => __props.readonly,
-					"with-picker": () => !__props.swatchesOnly,
-					swatches: () => __props.swatches,
-					"swatches-per-row": () => __props.swatchesPerRow,
-					"aria-label": () => __props.pickerAriaLabel,
-					"class-names": () => pickerClassNames.value,
-					styles: () => pickerStyles.value,
-					onFocusin: () => _on_focusin,
-					onKeydown: () => _on_keydown,
-					"onUpdate:modelValue": () => unref(onPickerUpdate)
-				});
-			}
-		}, true);
-	}
-}), [["__scopeId", "data-v-fe0168d1"]]);
-//#endregion
-//#region src/components/color-input/types.ts
-var colorInputParts = [
-	"root",
-	"control",
-	"input",
-	"preview",
-	"eyeDropper",
-	"content",
-	"picker",
-	"pickerControl",
-	"pickerHandle",
-	"pickerSwatches",
-	"pickerSwatch"
-];
-//#endregion
-export { color_input_default as n, colorInputParts as t };