@fuf-stack/uniform 1.0.2 → 1.0.3

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 (142) hide show
  1. package/dist/CheckboxGroup/index.cjs +7 -7
  2. package/dist/CheckboxGroup/index.d.cts +2 -2
  3. package/dist/CheckboxGroup/index.d.ts +2 -2
  4. package/dist/CheckboxGroup/index.js +6 -6
  5. package/dist/{CheckboxGroup-D45rOACY.d.cts → CheckboxGroup-B1g42iP0.d.cts} +2 -2
  6. package/dist/{CheckboxGroup-D45rOACY.d.ts → CheckboxGroup-B1g42iP0.d.ts} +2 -2
  7. package/dist/FieldArray/index.cjs +7 -7
  8. package/dist/FieldArray/index.d.cts +2 -2
  9. package/dist/FieldArray/index.d.ts +2 -2
  10. package/dist/FieldArray/index.js +6 -6
  11. package/dist/{FieldArray-DAzf9zE2.d.cts → FieldArray-DVQka7Bh.d.cts} +2 -2
  12. package/dist/{FieldArray-DAzf9zE2.d.ts → FieldArray-DVQka7Bh.d.ts} +2 -2
  13. package/dist/Form/index.cjs +5 -5
  14. package/dist/Form/index.d.cts +3 -3
  15. package/dist/Form/index.d.ts +3 -3
  16. package/dist/Form/index.js +4 -4
  17. package/dist/{Form-DX5NTR-H.d.ts → Form-C_11i6PA.d.ts} +1 -1
  18. package/dist/{Form-D0grgL6G.d.cts → Form-Cu0lWRDN.d.cts} +1 -1
  19. package/dist/{FormContext-ldCpxKnY.d.cts → FormContext-LRho0tno.d.cts} +2 -2
  20. package/dist/{FormContext-ldCpxKnY.d.ts → FormContext-LRho0tno.d.ts} +2 -2
  21. package/dist/Input/index.cjs +7 -7
  22. package/dist/Input/index.js +6 -6
  23. package/dist/RadioBoxes/index.cjs +7 -7
  24. package/dist/RadioBoxes/index.js +6 -6
  25. package/dist/RadioGroup/index.cjs +7 -7
  26. package/dist/RadioGroup/index.js +6 -6
  27. package/dist/RadioTabs/index.cjs +7 -7
  28. package/dist/RadioTabs/index.js +6 -6
  29. package/dist/Select/index.cjs +7 -7
  30. package/dist/Select/index.d.cts +2 -2
  31. package/dist/Select/index.d.ts +2 -2
  32. package/dist/Select/index.js +6 -6
  33. package/dist/{Select-CY5fJfiS.d.cts → Select-CTRWinmO.d.cts} +2 -2
  34. package/dist/{Select-CY5fJfiS.d.ts → Select-CTRWinmO.d.ts} +2 -2
  35. package/dist/SubmitButton/index.cjs +5 -5
  36. package/dist/SubmitButton/index.js +4 -4
  37. package/dist/Switch/index.cjs +7 -7
  38. package/dist/Switch/index.js +6 -6
  39. package/dist/TextArea/index.cjs +7 -7
  40. package/dist/TextArea/index.js +6 -6
  41. package/dist/{chunk-TKQYWIHG.js → chunk-3NZYJNO4.js} +3 -3
  42. package/dist/{chunk-TKQYWIHG.js.map → chunk-3NZYJNO4.js.map} +1 -1
  43. package/dist/{chunk-LJ2KHIIN.cjs → chunk-3WZBQHQM.cjs} +33 -25
  44. package/dist/chunk-3WZBQHQM.cjs.map +1 -0
  45. package/dist/{chunk-YPWUPZOU.js → chunk-5BKLAK23.js} +9 -9
  46. package/dist/{chunk-YPWUPZOU.js.map → chunk-5BKLAK23.js.map} +1 -1
  47. package/dist/{chunk-BLS46GFN.js → chunk-5GBO2FHU.js} +23 -21
  48. package/dist/chunk-5GBO2FHU.js.map +1 -0
  49. package/dist/{chunk-U5WBLGZV.js → chunk-6IU7IYYB.js} +4 -2
  50. package/dist/{chunk-U5WBLGZV.js.map → chunk-6IU7IYYB.js.map} +1 -1
  51. package/dist/{chunk-K2IHP7JJ.cjs → chunk-6NSYLHQW.cjs} +68 -45
  52. package/dist/chunk-6NSYLHQW.cjs.map +1 -0
  53. package/dist/{chunk-UTFZRBBS.js → chunk-CQWA2DFV.js} +7 -5
  54. package/dist/chunk-CQWA2DFV.js.map +1 -0
  55. package/dist/{chunk-UIBHEN65.js → chunk-CWXROORZ.js} +16 -16
  56. package/dist/{chunk-UIBHEN65.js.map → chunk-CWXROORZ.js.map} +1 -1
  57. package/dist/{chunk-PTOFJKSN.js → chunk-EKJOEK5I.js} +11 -11
  58. package/dist/{chunk-PTOFJKSN.js.map → chunk-EKJOEK5I.js.map} +1 -1
  59. package/dist/{chunk-LLO7FMR7.js → chunk-F3DDS4YF.js} +15 -15
  60. package/dist/chunk-F3DDS4YF.js.map +1 -0
  61. package/dist/{chunk-OWWUTKGY.cjs → chunk-FLK6OPFY.cjs} +4 -2
  62. package/dist/chunk-FLK6OPFY.cjs.map +1 -0
  63. package/dist/{chunk-H7EXCZKM.cjs → chunk-FWIJ3N3I.cjs} +62 -54
  64. package/dist/chunk-FWIJ3N3I.cjs.map +1 -0
  65. package/dist/{chunk-XKX22KIM.cjs → chunk-FZD7GFAE.cjs} +4 -4
  66. package/dist/{chunk-XKX22KIM.cjs.map → chunk-FZD7GFAE.cjs.map} +1 -1
  67. package/dist/{chunk-XKXPFVWS.js → chunk-GVLFSVUO.js} +15 -13
  68. package/dist/chunk-GVLFSVUO.js.map +1 -0
  69. package/dist/{chunk-S3FGQTPN.js → chunk-HQTHUBVB.js} +32 -33
  70. package/dist/chunk-HQTHUBVB.js.map +1 -0
  71. package/dist/{chunk-K7QILQPE.js → chunk-HZKEIJP5.js} +31 -23
  72. package/dist/chunk-HZKEIJP5.js.map +1 -0
  73. package/dist/{chunk-L4YPB7MU.cjs → chunk-LTQCM5VQ.cjs} +9 -5
  74. package/dist/chunk-LTQCM5VQ.cjs.map +1 -0
  75. package/dist/{chunk-UHMJOD2X.js → chunk-M52AKWAI.js} +61 -38
  76. package/dist/chunk-M52AKWAI.js.map +1 -0
  77. package/dist/{chunk-E2ZEMRKR.cjs → chunk-NATEKPMG.cjs} +19 -19
  78. package/dist/{chunk-E2ZEMRKR.cjs.map → chunk-NATEKPMG.cjs.map} +1 -1
  79. package/dist/{chunk-BQGN3JTU.js → chunk-NTDKZW4E.js} +4 -4
  80. package/dist/{chunk-BQGN3JTU.js.map → chunk-NTDKZW4E.js.map} +1 -1
  81. package/dist/{chunk-WHW6WMII.js → chunk-OC76RMHG.js} +56 -48
  82. package/dist/chunk-OC76RMHG.js.map +1 -0
  83. package/dist/{chunk-PA2DQCBY.cjs → chunk-OE5BOGGX.cjs} +4 -4
  84. package/dist/{chunk-PA2DQCBY.cjs.map → chunk-OE5BOGGX.cjs.map} +1 -1
  85. package/dist/{chunk-GWJLFB26.cjs → chunk-OTZNGYQZ.cjs} +19 -17
  86. package/dist/chunk-OTZNGYQZ.cjs.map +1 -0
  87. package/dist/{chunk-LBOF5M7T.cjs → chunk-P5DV3Y52.cjs} +14 -14
  88. package/dist/chunk-P5DV3Y52.cjs.map +1 -0
  89. package/dist/{chunk-MAJ7IXH4.cjs → chunk-T6SB5UO2.cjs} +11 -16
  90. package/dist/chunk-T6SB5UO2.cjs.map +1 -0
  91. package/dist/{chunk-NPRL7X5E.cjs → chunk-TQAF2PJG.cjs} +26 -24
  92. package/dist/chunk-TQAF2PJG.cjs.map +1 -0
  93. package/dist/{chunk-SNXHPF7L.js → chunk-TRJOEV3R.js} +8 -13
  94. package/dist/{chunk-SNXHPF7L.js.map → chunk-TRJOEV3R.js.map} +1 -1
  95. package/dist/{chunk-57WY5GAE.js → chunk-V7QZNDTY.js} +9 -5
  96. package/dist/chunk-V7QZNDTY.js.map +1 -0
  97. package/dist/{chunk-3QCNVEUD.cjs → chunk-WIAZMOAH.cjs} +18 -18
  98. package/dist/chunk-WIAZMOAH.cjs.map +1 -0
  99. package/dist/{chunk-XSNA554N.cjs → chunk-XQAN6TTP.cjs} +12 -12
  100. package/dist/{chunk-XSNA554N.cjs.map → chunk-XQAN6TTP.cjs.map} +1 -1
  101. package/dist/{chunk-GNYQC5IJ.cjs → chunk-Y3AB4GV6.cjs} +7 -5
  102. package/dist/chunk-Y3AB4GV6.cjs.map +1 -0
  103. package/dist/{chunk-VTTU37OB.cjs → chunk-YOMV7IQD.cjs} +34 -35
  104. package/dist/chunk-YOMV7IQD.cjs.map +1 -0
  105. package/dist/helpers/index.cjs +2 -2
  106. package/dist/helpers/index.js +1 -1
  107. package/dist/hooks/index.cjs +4 -4
  108. package/dist/hooks/index.d.cts +3 -3
  109. package/dist/hooks/index.d.ts +3 -3
  110. package/dist/hooks/index.js +3 -3
  111. package/dist/hooks/useInputValueDebounce/index.cjs +2 -2
  112. package/dist/hooks/useInputValueDebounce/index.js +1 -1
  113. package/dist/index.cjs +17 -17
  114. package/dist/index.d.cts +5 -5
  115. package/dist/index.d.ts +5 -5
  116. package/dist/index.js +16 -16
  117. package/dist/partials/FieldCopyTestIdButton/index.cjs +2 -2
  118. package/dist/partials/FieldCopyTestIdButton/index.js +1 -1
  119. package/dist/partials/FieldValidationError/index.cjs +2 -2
  120. package/dist/partials/FieldValidationError/index.js +1 -1
  121. package/package.json +4 -4
  122. package/dist/chunk-3QCNVEUD.cjs.map +0 -1
  123. package/dist/chunk-57WY5GAE.js.map +0 -1
  124. package/dist/chunk-BLS46GFN.js.map +0 -1
  125. package/dist/chunk-GNYQC5IJ.cjs.map +0 -1
  126. package/dist/chunk-GWJLFB26.cjs.map +0 -1
  127. package/dist/chunk-H7EXCZKM.cjs.map +0 -1
  128. package/dist/chunk-K2IHP7JJ.cjs.map +0 -1
  129. package/dist/chunk-K7QILQPE.js.map +0 -1
  130. package/dist/chunk-L4YPB7MU.cjs.map +0 -1
  131. package/dist/chunk-LBOF5M7T.cjs.map +0 -1
  132. package/dist/chunk-LJ2KHIIN.cjs.map +0 -1
  133. package/dist/chunk-LLO7FMR7.js.map +0 -1
  134. package/dist/chunk-MAJ7IXH4.cjs.map +0 -1
  135. package/dist/chunk-NPRL7X5E.cjs.map +0 -1
  136. package/dist/chunk-OWWUTKGY.cjs.map +0 -1
  137. package/dist/chunk-S3FGQTPN.js.map +0 -1
  138. package/dist/chunk-UHMJOD2X.js.map +0 -1
  139. package/dist/chunk-UTFZRBBS.js.map +0 -1
  140. package/dist/chunk-VTTU37OB.cjs.map +0 -1
  141. package/dist/chunk-WHW6WMII.js.map +0 -1
  142. package/dist/chunk-XKXPFVWS.js.map +0 -1
@@ -3,18 +3,19 @@
3
3
  var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
4
4
 
5
5
 
6
- var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
6
+ var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
7
7
 
8
8
 
9
- var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
9
+ var _chunkY3AB4GV6cjs = require('./chunk-Y3AB4GV6.cjs');
10
10
 
11
11
 
12
12
 
13
13
 
14
- var _chunkH7EXCZKMcjs = require('./chunk-H7EXCZKM.cjs');
14
+ var _chunkFWIJ3N3Icjs = require('./chunk-FWIJ3N3I.cjs');
15
15
 
16
16
 
17
- var _chunkL4YPB7MUcjs = require('./chunk-L4YPB7MU.cjs');
17
+ var _chunkLTQCM5VQcjs = require('./chunk-LTQCM5VQ.cjs');
18
+
18
19
 
19
20
 
20
21
 
@@ -118,9 +119,9 @@ var FieldArrayElement = ({
118
119
  testId = void 0
119
120
  }) => {
120
121
  var _a;
121
- const { getFieldState } = _chunkH7EXCZKMcjs.useFormContext.call(void 0, );
122
+ const { getFieldState } = _chunkFWIJ3N3Icjs.useFormContext.call(void 0, );
122
123
  const { error, invalid } = getFieldState(arrayFieldName, void 0);
123
- const { getHelperWrapperProps, getErrorMessageProps } = _chunkH7EXCZKMcjs.useInput.call(void 0, {
124
+ const { getHelperWrapperProps, getErrorMessageProps } = _chunkFWIJ3N3Icjs.useInput.call(void 0, {
124
125
  classNames: { helperWrapper: "block" },
125
126
  errorMessage: JSON.stringify(error),
126
127
  isInvalid: invalid,
@@ -136,18 +137,18 @@ var FieldArrayElement = ({
136
137
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
137
138
  "li",
138
139
  {
139
- className: _pixelutils.cn.call(void 0, className.listItem),
140
140
  ref: setNodeRef,
141
+ className: _pixelutils.cn.call(void 0, className.listItem),
141
142
  style: sortingStyle,
142
143
  children: [
143
- sortable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
144
+ sortable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
144
145
  SortDragHandle_default,
145
146
  {
146
147
  className: className.sortDragHandle,
147
148
  id,
148
149
  testId: `${testId}_sort_drag_handle`
149
150
  }
150
- ),
151
+ ) : null,
151
152
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
152
153
  "div",
153
154
  {
@@ -160,23 +161,27 @@ var FieldArrayElement = ({
160
161
  ElementRemoveButton_default,
161
162
  {
162
163
  className: className.removeButton,
163
- onClick: () => methods.remove(),
164
- testId: `${testId}_remove_button`
164
+ testId: `${testId}_remove_button`,
165
+ onClick: () => {
166
+ methods.remove();
167
+ }
165
168
  }
166
169
  ),
167
- insertAfter && index !== fields.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
170
+ insertAfter && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
168
171
  ElementInsertAfterButton_default,
169
172
  {
170
173
  className: className.insertAfterButton,
171
- onClick: () => methods.insert(),
172
- testId: `${testId}_insert_after_button`
174
+ testId: `${testId}_insert_after_button`,
175
+ onClick: () => {
176
+ methods.insert();
177
+ }
173
178
  }
174
- )
179
+ ) : null
175
180
  ]
176
181
  }
177
182
  ),
178
- error && typeof error[index] !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
179
- _chunkGNYQC5IJcjs.FieldValidationError_default,
183
+ typeof (error == null ? void 0 : error[index]) !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
184
+ _chunkY3AB4GV6cjs.FieldValidationError_default,
180
185
  {
181
186
  error: (_a = error[Number(index)]) == null ? void 0 : _a._errors,
182
187
  testId
@@ -220,8 +225,12 @@ var SortContext = ({
220
225
  const handleDragEnd = (event) => {
221
226
  const { active, over } = event;
222
227
  if (active.id !== (over == null ? void 0 : over.id)) {
223
- const oldIndex = fields.findIndex((field) => field.id === active.id);
224
- const newIndex = fields.findIndex((field) => field.id === (over == null ? void 0 : over.id));
228
+ const oldIndex = fields.findIndex((field) => {
229
+ return field.id === active.id;
230
+ });
231
+ const newIndex = fields.findIndex((field) => {
232
+ return field.id === (over == null ? void 0 : over.id);
233
+ });
225
234
  move(oldIndex, newIndex);
226
235
  }
227
236
  };
@@ -235,8 +244,10 @@ var SortContext = ({
235
244
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
236
245
  _sortable.SortableContext,
237
246
  {
238
- items: fields.map((field) => field.id),
239
247
  strategy: _sortable.verticalListSortingStrategy,
248
+ items: fields.map((field) => {
249
+ return field.id;
250
+ }),
240
251
  children
241
252
  }
242
253
  )
@@ -282,13 +293,13 @@ var FieldArray = ({
282
293
  getFieldState,
283
294
  trigger
284
295
  // watch
285
- } = _chunkH7EXCZKMcjs.useFormContext.call(void 0, );
286
- const { fields, append, remove, insert, move } = _chunkH7EXCZKMcjs.useFieldArray.call(void 0, {
296
+ } = _chunkFWIJ3N3Icjs.useFormContext.call(void 0, );
297
+ const { fields, append, remove, insert, move } = _chunkFWIJ3N3Icjs.useFieldArray.call(void 0, {
287
298
  control,
288
299
  name
289
300
  });
290
301
  const { error, testId, invalid, required } = getFieldState(name, _testId);
291
- const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunkH7EXCZKMcjs.useInput.call(void 0, {
302
+ const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunkFWIJ3N3Icjs.useInput.call(void 0, {
292
303
  isInvalid: invalid,
293
304
  isRequired: required,
294
305
  errorMessage: JSON.stringify(error),
@@ -297,51 +308,61 @@ var FieldArray = ({
297
308
  placeholder: " ",
298
309
  classNames: { helperWrapper: "block" }
299
310
  });
300
- const elementInitialValue = _chunkL4YPB7MUcjs.toNullishString.call(void 0, _elementInitialValue);
311
+ const elementInitialValue = _chunkLTQCM5VQcjs.toNullishString.call(void 0, _elementInitialValue);
301
312
  if (lastElementNotRemovable && fields.length === 0) {
302
313
  append(elementInitialValue);
303
314
  }
304
315
  const showTestIdCopyButton = debugMode === "debug-testids";
305
316
  const showLabel = label || showTestIdCopyButton;
306
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { sortable, move, fields, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
317
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { fields, move, sortable, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
307
318
  "ul",
308
319
  {
309
320
  className: className.list,
310
321
  "data-testid": testId,
311
- onBlur: () => trigger(`${name}`),
322
+ onBlur: () => _chunk555JRYCScjs.__async.call(void 0, null, null, function* () {
323
+ return trigger(name);
324
+ }),
312
325
  children: [
313
- showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
314
- label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
315
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
316
- "label",
317
- _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), {
318
- className: _pixelutils.cn.call(void 0, (_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
319
- children: label
320
- })
321
- ),
322
- showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
323
- ] }),
326
+ showLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
327
+ label ? (
328
+ // eslint-disable-next-line jsx-a11y/label-has-associated-control
329
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
330
+ "label",
331
+ _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), {
332
+ className: _pixelutils.cn.call(void 0, (_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
333
+ children: label
334
+ })
335
+ )
336
+ ) : null,
337
+ showTestIdCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default, { testId }) : null
338
+ ] }) : null,
324
339
  fields.map((field, index) => {
325
340
  const elementName = `${name}.${index}`;
326
341
  const elementTestId = `${testId}_${index}`;
327
342
  const elementMethods = {
328
- append: () => append(elementInitialValue),
343
+ append: () => {
344
+ append(elementInitialValue);
345
+ },
329
346
  duplicate: () => {
330
347
  const values = getValues(name);
331
348
  insert(index + 1, values[index]);
332
349
  },
333
- insert: () => insert(index + 1, elementInitialValue),
334
- remove: () => remove(index)
350
+ insert: () => {
351
+ insert(index + 1, elementInitialValue);
352
+ },
353
+ remove: () => {
354
+ remove(index);
355
+ }
335
356
  };
336
357
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
337
358
  FieldArrayElement_default,
338
359
  {
339
360
  arrayFieldName: name,
340
361
  className,
362
+ duplicate,
341
363
  fields,
342
364
  id: field.id,
343
365
  index,
344
- duplicate,
345
366
  insertAfter,
346
367
  lastNotDeletable: lastElementNotRemovable,
347
368
  methods: elementMethods,
@@ -361,15 +382,17 @@ var FieldArray = ({
361
382
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
362
383
  _pixels.Button,
363
384
  {
364
- className: className.appendButton,
365
385
  disableAnimation: true,
366
- onClick: () => append(elementInitialValue),
386
+ className: className.appendButton,
367
387
  size: "sm",
368
388
  testId: `${testId}_append_button`,
389
+ onClick: () => {
390
+ append(elementInitialValue);
391
+ },
369
392
  children: appendButtonText
370
393
  }
371
394
  ),
372
- (error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors, testId }) })) }))
395
+ (error == null ? void 0 : error._errors) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3AB4GV6cjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors, testId }) })) })) : null
373
396
  ]
374
397
  }
375
398
  ) });
@@ -383,4 +406,4 @@ var FieldArray_default2 = FieldArray_default;
383
406
 
384
407
 
385
408
  exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
386
- //# sourceMappingURL=chunk-K2IHP7JJ.cjs.map
409
+ //# sourceMappingURL=chunk-6NSYLHQW.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6NSYLHQW.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button","cn","useSortable","Fragment","FieldArray_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6NSYLHQW.cjs","sourcesContent":[null,"import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n appendButton: 'w-full',\n elementWrapper: 'grow',\n insertAfterButton: 'text-xs font-medium',\n label: 'pointer-events-auto! static! z-0! -mb-1 ml-1 inline-block!',\n list: 'm-0 w-full list-none',\n listItem: 'mb-4 flex w-full flex-row',\n removeButton: 'ml-1',\n sortDragHandle: 'mr-2 text-base text-xl',\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n insertAfter = false,\n label: _label = undefined,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n testId: _testId = undefined,\n}: FieldArrayProps) => {\n // className from slots\n const variants = fieldArrayVariants();\n const className = variantsToClassNames(variants, _className, 'list');\n\n const {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n // TODO: add info\n const elementInitialValue = toNullishString(_elementInitialValue);\n\n // When lastElementNotRemovable is set and the field array is empty,\n // add an initial element to ensure there's always at least one visible element\n if (lastElementNotRemovable && fields.length === 0) {\n append(elementInitialValue);\n }\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <SortContext fields={fields} move={move} sortable={sortable}>\n <ul\n className={className.list}\n data-testid={testId}\n /**\n * TODO: this trigger causes the field array (not element)\n * are shown immediately, but this will cause additional\n * render cycles, not sure if we should do this...\n */\n onBlur={async () => {\n return trigger(name);\n }}\n >\n {/* field array label */}\n {showLabel ? (\n <>\n {label ? (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n {...getLabelProps()}\n className={cn(getLabelProps()?.className, className.label)}\n >\n {label}\n </label>\n ) : null}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null}\n\n {fields.map((field, index) => {\n const elementName = `${name}.${index}`;\n const elementTestId = `${testId}_${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => {\n append(elementInitialValue);\n },\n duplicate: () => {\n const values = getValues(name);\n insert(index + 1, values[index]);\n },\n insert: () => {\n insert(index + 1, elementInitialValue);\n },\n remove: () => {\n remove(index);\n },\n };\n\n return (\n <FieldArrayElement\n key={field.id}\n arrayFieldName={name}\n className={className}\n duplicate={duplicate}\n fields={fields}\n id={field.id}\n index={index}\n insertAfter={insertAfter}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n\n {/* append elements */}\n <Button\n disableAnimation\n className={className.appendButton}\n size=\"sm\"\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n >\n {appendButtonText}\n </Button>\n\n {/* top level field array errors */}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors ? (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} testId={testId} />\n </div>\n </div>\n ) : null}\n </ul>\n </SortContext>\n );\n};\n\nexport default FieldArray;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport interface FieldArrayElementMethods {\n /** Add new element at end */\n append: () => void;\n /** Clone current element */\n duplicate: () => void;\n /** Add new element after current */\n insert: () => void;\n /** Remove current element */\n remove: () => void;\n}\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n /** Base field name for form context */\n arrayFieldName: string;\n /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of wrapper div inside the li that wraps the rendered element fields directly */\n elementWrapper?: ClassValue;\n /** Class for the li */\n listItem?: ClassValue;\n /** Class for the insert button between elements */\n insertAfterButton?: ClassValue;\n /** Class for the remove element button */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** All fields in the form array */\n fields: Record<'id', string>[];\n /** Unique identifier for drag/drop */\n id: string | number;\n /** Field index in array */\n index: number;\n /** Prevent deletion of last remaining element */\n lastNotDeletable?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid of the element */\n testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n arrayFieldName,\n children,\n className,\n fields,\n id,\n index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n const { getFieldState } = useFormContext();\n const { error, invalid } = getFieldState(arrayFieldName, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n classNames: { helperWrapper: 'block' },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n labelPlacement: 'inside',\n placeholder: ' ',\n });\n\n // Apply transform styles when sortable is enabled for smooth drag animations\n // transform: handles the item's position during drag\n // transition: controls the animation timing when dropping\n const { setNodeRef, transform, transition } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n }\n : undefined;\n\n return (\n <>\n <li\n ref={setNodeRef}\n className={cn(className.listItem)}\n style={sortingStyle}\n >\n {/** sorting drag handle */}\n {sortable ? (\n <SortDragHandle\n className={className.sortDragHandle}\n id={id}\n testId={`${testId}_sort_drag_handle`}\n />\n ) : null}\n\n {/** render element fields */}\n <div\n className={cn(className.elementWrapper)}\n data-testid={`${testId}_element_wrapper`}\n >\n {/* TODO: this has to be improved */}\n <Grid>{children}</Grid>\n </div>\n\n {/** remove element */}\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n className={className.removeButton}\n testId={`${testId}_remove_button`}\n onClick={() => {\n methods.remove();\n }}\n />\n )}\n\n {/** insertAfter feature when not last element */}\n {insertAfter && index !== fields.length - 1 ? (\n <ElementInsertAfterButton\n className={className.insertAfterButton}\n testId={`${testId}_insert_after_button`}\n onClick={() => {\n methods.insert();\n }}\n />\n ) : null}\n </li>\n\n {/** element error */}\n {typeof error?.[index] !== 'undefined' && (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n testId={testId as string}\n />\n </div>\n </div>\n )}\n </>\n );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n return (\n <Button\n className={cn(className)}\n color=\"success\"\n icon={<FaPlus />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementRemoveButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n return (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n /** Optional CSS class name */\n className?: ClassValue;\n /** Unique identifier for sortable item */\n id: string | number;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n className = undefined,\n id,\n testId = undefined,\n}: SortDragHandleProps) => {\n // Get dnd-kit sortable attributes and listeners\n const { attributes, listeners } = useSortable({ id });\n\n return (\n <div\n className={cn(className)}\n data-testid={testId}\n {...attributes}\n {...listeners}\n >\n <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** enable/disable sorting functionality */\n sortable: boolean;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n sortable,\n fields,\n move,\n}: SortContextProps): ReactNode => {\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => {\n return field.id === active.id;\n });\n const newIndex = fields.findIndex((field) => {\n return field.id === over?.id;\n });\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n strategy={verticalListSortingStrategy}\n items={fields.map((field) => {\n return field.id;\n })}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}
@@ -16,10 +16,12 @@ var FieldValidationError = ({
16
16
  "aria-label": `Validation errors of field ${testId}`,
17
17
  className,
18
18
  "data-testid": slugify(`${testId}_error`),
19
- children: errors.map(({ message }, i) => (
20
- // eslint-disable-next-line react/no-array-index-key
21
- /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: message }) }, `error_${i}`)
22
- ))
19
+ children: errors.map(({ message }, i) => {
20
+ return (
21
+ // eslint-disable-next-line react/no-array-index-key
22
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: message }) }, `error_${i}`)
23
+ );
24
+ })
23
25
  }
24
26
  );
25
27
  };
@@ -32,4 +34,4 @@ export {
32
34
  FieldValidationError_default,
33
35
  FieldValidationError_default2
34
36
  };
35
- //# sourceMappingURL=chunk-UTFZRBBS.js.map
37
+ //# sourceMappingURL=chunk-CQWA2DFV.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n /** CSS class name */\n className?: string;\n /** Field errors */\n error: FieldError | FieldError[];\n /** HTML data-testid attribute used in e2e tests */\n testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n className = undefined,\n error,\n testId,\n}: FieldValidationErrorProps) => {\n // render nothing when no errors\n if (!error || (Array.isArray(error) && !error.length)) {\n return null;\n }\n\n // get errors as array\n const errors: FieldError[] = Array.isArray(error) ? error : [error];\n\n return (\n <ul\n aria-label={`Validation errors of field ${testId}`}\n className={className}\n data-testid={slugify(`${testId}_error`)}\n >\n {errors.map(({ message }, i) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{message}</div>\n </li>\n );\n })}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";AAEA,SAAS,eAAe;AAqCZ;AAvBZ,IAAM,uBAAuB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAE/B,MAAI,CAAC,SAAU,MAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAS;AACrD,WAAO;AAAA,EACT;AAGA,QAAM,SAAuB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,8BAA8B,MAAM;AAAA,MAChD;AAAA,MACA,eAAa,QAAQ,GAAG,MAAM,QAAQ;AAAA,MAErC,iBAAO,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM;AAC9B;AAAA;AAAA,UAEE,oBAAC,QACC,8BAAC,SAAK,mBAAQ,KADP,SAAS,CAAC,EAEnB;AAAA;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;ACzCf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}
@@ -1,16 +1,16 @@
1
1
  import {
2
2
  FieldCopyTestIdButton_default
3
- } from "./chunk-BQGN3JTU.js";
3
+ } from "./chunk-NTDKZW4E.js";
4
4
  import {
5
5
  FieldValidationError_default
6
- } from "./chunk-UTFZRBBS.js";
6
+ } from "./chunk-CQWA2DFV.js";
7
7
  import {
8
8
  useController,
9
9
  useFormContext
10
- } from "./chunk-WHW6WMII.js";
10
+ } from "./chunk-OC76RMHG.js";
11
11
  import {
12
12
  useInputValueDebounce
13
- } from "./chunk-U5WBLGZV.js";
13
+ } from "./chunk-6IU7IYYB.js";
14
14
 
15
15
  // src/Input/Input.tsx
16
16
  import { Input as HeroInput } from "@heroui/input";
@@ -57,32 +57,32 @@ var Input = ({
57
57
  return /* @__PURE__ */ jsx(
58
58
  HeroInput,
59
59
  {
60
+ ref,
60
61
  className: cn(className),
61
- classNames: {
62
- inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
63
- },
64
62
  "data-testid": testId,
65
63
  endContent,
66
- errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
67
64
  isDisabled,
68
65
  isInvalid: invalid,
69
66
  isRequired: required,
70
- label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
71
- label,
72
- showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
73
- ] }),
74
67
  labelPlacement: "outside",
75
68
  name,
76
69
  onBlur,
77
70
  onChange,
78
71
  placeholder,
79
72
  radius: "sm",
80
- ref,
81
73
  size,
82
74
  startContent,
75
+ variant: "bordered",
76
+ classNames: {
77
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
78
+ },
79
+ errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
80
+ label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
81
+ label,
82
+ showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
83
+ ] }),
83
84
  type,
84
- value,
85
- variant: "bordered"
85
+ value
86
86
  }
87
87
  );
88
88
  };
@@ -95,4 +95,4 @@ export {
95
95
  Input_default,
96
96
  Input_default2
97
97
  };
98
- //# sourceMappingURL=chunk-UIBHEN65.js.map
98
+ //# sourceMappingURL=chunk-CWXROORZ.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transform?: InputValueTransform;\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\n variant=\"bordered\"\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAyFF,SAOP,UAPO,KAOP,YAPO;AArDjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,IAAO,gBAAQ;;;ACtHf,IAAOA,iBAAQ;","names":["Input_default"]}
1
+ {"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transform?: InputValueTransform;\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroInput\n ref={ref}\n className={cn(className)}\n data-testid={testId}\n endContent={endContent}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n size={size}\n startContent={startContent}\n variant=\"bordered\"\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAsGF,SAIP,UAJO,KAIP,YAJO;AAlEjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ;AAAA,MAEA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACtHf,IAAOA,iBAAQ;","names":["Input_default"]}
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  FieldCopyTestIdButton_default
3
- } from "./chunk-BQGN3JTU.js";
3
+ } from "./chunk-NTDKZW4E.js";
4
4
  import {
5
5
  FieldValidationError_default
6
- } from "./chunk-UTFZRBBS.js";
6
+ } from "./chunk-CQWA2DFV.js";
7
7
  import {
8
8
  useController,
9
9
  useFormContext
10
- } from "./chunk-WHW6WMII.js";
10
+ } from "./chunk-OC76RMHG.js";
11
11
  import {
12
12
  __objRest,
13
13
  __spreadProps,
@@ -56,8 +56,8 @@ var RadioBox = (_a) => {
56
56
  __spreadProps(__spreadValues({}, getLabelWrapperProps()), {
57
57
  className: cn(getLabelWrapperProps().className, "grow"),
58
58
  children: [
59
- children && /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, getLabelProps()), { children })),
60
- description && /* @__PURE__ */ jsx("span", { className: "text-small text-foreground opacity-70", children: description })
59
+ children ? /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, getLabelProps()), { children })) : null,
60
+ description ? /* @__PURE__ */ jsx("span", { className: "text-small text-foreground opacity-70", children: description }) : null
61
61
  ]
62
62
  })
63
63
  )
@@ -114,23 +114,23 @@ var RadioBoxes = ({
114
114
  HeroRadioGroup,
115
115
  {
116
116
  classNames,
117
+ ref,
117
118
  "data-invalid": invalid,
118
119
  "data-required": required,
119
120
  "data-testid": testId,
120
121
  defaultValue: getValues()[name],
121
- errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error, testId }),
122
122
  isDisabled,
123
123
  isInvalid: invalid,
124
124
  isRequired: required,
125
+ name,
126
+ onBlur,
127
+ orientation: inline ? "horizontal" : "vertical",
128
+ errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error, testId }),
125
129
  label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
126
130
  /* @__PURE__ */ jsxs2("label", { children: [
127
131
  label,
128
132
  showTestIdCopyButton && /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId })
129
133
  ] }),
130
- name,
131
- orientation: inline ? "horizontal" : "vertical",
132
- onBlur,
133
- ref,
134
134
  children: options.map((option) => {
135
135
  if ("value" in option) {
136
136
  const optionTestId = slugify(
@@ -166,4 +166,4 @@ export {
166
166
  RadioBoxes_default,
167
167
  RadioBoxes_default2
168
168
  };
169
- //# sourceMappingURL=chunk-PTOFJKSN.js.map
169
+ //# sourceMappingURL=chunk-EKJOEK5I.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n {\n // disabled styles\n 'opacity-disabled pointer-events-none': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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","names":["jsx","jsxs","RadioBoxes_default"]}
1
+ {"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n ref={ref}\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n {...getBaseProps()}\n className={cn(\n 'group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n {\n // disabled styles\n 'opacity-disabled pointer-events-none': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {}\n <span {...getWrapperProps()}>\n {}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {}\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n ) : null}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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","names":["jsx","jsxs","RadioBoxes_default"]}
@@ -1,16 +1,16 @@
1
1
  import {
2
2
  FieldCopyTestIdButton_default
3
- } from "./chunk-BQGN3JTU.js";
3
+ } from "./chunk-NTDKZW4E.js";
4
4
  import {
5
5
  FieldValidationError_default
6
- } from "./chunk-UTFZRBBS.js";
6
+ } from "./chunk-CQWA2DFV.js";
7
7
  import {
8
8
  useController,
9
9
  useFormContext
10
- } from "./chunk-WHW6WMII.js";
10
+ } from "./chunk-OC76RMHG.js";
11
11
  import {
12
12
  useInputValueDebounce
13
- } from "./chunk-U5WBLGZV.js";
13
+ } from "./chunk-6IU7IYYB.js";
14
14
 
15
15
  // src/TextArea/TextArea.tsx
16
16
  import { Textarea as HeroTextArea } from "@heroui/input";
@@ -51,27 +51,27 @@ var TextArea = ({
51
51
  return /* @__PURE__ */ jsx(
52
52
  HeroTextArea,
53
53
  {
54
+ ref,
54
55
  className: cn(className),
55
- classNames: {
56
- inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
57
- },
58
56
  "data-testid": testId,
59
- errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
60
57
  isDisabled,
61
- isRequired: required,
62
58
  isInvalid: invalid,
63
- label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
64
- label,
65
- showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
66
- ] }),
59
+ isRequired: required,
67
60
  labelPlacement: "outside",
68
61
  name,
69
62
  onBlur,
70
63
  onChange,
71
64
  placeholder,
72
- ref,
73
65
  value,
74
66
  variant: "bordered",
67
+ classNames: {
68
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
69
+ },
70
+ errorMessage: error ? /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) : null,
71
+ label: showLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
72
+ label,
73
+ showTestIdCopyButton ? /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId }) : null
74
+ ] }) : null,
75
75
  children
76
76
  }
77
77
  );
@@ -85,4 +85,4 @@ export {
85
85
  TextArea_default,
86
86
  TextArea_default2
87
87
  };
88
- //# sourceMappingURL=chunk-LLO7FMR7.js.map
88
+ //# sourceMappingURL=chunk-F3DDS4YF.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n label = undefined,\n name,\n placeholder = ' ',\n testId: _testId = undefined,\n}: TextAreaProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use debounced handlers for form updates\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroTextArea\n ref={ref}\n className={cn(className)}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n value={value as string}\n variant=\"bordered\"\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n errorMessage={\n error ? <FieldValidationError error={error} testId={testId} /> : null\n }\n label={\n showLabel ? (\n <>\n {label}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null\n }\n >\n {children}\n </HeroTextArea>\n );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AAqFH,SAIN,UAJM,KAIN,YAJM;AAzDhB,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AACnB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,cACE,QAAQ,oBAAC,gCAAqB,OAAc,QAAgB,IAAK;AAAA,MAEnE,OACE,YACE,iCACG;AAAA;AAAA,QACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,SACN,IACE;AAAA,MAGL;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;;;ACrGf,IAAOA,oBAAQ;","names":["TextArea_default"]}