@youcan/celeste 0.6.102 → 0.7.0

package/dist/es/chunks/createContext.js

@@ -0,0 +1,32 @@
+import { inject, provide } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/shared/createContext.js
+/**
+* @param providerComponentName - The name(s) of the component(s) providing the context.
+*
+* There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+*
+* @param contextName The description for injection key symbol.
+*/
+function createContext(providerComponentName, contextName) {
+	const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
+	const injectionKey = Symbol(symbolDescription);
+	/**
+	* @param fallback The context value to return if the injection fails.
+	*
+	* @throws When context injection failed and no fallback is specified.
+	* This happens when the component injecting the context is not a child of the root component providing the context.
+	*/
+	const injectContext = (fallback) => {
+		const context = inject(injectionKey, fallback);
+		if (context) return context;
+		if (context === null) return context;
+		throw new Error(`Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName) ? `one of the following components: ${providerComponentName.join(", ")}` : `\`${providerComponentName}\``}`);
+	};
+	const provideContext = (contextValue) => {
+		provide(injectionKey, contextValue);
+		return contextValue;
+	};
+	return [injectContext, provideContext];
+}
+//#endregion
+export { createContext as t };

package/dist/es/chunks/digit-input-group.js

@@ -1,6 +1,7 @@
-import { D as O, O as Ot } from "./dist.js";
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useForwardProps } from "./useForwardProps.js";
 import { o as reactiveOmit } from "./core.js";
 import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 //#endregion
@@ -14,14 +15,14 @@ var digit_input_group_default = /* @__PURE__ */ _plugin_vue_export_helper_defaul
 	},
 	setup(__props) {
 		const props = __props;
-		const forwardedProps = Ot(reactiveOmit(props, "class"));
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(O), mergeProps(unref(forwardedProps), { class: unref(clsx)("celeste-digit-input-group", props.class) }), {
+			return openBlock(), createBlock(unref(Primitive), mergeProps(unref(forwardedProps), { class: unref(clsx)("celeste-digit-input-group", props.class) }), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 3
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-44b2fcc1"]]);
+}), [["__scopeId", "data-v-442c7563"]]);
 //#endregion
 export { digit_input_group_default as t };

package/dist/es/chunks/digit-input-slot.js

@@ -1,8 +1,245 @@
-import { B as Ty, O as Ot } from "./dist.js";
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as getActiveElement } from "./getActiveElement.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useArrowNavigation } from "./useArrowNavigation.js";
+import { t as useComposing } from "./useComposing.js";
+import { t as useForwardProps } from "./useForwardProps.js";
+import { t as usePrimitiveElement } from "./usePrimitiveElement.js";
+import { n as injectPinInputRootContext } from "./PinInputRoot.js";
 import { o as reactiveOmit } from "./core.js";
-import { createBlock, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { computed, createBlock, defineComponent, mergeProps, nextTick, onMounted, onUnmounted, openBlock, renderSlot, unref, watch, withCtx, withKeys } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/PinInput/PinInputInput.js
+var PinInputInput_default = /* @__PURE__ */ defineComponent({
+	__name: "PinInputInput",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "input"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = injectPinInputRootContext();
+		const inputElements = computed(() => [...context.inputElements.value]);
+		const currentValue = computed(() => context.currentModelValue.value[props.index]);
+		const disabled = computed(() => props.disabled || context.disabled.value);
+		const isOtpMode = computed(() => context.otp.value);
+		const isPasswordMode = computed(() => context.mask.value);
+		const NUMBER_REG = /^\d*$/;
+		const NON_NUMBER_REG = /\D/g;
+		const { primitiveElement, currentElement } = usePrimitiveElement();
+		const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
+			const target = event.target;
+			const value = event.data || target.value;
+			if (context.isNumericMode.value) {
+				const filtered = value.replace(NON_NUMBER_REG, "");
+				if (!filtered) {
+					target.value = "";
+					return;
+				}
+				if (filtered.length > 1) {
+					handleMultipleCharacter(filtered);
+					return;
+				}
+				target.value = filtered;
+				updateModelValueAt(props.index, filtered);
+				const nextEl$1 = inputElements.value[props.index + 1];
+				if (nextEl$1) nextEl$1.focus();
+				return;
+			}
+			if (value.length > 1) {
+				handleMultipleCharacter(value);
+				return;
+			}
+			target.value = value;
+			updateModelValueAt(props.index, value);
+			const nextEl = inputElements.value[props.index + 1];
+			if (nextEl) nextEl.focus();
+		});
+		function handleInput(event) {
+			if (isComposing.value || event.isComposing) return;
+			const target = event.target;
+			if ((event.data?.length ?? 0) > 1) {
+				handleMultipleCharacter(target.value);
+				return;
+			}
+			if (context.isNumericMode.value && !NUMBER_REG.test(target.value)) {
+				target.value = target.value.replace(NON_NUMBER_REG, "");
+				return;
+			}
+			target.value = event.data || target.value.slice(-1);
+			updateModelValueAt(props.index, target.value);
+			const nextEl = inputElements.value[props.index + 1];
+			if (nextEl) nextEl.focus();
+		}
+		function updatePlaceholder() {
+			nextTick(() => {
+				const target = currentElement.value;
+				if (!target) return;
+				if (!target.value && target === getActiveElement()) target.placeholder = "";
+				else target.placeholder = context.placeholder.value;
+			});
+		}
+		function handleKeydown(event) {
+			if (isComposing.value || event.isComposing) return;
+			useArrowNavigation(event, getActiveElement(), void 0, {
+				itemsArray: inputElements.value,
+				focus: true,
+				loop: false,
+				arrowKeyOptions: "horizontal",
+				dir: context.dir.value
+			});
+		}
+		function handleBackspace(event) {
+			event.preventDefault();
+			if (event.target.value) updateModelValueAt(props.index, "");
+			else {
+				const prevEl = inputElements.value[props.index - 1];
+				if (prevEl) {
+					prevEl.focus();
+					updateModelValueAt(props.index - 1, "");
+				}
+			}
+		}
+		function handleDelete(event) {
+			if (event.key === "Delete") {
+				event.preventDefault();
+				updateModelValueAt(props.index, "");
+			}
+		}
+		function handleFocus(event) {
+			if (context.otp.value) {
+				const firstEmptyInputIdx = inputElements.value.findIndex((_, idx) => context.currentModelValue.value[idx] === "" || context.currentModelValue.value[idx] === void 0);
+				if (firstEmptyInputIdx !== -1 && firstEmptyInputIdx < props.index) {
+					inputElements.value[firstEmptyInputIdx].focus();
+					return;
+				}
+			}
+			event.target.setSelectionRange(1, 1);
+			updatePlaceholder();
+		}
+		function handleBlur(event) {
+			updatePlaceholder();
+		}
+		function handlePaste(event) {
+			event.preventDefault();
+			const clipboardData = event.clipboardData;
+			if (!clipboardData) return;
+			const rawValues = clipboardData.getData("text");
+			handleMultipleCharacter(context.isNumericMode.value ? rawValues.replace(NON_NUMBER_REG, "") : rawValues);
+		}
+		function handleMultipleCharacter(values) {
+			const tempModelValue = [...context.currentModelValue.value];
+			const initialIndex = values.length >= inputElements.value.length ? 0 : props.index;
+			const lastIndex = Math.min(initialIndex + values.length, inputElements.value.length);
+			for (let i = initialIndex; i < lastIndex; i++) {
+				const input = inputElements.value[i];
+				const value = values[i - initialIndex];
+				if (context.isNumericMode.value) {
+					const num = Number.parseInt(value);
+					if (Number.isNaN(num)) continue;
+					tempModelValue[i] = num;
+				} else tempModelValue[i] = value;
+				input.focus();
+			}
+			context.modelValue.value = tempModelValue;
+			inputElements.value[lastIndex]?.focus();
+		}
+		function removeTrailingEmptyStrings(input) {
+			let i = input.length - 1;
+			while (i >= 0 && input[i] === "") {
+				input.pop();
+				i--;
+			}
+			return input;
+		}
+		function updateModelValueAt(index, value) {
+			const tempModelValue = [...context.currentModelValue.value];
+			if (context.isNumericMode.value) {
+				const num = +value;
+				if (value === "" || isNaN(num)) delete tempModelValue[index];
+				else tempModelValue[index] = num;
+			} else tempModelValue[index] = value;
+			context.modelValue.value = removeTrailingEmptyStrings(tempModelValue);
+		}
+		watch(currentValue, updatePlaceholder);
+		onMounted(() => {
+			context.onInputElementChange(currentElement.value);
+		});
+		onUnmounted(() => {
+			context.inputElements?.value.delete(currentElement.value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				autocapitalize: "none",
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				autocomplete: isOtpMode.value ? "one-time-code" : "false",
+				type: isPasswordMode.value ? "password" : "text",
+				inputmode: unref(context).isNumericMode.value ? "numeric" : "text",
+				pattern: unref(context).isNumericMode.value ? "[0-9]*" : void 0,
+				placeholder: unref(context).placeholder.value,
+				value: currentValue.value,
+				disabled: disabled.value,
+				"data-disabled": disabled.value ? "" : void 0,
+				"data-complete": unref(context).isCompleted.value ? "" : void 0,
+				"aria-label": `pin input ${_ctx.index + 1} of ${inputElements.value.length}`,
+				onInput: _cache[0] || (_cache[0] = ($event) => handleInput($event)),
+				onKeydown: [
+					withKeys(handleKeydown, [
+						"left",
+						"right",
+						"up",
+						"down",
+						"home",
+						"end"
+					]),
+					withKeys(handleBackspace, ["backspace"]),
+					withKeys(handleDelete, ["delete"])
+				],
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onPaste: handlePaste,
+				onCompositionstart: unref(handleCompositionStart),
+				onCompositionend: unref(handleCompositionEnd)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"autocomplete",
+				"type",
+				"inputmode",
+				"pattern",
+				"placeholder",
+				"value",
+				"disabled",
+				"data-disabled",
+				"data-complete",
+				"aria-label",
+				"onCompositionstart",
+				"onCompositionend"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/components/digit-input/digit-input-slot.vue
 var digit_input_slot_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -16,11 +253,11 @@ var digit_input_slot_default = /* @__PURE__ */ _plugin_vue_export_helper_default
 	},
 	setup(__props) {
 		const props = __props;
-		const forwardedProps = Ot(reactiveOmit(props, "class"));
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Ty), mergeProps(unref(forwardedProps), { class: unref(clsx)("celeste-digit-input-slot", props.class) }), null, 16, ["class"]);
+			return openBlock(), createBlock(unref(PinInputInput_default), mergeProps(unref(forwardedProps), { class: unref(clsx)("celeste-digit-input-slot", props.class) }), null, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-5a1bb76d"]]);
+}), [["__scopeId", "data-v-aa4bbe75"]]);
 //#endregion
 export { digit_input_slot_default as t };

package/dist/es/chunks/digit-input.js

@@ -1,6 +1,7 @@
-import { I as Se, b as Iy } from "./dist.js";
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
+import { t as PinInputRoot_default } from "./PinInputRoot.js";
 import { o as reactiveOmit } from "./core.js";
 import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 //#endregion
@@ -15,12 +16,12 @@ var digit_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
 		otp: { type: Boolean },
 		type: {},
 		dir: {},
-		name: {},
 		disabled: { type: Boolean },
-		required: { type: Boolean },
 		id: {},
 		asChild: { type: Boolean },
 		as: {},
+		name: {},
+		required: { type: Boolean },
 		class: {},
 		hasError: {
 			type: Boolean,
@@ -31,9 +32,9 @@ var digit_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
-		const forwarded = Se(reactiveOmit(props, "class", "hasError"), emits);
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "hasError"), emits);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Iy), mergeProps(unref(forwarded), {
+			return openBlock(), createBlock(unref(PinInputRoot_default), mergeProps(unref(forwarded), {
 				class: unref(clsx)("celeste-digit-input", props.class),
 				"data-error": _ctx.hasError
 			}), {
@@ -42,6 +43,6 @@ var digit_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
 			}, 16, ["class", "data-error"]);
 		};
 	}
-}), [["__scopeId", "data-v-86bf03a4"]]);
+}), [["__scopeId", "data-v-f3b019f4"]]);
 //#endregion
 export { digit_input_default as t };