@clubmed/trident-ui 1.3.0-beta.1 → 1.3.0-beta.11

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 (227) hide show
  1. package/CHANGELOG.md +963 -862
  2. package/README.md +11 -1
  3. package/assets/style.css +1 -1
  4. package/atoms/Clickable/Clickable.d.ts +5 -0
  5. package/atoms/Clickable/Clickable.js +25 -0
  6. package/atoms/Clickable/Clickable.js.map +1 -0
  7. package/atoms/Heading/Heading.d.ts +6 -0
  8. package/atoms/Heading/Heading.js +14 -0
  9. package/atoms/Heading/Heading.js.map +1 -0
  10. package/atoms/Heading/HeadingGroup.d.ts +7 -0
  11. package/atoms/Heading/HeadingGroup.js +15 -0
  12. package/atoms/Heading/HeadingGroup.js.map +1 -0
  13. package/atoms/Image/Image.d.ts +7 -0
  14. package/atoms/Image/Image.js +18 -0
  15. package/atoms/Image/Image.js.map +1 -0
  16. package/atoms/Prose/Prose.d.ts +5 -0
  17. package/atoms/Prose/Prose.js +18 -0
  18. package/atoms/Prose/Prose.js.map +1 -0
  19. package/chunks/ResizeObserver.js +287 -0
  20. package/chunks/ResizeObserver.js.map +1 -0
  21. package/chunks/_commonjsHelpers.js +24 -4
  22. package/chunks/_commonjsHelpers.js.map +1 -1
  23. package/chunks/index.js.map +1 -1
  24. package/chunks/plugin.js +53 -0
  25. package/chunks/plugin.js.map +1 -0
  26. package/contexts/Device.d.ts +2 -22
  27. package/contexts/Device.js +5 -59
  28. package/contexts/Device.js.map +1 -1
  29. package/contexts/Devices/Device.d.ts +11 -0
  30. package/contexts/Devices/Device.js +23 -0
  31. package/contexts/Devices/Device.js.map +1 -0
  32. package/contexts/Devices/hooks/useQueries.d.ts +6 -0
  33. package/contexts/Devices/hooks/useQueries.js +24 -0
  34. package/contexts/Devices/hooks/useQueries.js.map +1 -0
  35. package/contexts/Devices/reducers/reducer.d.ts +25 -0
  36. package/contexts/Devices/reducers/reducer.js +50 -0
  37. package/contexts/Devices/reducers/reducer.js.map +1 -0
  38. package/contexts/TridentUIConfig.js +228 -228
  39. package/contexts/TridentUIConfig.js.map +1 -1
  40. package/helpers/colors/colors.d.ts +108 -0
  41. package/helpers/colors/colors.js +132 -0
  42. package/helpers/colors/colors.js.map +1 -0
  43. package/hooks/keyboard.constants.js.map +1 -1
  44. package/hooks/useInternalStatus.js.map +1 -1
  45. package/hooks/useKeyboardControls.js.map +1 -1
  46. package/hooks/useResizeObserver.d.ts +2 -0
  47. package/hooks/useResizeObserver.js +84 -0
  48. package/hooks/useResizeObserver.js.map +1 -0
  49. package/hooks/useSafeBoop.js.map +1 -1
  50. package/hooks/useValue.js.map +1 -1
  51. package/molecules/Arrows/Arrows.d.ts +16 -0
  52. package/molecules/Arrows/Arrows.js +66 -0
  53. package/molecules/Arrows/Arrows.js.map +1 -0
  54. package/molecules/Arrows/ArrowsLabels.d.js +2 -0
  55. package/molecules/Arrows/ArrowsLabels.d.js.map +1 -0
  56. package/molecules/Arrows.d.ts +1 -50
  57. package/molecules/Arrows.js +2 -56
  58. package/molecules/Arrows.js.map +1 -1
  59. package/molecules/Avatar.js.map +1 -1
  60. package/molecules/Backdrop.js.map +1 -1
  61. package/molecules/Breadcrumb.js +8 -9
  62. package/molecules/Breadcrumb.js.map +1 -1
  63. package/molecules/Buttons/ArrowButton.d.ts +7 -0
  64. package/molecules/Buttons/ArrowButton.js +14 -0
  65. package/molecules/Buttons/ArrowButton.js.map +1 -0
  66. package/molecules/Buttons/Button.d.ts +15 -32
  67. package/molecules/Buttons/Button.js +52 -42
  68. package/molecules/Buttons/Button.js.map +1 -1
  69. package/molecules/Buttons/ButtonAnchor.d.ts +7 -3
  70. package/molecules/Buttons/ButtonAnchor.js +17 -36
  71. package/molecules/Buttons/ButtonAnchor.js.map +1 -1
  72. package/molecules/Buttons/ButtonContent.d.ts +12 -4
  73. package/molecules/Buttons/ButtonContent.js +14 -8
  74. package/molecules/Buttons/ButtonContent.js.map +1 -1
  75. package/molecules/Buttons/FakeButton.d.ts +8 -0
  76. package/molecules/Buttons/FakeButton.js +8 -0
  77. package/molecules/Buttons/FakeButton.js.map +1 -0
  78. package/molecules/Buttons/InertButton.d.ts +4 -0
  79. package/molecules/Buttons/InertButton.js +15 -31
  80. package/molecules/Buttons/InertButton.js.map +1 -1
  81. package/molecules/Buttons/v2/Button.d.ts +2289 -0
  82. package/molecules/Buttons/v2/Button.js +57 -0
  83. package/molecules/Buttons/v2/Button.js.map +1 -0
  84. package/molecules/Buttons/v2/Button.type.d.ts +57 -0
  85. package/molecules/Buttons/v2/Button.type.js +45 -0
  86. package/molecules/Buttons/v2/Button.type.js.map +1 -0
  87. package/molecules/Card.d.ts +1 -11
  88. package/molecules/Card.js +2 -35
  89. package/molecules/Card.js.map +1 -1
  90. package/molecules/Cards/Card.d.ts +13 -0
  91. package/molecules/Cards/Card.js +22 -0
  92. package/molecules/Cards/Card.js.map +1 -0
  93. package/molecules/Cards/CardAspectRatios.d.ts +6 -0
  94. package/molecules/Cards/CardAspectRatios.js +10 -0
  95. package/molecules/Cards/CardAspectRatios.js.map +1 -0
  96. package/molecules/Cards/CardBackground.d.ts +4 -0
  97. package/molecules/Cards/CardBackground.js +30 -0
  98. package/molecules/Cards/CardBackground.js.map +1 -0
  99. package/molecules/Cards/CardBackgroundContext.d.ts +6 -0
  100. package/molecules/Cards/CardBackgroundContext.js +10 -0
  101. package/molecules/Cards/CardBackgroundContext.js.map +1 -0
  102. package/molecules/Cards/CardClickable.d.ts +6 -0
  103. package/molecules/Cards/CardClickable.js +37 -0
  104. package/molecules/Cards/CardClickable.js.map +1 -0
  105. package/molecules/Cards/ExpandableCard.d.ts +14 -0
  106. package/molecules/Cards/ExpandableCard.js +80 -0
  107. package/molecules/Cards/ExpandableCard.js.map +1 -0
  108. package/molecules/Cards/v2/Card.d.ts +15 -0
  109. package/molecules/Cards/v2/Card.js +34 -0
  110. package/molecules/Cards/v2/Card.js.map +1 -0
  111. package/molecules/Chip.d.ts +9 -0
  112. package/molecules/Chip.js +31 -0
  113. package/molecules/Chip.js.map +1 -0
  114. package/molecules/Chip.themes.d.ts +12 -0
  115. package/molecules/Chip.themes.js +24 -0
  116. package/molecules/Chip.themes.js.map +1 -0
  117. package/molecules/ElasticHeight.d.ts +6 -27
  118. package/molecules/ElasticHeight.js +28 -33
  119. package/molecules/ElasticHeight.js.map +1 -1
  120. package/molecules/Forms/Checkboxes/Checkbox.js +12 -13
  121. package/molecules/Forms/Checkboxes/Checkbox.js.map +1 -1
  122. package/molecules/Forms/Checkboxes/Checkboxes.js.map +1 -1
  123. package/molecules/Forms/DateField.d.ts +1 -1
  124. package/molecules/Forms/DateField.js +142 -116
  125. package/molecules/Forms/DateField.js.map +1 -1
  126. package/molecules/Forms/Filter.js +12 -13
  127. package/molecules/Forms/Filter.js.map +1 -1
  128. package/molecules/Forms/FormControl.js +15 -16
  129. package/molecules/Forms/FormControl.js.map +1 -1
  130. package/molecules/Forms/FormLabel.js.map +1 -1
  131. package/molecules/Forms/NumberField.d.ts +28 -28
  132. package/molecules/Forms/NumberField.js +68 -68
  133. package/molecules/Forms/NumberField.js.map +1 -1
  134. package/molecules/Forms/Password/Password.js +10 -11
  135. package/molecules/Forms/Password/Password.js.map +1 -1
  136. package/molecules/Forms/Password/ValidationMessage.js +8 -9
  137. package/molecules/Forms/Password/ValidationMessage.js.map +1 -1
  138. package/molecules/Forms/Radios/Radio.d.ts +3 -0
  139. package/molecules/Forms/Radios/Radio.js +21 -20
  140. package/molecules/Forms/Radios/Radio.js.map +1 -1
  141. package/molecules/Forms/Radios/RadioGroup.js +72 -33
  142. package/molecules/Forms/Radios/RadioGroup.js.map +1 -1
  143. package/molecules/Forms/Range.js +124 -406
  144. package/molecules/Forms/Range.js.map +1 -1
  145. package/molecules/Forms/Select.d.ts +1 -1
  146. package/molecules/Forms/Select.js +3 -4
  147. package/molecules/Forms/Select.js.map +1 -1
  148. package/molecules/Forms/Switch.js.map +1 -1
  149. package/molecules/Forms/TextField.d.ts +1 -1
  150. package/molecules/Forms/TextField.js +7 -8
  151. package/molecules/Forms/TextField.js.map +1 -1
  152. package/molecules/HamburgerIcon.js.map +1 -1
  153. package/molecules/Link.d.ts +1 -1
  154. package/molecules/Link.js +8 -9
  155. package/molecules/Link.js.map +1 -1
  156. package/molecules/Loader.js.map +1 -1
  157. package/molecules/Pagination.d.ts +2 -1
  158. package/molecules/Pagination.helper.js.map +1 -1
  159. package/molecules/Pagination.js +67 -45
  160. package/molecules/Pagination.js.map +1 -1
  161. package/molecules/Popin.js +16 -16
  162. package/molecules/Popin.js.map +1 -1
  163. package/molecules/Spinner.js.map +1 -1
  164. package/molecules/Tabs/Tab.d.ts +1 -1
  165. package/molecules/Tabs/Tab.js +51 -49
  166. package/molecules/Tabs/Tab.js.map +1 -1
  167. package/molecules/Tabs/TabList.js.map +1 -1
  168. package/molecules/Tabs/TabPanel.js +31 -29
  169. package/molecules/Tabs/TabPanel.js.map +1 -1
  170. package/molecules/Tabs/Tabs.js +7 -9
  171. package/molecules/Tabs/Tabs.js.map +1 -1
  172. package/molecules/Tabs/TabsBody.js.map +1 -1
  173. package/molecules/Tabs/context/TabControl.d.ts +29 -27
  174. package/molecules/Tabs/context/TabControl.js +67 -66
  175. package/molecules/Tabs/context/TabControl.js.map +1 -1
  176. package/molecules/Tabs/hooks/tabControl.d.ts +25 -14
  177. package/molecules/Tabs/hooks/tabControl.js +26 -23
  178. package/molecules/Tabs/hooks/tabControl.js.map +1 -1
  179. package/molecules/Tabs/theme.js.map +1 -1
  180. package/molecules/Tag.d.ts +43 -0
  181. package/molecules/Tag.js +73 -0
  182. package/molecules/Tag.js.map +1 -0
  183. package/package.json +34 -10
  184. package/styles/globals.css +16 -15
  185. package/tailwind/colors.d.ts +38 -0
  186. package/tailwind/colors.js +44 -0
  187. package/tailwind/colors.js.map +1 -0
  188. package/tailwind/plugins/animationDelay.d.ts +4 -0
  189. package/tailwind/plugins/animationDelay.js +15 -0
  190. package/tailwind/plugins/animationDelay.js.map +1 -0
  191. package/tailwind/plugins/hocus.d.ts +4 -0
  192. package/tailwind/plugins/hocus.js +11 -0
  193. package/tailwind/plugins/hocus.js.map +1 -0
  194. package/tailwind/plugins/lineClampFix.d.ts +4 -0
  195. package/tailwind/plugins/lineClampFix.js +13 -0
  196. package/tailwind/plugins/lineClampFix.js.map +1 -0
  197. package/tailwind/plugins/popover.d.ts +4 -0
  198. package/tailwind/plugins/popover.js +8 -0
  199. package/tailwind/plugins/popover.js.map +1 -0
  200. package/tailwind/plugins/startingStyle.d.ts +4 -0
  201. package/tailwind/plugins/startingStyle.js +8 -0
  202. package/tailwind/plugins/startingStyle.js.map +1 -0
  203. package/tailwind/plugins/transitionBehavior.d.ts +4 -0
  204. package/tailwind/plugins/transitionBehavior.js +11 -0
  205. package/tailwind/plugins/transitionBehavior.js.map +1 -0
  206. package/tailwind/tailwind.preset.d.ts +730 -510
  207. package/tailwind/tailwind.preset.js +705 -631
  208. package/tailwind/tailwind.preset.js.map +1 -1
  209. package/types/Colors.d.js +2 -0
  210. package/types/Colors.d.js.map +1 -0
  211. package/types/Devices.d.ts +8 -0
  212. package/types/Devices.js +11 -0
  213. package/types/Devices.js.map +1 -0
  214. package/types/Direction.d.js +2 -0
  215. package/types/Direction.d.js.map +1 -0
  216. package/types/LiteralUnion.d.js +2 -0
  217. package/types/LiteralUnion.d.js.map +1 -0
  218. package/types/ScrollerLabels.d.js +2 -0
  219. package/types/ScrollerLabels.d.js.map +1 -0
  220. package/types/Theme.d.js +2 -0
  221. package/types/Theme.d.js.map +1 -0
  222. package/molecules/Buttons/Button.helpers.d.ts +0 -8
  223. package/molecules/Buttons/Button.helpers.js +0 -12
  224. package/molecules/Buttons/Button.helpers.js.map +0 -1
  225. package/molecules/Buttons/Button.themes.d.ts +0 -1
  226. package/molecules/Buttons/Button.themes.js +0 -25
  227. package/molecules/Buttons/Button.themes.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled && setValue(!checked);\n }}\n defaultChecked={checked}\n data-name=\"Radio\"\n disabled={disabled}\n value={value}\n />\n\n <span style={{ height: size, width: size }}>\n <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n </svg>\n </span>\n </span>\n\n {children}\n </label>\n );\n}\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAC,gBAAAW,EAAA,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACb,iBAAAJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,gBAAAW,EAAA,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAK,GACvC,UAAC,gBAAAU,EAAA,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,8BAA+B,CAAA,EAC9E,CAAA,GACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled && setValue(!checked);\n }}\n defaultChecked={checked}\n data-name=\"Radio\"\n disabled={disabled}\n value={value}\n />\n\n <span style={{ height: size, width: size }}>\n <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n </svg>\n </span>\n </span>\n\n {children}\n </label>\n );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}
@@ -1,37 +1,76 @@
1
- import { jsx as v } from "react/jsx-runtime";
2
- import { useId as x, Children as I, isValidElement as b, cloneElement as C } from "react";
3
- import { useValue as h } from "../../../hooks/useValue.js";
4
- import { c as E } from "../../../chunks/index.js";
5
- function G(l) {
6
- const s = x(), {
7
- id: a = s,
8
- name: r = a,
9
- children: t,
10
- value: i,
11
- defaultValue: m,
12
- onChange: u,
13
- disabled: d,
14
- readOnly: p,
15
- tabIndex: c = 0,
16
- ...n
17
- } = l, { value: f, setValue: V } = h({
18
- name: r,
19
- initialValue: i,
20
- defaultValue: m,
21
- onChange: u
22
- });
23
- return /* @__PURE__ */ v("div", { ...n, className: E("flex gap-12", n.className), role: "radiogroup", children: I.map(t, (e, o) => b(e) ? C(e, {
24
- ...e.props,
25
- name: r,
26
- id: `${a}-${o}`,
27
- disabled: d,
28
- readOnly: p,
29
- tabIndex: c + o + 1,
30
- checked: f === e.props.value,
31
- onChange(N, g) {
32
- V(g);
1
+ import { jsx as N } from "react/jsx-runtime";
2
+ import { useId as O, Children as V, isValidElement as W, cloneElement as y } from "react";
3
+ import { useValue as _ } from "../../../hooks/useValue.js";
4
+ import { c as h } from "../../../chunks/index.js";
5
+ import { KEY as l } from "../../../hooks/keyboard.constants.js";
6
+ function G(R) {
7
+ const g = O(), {
8
+ id: i = g,
9
+ name: p = i,
10
+ children: v,
11
+ value: I,
12
+ defaultValue: E,
13
+ onChange: b,
14
+ disabled: m,
15
+ readOnly: d,
16
+ tabIndex: A = 0,
17
+ ...f
18
+ } = R, { value: s, setValue: c } = _({
19
+ name: p,
20
+ initialValue: I,
21
+ defaultValue: E,
22
+ onChange: b
23
+ }), C = (e, o) => {
24
+ var r, t;
25
+ let a = o;
26
+ const n = e.target.parentNode.querySelectorAll('[role="radio"]');
27
+ if (e.key === l.ARROW_RIGHT || e.key === l.ARROW_DOWN)
28
+ a = (o + 1) % n.length, (r = n[a]) == null || r.focus();
29
+ else if (e.key === l.ARROW_LEFT || e.key === l.ARROW_UP)
30
+ a = (o - 1 + n.length) % n.length, (t = n[a]) == null || t.focus();
31
+ else if (e.key === l.SPACE || e.key === l.ENTER) {
32
+ c(n[o].dataset.value);
33
+ return;
33
34
  }
34
- }) : e) });
35
+ };
36
+ function k(e, o) {
37
+ return s == null || s === "" ? A === o ? 0 : -1 : e ? 0 : -1;
38
+ }
39
+ return /* @__PURE__ */ N("div", { ...f, className: h("flex gap-12", f.className), role: "radiogroup", children: V.map(v, (e, o) => {
40
+ if (!W(e))
41
+ return e;
42
+ const a = e.type.displayName, n = e.props.value, r = s === n;
43
+ return a != null && a.includes("Button") ? y(e, {
44
+ ...e.props,
45
+ value: void 0,
46
+ role: "radio",
47
+ color: r ? "black" : "white",
48
+ name: p,
49
+ component: "span",
50
+ id: `${i}-${o}`,
51
+ disabled: m,
52
+ readOnly: d,
53
+ tabIndex: k(r, o),
54
+ "data-value": n,
55
+ "aria-checked": s === n,
56
+ onKeyDown: (t) => C(t, o),
57
+ onClick() {
58
+ var t, u;
59
+ c(n), (u = (t = e.props) == null ? void 0 : t.onClick) == null || u.call(t, n);
60
+ }
61
+ }) : y(e, {
62
+ ...e.props,
63
+ name: p,
64
+ id: `${i}-${o}`,
65
+ disabled: m,
66
+ readOnly: d,
67
+ tabIndex: k(r, o),
68
+ checked: r,
69
+ onChange(t, u) {
70
+ c(u);
71
+ }
72
+ });
73
+ }) });
35
74
  }
36
75
  export {
37
76
  G as RadioGroup
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\n\nexport interface RadioGroupProps<Value = string>\n extends Pick<\n FormControlProps<Value>,\n | 'id'\n | 'name'\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'readOnly'\n | 'tabIndex'\n | 'description'\n | 'validationStatus'\n | 'errorMessage'\n >,\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n children,\n value: initialValue,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n tabIndex = 0,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n defaultValue: defaultValue as Value,\n onChange,\n });\n\n return (\n <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n {Children.map(children, (child, index) => {\n return isValidElement(child)\n ? cloneElement(child, {\n ...child.props,\n name,\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: tabIndex + index + 1,\n checked: value === (child.props as RadioProps).value,\n onChange(_: string, value: Value) {\n setValue(value);\n },\n } as RadioProps<Value>)\n : child;\n })}\n </div>\n );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","classnames","Children","child","index","isValidElement","cloneElement","_"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EACD,IAAAZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAS,IAAIC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD;AAED,2BACG,OAAK,EAAA,GAAGI,GAAM,WAAWI,EAAW,eAAeJ,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAK,EAAS,IAAIZ,GAAU,CAACa,GAAOC,MACvBC,EAAeF,CAAK,IACvBG,EAAaH,GAAO;AAAA,IAClB,GAAGA,EAAM;AAAA,IACT,MAAAd;AAAA,IACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,IAClB,UAAAV;AAAA,IACA,UAAAC;AAAA,IACA,UAAUC,IAAWQ,IAAQ;AAAA,IAC7B,SAASN,MAAWK,EAAM,MAAqB;AAAA,IAC/C,SAASI,GAAWT,GAAc;AAChC,MAAAC,EAASD,CAAK;AAAA,IAChB;AAAA,EACoB,CAAA,IACtBK,CACL,EACH,CAAA;AAEJ;"}
1
+ {"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n useId,\n type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n extends Pick<\n FormControlProps<Value>,\n | 'id'\n | 'name'\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'readOnly'\n | 'tabIndex'\n | 'description'\n | 'validationStatus'\n | 'errorMessage'\n >,\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n children,\n value: initialValue,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n tabIndex = 0,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n defaultValue: defaultValue as Value,\n onChange,\n });\n\n const handleKeyDown = (e: KeyboardEvent, index: number) => {\n let newIndex = index;\n const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n newIndex = (index + 1) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n newIndex = (index - 1 + options.length) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n setValue(options[index].dataset.value as Value);\n return;\n }\n };\n\n function getTabIndex(checked: boolean, index: number) {\n if (value === undefined || value === null || value === '') {\n return tabIndex === index ? 0 : -1;\n }\n\n return checked ? 0 : -1;\n }\n\n return (\n <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n const itemValue = (child.props as ButtonProps | RadioProps).value;\n const checked = value === itemValue;\n\n if (type?.includes('Button')) {\n return cloneElement(child, {\n ...child.props,\n value: undefined,\n role: 'radio',\n color: checked ? 'black' : 'white',\n name,\n component: 'span',\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n 'data-value': itemValue,\n 'aria-checked': value === itemValue,\n onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n onClick() {\n setValue(itemValue as Value);\n child.props?.onClick?.(itemValue as Value);\n },\n } as ButtonProps);\n }\n\n return cloneElement(child, {\n ...child.props,\n name,\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n checked: checked,\n onChange(_: string, value: Value) {\n setValue(value);\n },\n } as RadioProps<Value>);\n })}\n </div>\n );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","_a","_b","getTabIndex","checked","classnames","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,SACjCE,IAAAF,EAAQD,CAAQ,MAAhB,QAAAG,EAAmB;AAAA,aACV,EAAE,QAAQD,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,SAClDG,IAAAH,EAAQD,CAAQ,MAAhB,QAAAI,EAAmB;AAAA,aACV,EAAE,QAAQF,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASM,EAAYC,GAAkBP,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BO,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGZ,GAAM,WAAWa,EAAW,eAAeb,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAc,EAAS,IAAIrB,GAAU,CAACsB,GAAOV,MAAU;AACxC,QAAI,CAACW,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUX,MAAUiB;AAE1B,WAAID,KAAA,QAAAA,EAAM,SAAS,YACVE,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAOH,IAAU,UAAU;AAAA,MAC3B,MAAApB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUa,EAAYC,GAASP,CAAK;AAAA,MACpC,cAAca;AAAA,MACd,gBAAgBjB,MAAUiB;AAAA,MAC1B,WAAW,CAACE,MAAqBhB,EAAcgB,GAAGf,CAAK;AAAA,MACvD,UAAU;;AACR,QAAAH,EAASgB,CAAkB,IAC3BR,KAAAD,IAAAM,EAAM,UAAN,gBAAAN,EAAa,YAAb,QAAAC,EAAA,KAAAD,GAAuBS;AAAA,MACzB;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAAvB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUa,EAAYC,GAASP,CAAK;AAAA,MACpC,SAAAO;AAAA,MACA,SAASS,GAAWpB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}