@zag-js/pin-input 1.41.1 → 2.0.0-next.0

package/dist/pin-input.connect.js

@@ -52,8 +52,8 @@ function connect(service, normalize) {
   }
   return {
     focus,
-    count: context.get("count"),
-    items: Array.from({ length: context.get("count") }).map((_, i) => i),
+    count: prop("count"),
+    items: Array.from({ length: prop("count") }).map((_, i) => i),
     value: context.get("value"),
     valueAsString: computed("valueAsString"),
     complete,
@@ -72,8 +72,7 @@ function connect(service, normalize) {
     getRootProps() {
       return normalize.element({
         dir: prop("dir"),
-        ...import_pin_input.parts.root.attrs,
-        id: dom.getRootId(scope),
+        ...import_pin_input.parts.root.attrs(scope.id),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-complete": (0, import_dom_query.dataAttr)(complete),
@@ -82,7 +81,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.label({
-        ...import_pin_input.parts.label.attrs,
+        ...import_pin_input.parts.label.attrs(scope.id),
         dir: prop("dir"),
         htmlFor: dom.getHiddenInputId(scope),
         id: dom.getLabelId(scope),
@@ -115,9 +114,8 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...import_pin_input.parts.control.attrs,
-        dir: prop("dir"),
-        id: dom.getControlId(scope)
+        ...import_pin_input.parts.control.attrs(scope.id),
+        dir: prop("dir")
       });
     },
     getInputProps(props) {
@@ -126,7 +124,7 @@ function connect(service, normalize) {
       const valueLength = computed("valueLength");
       const tabbableIndex = focusedIndex !== -1 ? focusedIndex : Math.min(computed("filledValueLength"), valueLength - 1);
       return normalize.input({
-        ...import_pin_input.parts.input.attrs,
+        ...import_pin_input.parts.input.attrs(scope.id),
         dir: prop("dir"),
         disabled,
         tabIndex: index === tabbableIndex ? 0 : -1,
@@ -135,7 +133,6 @@ function connect(service, normalize) {
         "data-filled": (0, import_dom_query.dataAttr)(context.get("value")[index] !== ""),
         id: dom.getInputId(scope, index.toString()),
         "data-index": index,
-        "data-ownedby": dom.getRootId(scope),
         "aria-label": translations?.inputLabel?.(index, computed("valueLength")),
         inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
         "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),

package/dist/pin-input.connect.mjs

@@ -28,8 +28,8 @@ function connect(service, normalize) {
   }
   return {
     focus,
-    count: context.get("count"),
-    items: Array.from({ length: context.get("count") }).map((_, i) => i),
+    count: prop("count"),
+    items: Array.from({ length: prop("count") }).map((_, i) => i),
     value: context.get("value"),
     valueAsString: computed("valueAsString"),
     complete,
@@ -48,8 +48,7 @@ function connect(service, normalize) {
     getRootProps() {
       return normalize.element({
         dir: prop("dir"),
-        ...parts.root.attrs,
-        id: dom.getRootId(scope),
+        ...parts.root.attrs(scope.id),
         "data-invalid": dataAttr(invalid),
         "data-disabled": dataAttr(disabled),
         "data-complete": dataAttr(complete),
@@ -58,7 +57,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.label({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
         htmlFor: dom.getHiddenInputId(scope),
         id: dom.getLabelId(scope),
@@ -91,9 +90,8 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...parts.control.attrs,
-        dir: prop("dir"),
-        id: dom.getControlId(scope)
+        ...parts.control.attrs(scope.id),
+        dir: prop("dir")
       });
     },
     getInputProps(props) {
@@ -102,7 +100,7 @@ function connect(service, normalize) {
       const valueLength = computed("valueLength");
       const tabbableIndex = focusedIndex !== -1 ? focusedIndex : Math.min(computed("filledValueLength"), valueLength - 1);
       return normalize.input({
-        ...parts.input.attrs,
+        ...parts.input.attrs(scope.id),
         dir: prop("dir"),
         disabled,
         tabIndex: index === tabbableIndex ? 0 : -1,
@@ -111,7 +109,6 @@ function connect(service, normalize) {
         "data-filled": dataAttr(context.get("value")[index] !== ""),
         id: dom.getInputId(scope, index.toString()),
         "data-index": index,
-        "data-ownedby": dom.getRootId(scope),
         "aria-label": translations?.inputLabel?.(index, computed("valueLength")),
         inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
         "aria-invalid": ariaAttr(invalid),

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

@@ -7,10 +7,9 @@ declare const getLabelId: (ctx: Scope) => any;
 declare const getControlId: (ctx: Scope) => any;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
-declare const getInputEl: (ctx: Scope, id: string) => HTMLInputElement | null;
 declare const getInputElAtIndex: (ctx: Scope, index: number) => HTMLInputElement;
 declare const getFirstInputEl: (ctx: Scope) => HTMLInputElement;
 declare const getHiddenInputEl: (ctx: Scope) => HTMLInputElement | null;
 declare const setInputValue: (inputEl: HTMLInputElement, value: string) => void;
 
-export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputEl, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };
+export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };

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

@@ -7,10 +7,9 @@ declare const getLabelId: (ctx: Scope) => any;
 declare const getControlId: (ctx: Scope) => any;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
 declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
-declare const getInputEl: (ctx: Scope, id: string) => HTMLInputElement | null;
 declare const getInputElAtIndex: (ctx: Scope, index: number) => HTMLInputElement;
 declare const getFirstInputEl: (ctx: Scope) => HTMLInputElement;
 declare const getHiddenInputEl: (ctx: Scope) => HTMLInputElement | null;
 declare const setInputValue: (inputEl: HTMLInputElement, value: string) => void;
 
-export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputEl, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };
+export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };

package/dist/pin-input.dom.js

@@ -24,7 +24,6 @@ __export(pin_input_dom_exports, {
   getFirstInputEl: () => getFirstInputEl,
   getHiddenInputEl: () => getHiddenInputEl,
   getHiddenInputId: () => getHiddenInputId,
-  getInputEl: () => getInputEl,
   getInputElAtIndex: () => getInputElAtIndex,
   getInputEls: () => getInputEls,
   getInputId: () => getInputId,
@@ -34,19 +33,16 @@ __export(pin_input_dom_exports, {
   setInputValue: () => setInputValue
 });
 module.exports = __toCommonJS(pin_input_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
-var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
-var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
-var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
-var getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var import_pin_input = require("./pin-input.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `${ctx.id}:${id}`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `${ctx.id}:hidden`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_pin_input.parts.root));
 var getInputEls = (ctx) => {
-  const ownerId = CSS.escape(getRootId(ctx));
-  const selector = `input[data-ownedby=${ownerId}]`;
-  return (0, import_dom_query.queryAll)(getRootEl(ctx), selector);
+  return ctx.queryAll(ctx.selector(import_pin_input.parts.input));
 };
-var getInputEl = (ctx, id) => ctx.getById(getInputId(ctx, id));
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
@@ -60,7 +56,6 @@ var setInputValue = (inputEl, value) => {
   getFirstInputEl,
   getHiddenInputEl,
   getHiddenInputId,
-  getInputEl,
   getInputElAtIndex,
   getInputEls,
   getInputId,

package/dist/pin-input.dom.mjs

@@ -1,17 +1,14 @@
 // src/pin-input.dom.ts
-import { queryAll } from "@zag-js/dom-query";
-var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
-var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
-var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
-var getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+import { parts } from "./pin-input.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `${ctx.id}:${id}`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `${ctx.id}:hidden`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
 var getInputEls = (ctx) => {
-  const ownerId = CSS.escape(getRootId(ctx));
-  const selector = `input[data-ownedby=${ownerId}]`;
-  return queryAll(getRootEl(ctx), selector);
+  return ctx.queryAll(ctx.selector(parts.input));
 };
-var getInputEl = (ctx, id) => ctx.getById(getInputId(ctx, id));
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
@@ -24,7 +21,6 @@ export {
   getFirstInputEl,
   getHiddenInputEl,
   getHiddenInputId,
-  getInputEl,
   getInputElAtIndex,
   getInputEls,
   getInputId,

package/dist/pin-input.machine.js

@@ -40,11 +40,12 @@ var dom = __toESM(require("./pin-input.dom.js"));
 var { choose, createMachine } = (0, import_core.setup)();
 var machine = createMachine({
   props({ props }) {
+    (0, import_utils.ensureProps)(props, ["count"], "pin-input");
     return {
       placeholder: "\u25CB",
       otp: false,
       type: "numeric",
-      defaultValue: props.count ? fill([], props.count) : [],
+      defaultValue: fill([], props.count),
       ...props,
       translations: {
         inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
@@ -68,15 +69,11 @@ var machine = createMachine({
       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")),
+    _value: ({ context, prop }) => fill(context.get("value"), prop("count")),
     valueLength: ({ computed }) => computed("_value").length,
     filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
     isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
@@ -86,9 +83,8 @@ var machine = createMachine({
   entry: choose([
     {
       guard: "autoFocus",
-      actions: ["setInputCount", "setFocusIndexToFirst"]
-    },
-    { actions: ["setInputCount"] }
+      actions: ["setFocusIndexToFirst"]
+    }
   ]),
   watch({ action, track, context, computed }) {
     track([() => context.get("focusedIndex")], () => {
@@ -187,11 +183,6 @@ var machine = createMachine({
         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;
@@ -226,8 +217,8 @@ var machine = createMachine({
         const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
         context.set("focusedIndex", Math.min(event.index, maxIndex));
       },
-      setValue({ context, event }) {
-        const value = fill(event.value, context.get("count"));
+      setValue({ context, event, prop }) {
+        const value = fill(event.value, prop("count"));
         context.set("value", value);
       },
       setFocusedValue({ context, event, computed, flush }) {
@@ -273,8 +264,8 @@ var machine = createMachine({
         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("");
+      clearValue({ context, prop }) {
+        const nextValue = Array.from({ length: prop("count") }).fill("");
         queueMicrotask(() => {
           context.set("value", nextValue);
         });

package/dist/pin-input.machine.mjs

@@ -1,16 +1,17 @@
 // 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 { ensureProps, isEqual, setValueAtIndex } from "@zag-js/utils";
 import * as dom from "./pin-input.dom.mjs";
 var { choose, createMachine } = setup();
 var machine = createMachine({
   props({ props }) {
+    ensureProps(props, ["count"], "pin-input");
     return {
       placeholder: "\u25CB",
       otp: false,
       type: "numeric",
-      defaultValue: props.count ? fill([], props.count) : [],
+      defaultValue: fill([], props.count),
       ...props,
       translations: {
         inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
@@ -34,15 +35,11 @@ var machine = createMachine({
       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")),
+    _value: ({ context, prop }) => fill(context.get("value"), prop("count")),
     valueLength: ({ computed }) => computed("_value").length,
     filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
     isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
@@ -52,9 +49,8 @@ var machine = createMachine({
   entry: choose([
     {
       guard: "autoFocus",
-      actions: ["setInputCount", "setFocusIndexToFirst"]
-    },
-    { actions: ["setInputCount"] }
+      actions: ["setFocusIndexToFirst"]
+    }
   ]),
   watch({ action, track, context, computed }) {
     track([() => context.get("focusedIndex")], () => {
@@ -153,11 +149,6 @@ var machine = createMachine({
         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;
@@ -192,8 +183,8 @@ var machine = createMachine({
         const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
         context.set("focusedIndex", Math.min(event.index, maxIndex));
       },
-      setValue({ context, event }) {
-        const value = fill(event.value, context.get("count"));
+      setValue({ context, event, prop }) {
+        const value = fill(event.value, prop("count"));
         context.set("value", value);
       },
       setFocusedValue({ context, event, computed, flush }) {
@@ -239,8 +230,8 @@ var machine = createMachine({
         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("");
+      clearValue({ context, prop }) {
+        const nextValue = Array.from({ length: prop("count") }).fill("");
         queueMicrotask(() => {
           context.set("value", nextValue);
         });

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

@@ -119,19 +119,17 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      */
     translations?: IntlTranslations | undefined;
     /**
-     * The number of inputs to render to improve SSR aria attributes.
-     * This will be required in next major version.
+     * The number of pin input fields.
      */
-    count?: number | undefined;
+    count: number;
 }
-type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue" | "count";
 interface PinInputSchema {
     state: "idle" | "focused";
     props: RequiredBy<PinInputProps, PropsWithDefault>;
     context: {
         value: string[];
         focusedIndex: number;
-        count: number;
     };
     computed: {
         _value: string[];

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

@@ -119,19 +119,17 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      */
     translations?: IntlTranslations | undefined;
     /**
-     * The number of inputs to render to improve SSR aria attributes.
-     * This will be required in next major version.
+     * The number of pin input fields.
      */
-    count?: number | undefined;
+    count: number;
 }
-type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue" | "count";
 interface PinInputSchema {
     state: "idle" | "focused";
     props: RequiredBy<PinInputProps, PropsWithDefault>;
     context: {
         value: string[];
         focusedIndex: number;
-        count: number;
     };
     computed: {
         _value: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "1.41.1",
+  "version": "2.0.0-next.0",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,11 +26,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.41.1",
-    "@zag-js/dom-query": "1.41.1",
-    "@zag-js/utils": "1.41.1",
-    "@zag-js/core": "1.41.1",
-    "@zag-js/types": "1.41.1"
+    "@zag-js/anatomy": "2.0.0-next.0",
+    "@zag-js/dom-query": "2.0.0-next.0",
+    "@zag-js/utils": "2.0.0-next.0",
+    "@zag-js/core": "2.0.0-next.0",
+    "@zag-js/types": "2.0.0-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"