@zag-js/pin-input 1.34.0 → 1.35.0

package/dist/pin-input.machine.js

@@ -0,0 +1,320 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pin-input.machine.ts
+var pin_input_machine_exports = {};
+__export(pin_input_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(pin_input_machine_exports);
+var import_core = require("@zag-js/core");
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var dom = __toESM(require("./pin-input.dom.cjs"));
+var { choose, createMachine } = (0, import_core.setup)();
+var machine = createMachine({
+  props({ props }) {
+    return {
+      placeholder: "\u25CB",
+      otp: false,
+      type: "numeric",
+      defaultValue: props.count ? fill([], props.count) : [],
+      ...props,
+      translations: {
+        inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+        ...props.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        value: prop("value"),
+        defaultValue: prop("defaultValue"),
+        isEqual: import_utils.isEqual,
+        onChange(value) {
+          prop("onValueChange")?.({ value, valueAsString: value.join("") });
+        }
+      })),
+      focusedIndex: bindable(() => ({
+        sync: true,
+        defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
+      }))
+    };
+  },
+  computed: {
+    _value: ({ context }) => fill(context.get("value"), context.get("count")),
+    valueLength: ({ computed }) => computed("_value").length,
+    filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
+    isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
+    valueAsString: ({ computed }) => computed("_value").join(""),
+    focusedValue: ({ computed, context }) => computed("_value")[context.get("focusedIndex")] || ""
+  },
+  entry: choose([
+    {
+      guard: "autoFocus",
+      actions: ["setInputCount", "setFocusIndexToFirst"]
+    },
+    { actions: ["setInputCount"] }
+  ]),
+  watch({ action, track, context, computed }) {
+    track([() => context.get("focusedIndex")], () => {
+      action(["focusInput", "selectInputIfNeeded"]);
+    });
+    track([() => context.get("value").join(",")], () => {
+      action(["syncInputElements", "dispatchInputEvent"]);
+    });
+    track([() => computed("isValueComplete")], () => {
+      action(["invokeOnComplete", "blurFocusedInputIfNeeded"]);
+    });
+  },
+  on: {
+    "VALUE.SET": [
+      {
+        guard: "hasIndex",
+        actions: ["setValueAtIndex"]
+      },
+      { actions: ["setValue"] }
+    ],
+    "VALUE.CLEAR": {
+      actions: ["clearValue", "setFocusIndexToFirst"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedIndex"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        "INPUT.CHANGE": {
+          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+        },
+        "INPUT.PASTE": {
+          actions: ["setPastedValue", "setLastValueFocusIndex"]
+        },
+        "INPUT.FOCUS": {
+          actions: ["setFocusedIndex"]
+        },
+        "INPUT.BLUR": {
+          target: "idle",
+          actions: ["clearFocusedIndex"]
+        },
+        "INPUT.DELETE": {
+          guard: "hasValue",
+          actions: ["clearFocusedValue"]
+        },
+        "INPUT.ARROW_LEFT": {
+          actions: ["setPrevFocusedIndex"]
+        },
+        "INPUT.ARROW_RIGHT": {
+          actions: ["setNextFocusedIndex"]
+        },
+        "INPUT.BACKSPACE": [
+          {
+            guard: "hasValue",
+            actions: ["clearFocusedValue"]
+          },
+          {
+            actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+          }
+        ],
+        "INPUT.ENTER": {
+          guard: "isValueComplete",
+          actions: ["requestFormSubmit"]
+        },
+        "VALUE.INVALID": {
+          actions: ["invokeOnInvalid"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      autoFocus: ({ prop }) => !!prop("autoFocus"),
+      hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
+      isValueComplete: ({ computed }) => computed("isValueComplete"),
+      hasIndex: ({ event }) => event.index !== void 0
+    },
+    actions: {
+      dispatchInputEvent({ computed, scope }) {
+        const inputEl = dom.getHiddenInputEl(scope);
+        (0, import_dom_query.dispatchInputValueEvent)(inputEl, { value: computed("valueAsString") });
+      },
+      setInputCount({ scope, context, prop }) {
+        if (prop("count")) return;
+        const inputEls = dom.getInputEls(scope);
+        context.set("count", inputEls.length);
+      },
+      focusInput({ context, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+      },
+      selectInputIfNeeded({ context, prop, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (!prop("selectOnFocus") || focusedIndex === -1) return;
+        (0, import_dom_query.raf)(() => {
+          dom.getInputElAtIndex(scope, focusedIndex)?.select();
+        });
+      },
+      invokeOnComplete({ computed, prop }) {
+        if (!computed("isValueComplete")) return;
+        prop("onValueComplete")?.({
+          value: computed("_value"),
+          valueAsString: computed("valueAsString")
+        });
+      },
+      invokeOnInvalid({ context, event, prop }) {
+        prop("onValueInvalid")?.({
+          value: event.value,
+          index: context.get("focusedIndex")
+        });
+      },
+      clearFocusedIndex({ context }) {
+        context.set("focusedIndex", -1);
+      },
+      setFocusedIndex({ context, event }) {
+        context.set("focusedIndex", event.index);
+      },
+      setValue({ context, event }) {
+        const value = fill(event.value, context.get("count"));
+        context.set("value", value);
+      },
+      setFocusedValue({ context, event, computed, flush }) {
+        const focusedValue = computed("focusedValue");
+        const focusedIndex = context.get("focusedIndex");
+        const value = getNextValue(focusedValue, event.value);
+        flush(() => {
+          context.set("value", (0, import_utils.setValueAtIndex)(computed("_value"), focusedIndex, value));
+        });
+      },
+      revertInputValue({ context, computed, scope }) {
+        const inputEl = dom.getInputElAtIndex(scope, context.get("focusedIndex"));
+        dom.setInputValue(inputEl, computed("focusedValue"));
+      },
+      syncInputValue({ context, event, scope }) {
+        const value = context.get("value");
+        const inputEl = dom.getInputElAtIndex(scope, event.index);
+        dom.setInputValue(inputEl, value[event.index]);
+      },
+      syncInputElements({ context, scope }) {
+        const inputEls = dom.getInputEls(scope);
+        const value = context.get("value");
+        inputEls.forEach((inputEl, index) => {
+          dom.setInputValue(inputEl, value[index]);
+        });
+      },
+      setPastedValue({ context, event, computed, flush }) {
+        (0, import_dom_query.raf)(() => {
+          const valueAsString = computed("valueAsString");
+          const focusedIndex = context.get("focusedIndex");
+          const valueLength = computed("valueLength");
+          const filledValueLength = computed("filledValueLength");
+          const startIndex = Math.min(focusedIndex, filledValueLength);
+          const left = startIndex > 0 ? valueAsString.substring(0, focusedIndex) : "";
+          const right = event.value.substring(0, valueLength - startIndex);
+          const value = fill(`${left}${right}`.split(""), valueLength);
+          flush(() => {
+            context.set("value", value);
+          });
+        });
+      },
+      setValueAtIndex({ context, event, computed }) {
+        const nextValue = getNextValue(computed("focusedValue"), event.value);
+        context.set("value", (0, import_utils.setValueAtIndex)(computed("_value"), event.index, nextValue));
+      },
+      clearValue({ context }) {
+        const nextValue = Array.from({ length: context.get("count") }).fill("");
+        queueMicrotask(() => {
+          context.set("value", nextValue);
+        });
+      },
+      clearFocusedValue({ context, computed }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        context.set("value", (0, import_utils.setValueAtIndex)(computed("_value"), focusedIndex, ""));
+      },
+      setFocusIndexToFirst({ context }) {
+        context.set("focusedIndex", 0);
+      },
+      setNextFocusedIndex({ context, computed }) {
+        context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
+      },
+      setPrevFocusedIndex({ context }) {
+        context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
+      },
+      setLastValueFocusIndex({ context, computed }) {
+        (0, import_dom_query.raf)(() => {
+          context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
+        });
+      },
+      blurFocusedInputIfNeeded({ context, prop, scope }) {
+        if (!prop("blurOnComplete")) return;
+        (0, import_dom_query.raf)(() => {
+          dom.getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
+        });
+      },
+      requestFormSubmit({ computed, prop, scope }) {
+        if (!prop("name") || !computed("isValueComplete")) return;
+        const inputEl = dom.getHiddenInputEl(scope);
+        inputEl?.form?.requestSubmit();
+      }
+    }
+  }
+});
+function getNextValue(current, next) {
+  let nextValue = next;
+  if (current[0] === next[0]) {
+    nextValue = next[1];
+  } else if (current[0] === next[1]) {
+    nextValue = next[0];
+  }
+  const chars = nextValue.split("");
+  nextValue = chars[chars.length - 1];
+  return nextValue ?? "";
+}
+function fill(value, count) {
+  return Array.from({ length: count }).fill("").map((v, i) => value[i] || v);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});

package/dist/pin-input.machine.mjs

@@ -0,0 +1,285 @@
+// src/pin-input.machine.ts
+import { setup } from "@zag-js/core";
+import { dispatchInputValueEvent, raf } from "@zag-js/dom-query";
+import { isEqual, setValueAtIndex } from "@zag-js/utils";
+import * as dom from "./pin-input.dom.mjs";
+var { choose, createMachine } = setup();
+var machine = createMachine({
+  props({ props }) {
+    return {
+      placeholder: "\u25CB",
+      otp: false,
+      type: "numeric",
+      defaultValue: props.count ? fill([], props.count) : [],
+      ...props,
+      translations: {
+        inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+        ...props.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        value: prop("value"),
+        defaultValue: prop("defaultValue"),
+        isEqual,
+        onChange(value) {
+          prop("onValueChange")?.({ value, valueAsString: value.join("") });
+        }
+      })),
+      focusedIndex: bindable(() => ({
+        sync: true,
+        defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
+      }))
+    };
+  },
+  computed: {
+    _value: ({ context }) => fill(context.get("value"), context.get("count")),
+    valueLength: ({ computed }) => computed("_value").length,
+    filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
+    isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
+    valueAsString: ({ computed }) => computed("_value").join(""),
+    focusedValue: ({ computed, context }) => computed("_value")[context.get("focusedIndex")] || ""
+  },
+  entry: choose([
+    {
+      guard: "autoFocus",
+      actions: ["setInputCount", "setFocusIndexToFirst"]
+    },
+    { actions: ["setInputCount"] }
+  ]),
+  watch({ action, track, context, computed }) {
+    track([() => context.get("focusedIndex")], () => {
+      action(["focusInput", "selectInputIfNeeded"]);
+    });
+    track([() => context.get("value").join(",")], () => {
+      action(["syncInputElements", "dispatchInputEvent"]);
+    });
+    track([() => computed("isValueComplete")], () => {
+      action(["invokeOnComplete", "blurFocusedInputIfNeeded"]);
+    });
+  },
+  on: {
+    "VALUE.SET": [
+      {
+        guard: "hasIndex",
+        actions: ["setValueAtIndex"]
+      },
+      { actions: ["setValue"] }
+    ],
+    "VALUE.CLEAR": {
+      actions: ["clearValue", "setFocusIndexToFirst"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedIndex"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        "INPUT.CHANGE": {
+          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+        },
+        "INPUT.PASTE": {
+          actions: ["setPastedValue", "setLastValueFocusIndex"]
+        },
+        "INPUT.FOCUS": {
+          actions: ["setFocusedIndex"]
+        },
+        "INPUT.BLUR": {
+          target: "idle",
+          actions: ["clearFocusedIndex"]
+        },
+        "INPUT.DELETE": {
+          guard: "hasValue",
+          actions: ["clearFocusedValue"]
+        },
+        "INPUT.ARROW_LEFT": {
+          actions: ["setPrevFocusedIndex"]
+        },
+        "INPUT.ARROW_RIGHT": {
+          actions: ["setNextFocusedIndex"]
+        },
+        "INPUT.BACKSPACE": [
+          {
+            guard: "hasValue",
+            actions: ["clearFocusedValue"]
+          },
+          {
+            actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+          }
+        ],
+        "INPUT.ENTER": {
+          guard: "isValueComplete",
+          actions: ["requestFormSubmit"]
+        },
+        "VALUE.INVALID": {
+          actions: ["invokeOnInvalid"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      autoFocus: ({ prop }) => !!prop("autoFocus"),
+      hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
+      isValueComplete: ({ computed }) => computed("isValueComplete"),
+      hasIndex: ({ event }) => event.index !== void 0
+    },
+    actions: {
+      dispatchInputEvent({ computed, scope }) {
+        const inputEl = dom.getHiddenInputEl(scope);
+        dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
+      },
+      setInputCount({ scope, context, prop }) {
+        if (prop("count")) return;
+        const inputEls = dom.getInputEls(scope);
+        context.set("count", inputEls.length);
+      },
+      focusInput({ context, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+      },
+      selectInputIfNeeded({ context, prop, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (!prop("selectOnFocus") || focusedIndex === -1) return;
+        raf(() => {
+          dom.getInputElAtIndex(scope, focusedIndex)?.select();
+        });
+      },
+      invokeOnComplete({ computed, prop }) {
+        if (!computed("isValueComplete")) return;
+        prop("onValueComplete")?.({
+          value: computed("_value"),
+          valueAsString: computed("valueAsString")
+        });
+      },
+      invokeOnInvalid({ context, event, prop }) {
+        prop("onValueInvalid")?.({
+          value: event.value,
+          index: context.get("focusedIndex")
+        });
+      },
+      clearFocusedIndex({ context }) {
+        context.set("focusedIndex", -1);
+      },
+      setFocusedIndex({ context, event }) {
+        context.set("focusedIndex", event.index);
+      },
+      setValue({ context, event }) {
+        const value = fill(event.value, context.get("count"));
+        context.set("value", value);
+      },
+      setFocusedValue({ context, event, computed, flush }) {
+        const focusedValue = computed("focusedValue");
+        const focusedIndex = context.get("focusedIndex");
+        const value = getNextValue(focusedValue, event.value);
+        flush(() => {
+          context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value));
+        });
+      },
+      revertInputValue({ context, computed, scope }) {
+        const inputEl = dom.getInputElAtIndex(scope, context.get("focusedIndex"));
+        dom.setInputValue(inputEl, computed("focusedValue"));
+      },
+      syncInputValue({ context, event, scope }) {
+        const value = context.get("value");
+        const inputEl = dom.getInputElAtIndex(scope, event.index);
+        dom.setInputValue(inputEl, value[event.index]);
+      },
+      syncInputElements({ context, scope }) {
+        const inputEls = dom.getInputEls(scope);
+        const value = context.get("value");
+        inputEls.forEach((inputEl, index) => {
+          dom.setInputValue(inputEl, value[index]);
+        });
+      },
+      setPastedValue({ context, event, computed, flush }) {
+        raf(() => {
+          const valueAsString = computed("valueAsString");
+          const focusedIndex = context.get("focusedIndex");
+          const valueLength = computed("valueLength");
+          const filledValueLength = computed("filledValueLength");
+          const startIndex = Math.min(focusedIndex, filledValueLength);
+          const left = startIndex > 0 ? valueAsString.substring(0, focusedIndex) : "";
+          const right = event.value.substring(0, valueLength - startIndex);
+          const value = fill(`${left}${right}`.split(""), valueLength);
+          flush(() => {
+            context.set("value", value);
+          });
+        });
+      },
+      setValueAtIndex({ context, event, computed }) {
+        const nextValue = getNextValue(computed("focusedValue"), event.value);
+        context.set("value", setValueAtIndex(computed("_value"), event.index, nextValue));
+      },
+      clearValue({ context }) {
+        const nextValue = Array.from({ length: context.get("count") }).fill("");
+        queueMicrotask(() => {
+          context.set("value", nextValue);
+        });
+      },
+      clearFocusedValue({ context, computed }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, ""));
+      },
+      setFocusIndexToFirst({ context }) {
+        context.set("focusedIndex", 0);
+      },
+      setNextFocusedIndex({ context, computed }) {
+        context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
+      },
+      setPrevFocusedIndex({ context }) {
+        context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
+      },
+      setLastValueFocusIndex({ context, computed }) {
+        raf(() => {
+          context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
+        });
+      },
+      blurFocusedInputIfNeeded({ context, prop, scope }) {
+        if (!prop("blurOnComplete")) return;
+        raf(() => {
+          dom.getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
+        });
+      },
+      requestFormSubmit({ computed, prop, scope }) {
+        if (!prop("name") || !computed("isValueComplete")) return;
+        const inputEl = dom.getHiddenInputEl(scope);
+        inputEl?.form?.requestSubmit();
+      }
+    }
+  }
+});
+function getNextValue(current, next) {
+  let nextValue = next;
+  if (current[0] === next[0]) {
+    nextValue = next[1];
+  } else if (current[0] === next[1]) {
+    nextValue = next[0];
+  }
+  const chars = nextValue.split("");
+  nextValue = chars[chars.length - 1];
+  return nextValue ?? "";
+}
+function fill(value, count) {
+  return Array.from({ length: count }).fill("").map((v, i) => value[i] || v);
+}
+export {
+  machine
+};

package/dist/pin-input.props.d.mts

@@ -0,0 +1,8 @@
+import { PinInputProps } from './pin-input.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof PinInputProps)[];
+declare const splitProps: <Props extends Partial<PinInputProps>>(props: Props) => [Partial<PinInputProps>, Omit<Props, keyof PinInputProps>];
+
+export { props, splitProps };

package/dist/pin-input.props.d.ts

@@ -0,0 +1,8 @@
+import { PinInputProps } from './pin-input.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof PinInputProps)[];
+declare const splitProps: <Props extends Partial<PinInputProps>>(props: Props) => [Partial<PinInputProps>, Omit<Props, keyof PinInputProps>];
+
+export { props, splitProps };

package/dist/pin-input.props.js

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pin-input.props.ts
+var pin_input_props_exports = {};
+__export(pin_input_props_exports, {
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(pin_input_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "autoFocus",
+  "blurOnComplete",
+  "count",
+  "defaultValue",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "mask",
+  "name",
+  "onValueChange",
+  "onValueComplete",
+  "onValueInvalid",
+  "otp",
+  "pattern",
+  "placeholder",
+  "readOnly",
+  "required",
+  "selectOnFocus",
+  "translations",
+  "type",
+  "value"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  props,
+  splitProps
+});