ropav 0.2.0 → 0.3.0

package/dist/components/input-group/input-group-prefix.js

@@ -0,0 +1,20 @@
+import { useInputGroupContext } from "./input-group.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/input-group/input-group-prefix.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=input-group-prefix>", 1);
+var input_group_prefix_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "input-group-prefix",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useInputGroupContext();
+		const styles = computed(() => slots.value.prefix({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { input_group_prefix_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/input-group/input-group-prefix.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { InputGroupPrefixProps } from "./input-group.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputGroupPrefixProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/input-group/input-group-root.js

@@ -0,0 +1,88 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useFocusWithin, useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useTextFieldControlContext } from "../../composables/use-text-field.js";
+import { useTextFieldContext } from "../textfield/textfield.context.js";
+import { provideInputGroupContext } from "./input-group.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setTemplateRefBinding, shallowRef, template, unref } from "vue";
+import { inputGroupVariants } from "@ropav/styles";
+//#region src/components/input-group/input-group-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=input-group>", 1);
+var input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "input-group-root",
+	props: {
+		class: {},
+		variant: { default: void 0 },
+		fullWidth: {
+			type: Boolean,
+			default: void 0
+		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		isInvalid: {
+			type: Boolean,
+			default: void 0
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const control = useTextFieldControlContext();
+		const textField = useTextFieldContext();
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLDivElement ? next : null;
+		};
+		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
+		const resolvedIsDisabled = computed(() => props.isDisabled ?? control?.isDisabled.value ?? false);
+		const resolvedIsInvalid = computed(() => props.isInvalid ?? control?.isInvalid.value ?? false);
+		const slots = computed(() => inputGroupVariants({
+			fullWidth: props.fullWidth,
+			variant: resolvedVariant.value
+		}));
+		provideInputGroupContext({ slots });
+		const styles = computed(() => slots.value.base({ class: props.class }));
+		const interaction = useInteractionStates({ isDisabled: resolvedIsDisabled });
+		const focusWithin = useFocusWithin();
+		const onClick = (event) => {
+			const target = event.target;
+			const input = element.value?.querySelector("input");
+			if (input && target !== input && !input.contains(target)) input.focus();
+		};
+		const role = computed(() => control ? "presentation" : "group");
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _focusWithin = unref(focusWithin);
+			setClass(n1, styles.value);
+			setAttr(n1, "data-disabled", _dataAttr(resolvedIsDisabled.value));
+			setAttr(n1, "data-focus-visible", _dataAttr(_focusWithin.isFocusVisible.value));
+			setAttr(n1, "data-focus-within", _dataAttr(_focusWithin.isFocusWithin.value));
+			setAttr(n1, "data-hovered", _dataAttr(unref(interaction).isHovered.value));
+			setAttr(n1, "data-invalid", _dataAttr(resolvedIsInvalid.value));
+			setAttr(n1, "data-readonly", _dataAttr(props.isReadOnly));
+			setProp(n1, "role", role.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => resolvedIsDisabled.value,
+			isFocusVisible: () => unref(focusWithin).isFocusVisible.value,
+			isFocusWithin: () => unref(focusWithin).isFocusWithin.value,
+			isHovered: () => unref(interaction).isHovered.value,
+			isInvalid: () => resolvedIsInvalid.value
+		});
+		on(n1, "click", onClick);
+		on(n1, "focusin", (e) => unref(focusWithin).onFocusin(e));
+		on(n1, "focusout", (e) => unref(focusWithin).onFocusout(e));
+		on(n1, "pointerenter", (e) => unref(interaction).onPointerenter(e));
+		on(n1, "pointerleave", (e) => unref(interaction).onPointerleave(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/input-group/input-group-root.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { InputGroupRootProps, InputGroupRootSlotProps } from "./input-group.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputGroupRootProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: InputGroupRootSlotProps) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/input-group/input-group-suffix.js

@@ -0,0 +1,20 @@
+import { useInputGroupContext } from "./input-group.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/input-group/input-group-suffix.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=input-group-suffix>", 1);
+var input_group_suffix_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "input-group-suffix",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useInputGroupContext();
+		const styles = computed(() => slots.value.suffix({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { input_group_suffix_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/input-group/input-group-suffix.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { InputGroupSuffixProps } from "./input-group.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputGroupSuffixProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/input-group/input-group-textarea.js

@@ -0,0 +1,103 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { setFormValue } from "../../utils/form-value.js";
+import { useTextFieldControlContext } from "../../composables/use-text-field.js";
+import { useInputGroupContext } from "./input-group.context.js";
+import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
+//#region src/components/input-group/input-group-textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<textarea>", 1);
+var input_group_textarea_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "input-group-textarea",
+	props: {
+		class: {},
+		value: {},
+		placeholder: {}
+	},
+	emits: ["change", "update:value"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { slots } = useInputGroupContext();
+		const control = useTextFieldControlContext();
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLTextAreaElement ? next : null;
+			control?.registerElement(element.value);
+		};
+		const styles = computed(() => slots.value.input({ class: props.class }));
+		const attrs = computed(() => {
+			const merged = { ...control?.attrs.value };
+			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
+			if (props.value !== void 0) merged["value"] = props.value;
+			return merged;
+		});
+		const interaction = useInteractionStates({ isDisabled: () => control?.isDisabled.value });
+		const inputCount = shallowRef(0);
+		const onInput = (event) => {
+			control?.handlers.onInput(event);
+			const next = event.currentTarget.value;
+			emit("change", next);
+			emit("update:value", next);
+			if (props.value !== void 0) inputCount.value++;
+		};
+		/**
+		* Put the text back to what the caller holds, reset source included. A `value` set on the control
+		* makes the caller the owner of it, and a caller that keeps it unchanged means the typing is
+		* rejected — but the browser has already moved the text, and Vapor skips writing `value` when the
+		* bound value has not changed, so nothing would put it back.
+		*
+		* Post-flush, because the value only settles once the listener that heard the change has updated
+		* whatever holds it. `immediate`, and with the element in the dependencies, because the reset
+		* source has to be there before a reset rather than after the first keystroke — `inputCount` alone
+		* never fires on a control nobody has typed into. See {@link setFormValue}.
+		*/
+		watch([
+			element,
+			() => props.value,
+			inputCount
+		], ([el, pinned]) => {
+			if (pinned === void 0) return;
+			setFormValue(el, pinned);
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.value !== void 0, (owned) => control?.setValueOwned(owned), { immediate: true });
+		const onFocus = (event) => {
+			interaction.onFocus();
+			control?.handlers.onFocus(event);
+		};
+		const onBlur = (event) => {
+			interaction.onBlur();
+			control?.handlers.onBlur(event);
+		};
+		const _setTemplateRef = createTemplateRefSetter();
+		const n0 = t0();
+		on(n0, "blur", onBlur);
+		on(n0, "focus", onFocus);
+		on(n0, "input", onInput);
+		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
+		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
+		on(n0, "pointerdown", (e) => unref(interaction).onPointerdown(e));
+		on(n0, "pointerenter", (e) => unref(interaction).onPointerenter(e));
+		on(n0, "pointerleave", (e) => unref(interaction).onPointerleave(e));
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _control = unref(control);
+			const _interaction = unref(interaction);
+			setDynamicProps(n0, [{
+				class: styles.value,
+				"data-disabled": _dataAttr(_control?.isDisabled.value),
+				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
+				"data-focused": _dataAttr(_interaction.isFocused.value),
+				"data-hovered": _dataAttr(_interaction.isHovered.value),
+				"data-invalid": _dataAttr(_control?.isInvalid.value),
+				"data-slot": "input-group-textarea"
+			}, attrs.value]);
+			_setTemplateRef(n0, setElement);
+		});
+		return n0;
+	}
+});
+//#endregion
+export { input_group_textarea_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/input-group/input-group-textarea.vue.d.vue.ts

@@ -0,0 +1,22 @@
+import type { InputGroupTextAreaProps } from "./input-group.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputGroupTextAreaProps & {
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/input-group/input-group.context.d.ts

@@ -0,0 +1,14 @@
+import type { inputGroupVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface InputGroupContext {
+    /** Slot classes the parts pull their own class from. */
+    slots: ComputedRef<ReturnType<typeof inputGroupVariants>>;
+}
+/**
+ * Carries the resolved slot functions from the group down to its parts, so each part gets the
+ * variant the group settled on without having to resolve it a second time.
+ *
+ * Strict: a prefix or a control with the group's class on it but no group around it would be
+ * styled for a shell that is not there.
+ */
+export declare const useInputGroupContext: () => InputGroupContext, provideInputGroupContext: (value: InputGroupContext) => InputGroupContext;

package/dist/components/input-group/input-group.context.js

@@ -0,0 +1,12 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/input-group/input-group.context.ts
+/**
+* Carries the resolved slot functions from the group down to its parts, so each part gets the
+* variant the group settled on without having to resolve it a second time.
+*
+* Strict: a prefix or a control with the group's class on it but no group around it would be
+* styled for a shell that is not there.
+*/
+var [useInputGroupContext, provideInputGroupContext] = createContext({ name: "InputGroupContext" });
+//#endregion
+export { provideInputGroupContext, useInputGroupContext };

package/dist/components/input-group/input-group.types.d.ts

@@ -0,0 +1,54 @@
+import type { InputGroupVariants } from "@ropav/styles";
+export interface InputGroupRootProps {
+    class?: string;
+    /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
+    variant?: InputGroupVariants["variant"];
+    /** Whether the group stretches to fill its container. */
+    fullWidth?: boolean;
+    /**
+     * Whether the group reads as disabled. Taken from the surrounding field when unset, which
+     * is how the field's own disabled state reaches the shell around the control.
+     */
+    isDisabled?: boolean;
+    /** Whether the group reads as invalid. Taken from the surrounding field when unset. */
+    isInvalid?: boolean;
+    /**
+     * Whether the group reads as read-only. Never inherited: a field does not hand this one
+     * down, so it only ever comes from here, matching React.
+     */
+    isReadOnly?: boolean;
+}
+/** State the root hands to its slot, matching React's group render props. */
+export interface InputGroupRootSlotProps {
+    isHovered: boolean;
+    isFocusWithin: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+}
+/** Shared by the two controls the group can hold. */
+interface InputGroupControlProps {
+    class?: string;
+    /**
+     * Text in the control. Set here it takes the control over from the surrounding field, so
+     * the caller owns the value even inside a `TextField` — exactly as a `value` prop does in
+     * React. Without a listener to go with it the text is pinned.
+     */
+    value?: string;
+    /**
+     * Placeholder shown while the control is empty. Declared so it can also be set here rather
+     * than only on the field; every other native attribute arrives by attribute fallthrough.
+     */
+    placeholder?: string;
+}
+export interface InputGroupInputProps extends InputGroupControlProps {
+}
+export interface InputGroupTextAreaProps extends InputGroupControlProps {
+}
+export interface InputGroupPrefixProps {
+    class?: string;
+}
+export interface InputGroupSuffixProps {
+    class?: string;
+}
+export {};

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,160 @@
+import InputOTPGroup from "./input-otp-group.vue";
+import InputOTPRoot from "./input-otp-root.vue";
+import InputOTPSeparator from "./input-otp-separator.vue";
+import InputOTPSlot from "./input-otp-slot.vue";
+export declare const InputOTP: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: ((evt: "change", value: string) => void) & ((evt: "complete", value: string) => void) & ((evt: "update:value", value: string) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        inputClass?: string;
+        variant?: import("@ropav/styles").InputOTPVariants["variant"];
+        maxLength: number;
+        value?: string;
+        defaultValue?: string;
+        pattern?: RegExp | string;
+        placeholder?: string;
+        textAlign?: import("../..").InputOTPTextAlign;
+        inputMode?: string;
+        autoComplete?: string;
+        isDisabled?: boolean;
+        isInvalid?: boolean;
+        validationErrors?: string[];
+        validationDetails?: import("../..").ValidationDetails;
+        pushPasswordManagerStrategy?: import("../..").PushPasswordManagerStrategy;
+        pasteTransformer?: (pasted: string) => string;
+        name?: string;
+        form?: string;
+        id?: string;
+        ariaLabel?: string;
+        ariaLabelledby?: string;
+        ariaDescribedby?: string;
+        onChange?: ((value: string) => any) | undefined;
+        onComplete?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: ((evt: "change", value: string) => void) & ((evt: "complete", value: string) => void) & ((evt: "update:value", value: string) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Group: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: ((evt: "change", value: string) => void) & ((evt: "complete", value: string) => void) & ((evt: "update:value", value: string) => void);
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            inputClass?: string;
+            variant?: import("@ropav/styles").InputOTPVariants["variant"];
+            maxLength: number;
+            value?: string;
+            defaultValue?: string;
+            pattern?: RegExp | string;
+            placeholder?: string;
+            textAlign?: import("../..").InputOTPTextAlign;
+            inputMode?: string;
+            autoComplete?: string;
+            isDisabled?: boolean;
+            isInvalid?: boolean;
+            validationErrors?: string[];
+            validationDetails?: import("../..").ValidationDetails;
+            pushPasswordManagerStrategy?: import("../..").PushPasswordManagerStrategy;
+            pasteTransformer?: (pasted: string) => string;
+            name?: string;
+            form?: string;
+            id?: string;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            ariaDescribedby?: string;
+            onChange?: ((value: string) => any) | undefined;
+            onComplete?: ((value: string) => any) | undefined;
+            "onUpdate:value"?: ((value: string) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: ((evt: "change", value: string) => void) & ((evt: "complete", value: string) => void) & ((evt: "update:value", value: string) => void);
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Separator: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {};
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {};
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Slot: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {};
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            index: number;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {};
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot };
+export type { InputOTPRootProps, InputOTPRootProps as InputOTPProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps, } from "./input-otp.types";
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "../../composables/use-input-otp";
+export { provideInputOTPContext, useInputOTPContext } from "./input-otp.context";
+export type { InputOTPContext } from "./input-otp.context";
+export { inputOTPVariants } from "@ropav/styles";
+export type { InputOTPVariants } from "@ropav/styles";

package/dist/components/input-otp/index.js

@@ -0,0 +1,16 @@
+import { provideInputOTPContext, useInputOTPContext } from "./input-otp.context.js";
+import input_otp_group_default from "./input-otp-group.js";
+import { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "../../composables/use-input-otp.js";
+import input_otp_root_default from "./input-otp-root.js";
+import input_otp_separator_default from "./input-otp-separator.js";
+import input_otp_slot_default from "./input-otp-slot.js";
+import { inputOTPVariants } from "@ropav/styles";
+//#region src/components/input-otp/index.ts
+var InputOTP = Object.assign(input_otp_root_default, {
+	Group: input_otp_group_default,
+	Root: input_otp_root_default,
+	Separator: input_otp_separator_default,
+	Slot: input_otp_slot_default
+});
+//#endregion
+export { InputOTP, input_otp_group_default as InputOTPGroup, input_otp_root_default as InputOTPRoot, input_otp_separator_default as InputOTPSeparator, input_otp_slot_default as InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, inputOTPVariants, provideInputOTPContext, useInputOTPContext };

package/dist/components/input-otp/input-otp-group.js

@@ -0,0 +1,20 @@
+import { useInputOTPContext } from "./input-otp.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/input-otp/input-otp-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=input-otp-group>", 1);
+var input_otp_group_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "input-otp-group",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useInputOTPContext();
+		const styles = computed(() => slots.value.group({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { input_otp_group_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/input-otp/input-otp-group.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { InputOTPGroupProps } from "./input-otp.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InputOTPGroupProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};