@fuf-stack/uniform 1.19.0 → 1.19.2

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 (157) hide show
  1. package/dist/Checkboxes/index.cjs +1 -1
  2. package/dist/{Checkboxes-Ca9fTce_.cjs → Checkboxes-DegQ22uN.cjs} +3 -3
  3. package/dist/{Checkboxes-Ca9fTce_.cjs.map → Checkboxes-DegQ22uN.cjs.map} +1 -1
  4. package/dist/FieldArray/index.cjs +1 -1
  5. package/dist/FieldArray/index.js +1 -1
  6. package/dist/{FieldArray-n39Aj9AV.js → FieldArray-BVL5Tz0Q.js} +33 -34
  7. package/dist/{FieldArray-n39Aj9AV.js.map → FieldArray-BVL5Tz0Q.js.map} +1 -1
  8. package/dist/{FieldArray-CnxCQt0o.cjs → FieldArray-CeiNCobX.cjs} +36 -37
  9. package/dist/{FieldArray-CnxCQt0o.cjs.map → FieldArray-CeiNCobX.cjs.map} +1 -1
  10. package/dist/FieldCard/index.cjs +1 -1
  11. package/dist/{FieldCard-DbuGSb_j.cjs → FieldCard-C0kNSLj7.cjs} +4 -4
  12. package/dist/{FieldCard-DbuGSb_j.cjs.map → FieldCard-C0kNSLj7.cjs.map} +1 -1
  13. package/dist/{FieldCopyTestIdButton-BvVBidko.cjs → FieldCopyTestIdButton-DrUzXwTo.cjs} +2 -2
  14. package/dist/{FieldCopyTestIdButton-BvVBidko.cjs.map → FieldCopyTestIdButton-DrUzXwTo.cjs.map} +1 -1
  15. package/dist/{FieldValidationError-EecXNx5F.cjs → FieldValidationError-8H8LxDjk.cjs} +2 -2
  16. package/dist/{FieldValidationError-EecXNx5F.cjs.map → FieldValidationError-8H8LxDjk.cjs.map} +1 -1
  17. package/dist/Form/index.cjs +1 -1
  18. package/dist/{Form-Diivw8pg.cjs → Form-Dqa1b7Y7.cjs} +3 -3
  19. package/dist/{Form-Diivw8pg.cjs.map → Form-Dqa1b7Y7.cjs.map} +1 -1
  20. package/dist/{FormContext-3GzWxXSS.cjs → FormContext-BrY1FQYR.cjs} +2 -2
  21. package/dist/{FormContext-3GzWxXSS.cjs.map → FormContext-BrY1FQYR.cjs.map} +1 -1
  22. package/dist/Grid/index.cjs +1 -1
  23. package/dist/{Grid-V1pCY2LC.cjs → Grid-DdYQQ_UM.cjs} +2 -2
  24. package/dist/{Grid-V1pCY2LC.cjs.map → Grid-DdYQQ_UM.cjs.map} +1 -1
  25. package/dist/Input/index.cjs +1 -1
  26. package/dist/Input/index.d.cts +1 -1
  27. package/dist/Input/index.d.ts +1 -1
  28. package/dist/{Input-C6kRsqx1.cjs → Input-BXJ4DSha.cjs} +2 -2
  29. package/dist/{Input-C6kRsqx1.cjs.map → Input-BXJ4DSha.cjs.map} +1 -1
  30. package/dist/RadioBoxes/index.cjs +1 -1
  31. package/dist/RadioBoxes/index.d.cts +1 -1
  32. package/dist/RadioBoxes/index.d.ts +1 -1
  33. package/dist/RadioBoxes/index.js +1 -1
  34. package/dist/{RadioBoxes-DNQCynvF.js → RadioBoxes-BR3X986V.js} +11 -14
  35. package/dist/{RadioBoxes-DNQCynvF.js.map → RadioBoxes-BR3X986V.js.map} +1 -1
  36. package/dist/{RadioBoxes-DVxDhpbp.cjs → RadioBoxes-Cim3InDW.cjs} +12 -15
  37. package/dist/{RadioBoxes-DVxDhpbp.cjs.map → RadioBoxes-Cim3InDW.cjs.map} +1 -1
  38. package/dist/RadioTabs/index.cjs +1 -1
  39. package/dist/{RadioTabs-CFraIx6w.cjs → RadioTabs-t-x2XnuI.cjs} +2 -2
  40. package/dist/{RadioTabs-CFraIx6w.cjs.map → RadioTabs-t-x2XnuI.cjs.map} +1 -1
  41. package/dist/Radios/index.cjs +1 -1
  42. package/dist/Radios/index.d.cts +1 -1
  43. package/dist/Radios/index.d.ts +1 -1
  44. package/dist/Radios/index.js +1 -1
  45. package/dist/{Radios-C-Zf3Yij.js → Radios-CYwW3bZa.js} +8 -11
  46. package/dist/{Radios-C-Zf3Yij.js.map → Radios-CYwW3bZa.js.map} +1 -1
  47. package/dist/{Radios-OhSB1oFo.cjs → Radios-CjEFdyD6.cjs} +9 -12
  48. package/dist/{Radios-OhSB1oFo.cjs.map → Radios-CjEFdyD6.cjs.map} +1 -1
  49. package/dist/Select/index.cjs +1 -1
  50. package/dist/Select/index.d.cts +1 -1
  51. package/dist/Select/index.d.ts +1 -1
  52. package/dist/Select/index.js +1 -1
  53. package/dist/{Select-fEJPVWJa.cjs → Select-BEed8xan.cjs} +5 -7
  54. package/dist/{Select-fEJPVWJa.cjs.map → Select-BEed8xan.cjs.map} +1 -1
  55. package/dist/{Select-DMpCAYLB.js → Select-BILyyM7Z.js} +3 -5
  56. package/dist/{Select-DMpCAYLB.js.map → Select-BILyyM7Z.js.map} +1 -1
  57. package/dist/Slider/index.cjs +1 -1
  58. package/dist/Slider/index.d.cts +1 -1
  59. package/dist/Slider/index.d.ts +1 -1
  60. package/dist/{Slider-ChBNfwS2.cjs → Slider-CFYP86ku.cjs} +2 -2
  61. package/dist/{Slider-ChBNfwS2.cjs.map → Slider-CFYP86ku.cjs.map} +1 -1
  62. package/dist/SubmitButton/index.cjs +1 -1
  63. package/dist/{SubmitButton-CfuPpJKk.cjs → SubmitButton-D7xacDyS.cjs} +3 -3
  64. package/dist/{SubmitButton-CfuPpJKk.cjs.map → SubmitButton-D7xacDyS.cjs.map} +1 -1
  65. package/dist/Switch/index.cjs +1 -1
  66. package/dist/Switch/index.d.cts +1 -1
  67. package/dist/Switch/index.d.ts +1 -1
  68. package/dist/{Switch-MDrnacFJ.cjs → Switch-Dt9TGQ8d.cjs} +2 -2
  69. package/dist/{Switch-MDrnacFJ.cjs.map → Switch-Dt9TGQ8d.cjs.map} +1 -1
  70. package/dist/SwitchBox/index.cjs +1 -1
  71. package/dist/{SwitchBox-kp93uE8e.cjs → SwitchBox-DMPp_Ed-.cjs} +2 -2
  72. package/dist/{SwitchBox-kp93uE8e.cjs.map → SwitchBox-DMPp_Ed-.cjs.map} +1 -1
  73. package/dist/TextArea/index.cjs +1 -1
  74. package/dist/TextArea/index.d.cts +1 -1
  75. package/dist/TextArea/index.d.ts +1 -1
  76. package/dist/{TextArea-B8XYKqFg.cjs → TextArea-DDwzXW-y.cjs} +2 -2
  77. package/dist/{TextArea-B8XYKqFg.cjs.map → TextArea-DDwzXW-y.cjs.map} +1 -1
  78. package/dist/helpers/index.cjs +1 -1
  79. package/dist/hooks/useClientValidation/index.cjs +1 -1
  80. package/dist/hooks/useClientValidation/index.d.cts +1 -1
  81. package/dist/hooks/useClientValidation/index.d.ts +1 -1
  82. package/dist/hooks/useController/index.cjs +1 -1
  83. package/dist/hooks/useFormContext/index.cjs +1 -1
  84. package/dist/hooks/useFormContext/index.d.cts +1 -1
  85. package/dist/hooks/useFormContext/index.d.ts +1 -1
  86. package/dist/hooks/useInput/index.cjs +1 -1
  87. package/dist/hooks/useInputValueDebounce/index.cjs +2 -2
  88. package/dist/hooks/useInputValueTransform/index.cjs +1 -1
  89. package/dist/hooks/useUniformField/index.cjs +6 -6
  90. package/dist/hooks/useUniformField/index.d.cts +1 -1
  91. package/dist/hooks/useUniformField/index.d.ts +1 -1
  92. package/dist/hooks/useUniformFieldArray/index.cjs +2 -2
  93. package/dist/hooks/useUniformFieldArray/index.d.cts +1 -1
  94. package/dist/hooks/useUniformFieldArray/index.d.ts +1 -1
  95. package/dist/hooks/useWatchUserChange/index.cjs +1 -1
  96. package/dist/{index-B2tIMFYh.d.cts → index-25CYKzg4.d.cts} +4 -4
  97. package/dist/{index-B2tIMFYh.d.cts.map → index-25CYKzg4.d.cts.map} +1 -1
  98. package/dist/{index-DpNf55K6.d.ts → index-6hu79Fof.d.ts} +4 -4
  99. package/dist/{index-DpNf55K6.d.ts.map → index-6hu79Fof.d.ts.map} +1 -1
  100. package/dist/{index-B0Fw1BAy.d.cts → index-AmOFlE3L.d.cts} +7 -7
  101. package/dist/{index-B0Fw1BAy.d.cts.map → index-AmOFlE3L.d.cts.map} +1 -1
  102. package/dist/{index-CZJ_lWQ0.d.ts → index-B-6CMF1H.d.ts} +4 -4
  103. package/dist/{index-CZJ_lWQ0.d.ts.map → index-B-6CMF1H.d.ts.map} +1 -1
  104. package/dist/{index-BqWtWLeP.d.cts → index-B6WiZaSk.d.cts} +19 -19
  105. package/dist/{index-BqWtWLeP.d.cts.map → index-B6WiZaSk.d.cts.map} +1 -1
  106. package/dist/{index-CKJumX37.d.cts → index-C9up4f3f.d.cts} +4 -4
  107. package/dist/{index-CKJumX37.d.cts.map → index-C9up4f3f.d.cts.map} +1 -1
  108. package/dist/{index-BLctuwc0.d.ts → index-CVINifvT.d.ts} +19 -19
  109. package/dist/{index-BLctuwc0.d.ts.map → index-CVINifvT.d.ts.map} +1 -1
  110. package/dist/{index-Yj6VEhqF.d.ts → index-CdjZBYTX.d.ts} +13 -13
  111. package/dist/{index-Yj6VEhqF.d.ts.map → index-CdjZBYTX.d.ts.map} +1 -1
  112. package/dist/{index-C6dMrOEm.d.cts → index-ChTPOej7.d.cts} +13 -13
  113. package/dist/{index-C6dMrOEm.d.cts.map → index-ChTPOej7.d.cts.map} +1 -1
  114. package/dist/{index-DGHBlmnV.d.ts → index-CuRn5Thx.d.ts} +7 -7
  115. package/dist/{index-DGHBlmnV.d.ts.map → index-CuRn5Thx.d.ts.map} +1 -1
  116. package/dist/{index-1Gzrph8R.d.cts → index-DMwNV_Br.d.cts} +4 -4
  117. package/dist/{index-1Gzrph8R.d.cts.map → index-DMwNV_Br.d.cts.map} +1 -1
  118. package/dist/{index-DZzfeV4O.d.cts → index-DiD7s23-.d.cts} +4 -4
  119. package/dist/{index-DZzfeV4O.d.cts.map → index-DiD7s23-.d.cts.map} +1 -1
  120. package/dist/{index-DJe_1ZdK.d.ts → index-Gs3zrYoY.d.ts} +4 -4
  121. package/dist/{index-DJe_1ZdK.d.ts.map → index-Gs3zrYoY.d.ts.map} +1 -1
  122. package/dist/{index-BExpqT81.d.ts → index-N5wvPOq3.d.ts} +4 -4
  123. package/dist/{index-BExpqT81.d.ts.map → index-N5wvPOq3.d.ts.map} +1 -1
  124. package/dist/index.cjs +23 -23
  125. package/dist/index.d.cts +11 -11
  126. package/dist/index.d.ts +11 -11
  127. package/dist/index.js +4 -4
  128. package/dist/partials/FieldCopyTestIdButton/index.cjs +1 -1
  129. package/dist/partials/FieldValidationError/index.cjs +1 -1
  130. package/dist/{useClientValidation-_8PTmv8i.d.ts → useClientValidation-BWElhQ91.d.ts} +2 -3
  131. package/dist/useClientValidation-BWElhQ91.d.ts.map +1 -0
  132. package/dist/{useClientValidation-Bu3mNZpf.d.cts → useClientValidation-DtnfCE5T.d.cts} +2 -3
  133. package/dist/{useClientValidation-_8PTmv8i.d.ts.map → useClientValidation-DtnfCE5T.d.cts.map} +1 -1
  134. package/dist/{useClientValidation-HqsAYK9K.cjs → useClientValidation-NKOuXuHV.cjs} +3 -3
  135. package/dist/{useClientValidation-HqsAYK9K.cjs.map → useClientValidation-NKOuXuHV.cjs.map} +1 -1
  136. package/dist/{useController-D3a0qufz.cjs → useController-DVRh86Zy.cjs} +2 -2
  137. package/dist/{useController-D3a0qufz.cjs.map → useController-DVRh86Zy.cjs.map} +1 -1
  138. package/dist/{useFormContext-BQeGmV8j.cjs → useFormContext-Bum4VP1o.cjs} +2 -2
  139. package/dist/{useFormContext-BQeGmV8j.cjs.map → useFormContext-Bum4VP1o.cjs.map} +1 -1
  140. package/dist/{useFormContext-CHA8GnKp.d.ts → useFormContext-DEMm-bsc.d.ts} +3 -3
  141. package/dist/{useFormContext-CHA8GnKp.d.ts.map → useFormContext-DEMm-bsc.d.ts.map} +1 -1
  142. package/dist/{useFormContext-C06aufHt.d.cts → useFormContext-Dey5DbWr.d.cts} +3 -3
  143. package/dist/{useFormContext-C06aufHt.d.cts.map → useFormContext-Dey5DbWr.d.cts.map} +1 -1
  144. package/dist/{useInputValueTransform-Cl6Xeso7.cjs → useInputValueTransform-DKH-7F9D.cjs} +2 -2
  145. package/dist/{useInputValueTransform-Cl6Xeso7.cjs.map → useInputValueTransform-DKH-7F9D.cjs.map} +1 -1
  146. package/dist/{useUniformField-j22kM31n.d.cts → useUniformField-DB8jF52F.d.cts} +2 -2
  147. package/dist/{useUniformField-j22kM31n.d.cts.map → useUniformField-DB8jF52F.d.cts.map} +1 -1
  148. package/dist/{useUniformField-BTBS1Kv-.d.ts → useUniformField-iHk8xYXN.d.ts} +2 -2
  149. package/dist/{useUniformField-BTBS1Kv-.d.ts.map → useUniformField-iHk8xYXN.d.ts.map} +1 -1
  150. package/dist/{useUniformFieldArray-CMHoo4o3.d.ts → useUniformFieldArray-B0SPtHeT.d.ts} +2 -2
  151. package/dist/{useUniformFieldArray-CMHoo4o3.d.ts.map → useUniformFieldArray-B0SPtHeT.d.ts.map} +1 -1
  152. package/dist/{useUniformFieldArray-CDEagafl.d.cts → useUniformFieldArray-okvikMJp.d.cts} +2 -2
  153. package/dist/{useUniformFieldArray-CDEagafl.d.cts.map → useUniformFieldArray-okvikMJp.d.cts.map} +1 -1
  154. package/dist/{useWatchUserChange-DkZ0Vqv3.cjs → useWatchUserChange-CBuIa5kU.cjs} +3 -3
  155. package/dist/{useWatchUserChange-DkZ0Vqv3.cjs.map → useWatchUserChange-CBuIa5kU.cjs.map} +1 -1
  156. package/package.json +6 -6
  157. package/dist/useClientValidation-Bu3mNZpf.d.cts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Grid-V1pCY2LC.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n children = null,\n className = undefined,\n testId = undefined,\n}: GridProps) => {\n return (\n <div className={cn('grid gap-6', className)} data-testid={testId}>\n {children}\n </div>\n );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;AACf,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,UAAU;EAAE,eAAa;EACvD;EACG,CAAA;;;;AClBV,IAAA,eAAe"}
1
+ {"version":3,"file":"Grid-DdYQQ_UM.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n children = null,\n className = undefined,\n testId = undefined,\n}: GridProps) => {\n return (\n <div className={cn('grid gap-6', className)} data-testid={testId}>\n {children}\n </div>\n );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;AACf,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,UAAU;EAAE,eAAa;EACvD;EACG,CAAA;;;;AClBV,IAAA,eAAe"}
@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
2
2
  __esModule: { value: true },
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
- const require_Input = require("../Input-C6kRsqx1.cjs");
5
+ const require_Input = require("../Input-BXJ4DSha.cjs");
6
6
  exports.Input = require_Input.Input;
7
7
  exports.default = require_Input.Input_default;
@@ -1,2 +1,2 @@
1
- import { n as InputProps, t as Input } from "../index-B2tIMFYh.cjs";
1
+ import { n as InputProps, t as Input } from "../index-25CYKzg4.cjs";
2
2
  export { Input, Input as default, InputProps };
@@ -1,2 +1,2 @@
1
- import { n as InputProps, t as Input } from "../index-BExpqT81.js";
1
+ import { n as InputProps, t as Input } from "../index-N5wvPOq3.js";
2
2
  export { Input, Input as default, InputProps };
@@ -1,4 +1,4 @@
1
- require("./FormContext-3GzWxXSS.cjs");
1
+ require("./FormContext-BrY1FQYR.cjs");
2
2
  const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
3
3
  const require_hooks_useInputValueDebounce_index = require("./hooks/useInputValueDebounce/index.cjs");
4
4
  let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -101,4 +101,4 @@ Object.defineProperty(exports, "Input_default", {
101
101
  }
102
102
  });
103
103
 
104
- //# sourceMappingURL=Input-C6kRsqx1.cjs.map
104
+ //# sourceMappingURL=Input-BXJ4DSha.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input-C6kRsqx1.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** shows clear button when input has value */\n clearable?: boolean;\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 */\n label?: ReactNode;\n /** form field name */\n name: string;\n /** callback that is fired when the value is cleared */\n onClear?: () => void;\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<string>;\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: _className = undefined,\n clearable = false,\n debounceDelay = 300,\n endContent = undefined,\n name,\n onClear = undefined,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n type = undefined,\n ...uniformFieldProps\n}: InputProps) => {\n const {\n ariaLabel,\n disabled,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n errorMessage,\n invalid,\n label,\n required,\n testId,\n resetField,\n } = useUniformField({ name, type, ...uniformFieldProps });\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n name,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n // If input is clearable add props for clearing input value\n const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n clearable\n ? {\n isClearable: true,\n onClear: () => {\n // if field had initial value we do not reset it\n // to that value, but clear it instead\n resetField(name, { defaultValue: null });\n // if onClear cb provided we call it\n if (onClear) {\n onClear();\n }\n },\n }\n : {};\n\n // classNames from slots\n const variants = inputVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n // Common props for both Input and NumberInput\n const commonProps = {\n ref,\n // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n 'aria-label':\n !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n // disable autocomplete\n autoComplete: 'off',\n classNames: {\n base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\n },\n 'data-testid': testId,\n endContent,\n errorMessage,\n id: testId,\n isDisabled: disabled,\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside' as const,\n name,\n onBlur,\n placeholder,\n radius: 'sm' as const,\n size,\n startContent,\n variant: 'bordered' as const,\n ...clearableProps,\n };\n\n // Render NumberInput for number type\n if (type === 'number') {\n // Parse the string value to number - use null for empty/cleared state to keep component controlled\n const numberValue =\n value !== '' && value != null && !Number.isNaN(Number(value))\n ? Number(value)\n : null;\n\n return (\n <HeroNumberInput\n {...commonProps}\n // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n // but it needs to be for empty/cleared state to be controlled\n value={numberValue}\n // Disable thousands separator to avoid parsing issues\n formatOptions={{\n useGrouping: false,\n }}\n // NumberInput onChange receives either an event or a number\n onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n if (typeof e === 'number') {\n // Convert number to synthetic event and pass through debounced onChange\n onChange({\n target: { value: String(e) },\n } as React.ChangeEvent<HTMLInputElement>);\n } else {\n // Pass event through debounced onChange\n onChange(e);\n }\n }}\n />\n );\n }\n\n // Render regular Input for text/password\n return (\n <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\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":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AAyCF,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,cAAA,GAAA,uBAAA,sBADW,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;GAGf,CAAA;;AAKN,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;EAAS,CAAA;;;;AC/LhF,IAAA,gBAAe"}
1
+ {"version":3,"file":"Input-BXJ4DSha.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** shows clear button when input has value */\n clearable?: boolean;\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 */\n label?: ReactNode;\n /** form field name */\n name: string;\n /** callback that is fired when the value is cleared */\n onClear?: () => void;\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<string>;\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: _className = undefined,\n clearable = false,\n debounceDelay = 300,\n endContent = undefined,\n name,\n onClear = undefined,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n type = undefined,\n ...uniformFieldProps\n}: InputProps) => {\n const {\n ariaLabel,\n disabled,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n errorMessage,\n invalid,\n label,\n required,\n testId,\n resetField,\n } = useUniformField({ name, type, ...uniformFieldProps });\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n name,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n // If input is clearable add props for clearing input value\n const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n clearable\n ? {\n isClearable: true,\n onClear: () => {\n // if field had initial value we do not reset it\n // to that value, but clear it instead\n resetField(name, { defaultValue: null });\n // if onClear cb provided we call it\n if (onClear) {\n onClear();\n }\n },\n }\n : {};\n\n // classNames from slots\n const variants = inputVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n // Common props for both Input and NumberInput\n const commonProps = {\n ref,\n // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n 'aria-label':\n !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n // disable autocomplete\n autoComplete: 'off',\n classNames: {\n base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\n },\n 'data-testid': testId,\n endContent,\n errorMessage,\n id: testId,\n isDisabled: disabled,\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside' as const,\n name,\n onBlur,\n placeholder,\n radius: 'sm' as const,\n size,\n startContent,\n variant: 'bordered' as const,\n ...clearableProps,\n };\n\n // Render NumberInput for number type\n if (type === 'number') {\n // Parse the string value to number - use null for empty/cleared state to keep component controlled\n const numberValue =\n value !== '' && value != null && !Number.isNaN(Number(value))\n ? Number(value)\n : null;\n\n return (\n <HeroNumberInput\n {...commonProps}\n // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n // but it needs to be for empty/cleared state to be controlled\n value={numberValue}\n // Disable thousands separator to avoid parsing issues\n formatOptions={{\n useGrouping: false,\n }}\n // NumberInput onChange receives either an event or a number\n onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n if (typeof e === 'number') {\n // Convert number to synthetic event and pass through debounced onChange\n onChange({\n target: { value: String(e) },\n } as React.ChangeEvent<HTMLInputElement>);\n } else {\n // Pass event through debounced onChange\n onChange(e);\n }\n }}\n />\n );\n }\n\n // Render regular Input for text/password\n return (\n <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\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":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AAyCF,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,cAAA,GAAA,uBAAA,sBADW,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;GAGf,CAAA;;AAKN,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;EAAS,CAAA;;;;AC/LhF,IAAA,gBAAe"}
@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
2
2
  __esModule: { value: true },
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
- const require_RadioBoxes = require("../RadioBoxes-DVxDhpbp.cjs");
5
+ const require_RadioBoxes = require("../RadioBoxes-Cim3InDW.cjs");
6
6
  exports.RadioBoxes = require_RadioBoxes.RadioBoxes;
7
7
  exports.default = require_RadioBoxes.RadioBoxes_default;
8
8
  exports.radioBoxVariants = require_RadioBoxes.radioBoxVariants;
@@ -1,2 +1,2 @@
1
- import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-1Gzrph8R.cjs";
1
+ import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-DMwNV_Br.cjs";
2
2
  export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };
@@ -1,2 +1,2 @@
1
- import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-DJe_1ZdK.js";
1
+ import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-Gs3zrYoY.js";
2
2
  export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };
@@ -1,2 +1,2 @@
1
- import { n as RadioBoxes, r as radioBoxVariants, t as RadioBoxes_default } from "../RadioBoxes-DNQCynvF.js";
1
+ import { n as RadioBoxes, r as radioBoxVariants, t as RadioBoxes_default } from "../RadioBoxes-BR3X986V.js";
2
2
  export { RadioBoxes, RadioBoxes_default as default, radioBoxVariants };
@@ -112,19 +112,16 @@ const RadioBoxes = ({ className = void 0, inline = false, name, options, ...unif
112
112
  onChange(convertToOriginalType(newValue));
113
113
  },
114
114
  children: options.map((option) => {
115
- if ("value" in option) {
116
- const optionTestId = slugify(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
117
- return /* @__PURE__ */ jsx(RadioBox, {
118
- classNames: boxClassNames,
119
- "data-testid": optionTestId,
120
- description: option.description,
121
- icon: option.icon,
122
- isDisabled: !!disabled || option.disabled,
123
- isInvalid: invalid,
124
- value: String(option.value),
125
- children: option.label ?? option.value
126
- }, String(option.value));
127
- }
115
+ if ("value" in option) return /* @__PURE__ */ jsx(RadioBox, {
116
+ classNames: boxClassNames,
117
+ "data-testid": slugify(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true }),
118
+ description: option.description,
119
+ icon: option.icon,
120
+ isDisabled: !!disabled || option.disabled,
121
+ isInvalid: invalid,
122
+ value: String(option.value),
123
+ children: option.label ?? option.value
124
+ }, String(option.value));
128
125
  return null;
129
126
  })
130
127
  });
@@ -135,4 +132,4 @@ var RadioBoxes_default = RadioBoxes;
135
132
  //#endregion
136
133
  export { RadioBoxes as n, radioBoxVariants as r, RadioBoxes_default as t };
137
134
 
138
- //# sourceMappingURL=RadioBoxes-DNQCynvF.js.map
135
+ //# sourceMappingURL=RadioBoxes-BR3X986V.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioBoxes-DNQCynvF.js","names":["HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport 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, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n slots: {\n base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n control: '',\n description: 'text-foreground opacity-70 text-small',\n icon: '',\n label: '',\n labelWrapper: 'grow',\n },\n variants: {\n isDisabled: {\n true: {\n base: 'pointer-events-none opacity-disabled',\n },\n },\n isInvalid: {\n true: {\n base: '!border-danger',\n },\n },\n },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n /** CSS class name */\n className?: ClassName;\n /** icon for the option */\n icon?: ReactNode;\n /** whether the radio is invalid */\n isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n classNames: _classNames = undefined,\n icon = undefined,\n isInvalid = false,\n ...props\n}: RadioBoxProps) => {\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 as HeroRadioProps);\n\n // classNames from slots\n const variants = radioBoxVariants({\n isDisabled,\n isInvalid,\n });\n const classNames = variantsToClassNames(\n variants,\n // @ts-expect-error not sure here, but it works\n _classNames,\n 'base',\n );\n\n return (\n <Component {...getBaseProps()} className={classNames.base}>\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n {!icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n {icon ? <div className={classNames.icon}>{icon}</div> : null}\n <div\n {...getLabelWrapperProps()}\n className={cn(\n getLabelWrapperProps().className,\n classNames.labelWrapper,\n )}\n >\n {children ? (\n <span\n {...getLabelProps()}\n className={cn(getLabelProps().className, classNames.label)}\n >\n {children}\n </span>\n ) : null}\n {description ? (\n <div className={classNames.description}>{description}</div>\n ) : null}\n </div>\n {icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n </Component>\n );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n boxBase: '',\n boxControl: '',\n boxDescription: '',\n boxLabel: '',\n boxLabelWrapper: '',\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 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\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 | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n ariaLabel,\n errorMessage,\n invalid,\n disabled,\n label,\n field: { onBlur, onChange, ref, value },\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const boxClassNames: RadioBoxProps['classNames'] = {\n base: classNames.boxBase,\n control: classNames.boxControl,\n description: classNames.boxDescription,\n label: classNames.boxLabel,\n labelWrapper: classNames.boxLabelWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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={String(option.value)}\n classNames={boxClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n isInvalid={invalid}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RadioBoxes-BR3X986V.js","names":["HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport 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, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n slots: {\n base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n control: '',\n description: 'text-foreground opacity-70 text-small',\n icon: '',\n label: '',\n labelWrapper: 'grow',\n },\n variants: {\n isDisabled: {\n true: {\n base: 'pointer-events-none opacity-disabled',\n },\n },\n isInvalid: {\n true: {\n base: '!border-danger',\n },\n },\n },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n /** CSS class name */\n className?: ClassName;\n /** icon for the option */\n icon?: ReactNode;\n /** whether the radio is invalid */\n isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n classNames: _classNames = undefined,\n icon = undefined,\n isInvalid = false,\n ...props\n}: RadioBoxProps) => {\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 as HeroRadioProps);\n\n // classNames from slots\n const variants = radioBoxVariants({\n isDisabled,\n isInvalid,\n });\n const classNames = variantsToClassNames(\n variants,\n // @ts-expect-error not sure here, but it works\n _classNames,\n 'base',\n );\n\n return (\n <Component {...getBaseProps()} className={classNames.base}>\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n {!icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n {icon ? <div className={classNames.icon}>{icon}</div> : null}\n <div\n {...getLabelWrapperProps()}\n className={cn(\n getLabelWrapperProps().className,\n classNames.labelWrapper,\n )}\n >\n {children ? (\n <span\n {...getLabelProps()}\n className={cn(getLabelProps().className, classNames.label)}\n >\n {children}\n </span>\n ) : null}\n {description ? (\n <div className={classNames.description}>{description}</div>\n ) : null}\n </div>\n {icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n </Component>\n );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n boxBase: '',\n boxControl: '',\n boxDescription: '',\n boxLabel: '',\n boxLabelWrapper: '',\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 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\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 | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n ariaLabel,\n errorMessage,\n invalid,\n disabled,\n label,\n field: { onBlur, onChange, ref, value },\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const boxClassNames: RadioBoxProps['classNames'] = {\n base: classNames.boxBase,\n control: classNames.boxControl,\n description: classNames.boxDescription,\n label: classNames.boxLabel,\n labelWrapper: classNames.boxLabelWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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={String(option.value)}\n classNames={boxClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n isInvalid={invalid}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- require("./FormContext-3GzWxXSS.cjs");
1
+ require("./FormContext-BrY1FQYR.cjs");
2
2
  const require_helpers_index = require("./helpers/index.cjs");
3
3
  const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
4
4
  let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -113,19 +113,16 @@ const RadioBoxes = ({ className = void 0, inline = false, name, options, ...unif
113
113
  onChange(convertToOriginalType(newValue));
114
114
  },
115
115
  children: options.map((option) => {
116
- if ("value" in option) {
117
- const optionTestId = (0, _fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
118
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioBox, {
119
- classNames: boxClassNames,
120
- "data-testid": optionTestId,
121
- description: option.description,
122
- icon: option.icon,
123
- isDisabled: !!disabled || option.disabled,
124
- isInvalid: invalid,
125
- value: String(option.value),
126
- children: option.label ?? option.value
127
- }, String(option.value));
128
- }
116
+ if ("value" in option) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioBox, {
117
+ classNames: boxClassNames,
118
+ "data-testid": (0, _fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true }),
119
+ description: option.description,
120
+ icon: option.icon,
121
+ isDisabled: !!disabled || option.disabled,
122
+ isInvalid: invalid,
123
+ value: String(option.value),
124
+ children: option.label ?? option.value
125
+ }, String(option.value));
129
126
  return null;
130
127
  })
131
128
  });
@@ -153,4 +150,4 @@ Object.defineProperty(exports, "radioBoxVariants", {
153
150
  }
154
151
  });
155
152
 
156
- //# sourceMappingURL=RadioBoxes-DVxDhpbp.cjs.map
153
+ //# sourceMappingURL=RadioBoxes-Cim3InDW.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioBoxes-DVxDhpbp.cjs","names":["VisuallyHidden","useUniformField","createOptionValueConverter","HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport 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, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n slots: {\n base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n control: '',\n description: 'text-foreground opacity-70 text-small',\n icon: '',\n label: '',\n labelWrapper: 'grow',\n },\n variants: {\n isDisabled: {\n true: {\n base: 'pointer-events-none opacity-disabled',\n },\n },\n isInvalid: {\n true: {\n base: '!border-danger',\n },\n },\n },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n /** CSS class name */\n className?: ClassName;\n /** icon for the option */\n icon?: ReactNode;\n /** whether the radio is invalid */\n isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n classNames: _classNames = undefined,\n icon = undefined,\n isInvalid = false,\n ...props\n}: RadioBoxProps) => {\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 as HeroRadioProps);\n\n // classNames from slots\n const variants = radioBoxVariants({\n isDisabled,\n isInvalid,\n });\n const classNames = variantsToClassNames(\n variants,\n // @ts-expect-error not sure here, but it works\n _classNames,\n 'base',\n );\n\n return (\n <Component {...getBaseProps()} className={classNames.base}>\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n {!icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n {icon ? <div className={classNames.icon}>{icon}</div> : null}\n <div\n {...getLabelWrapperProps()}\n className={cn(\n getLabelWrapperProps().className,\n classNames.labelWrapper,\n )}\n >\n {children ? (\n <span\n {...getLabelProps()}\n className={cn(getLabelProps().className, classNames.label)}\n >\n {children}\n </span>\n ) : null}\n {description ? (\n <div className={classNames.description}>{description}</div>\n ) : null}\n </div>\n {icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n </Component>\n );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n boxBase: '',\n boxControl: '',\n boxDescription: '',\n boxLabel: '',\n boxLabelWrapper: '',\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 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\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 | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n ariaLabel,\n errorMessage,\n invalid,\n disabled,\n label,\n field: { onBlur, onChange, ref, value },\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const boxClassNames: RadioBoxProps['classNames'] = {\n base: classNames.boxBase,\n control: classNames.boxControl,\n description: classNames.boxDescription,\n label: classNames.boxLabel,\n labelWrapper: classNames.boxLabelWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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={String(option.value)}\n classNames={boxClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n isInvalid={invalid}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RadioBoxes-Cim3InDW.cjs","names":["VisuallyHidden","useUniformField","createOptionValueConverter","HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport 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, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n slots: {\n base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n control: '',\n description: 'text-foreground opacity-70 text-small',\n icon: '',\n label: '',\n labelWrapper: 'grow',\n },\n variants: {\n isDisabled: {\n true: {\n base: 'pointer-events-none opacity-disabled',\n },\n },\n isInvalid: {\n true: {\n base: '!border-danger',\n },\n },\n },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n /** CSS class name */\n className?: ClassName;\n /** icon for the option */\n icon?: ReactNode;\n /** whether the radio is invalid */\n isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n classNames: _classNames = undefined,\n icon = undefined,\n isInvalid = false,\n ...props\n}: RadioBoxProps) => {\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 as HeroRadioProps);\n\n // classNames from slots\n const variants = radioBoxVariants({\n isDisabled,\n isInvalid,\n });\n const classNames = variantsToClassNames(\n variants,\n // @ts-expect-error not sure here, but it works\n _classNames,\n 'base',\n );\n\n return (\n <Component {...getBaseProps()} className={classNames.base}>\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n {!icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n {icon ? <div className={classNames.icon}>{icon}</div> : null}\n <div\n {...getLabelWrapperProps()}\n className={cn(\n getLabelWrapperProps().className,\n classNames.labelWrapper,\n )}\n >\n {children ? (\n <span\n {...getLabelProps()}\n className={cn(getLabelProps().className, classNames.label)}\n >\n {children}\n </span>\n ) : null}\n {description ? (\n <div className={classNames.description}>{description}</div>\n ) : null}\n </div>\n {icon ? (\n <span {...getWrapperProps()}>\n <span\n {...getControlProps()}\n className={cn(getControlProps().className, classNames.control)}\n />\n </span>\n ) : null}\n </Component>\n );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n boxBase: '',\n boxControl: '',\n boxDescription: '',\n boxLabel: '',\n boxLabelWrapper: '',\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 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\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 | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n ariaLabel,\n errorMessage,\n invalid,\n disabled,\n label,\n field: { onBlur, onChange, ref, value },\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const boxClassNames: RadioBoxProps['classNames'] = {\n base: classNames.boxBase,\n control: classNames.boxControl,\n description: classNames.boxDescription,\n label: classNames.boxLabel,\n labelWrapper: classNames.boxLabelWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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={String(option.value)}\n classNames={boxClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n isInvalid={invalid}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
2
2
  __esModule: { value: true },
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
- const require_RadioTabs = require("../RadioTabs-CFraIx6w.cjs");
5
+ const require_RadioTabs = require("../RadioTabs-t-x2XnuI.cjs");
6
6
  exports.RadioTabs = require_RadioTabs.RadioTabs;
7
7
  exports.default = require_RadioTabs.RadioTabs_default;
@@ -1,4 +1,4 @@
1
- const require_FormContext = require("./FormContext-3GzWxXSS.cjs");
1
+ const require_FormContext = require("./FormContext-BrY1FQYR.cjs");
2
2
  const require_helpers_index = require("./helpers/index.cjs");
3
3
  const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
4
4
  let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -130,4 +130,4 @@ Object.defineProperty(exports, "RadioTabs_default", {
130
130
  }
131
131
  });
132
132
 
133
- //# sourceMappingURL=RadioTabs-CFraIx6w.cjs.map
133
+ //# sourceMappingURL=RadioTabs-t-x2XnuI.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioTabs-CFraIx6w.cjs","names":["useUniformField","createOptionValueConverter","VisuallyHidden","HeroRadioGroup","Tabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n cursor: '',\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: '',\n tabBase: 'p-1',\n tabWrapper: [\n // border style\n 'rounded-medium border border-divider',\n // full width\n 'w-full',\n ],\n },\n },\n fullWidth: {\n true: {\n tabWrapper: 'w-full',\n },\n },\n isInvalid: {\n true: {\n tabWrapper: 'rounded-medium border-2 !border-danger',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: 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 | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: 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: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n fullWidth = false,\n inline = false,\n name,\n options,\n variant = undefined,\n ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create a ref for the visual radio group to forward focus\n const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n // Tabs component uses string keys internally\n key: String(option.value),\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({\n fullWidth,\n hasContent,\n isInvalid: invalid,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <>\n {/* Visually hidden input for React Hook Form focus management */}\n <VisuallyHidden>\n <input\n ref={ref}\n aria-label={ariaLabel}\n name={name}\n onBlur={onBlur}\n value={value ?? ''}\n onChange={(e) => {\n onChange(convertToOriginalType(e.target.value));\n }}\n onFocus={() => {\n // Forward focus to the first tab when RHF focuses this input\n const firstTab = visualRadioGroupRef.current?.querySelector(\n '[role=\"tab\"]',\n ) as HTMLElement;\n firstTab?.focus();\n }}\n />\n </VisuallyHidden>\n\n <HeroRadioGroup\n ref={visualRadioGroupRef}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={`${name}_radiotabs`}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n // make sure component is controlled (convert to string for Tabs)\n selectedKey={value != null ? String(value) : ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n onSelectionChange={(key) => {\n if (key != null) {\n onChange(convertToOriginalType(key));\n }\n }}\n />\n </HeroRadioGroup>\n </>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RadioTabs-t-x2XnuI.cjs","names":["useUniformField","createOptionValueConverter","VisuallyHidden","HeroRadioGroup","Tabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n cursor: '',\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: '',\n tabBase: 'p-1',\n tabWrapper: [\n // border style\n 'rounded-medium border border-divider',\n // full width\n 'w-full',\n ],\n },\n },\n fullWidth: {\n true: {\n tabWrapper: 'w-full',\n },\n },\n isInvalid: {\n true: {\n tabWrapper: 'rounded-medium border-2 !border-danger',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: 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 | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: 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: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n fullWidth = false,\n inline = false,\n name,\n options,\n variant = undefined,\n ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create a ref for the visual radio group to forward focus\n const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n // Tabs component uses string keys internally\n key: String(option.value),\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({\n fullWidth,\n hasContent,\n isInvalid: invalid,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <>\n {/* Visually hidden input for React Hook Form focus management */}\n <VisuallyHidden>\n <input\n ref={ref}\n aria-label={ariaLabel}\n name={name}\n onBlur={onBlur}\n value={value ?? ''}\n onChange={(e) => {\n onChange(convertToOriginalType(e.target.value));\n }}\n onFocus={() => {\n // Forward focus to the first tab when RHF focuses this input\n const firstTab = visualRadioGroupRef.current?.querySelector(\n '[role=\"tab\"]',\n ) as HTMLElement;\n firstTab?.focus();\n }}\n />\n </VisuallyHidden>\n\n <HeroRadioGroup\n ref={visualRadioGroupRef}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={`${name}_radiotabs`}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n // make sure component is controlled (convert to string for Tabs)\n selectedKey={value != null ? String(value) : ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n onSelectionChange={(key) => {\n if (key != null) {\n onChange(convertToOriginalType(key));\n }\n }}\n />\n </HeroRadioGroup>\n </>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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"}
@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
2
2
  __esModule: { value: true },
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
- const require_Radios = require("../Radios-OhSB1oFo.cjs");
5
+ const require_Radios = require("../Radios-CjEFdyD6.cjs");
6
6
  exports.Radios = require_Radios.Radios;
7
7
  exports.default = require_Radios.Radios_default;
@@ -1,2 +1,2 @@
1
- import { n as RadiosProps, t as Radios } from "../index-CKJumX37.cjs";
1
+ import { n as RadiosProps, t as Radios } from "../index-C9up4f3f.cjs";
2
2
  export { Radios, Radios as default, RadiosProps };
@@ -1,2 +1,2 @@
1
- import { n as RadiosProps, t as Radios } from "../index-DpNf55K6.js";
1
+ import { n as RadiosProps, t as Radios } from "../index-6hu79Fof.js";
2
2
  export { Radios, Radios as default, RadiosProps };
@@ -1,2 +1,2 @@
1
- import { n as Radios, t as Radios_default } from "../Radios-C-Zf3Yij.js";
1
+ import { n as Radios, t as Radios_default } from "../Radios-CYwW3bZa.js";
2
2
  export { Radios, Radios_default as default };
@@ -53,16 +53,13 @@ const Radios = ({ className = void 0, inline = false, name, options, ...uniformF
53
53
  onChange(convertToOriginalType(newValue));
54
54
  },
55
55
  children: options.map((option) => {
56
- if ("value" in option) {
57
- const optionTestId = slugify(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
58
- return /* @__PURE__ */ jsx(Radio, {
59
- classNames: itemClassNames,
60
- "data-testid": optionTestId,
61
- isDisabled: !!disabled || option.disabled,
62
- value: String(option.value),
63
- children: option.label ?? option.value
64
- }, String(option.value));
65
- }
56
+ if ("value" in option) return /* @__PURE__ */ jsx(Radio, {
57
+ classNames: itemClassNames,
58
+ "data-testid": slugify(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true }),
59
+ isDisabled: !!disabled || option.disabled,
60
+ value: String(option.value),
61
+ children: option.label ?? option.value
62
+ }, String(option.value));
66
63
  return null;
67
64
  })
68
65
  });
@@ -73,4 +70,4 @@ var Radios_default = Radios;
73
70
  //#endregion
74
71
  export { Radios as n, Radios_default as t };
75
72
 
76
- //# sourceMappingURL=Radios-C-Zf3Yij.js.map
73
+ //# sourceMappingURL=Radios-CYwW3bZa.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Radios-C-Zf3Yij.js","names":["HeroRadioGroup","HeroRadio"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\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',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radiosVariants();\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 ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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 <HeroRadio\n key={String(option.value)}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAIrE,MAAM,aAAa,qBADF,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,oBAACA,YAAD;EACO;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,UAAD,EAAA,UAAS,OAAe,CAAA,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,eAAe,QACnB,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,oBAACC,OAAD;KAEE,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;KACd,EAPL,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;EACa,CAAA;;;;AC/IrB,IAAA,iBAAe"}
1
+ {"version":3,"file":"Radios-CYwW3bZa.js","names":["HeroRadioGroup","HeroRadio"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\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',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radiosVariants();\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 ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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 <HeroRadio\n key={String(option.value)}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAIrE,MAAM,aAAa,qBADF,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,oBAACA,YAAD;EACO;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,UAAD,EAAA,UAAS,OAAe,CAAA,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,OAKb,QACE,oBAACC,OAAD;IAEE,YAAY;IACZ,eARiB,QACnB,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;IAMG,YAAY,CAAC,CAAC,YAAY,OAAO;IACjC,OAAO,OAAO,OAAO,MAAM;cAE1B,OAAO,SAAS,OAAO;IACd,EAPL,OAAO,OAAO,MAAM,CAOf;AAGhB,UAAO;IACP;EACa,CAAA;;;;AC/IrB,IAAA,iBAAe"}
@@ -1,4 +1,4 @@
1
- require("./FormContext-3GzWxXSS.cjs");
1
+ require("./FormContext-BrY1FQYR.cjs");
2
2
  const require_helpers_index = require("./helpers/index.cjs");
3
3
  const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
4
4
  let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -54,16 +54,13 @@ const Radios = ({ className = void 0, inline = false, name, options, ...uniformF
54
54
  onChange(convertToOriginalType(newValue));
55
55
  },
56
56
  children: options.map((option) => {
57
- if ("value" in option) {
58
- const optionTestId = (0, _fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
59
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_radio.Radio, {
60
- classNames: itemClassNames,
61
- "data-testid": optionTestId,
62
- isDisabled: !!disabled || option.disabled,
63
- value: String(option.value),
64
- children: option.label ?? option.value
65
- }, String(option.value));
66
- }
57
+ if ("value" in option) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_radio.Radio, {
58
+ classNames: itemClassNames,
59
+ "data-testid": (0, _fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true }),
60
+ isDisabled: !!disabled || option.disabled,
61
+ value: String(option.value),
62
+ children: option.label ?? option.value
63
+ }, String(option.value));
67
64
  return null;
68
65
  })
69
66
  });
@@ -85,4 +82,4 @@ Object.defineProperty(exports, "Radios_default", {
85
82
  }
86
83
  });
87
84
 
88
- //# sourceMappingURL=Radios-OhSB1oFo.cjs.map
85
+ //# sourceMappingURL=Radios-CjEFdyD6.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Radios-OhSB1oFo.cjs","names":["useUniformField","createOptionValueConverter","HeroRadioGroup","HeroRadio"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\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',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radiosVariants();\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 ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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 <HeroRadio\n key={String(option.value)}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;AAaA,MAAa,kBAAA,GAAA,uBAAA,IAAoB,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,oCAAAA,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0BC,sBAAAA,2BAA2B,QAAQ;CAIrE,MAAM,cAAA,GAAA,uBAAA,sBADW,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;EACO;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UAAS,OAAe,CAAA,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,gBAAA,GAAA,uBAAA,SACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KAEE,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;KACd,EAPL,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;EACa,CAAA;;;;AC/IrB,IAAA,iBAAe"}
1
+ {"version":3,"file":"Radios-CjEFdyD6.cjs","names":["useUniformField","createOptionValueConverter","HeroRadioGroup","HeroRadio"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\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',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n ariaLabel,\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = radiosVariants();\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 ref={ref}\n aria-label={ariaLabel}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n value={value != null ? String(value) : ''}\n onValueChange={(newValue) => {\n onChange(convertToOriginalType(newValue));\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 <HeroRadio\n key={String(option.value)}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n value={String(option.value)}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;AAaA,MAAa,kBAAA,GAAA,uBAAA,IAAoB,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,oCAAAA,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0BC,sBAAAA,2BAA2B,QAAQ;CAIrE,MAAM,cAAA,GAAA,uBAAA,sBADW,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;EACO;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAA,UAAS,OAAe,CAAA,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,OAKb,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;IAEE,YAAY;IACZ,gBAAA,GAAA,uBAAA,SAPF,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;IAMG,YAAY,CAAC,CAAC,YAAY,OAAO;IACjC,OAAO,OAAO,OAAO,MAAM;cAE1B,OAAO,SAAS,OAAO;IACd,EAPL,OAAO,OAAO,MAAM,CAOf;AAGhB,UAAO;IACP;EACa,CAAA;;;;AC/IrB,IAAA,iBAAe"}
@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
2
2
  __esModule: { value: true },
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
- const require_Select = require("../Select-fEJPVWJa.cjs");
5
+ const require_Select = require("../Select-BEed8xan.cjs");
6
6
  exports.Select = require_Select.Select;
7
7
  exports.default = require_Select.Select_default;
@@ -1,2 +1,2 @@
1
- import { n as SelectProps, t as Select } from "../index-B0Fw1BAy.cjs";
1
+ import { n as SelectProps, t as Select } from "../index-AmOFlE3L.cjs";
2
2
  export { Select, Select as default, SelectProps };
@@ -1,2 +1,2 @@
1
- import { n as SelectProps, t as Select } from "../index-DGHBlmnV.js";
1
+ import { n as SelectProps, t as Select } from "../index-CuRn5Thx.js";
2
2
  export { Select, Select as default, SelectProps };
@@ -1,2 +1,2 @@
1
- import { n as Select, t as Select_default } from "../Select-DMpCAYLB.js";
1
+ import { n as Select, t as Select_default } from "../Select-BILyyM7Z.js";
2
2
  export { Select, Select_default as default };