@zag-js/pin-input 1.22.0 → 1.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +15 -11
  2. package/dist/index.mjs +15 -11
  3. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -48,7 +48,10 @@ function isValidValue(value, type, pattern) {
48
48
  function connect(service, normalize) {
49
49
  const { send, context, computed, prop, scope } = service;
50
50
  const complete = computed("isValueComplete");
51
- const invalid = prop("invalid");
51
+ const disabled = !!prop("disabled");
52
+ const readOnly = !!prop("readOnly");
53
+ const invalid = !!prop("invalid");
54
+ const required = !!prop("required");
52
55
  const translations = prop("translations");
53
56
  const focusedIndex = context.get("focusedIndex");
54
57
  function focus() {
@@ -79,9 +82,9 @@ function connect(service, normalize) {
79
82
  ...parts.root.attrs,
80
83
  id: getRootId(scope),
81
84
  "data-invalid": domQuery.dataAttr(invalid),
82
- "data-disabled": domQuery.dataAttr(prop("disabled")),
85
+ "data-disabled": domQuery.dataAttr(disabled),
83
86
  "data-complete": domQuery.dataAttr(complete),
84
- "data-readonly": domQuery.dataAttr(prop("readOnly"))
87
+ "data-readonly": domQuery.dataAttr(readOnly)
85
88
  });
86
89
  },
87
90
  getLabelProps() {
@@ -91,9 +94,10 @@ function connect(service, normalize) {
91
94
  htmlFor: getHiddenInputId(scope),
92
95
  id: getLabelId(scope),
93
96
  "data-invalid": domQuery.dataAttr(invalid),
94
- "data-disabled": domQuery.dataAttr(prop("disabled")),
97
+ "data-disabled": domQuery.dataAttr(disabled),
95
98
  "data-complete": domQuery.dataAttr(complete),
96
- "data-readonly": domQuery.dataAttr(prop("readOnly")),
99
+ "data-required": domQuery.dataAttr(required),
100
+ "data-readonly": domQuery.dataAttr(readOnly),
97
101
  onClick(event) {
98
102
  event.preventDefault();
99
103
  focus();
@@ -106,9 +110,9 @@ function connect(service, normalize) {
106
110
  type: "text",
107
111
  tabIndex: -1,
108
112
  id: getHiddenInputId(scope),
109
- readOnly: prop("readOnly"),
110
- disabled: prop("disabled"),
111
- required: prop("required"),
113
+ readOnly,
114
+ disabled,
115
+ required,
112
116
  name: prop("name"),
113
117
  form: prop("form"),
114
118
  style: domQuery.visuallyHiddenStyle,
@@ -129,8 +133,8 @@ function connect(service, normalize) {
129
133
  return normalize.input({
130
134
  ...parts.input.attrs,
131
135
  dir: prop("dir"),
132
- disabled: prop("disabled"),
133
- "data-disabled": domQuery.dataAttr(prop("disabled")),
136
+ disabled,
137
+ "data-disabled": domQuery.dataAttr(disabled),
134
138
  "data-complete": domQuery.dataAttr(complete),
135
139
  id: getInputId(scope, index.toString()),
136
140
  "data-index": index,
@@ -141,7 +145,7 @@ function connect(service, normalize) {
141
145
  "data-invalid": domQuery.dataAttr(invalid),
142
146
  type: prop("mask") ? "password" : inputType,
143
147
  defaultValue: context.get("value")[index] || "",
144
- readOnly: prop("readOnly"),
148
+ readOnly,
145
149
  autoCapitalize: "none",
146
150
  autoComplete: prop("otp") ? "one-time-code" : "off",
147
151
  placeholder: focusedIndex === index ? "" : prop("placeholder"),
package/dist/index.mjs CHANGED
@@ -46,7 +46,10 @@ function isValidValue(value, type, pattern) {
46
46
  function connect(service, normalize) {
47
47
  const { send, context, computed, prop, scope } = service;
48
48
  const complete = computed("isValueComplete");
49
- const invalid = prop("invalid");
49
+ const disabled = !!prop("disabled");
50
+ const readOnly = !!prop("readOnly");
51
+ const invalid = !!prop("invalid");
52
+ const required = !!prop("required");
50
53
  const translations = prop("translations");
51
54
  const focusedIndex = context.get("focusedIndex");
52
55
  function focus() {
@@ -77,9 +80,9 @@ function connect(service, normalize) {
77
80
  ...parts.root.attrs,
78
81
  id: getRootId(scope),
79
82
  "data-invalid": dataAttr(invalid),
80
- "data-disabled": dataAttr(prop("disabled")),
83
+ "data-disabled": dataAttr(disabled),
81
84
  "data-complete": dataAttr(complete),
82
- "data-readonly": dataAttr(prop("readOnly"))
85
+ "data-readonly": dataAttr(readOnly)
83
86
  });
84
87
  },
85
88
  getLabelProps() {
@@ -89,9 +92,10 @@ function connect(service, normalize) {
89
92
  htmlFor: getHiddenInputId(scope),
90
93
  id: getLabelId(scope),
91
94
  "data-invalid": dataAttr(invalid),
92
- "data-disabled": dataAttr(prop("disabled")),
95
+ "data-disabled": dataAttr(disabled),
93
96
  "data-complete": dataAttr(complete),
94
- "data-readonly": dataAttr(prop("readOnly")),
97
+ "data-required": dataAttr(required),
98
+ "data-readonly": dataAttr(readOnly),
95
99
  onClick(event) {
96
100
  event.preventDefault();
97
101
  focus();
@@ -104,9 +108,9 @@ function connect(service, normalize) {
104
108
  type: "text",
105
109
  tabIndex: -1,
106
110
  id: getHiddenInputId(scope),
107
- readOnly: prop("readOnly"),
108
- disabled: prop("disabled"),
109
- required: prop("required"),
111
+ readOnly,
112
+ disabled,
113
+ required,
110
114
  name: prop("name"),
111
115
  form: prop("form"),
112
116
  style: visuallyHiddenStyle,
@@ -127,8 +131,8 @@ function connect(service, normalize) {
127
131
  return normalize.input({
128
132
  ...parts.input.attrs,
129
133
  dir: prop("dir"),
130
- disabled: prop("disabled"),
131
- "data-disabled": dataAttr(prop("disabled")),
134
+ disabled,
135
+ "data-disabled": dataAttr(disabled),
132
136
  "data-complete": dataAttr(complete),
133
137
  id: getInputId(scope, index.toString()),
134
138
  "data-index": index,
@@ -139,7 +143,7 @@ function connect(service, normalize) {
139
143
  "data-invalid": dataAttr(invalid),
140
144
  type: prop("mask") ? "password" : inputType,
141
145
  defaultValue: context.get("value")[index] || "",
142
- readOnly: prop("readOnly"),
146
+ readOnly,
143
147
  autoCapitalize: "none",
144
148
  autoComplete: prop("otp") ? "one-time-code" : "off",
145
149
  placeholder: focusedIndex === index ? "" : prop("placeholder"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/pin-input",
3
- "version": "1.22.0",
3
+ "version": "1.23.0",
4
4
  "description": "Core logic for the pin-input widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,11 +26,11 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "1.22.0",
30
- "@zag-js/dom-query": "1.22.0",
31
- "@zag-js/core": "1.22.0",
32
- "@zag-js/types": "1.22.0",
33
- "@zag-js/utils": "1.22.0"
29
+ "@zag-js/anatomy": "1.23.0",
30
+ "@zag-js/core": "1.23.0",
31
+ "@zag-js/dom-query": "1.23.0",
32
+ "@zag-js/utils": "1.23.0",
33
+ "@zag-js/types": "1.23.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "clean-package": "2.2.0"