@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

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 (246) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +491 -119
  2. package/build/legacy/components/DatePicker.client.cjs +67 -89
  3. package/build/legacy/components/DatePicker.client.cjs.map +1 -1
  4. package/build/legacy/components/Fieldset.cjs +4 -17
  5. package/build/legacy/components/Fieldset.cjs.map +1 -1
  6. package/build/legacy/components/FieldsetLabel.cjs.map +1 -1
  7. package/build/legacy/components/FileStatus.cjs +126 -79
  8. package/build/legacy/components/FileStatus.cjs.map +1 -1
  9. package/build/legacy/components/Legend.cjs +10 -22
  10. package/build/legacy/components/Legend.cjs.map +1 -1
  11. package/build/legacy/components/Radio.cjs +4 -21
  12. package/build/legacy/components/Radio.cjs.map +1 -1
  13. package/build/legacy/components/Select.cjs +19 -54
  14. package/build/legacy/components/Select.cjs.map +1 -1
  15. package/build/legacy/components/Toggle.cjs +17 -24
  16. package/build/legacy/components/Toggle.cjs.map +1 -1
  17. package/build/legacy/components/button/button.cjs +1 -1
  18. package/build/legacy/components/button/button.cjs.map +1 -1
  19. package/build/legacy/components/button/index.cjs +1 -1
  20. package/build/legacy/components/button/index.cjs.map +1 -1
  21. package/build/legacy/components/button/parts.cjs +1 -1
  22. package/build/legacy/components/button/parts.cjs.map +1 -1
  23. package/build/legacy/components/checkbox/checkbox-icon.cjs +121 -0
  24. package/build/legacy/components/checkbox/checkbox-icon.cjs.map +1 -0
  25. package/build/legacy/components/checkbox/checkbox.cjs +165 -0
  26. package/build/legacy/components/checkbox/checkbox.cjs.map +1 -0
  27. package/build/legacy/components/checkbox/index.cjs +179 -0
  28. package/build/legacy/components/checkbox/index.cjs.map +1 -0
  29. package/build/legacy/components/checkbox/parts.cjs +89 -0
  30. package/build/legacy/components/checkbox/parts.cjs.map +1 -0
  31. package/build/legacy/components/checkbox/primitives.cjs +87 -0
  32. package/build/legacy/components/checkbox/primitives.cjs.map +1 -0
  33. package/build/legacy/components/{FieldMessage.cjs → deprecated/FieldMessage.cjs} +4 -17
  34. package/build/legacy/components/deprecated/FieldMessage.cjs.map +1 -0
  35. package/build/legacy/components/{Textarea.cjs → deprecated/Label.cjs} +24 -36
  36. package/build/legacy/components/deprecated/Label.cjs.map +1 -0
  37. package/build/legacy/components/field/field.cjs +130 -0
  38. package/build/legacy/components/field/field.cjs.map +1 -0
  39. package/build/legacy/components/field/index.cjs +267 -0
  40. package/build/legacy/components/field/index.cjs.map +1 -0
  41. package/build/legacy/components/field/parts.cjs +188 -0
  42. package/build/legacy/components/field/parts.cjs.map +1 -0
  43. package/build/legacy/components/field/primitives.cjs +191 -0
  44. package/build/legacy/components/field/primitives.cjs.map +1 -0
  45. package/build/legacy/components/field/start-indicator.cjs +45 -0
  46. package/build/legacy/components/field/start-indicator.cjs.map +1 -0
  47. package/build/legacy/components/field/status-indicator.cjs +78 -0
  48. package/build/legacy/components/field/status-indicator.cjs.map +1 -0
  49. package/build/legacy/components/for.cjs +38 -0
  50. package/build/legacy/components/for.cjs.map +1 -0
  51. package/build/legacy/context/confirm-modal.cjs +1 -1
  52. package/build/legacy/context/confirm-modal.cjs.map +1 -1
  53. package/build/legacy/context/cta-modal.cjs +1 -1
  54. package/build/legacy/context/cta-modal.cjs.map +1 -1
  55. package/build/legacy/context/field.cjs +23 -4
  56. package/build/legacy/context/field.cjs.map +1 -1
  57. package/build/legacy/context/notification-center.cjs.map +1 -1
  58. package/build/legacy/context/prompt-modal.cjs +168 -166
  59. package/build/legacy/context/prompt-modal.cjs.map +1 -1
  60. package/build/legacy/hooks/useDate.cjs.map +1 -1
  61. package/build/legacy/index.cjs +1274 -1123
  62. package/build/legacy/index.cjs.map +1 -1
  63. package/build/legacy/utils/index.cjs +22 -2
  64. package/build/legacy/utils/index.cjs.map +1 -1
  65. package/build/modern/_tsup-dts-rollup.d.ts +491 -119
  66. package/build/modern/{chunk-2JX27W6Y.js → chunk-2BIHLH4V.js} +2 -2
  67. package/build/modern/chunk-2BIHLH4V.js.map +1 -0
  68. package/build/modern/{chunk-3ZDFQO25.js → chunk-6EUC3SUI.js} +4 -7
  69. package/build/modern/chunk-6EUC3SUI.js.map +1 -0
  70. package/build/modern/chunk-6I2FW4WI.js +33 -0
  71. package/build/modern/chunk-6I2FW4WI.js.map +1 -0
  72. package/build/modern/{chunk-MER66QUY.js → chunk-6KZVE4HC.js} +1 -1
  73. package/build/modern/{chunk-MER66QUY.js.map → chunk-6KZVE4HC.js.map} +1 -1
  74. package/build/modern/{chunk-FTPZHG6J.js → chunk-6WOJAMZV.js} +3 -9
  75. package/build/modern/chunk-6WOJAMZV.js.map +1 -0
  76. package/build/modern/chunk-77FJSNGD.js +13 -0
  77. package/build/modern/chunk-77FJSNGD.js.map +1 -0
  78. package/build/modern/chunk-BL7G3577.js +29 -0
  79. package/build/modern/chunk-BL7G3577.js.map +1 -0
  80. package/build/modern/chunk-BPRF34DU.js +62 -0
  81. package/build/modern/chunk-BPRF34DU.js.map +1 -0
  82. package/build/modern/{chunk-7P7OWBGV.js → chunk-CF3EHG42.js} +10 -10
  83. package/build/modern/chunk-CF3EHG42.js.map +1 -0
  84. package/build/modern/{chunk-Q4IV5NUT.js → chunk-CMYD5KWA.js} +40 -43
  85. package/build/modern/chunk-CMYD5KWA.js.map +1 -0
  86. package/build/modern/chunk-CNA2VKAH.js +43 -0
  87. package/build/modern/chunk-CNA2VKAH.js.map +1 -0
  88. package/build/modern/chunk-EL4MX2PG.js +22 -0
  89. package/build/modern/chunk-EL4MX2PG.js.map +1 -0
  90. package/build/modern/chunk-FBS7AX76.js +37 -0
  91. package/build/modern/chunk-FBS7AX76.js.map +1 -0
  92. package/build/modern/{chunk-KU2AWAK3.js → chunk-FK52US7K.js} +7 -20
  93. package/build/modern/chunk-FK52US7K.js.map +1 -0
  94. package/build/modern/{chunk-Z7FGXAND.js → chunk-FMRWRVUS.js} +2 -2
  95. package/build/modern/{chunk-XQICKZH4.js → chunk-GENS32QO.js} +10 -8
  96. package/build/modern/chunk-GENS32QO.js.map +1 -0
  97. package/build/modern/{chunk-7S47NSGR.js → chunk-H54FR7IP.js} +2 -2
  98. package/build/modern/chunk-KWZ3CEG6.js +23 -0
  99. package/build/modern/chunk-KWZ3CEG6.js.map +1 -0
  100. package/build/modern/{chunk-JWIJHSI6.js → chunk-L7N24B6B.js} +3 -6
  101. package/build/modern/chunk-L7N24B6B.js.map +1 -0
  102. package/build/modern/chunk-LT62577B.js +23 -0
  103. package/build/modern/chunk-LT62577B.js.map +1 -0
  104. package/build/modern/{chunk-3BM6MZ4A.js → chunk-MWRO5QYD.js} +1 -1
  105. package/build/modern/chunk-MWRO5QYD.js.map +1 -0
  106. package/build/modern/{chunk-PZAZKQMO.js → chunk-OYT7RGC7.js} +1 -1
  107. package/build/modern/chunk-OYT7RGC7.js.map +1 -0
  108. package/build/modern/{chunk-ILQW5VZT.js → chunk-RBNOEAWJ.js} +4 -7
  109. package/build/modern/chunk-RBNOEAWJ.js.map +1 -0
  110. package/build/modern/{chunk-5QONP7GT.js → chunk-S2X5OEPK.js} +2 -10
  111. package/build/modern/chunk-S2X5OEPK.js.map +1 -0
  112. package/build/modern/chunk-TIJAFPHQ.js +1 -0
  113. package/build/modern/chunk-TYPULJMJ.js +1 -0
  114. package/build/modern/chunk-UNN4LHRS.js +31 -0
  115. package/build/modern/chunk-UNN4LHRS.js.map +1 -0
  116. package/build/modern/chunk-VSTOSLFS.js +100 -0
  117. package/build/modern/chunk-VSTOSLFS.js.map +1 -0
  118. package/build/modern/chunk-Z52R6ABJ.js +21 -0
  119. package/build/modern/chunk-Z52R6ABJ.js.map +1 -0
  120. package/build/modern/{chunk-3RGRHMJQ.js → chunk-ZDANBCM3.js} +2 -2
  121. package/build/modern/components/AccordionItemGroup.js +1 -1
  122. package/build/modern/components/DatePicker.client.js +4 -5
  123. package/build/modern/components/Fieldset.js +1 -2
  124. package/build/modern/components/FieldsetLabel.js +1 -1
  125. package/build/modern/components/FileStatus.js +10 -4
  126. package/build/modern/components/Legend.js +1 -2
  127. package/build/modern/components/Radio.js +1 -3
  128. package/build/modern/components/Select.js +1 -2
  129. package/build/modern/components/Toggle.js +1 -2
  130. package/build/modern/components/button/button.js +1 -1
  131. package/build/modern/components/button/index.js +2 -2
  132. package/build/modern/components/button/parts.js +2 -2
  133. package/build/modern/components/checkbox/checkbox-icon.js +12 -0
  134. package/build/modern/components/checkbox/checkbox.js +13 -0
  135. package/build/modern/components/checkbox/index.js +30 -0
  136. package/build/modern/components/checkbox/parts.js +8 -0
  137. package/build/modern/components/checkbox/parts.js.map +1 -0
  138. package/build/modern/components/checkbox/primitives.js +17 -0
  139. package/build/modern/components/checkbox/primitives.js.map +1 -0
  140. package/build/modern/components/deprecated/FieldMessage.js +8 -0
  141. package/build/modern/components/deprecated/FieldMessage.js.map +1 -0
  142. package/build/modern/components/deprecated/Label.js +17 -0
  143. package/build/modern/components/deprecated/Label.js.map +1 -0
  144. package/build/modern/components/field/field.js +14 -0
  145. package/build/modern/components/field/field.js.map +1 -0
  146. package/build/modern/components/field/index.js +44 -0
  147. package/build/modern/components/field/index.js.map +1 -0
  148. package/build/modern/components/field/parts.js +11 -0
  149. package/build/modern/components/field/parts.js.map +1 -0
  150. package/build/modern/components/field/primitives.js +26 -0
  151. package/build/modern/components/field/primitives.js.map +1 -0
  152. package/build/modern/components/field/start-indicator.js +7 -0
  153. package/build/modern/components/field/start-indicator.js.map +1 -0
  154. package/build/modern/components/field/status-indicator.js +9 -0
  155. package/build/modern/components/field/status-indicator.js.map +1 -0
  156. package/build/modern/components/for.js +7 -0
  157. package/build/modern/components/for.js.map +1 -0
  158. package/build/modern/context/confirm-modal.js +3 -3
  159. package/build/modern/context/cta-modal.js +4 -4
  160. package/build/modern/context/field.js +34 -4
  161. package/build/modern/context/field.js.map +1 -1
  162. package/build/modern/context/notification-center.js +2 -2
  163. package/build/modern/context/prompt-modal.js +12 -7
  164. package/build/modern/hooks/useDate.js +1 -1
  165. package/build/modern/index.js +131 -82
  166. package/build/modern/index.js.map +1 -1
  167. package/build/modern/utils/index.js +5 -3
  168. package/package.json +2 -2
  169. package/src/components/DatePicker.client.tsx +2 -14
  170. package/src/components/Fieldset.tsx +3 -3
  171. package/src/components/FieldsetLabel.tsx +5 -2
  172. package/src/components/FileStatus.tsx +4 -5
  173. package/src/components/Legend.tsx +5 -6
  174. package/src/components/Radio.tsx +2 -7
  175. package/src/components/Select.tsx +1 -16
  176. package/src/components/Toggle.tsx +14 -7
  177. package/src/components/button/button.tsx +1 -1
  178. package/src/components/button/parts.ts +6 -0
  179. package/src/components/checkbox/checkbox-icon.tsx +39 -0
  180. package/src/components/checkbox/checkbox.tsx +48 -0
  181. package/src/components/checkbox/index.ts +3 -0
  182. package/src/components/checkbox/parts.ts +59 -0
  183. package/src/components/checkbox/primitives.tsx +104 -0
  184. package/src/components/{FieldMessage.tsx → deprecated/FieldMessage.tsx} +2 -13
  185. package/src/components/deprecated/Label.tsx +24 -0
  186. package/src/components/field/field.tsx +77 -0
  187. package/src/components/field/index.ts +5 -0
  188. package/src/components/field/parts.ts +77 -0
  189. package/src/components/field/primitives.tsx +204 -0
  190. package/src/components/field/start-indicator.tsx +23 -0
  191. package/src/components/field/status-indicator.tsx +58 -0
  192. package/src/components/for.tsx +43 -0
  193. package/src/context/field.tsx +6 -5
  194. package/src/context/prompt-modal.tsx +16 -18
  195. package/src/hooks/useDate.ts +1 -7
  196. package/src/index.ts +6 -7
  197. package/src/utils/index.ts +30 -0
  198. package/build/legacy/components/Checkbox.cjs +0 -113
  199. package/build/legacy/components/Checkbox.cjs.map +0 -1
  200. package/build/legacy/components/FieldMessage.cjs.map +0 -1
  201. package/build/legacy/components/Input.cjs +0 -95
  202. package/build/legacy/components/Input.cjs.map +0 -1
  203. package/build/legacy/components/Label.cjs +0 -93
  204. package/build/legacy/components/Label.cjs.map +0 -1
  205. package/build/legacy/components/Textarea.cjs.map +0 -1
  206. package/build/modern/chunk-2JX27W6Y.js.map +0 -1
  207. package/build/modern/chunk-3BM6MZ4A.js.map +0 -1
  208. package/build/modern/chunk-3ZDFQO25.js.map +0 -1
  209. package/build/modern/chunk-5QONP7GT.js.map +0 -1
  210. package/build/modern/chunk-7P7OWBGV.js.map +0 -1
  211. package/build/modern/chunk-C5EHJUS5.js +0 -10
  212. package/build/modern/chunk-C5EHJUS5.js.map +0 -1
  213. package/build/modern/chunk-FTPZHG6J.js.map +0 -1
  214. package/build/modern/chunk-ILQW5VZT.js.map +0 -1
  215. package/build/modern/chunk-JIJM6JFJ.js +0 -36
  216. package/build/modern/chunk-JIJM6JFJ.js.map +0 -1
  217. package/build/modern/chunk-JWIJHSI6.js.map +0 -1
  218. package/build/modern/chunk-KU2AWAK3.js.map +0 -1
  219. package/build/modern/chunk-NGOLRISW.js +0 -63
  220. package/build/modern/chunk-NGOLRISW.js.map +0 -1
  221. package/build/modern/chunk-NMF2HYWO.js +0 -50
  222. package/build/modern/chunk-NMF2HYWO.js.map +0 -1
  223. package/build/modern/chunk-PZAZKQMO.js.map +0 -1
  224. package/build/modern/chunk-Q4IV5NUT.js.map +0 -1
  225. package/build/modern/chunk-UZDVOIW5.js +0 -33
  226. package/build/modern/chunk-UZDVOIW5.js.map +0 -1
  227. package/build/modern/chunk-VYCU7I4J.js +0 -43
  228. package/build/modern/chunk-VYCU7I4J.js.map +0 -1
  229. package/build/modern/chunk-XQICKZH4.js.map +0 -1
  230. package/build/modern/components/Checkbox.js +0 -11
  231. package/build/modern/components/FieldMessage.js +0 -9
  232. package/build/modern/components/Input.js +0 -11
  233. package/build/modern/components/Label.js +0 -10
  234. package/build/modern/components/Textarea.js +0 -9
  235. package/src/components/Checkbox.tsx +0 -93
  236. package/src/components/Input.tsx +0 -69
  237. package/src/components/Label.tsx +0 -69
  238. package/src/components/Textarea.tsx +0 -52
  239. /package/build/modern/{chunk-Z7FGXAND.js.map → chunk-FMRWRVUS.js.map} +0 -0
  240. /package/build/modern/{chunk-7S47NSGR.js.map → chunk-H54FR7IP.js.map} +0 -0
  241. /package/build/modern/{components/Checkbox.js.map → chunk-TIJAFPHQ.js.map} +0 -0
  242. /package/build/modern/{components/FieldMessage.js.map → chunk-TYPULJMJ.js.map} +0 -0
  243. /package/build/modern/{chunk-3RGRHMJQ.js.map → chunk-ZDANBCM3.js.map} +0 -0
  244. /package/build/modern/components/{Input.js.map → checkbox/checkbox-icon.js.map} +0 -0
  245. /package/build/modern/components/{Label.js.map → checkbox/checkbox.js.map} +0 -0
  246. /package/build/modern/components/{Textarea.js.map → checkbox/index.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Checkbox.tsx","../../../src/components/Show.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport {\n checkbox,\n type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n /**\n * The id of the FieldMessage element describing the Checkbox.\n */\n describedBy?: string\n /**\n * The unique identifier for the checkbox. Required for accessibility.\n */\n id: string\n /**\n * Used to display a mixed checked state.\n * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n */\n mixed?: boolean\n }\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n * <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n const { describedBy, size, checked, mixed, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const styles = checkbox({ size })\n const { icons } = useCerberusContext()\n const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n if (!CheckIcon) {\n throw new Error('The CerberusProvider is missing the checkbox icon.')\n }\n if (!IndeterminateIcon) {\n throw new Error('The CerberusProvider is missing the indeterminate icon.')\n }\n\n return (\n <div\n className={cx(\n styles.root,\n vstack({\n gap: '0',\n justify: 'center',\n }),\n )}\n >\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n {...(mixed && { 'aria-checked': 'mixed' })}\n className={cx('peer', nativeProps.className, styles.input)}\n type=\"checkbox\"\n />\n <Show when={checked && !mixed}>\n <span className={styles.icon}>\n <CheckIcon />\n </span>\n </Show>\n <Show when={mixed}>\n <span className={styles.icon}>\n <IndeterminateIcon />\n </span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAGO;AACP,sBAAuB;AACvB,iBAAmB;;;ACLnB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACpCA,IAAAA,gBAKO;AA+CH;AApBJ,IAAM,mBAAe,6BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,0BAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAC,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AHmBI,IAAAC,sBAAA;AAfG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,MAAI,CAAC,WAAW;AACd,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,MAAI,CAAC,mBAAmB;AACtB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT,OAAO;AAAA,YACP,wBAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,eAAW,eAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,6CAAC,QAAK,MAAM,WAAW,CAAC,OACtB,uDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,aAAU,GACb,GACF;AAAA,QACA,6CAAC,QAAK,MAAM,OACV,uDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_react","import_jsx_runtime","import_jsx_runtime"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/FieldMessage.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n fieldMessage,\n type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n extends HTMLAttributes<HTMLParagraphElement> {\n /**\n * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n *\n * @example For help messages: `help:field_id`\n * @example For error messages: `error:field_id`\n */\n id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n * <Label htmlFor=\"first_name\">First Name</Label>\n * <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n * <FieldMessage id=\"help:first_name\">\n * This will only be used in your account information.\n * </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n const { invalid } = useFieldContext()\n return (\n <small\n {...props}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, fieldMessage())}\n />\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAmB;AACnB,qBAGO;;;ACLP,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;AD3BI,IAAAA,sBAAA;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW,eAAG,MAAM,eAAW,6BAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":["import_jsx_runtime"]}
@@ -1,95 +0,0 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
-
21
- // src/components/Input.tsx
22
- var Input_exports = {};
23
- __export(Input_exports, {
24
- Input: () => Input
25
- });
26
- module.exports = __toCommonJS(Input_exports);
27
- var import_recipes = require("@cerberus/styled-system/recipes");
28
- var import_css = require("@cerberus/styled-system/css");
29
-
30
- // src/context/field.tsx
31
- var import_react = require("react");
32
- var import_jsx_runtime = require("react/jsx-runtime");
33
- var FieldContext = (0, import_react.createContext)(null);
34
- function useFieldContext() {
35
- const context = (0, import_react.useContext)(FieldContext);
36
- if (!context) {
37
- throw new Error("useFieldContext must be used within a Field Provider.");
38
- }
39
- return context;
40
- }
41
-
42
- // src/context/cerberus.tsx
43
- var import_react2 = require("react");
44
- var import_jsx_runtime2 = require("react/jsx-runtime");
45
- var CerberusContext = (0, import_react2.createContext)(null);
46
- function useCerberusContext() {
47
- const context = (0, import_react2.useContext)(CerberusContext);
48
- if (!context) {
49
- throw new Error("useCerberus must be used within a CerberusProvider");
50
- }
51
- return context;
52
- }
53
-
54
- // src/components/Show.tsx
55
- var import_react3 = require("react");
56
- function Show(props) {
57
- const { when, children, fallback } = props;
58
- const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
59
- return (0, import_react3.useMemo)(() => {
60
- if (condition) return children;
61
- return fallback ?? null;
62
- }, [condition, children, fallback]);
63
- }
64
-
65
- // src/components/Input.tsx
66
- var import_jsx_runtime3 = require("react/jsx-runtime");
67
- function Input(props) {
68
- const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
69
- const inputStyles = (0, import_recipes.input)({ size });
70
- const { invalid, ...fieldStates } = useFieldContext();
71
- const hasEndIcon = Boolean(endIcon);
72
- const { icons } = useCerberusContext();
73
- const { invalid: InvalidIcon } = icons;
74
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: inputStyles.root, children: [
75
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
76
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
77
- "input",
78
- {
79
- ...nativeProps,
80
- ...fieldStates,
81
- ...describedBy && { "aria-describedby": describedBy },
82
- ...invalid && { "aria-invalid": true },
83
- "data-start-icon": Boolean(startIcon),
84
- className: (0, import_css.cx)("peer", nativeProps.className, inputStyles.input)
85
- }
86
- ),
87
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
88
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
89
- ] });
90
- }
91
- // Annotate the CommonJS export names for ESM import in node:
92
- 0 && (module.exports = {
93
- Input
94
- });
95
- //# sourceMappingURL=Input.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n /**\n * The id of the FieldMessage component used to describe the input. Required for accessibility.\n */\n describedBy?: string\n /**\n * The unique identifier for the input element. Required for accessibility.\n */\n id: string\n /**\n * An optional icon to display at the start of the input.\n */\n startIcon?: ReactNode\n /**\n * An optional icon to display at the end of the input.\n */\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n\n const { icons } = useCerberusContext()\n const { invalid: InvalidIcon } = icons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,iBAAmB;;;ACFnB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAA,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ACzCA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AHQI,IAAAC,sBAAA;AAVG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,kBAAc,sBAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAElC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,8CAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,iDAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,uDAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,eAAW,eAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,6CAAC,QAAK,MAAM,SACV,uDAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,6CAAC,QAAK,MAAM,cAAc,CAAC,SACzB,uDAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":["import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
@@ -1,93 +0,0 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
-
21
- // src/components/Label.tsx
22
- var Label_exports = {};
23
- __export(Label_exports, {
24
- Label: () => Label
25
- });
26
- module.exports = __toCommonJS(Label_exports);
27
- var import_recipes = require("@cerberus/styled-system/recipes");
28
- var import_css = require("@cerberus/styled-system/css");
29
- var import_patterns = require("@cerberus/styled-system/patterns");
30
-
31
- // src/context/field.tsx
32
- var import_react = require("react");
33
- var import_jsx_runtime = require("react/jsx-runtime");
34
- var FieldContext = (0, import_react.createContext)(null);
35
- function useFieldContext() {
36
- const context = (0, import_react.useContext)(FieldContext);
37
- if (!context) {
38
- throw new Error("useFieldContext must be used within a Field Provider.");
39
- }
40
- return context;
41
- }
42
-
43
- // src/components/Show.tsx
44
- var import_react2 = require("react");
45
- function Show(props) {
46
- const { when, children, fallback } = props;
47
- const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
48
- return (0, import_react2.useMemo)(() => {
49
- if (condition) return children;
50
- return fallback ?? null;
51
- }, [condition, children, fallback]);
52
- }
53
-
54
- // src/components/Label.tsx
55
- var import_jsx_runtime2 = require("react/jsx-runtime");
56
- function Label(props) {
57
- const { hidden, size, ...nativeProps } = props;
58
- const { required, disabled } = useFieldContext();
59
- const usage = hidden ? "hidden" : "visible";
60
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
61
- "label",
62
- {
63
- ...nativeProps,
64
- ...disabled && { "data-disabled": true },
65
- className: (0, import_css.cx)(
66
- nativeProps.className,
67
- (0, import_recipes.label)({ size, usage }),
68
- (0, import_patterns.hstack)({
69
- justify: "space-between",
70
- w: "full"
71
- })
72
- ),
73
- children: [
74
- props.children,
75
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
76
- "span",
77
- {
78
- className: (0, import_css.css)({
79
- color: "page.text.100",
80
- fontSize: "inherit"
81
- }),
82
- children: "(required)"
83
- }
84
- ) })
85
- ]
86
- }
87
- );
88
- }
89
- // Annotate the CommonJS export names for ESM import in node:
90
- 0 && (module.exports = {
91
- Label
92
- });
93
- //# sourceMappingURL=Label.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Label.tsx","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n /**\n * The unique identifier for the input element. Required for accessibility.\n */\n htmlFor: string\n /**\n * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.\n */\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * A a11y compliant label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/label\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"search\" hidden>Search everything</Label>\n * <Input id=\"search\" startIcon={Search} type=\"text\" />\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n {...(disabled && { 'data-disabled': true })}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,iBAAwB;AACxB,sBAAuB;;;ACHvB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAA,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFKI,IAAAC,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,iBAAiB,KAAK;AAAA,MACzC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM,EAAE,MAAM,MAAM,CAAC;AAAA,YACrB,wBAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,6CAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,gBAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Textarea.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaBaseProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n /**\n * The ID of the FieldMessage that describes the textarea.\n */\n describedBy?: string\n /**\n * The unique id of the textarea.\n */\n id: string\n}\nexport type TextareaProps = InputVariantProps & TextareaBaseProps\n\n/**\n * A component that allows the user to input large blocks of text.\n * @see https://cerberus.digitalu.design/react/textarea\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n const { describedBy, ...nativeProps } = props\n const { invalid, ...fieldState } = useFieldContext()\n\n return (\n <textarea\n {...nativeProps}\n {...fieldState}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n props.className,\n input().input,\n css({\n pxi: '2',\n py: '2',\n resize: 'vertical',\n }),\n )}\n rows={4}\n />\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAwB;AACxB,qBAA8C;;;ACF9C,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADpCI,IAAAA,sBAAA;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW;AAAA,QACT,MAAM;AAAA,YACN,sBAAM,EAAE;AAAA,YACR,gBAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ;","names":["import_jsx_runtime"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/button/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n Root: ElementType\n Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n Root: Button,\n Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;AAsBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useCallback,\n ChangeEvent,\n useMemo,\n type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n /**\n * The format of the date input\n */\n format?: string\n /**\n * The callback to run when the date input changes\n */\n onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n /**\n * The initial value of the date input\n */\n initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n /**\n * The ISO formatted date string\n */\n ISO: string\n /**\n * The value of the date input\n */\n value: string\n}\n\n/**\n * A hook for formatting and validating date inputs. The date format defaults to US Military format.\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const date = useDate({ initialValue: '01 JAN 2024' })\n * return <input onChange={date.onChange} type=\"text\" value={date.value} />\n * }\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n const initialValue = options?.initialValue ?? ''\n const format = options?.format ?? DateFormats.USMilitary\n const onChange = options?.onChange\n const [value, setValue] = useState(initialValue)\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = formatMilitaryDate(e.currentTarget.value)\n if (onChange) onChange(e)\n setValue(newValue)\n },\n [onChange],\n )\n\n return useMemo(\n () => ({\n format,\n value,\n ISO: formatMilitaryToISO(value),\n onChange: handleChange,\n }),\n [format, value, handleChange],\n )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n const [day, month, year] = input.split(' ')\n const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n const monthNum = monthIndex + 1\n return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n 2,\n '0',\n )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n let day = ''\n let month = ''\n let year = ''\n\n // Format day\n if (formatted.length >= 2) {\n day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n const dayNum = parseInt(day, 10)\n if (dayNum > 31) day = '31'\n else if (dayNum === 0) day = '01'\n formatted = formatted.slice(2)\n }\n\n // Format month\n if (formatted.length >= 3) {\n month = formatted.slice(0, 3)\n const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n if (monthIndex !== -1) {\n month = MONTHS[monthIndex]\n } else {\n month = month.replace(/[^A-Z]/g, '')\n }\n formatted = formatted.slice(3)\n }\n\n // Format year\n if (formatted.length > 0) {\n year = formatted.slice(0, 4)\n }\n\n return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Formats a date string to US Military format.\n * @param date The date string to format (i.e., '2024-01-01')\n * @returns The formatted date string in US Military format (DD MMM YYYY)\n */\nexport function formatISOToMilitary(date: string): string {\n const [year, month, day] = date.split('-')\n const monthIndex = parseInt(month, 10) - 1\n const monthStr = MONTHS[monthIndex]\n return `${day} ${monthStr} ${year}`\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n get ISO() {\n return 'YYYY-MM-DD'\n },\n get USMilitary() {\n return 'DD MMM YYYY'\n },\n get Months() {\n return MONTHS\n },\n}\n\nconst MONTHS = [\n 'JAN',\n 'FEB',\n 'MAR',\n 'APR',\n 'MAY',\n 'JUN',\n 'JUL',\n 'AUG',\n 'SEP',\n 'OCT',\n 'NOV',\n 'DEC',\n]\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OAEK;AAwCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,eAAe,SAAS,gBAAgB;AAC9C,QAAM,SAAS,SAAS,UAAU,YAAY;AAC9C,QAAM,WAAW,SAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,GAAG;AACzC,QAAM,aAAa,SAAS,OAAO,EAAE,IAAI;AACzC,QAAM,WAAW,OAAO,UAAU;AAClC,SAAO,GAAG,GAAG,IAAI,QAAQ,IAAI,IAAI;AACnC;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Fieldset.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n * return (\n * <form>\n * <Fieldset>\n * <Legend>Do you like cats?</Legend>\n * <Hstack>\n * <Field>\n * <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n * <Label htmlFor=\"yes\">Yes</Label>\n * </Field>\n * </Hstack>\n * <Hstack>\n * <Field>\n * <Radio id=\"no\" name=\"cats\" value=\"no\" />\n * <Label htmlFor=\"no\">No</Label>\n * </Field>\n * </Hstack>\n * </Fieldset>\n * </form>\n * )\n * }\n */\nexport function Fieldset(props: FieldsetProps) {\n const { invalid, ...formState } = useFieldContext()\n\n return (\n <fieldset\n {...props}\n {...formState}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n props.className,\n css({\n border: 'none',\n pt: 2,\n margin: 0,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,KAAK,UAAU;AAgDpB;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,IAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n Select as ArkSelect,\n createListCollection,\n type SelectRootProps,\n type SelectItemProps,\n type SelectItemGroupProps,\n type SelectItemGroupLabelProps,\n type ListCollection,\n type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n select,\n type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport { Text } from './Text'\nimport {\n SelectContent,\n SelectControl,\n SelectIndicator,\n SelectItem,\n SelectItemGroup,\n SelectItemGroupLabel,\n SelectItemIndicator,\n SelectItemText,\n SelectLabel,\n SelectPositioner,\n SelectRoot,\n SelectTrigger,\n SelectValueText,\n} from './Select.server'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n /**\n * What is displayed in the dropdown list.\n */\n label: string\n /**\n * The value of the selected item used in the form.\n */\n value: string\n /**\n * If the item is disabled.\n */\n disabled?: boolean\n}\n\nexport interface SelectCollection {\n /**\n * The items to be displayed in the dropdown list.\n */\n items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n /**\n * The placeholder text when no option is selected.\n */\n placeholder?: string\n /**\n * The label of the select.\n */\n label: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n BaseSelectProps &\n SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n * const collection = createListCollection({\n * items: [\n * { label: 'Hades', value: 'hades' },\n * { label: 'Persephone', value: 'persephone' },\n * { label: 'Zeus', value: 'zeus', disabled: true },\n * ]\n * })\n *\n * return (\n * <Select\n * collection={collection}\n * label=\"Select Relative\"\n * placeholder=\"Choose option\"\n * >\n * {collection.items.map((item) => (\n * <Option key={item.value} item={item} />\n * ))}\n * </Select>\n * )\n * }\n */\nexport function Select(props: SelectProps) {\n const { collection, label, placeholder, size, ...rootProps } = props\n const { icons } = useCerberusContext()\n const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n const styles = select({ size })\n\n return (\n <SelectRoot className={styles.root} collection={collection} {...rootProps}>\n <SelectLabel className={styles.label}>\n {label}\n <Show when={props.required}>\n <Text as=\"span\" color=\"page.text.100\">\n (required)\n </Text>\n </Show>\n </SelectLabel>\n\n <SelectControl className={styles.control}>\n <SelectTrigger className={styles.trigger}>\n <SelectValueText placeholder={placeholder} />\n\n <HStack>\n <Show when={props.invalid}>\n <InvalidIcon data-part=\"invalid-icon\" />\n </Show>\n <SelectIndicator className={styles.indicator}>\n <SelectArrow />\n </SelectIndicator>\n </HStack>\n </SelectTrigger>\n </SelectControl>\n\n <Portal>\n <SelectPositioner className={styles.positioner}>\n <SelectContent className={styles.content}>\n {props.children}\n </SelectContent>\n </SelectPositioner>\n </Portal>\n\n <ArkSelect.HiddenSelect />\n </SelectRoot>\n )\n}\n\nexport interface OptionProps extends SelectItemProps {\n /**\n * The CollectionListItem to be displayed in the dropdown list.\n */\n item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n const { item, ...itemProps } = props\n\n const { icons } = useCerberusContext()\n const { selectChecked: CheckedIcon } = icons\n\n const styles = select()\n\n return (\n <SelectItem {...itemProps} item={item} className={styles.item}>\n <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>\n <SelectItemIndicator className={styles.itemIndicator}>\n <CheckedIcon />\n </SelectItemIndicator>\n </SelectItem>\n )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n return <SelectItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n const styles = select()\n return (\n <SelectItemGroupLabel\n {...props}\n className={cx(props.className, styles.itemGroupLabel)}\n />\n )\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n return createListCollection({\n items: collection,\n })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,OAOK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAuGjB,SAGI,KAHJ;AATC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,YAAY,OAAO,aAAa,MAAM,GAAG,UAAU,IAAI;AAC/D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,SAAS,YAAY,IAAI;AAE3D,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAE9B,SACE,qBAAC,cAAW,WAAW,OAAO,MAAM,YAAyB,GAAG,WAC9D;AAAA,yBAAC,eAAY,WAAW,OAAO,OAC5B;AAAA;AAAA,MACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,OAAM,iBAAgB,wBAEtC,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,iBAAc,WAAW,OAAO,SAC/B,+BAAC,iBAAc,WAAW,OAAO,SAC/B;AAAA,0BAAC,mBAAgB,aAA0B;AAAA,MAE3C,qBAAC,UACC;AAAA,4BAAC,QAAK,MAAM,MAAM,SAChB,8BAAC,eAAY,aAAU,gBAAe,GACxC;AAAA,QACA,oBAAC,mBAAgB,WAAW,OAAO,WACjC,8BAAC,eAAY,GACf;AAAA,SACF;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,UACC,8BAAC,oBAAiB,WAAW,OAAO,YAClC,8BAAC,iBAAc,WAAW,OAAO,SAC9B,gBAAM,UACT,GACF,GACF;AAAA,IAEA,oBAAC,UAAU,cAAV,EAAuB;AAAA,KAC1B;AAEJ;AASO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAE/B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,YAAY,IAAI;AAEvC,QAAM,SAAS,OAAO;AAEtB,SACE,qBAAC,cAAY,GAAG,WAAW,MAAY,WAAW,OAAO,MACvD;AAAA,wBAAC,kBAAe,WAAW,OAAO,UAAW,gBAAM,OAAM;AAAA,IACzD,oBAAC,uBAAoB,WAAW,OAAO,eACrC,8BAAC,eAAY,GACf;AAAA,KACF;AAEJ;AAcO,SAAS,YAAY,OAA6B;AACvD,SAAO,oBAAC,mBAAiB,GAAG,OAAO;AACrC;AAWO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;AAUO,SAAS,uBACd,YACsC;AACtC,SAAO,qBAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n useMemo,\n type HTMLAttributes,\n type MouseEvent,\n} from 'react'\nimport {\n fileStatus,\n type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { Field } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n /**\n * A unique identifier for the file status. Required for accessibility.\n */\n id: string\n /**\n * The name of the file.\n */\n file: string\n /**\n * The percentage of the file that has been processed.\n */\n now: ProgressBarProps['now']\n /**\n * The status of the file.\n */\n status: processStatus\n /**\n * The action to perform on the file when a user clicks the\n * button located at the end of the status card.\n * @param status - The status of the file.\n * @param e - The event object.\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n * @default () => {}\n */\n onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n TODO = 'todo',\n PROCESSING = 'processing',\n DONE = 'done',\n ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n const { file, now, status, onClick, ...nativeProps } = props\n const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n const palette = useMemo(() => getPalette(status), [status])\n const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n const styles = useMemo(() => {\n switch (status) {\n case processStatus.TODO:\n return fileStatus({ status: 'todo' })\n case processStatus.PROCESSING:\n return fileStatus({ status: 'processing' })\n case processStatus.DONE:\n return fileStatus({ status: 'done' })\n case processStatus.ERROR:\n return fileStatus({ status: 'error' })\n default:\n return fileStatus()\n }\n }, [status])\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const actionStatus = getStatusActionLabel(\n status,\n ).toLocaleLowerCase() as FileStatusActions\n onClick(actionStatus, e)\n },\n [onClick],\n )\n\n return (\n <div\n {...nativeProps}\n className={cx(nativeProps.className, styles.root, hstack())}\n >\n <Avatar\n ariaLabel=\"\"\n gradient={modalIconPalette}\n icon={<MatchFileStatusIcon size={24} status={status} />}\n src=\"\"\n />\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0.12rem',\n w: 'full',\n })}\n >\n <small\n className={css({\n color: 'page.text.initial',\n textStyle: 'label-sm',\n })}\n >\n {file}\n </small>\n <ProgressBar\n id={props.id}\n label=\"File upload status\"\n now={now}\n size=\"sm\"\n />\n <Field invalid={modalIconPalette === 'hades-dark'}>\n <FieldMessage\n className={css({\n color: 'page.text.100',\n })}\n id={`help:${file}`}\n >\n <MatchFileStatusText status={status} now={now} />\n </FieldMessage>\n </Field>\n </div>\n\n <IconButton\n ariaLabel={actionLabel}\n onClick={handleClick}\n palette={palette}\n size=\"sm\"\n >\n <MatchStatusAction status={status} />\n </IconButton>\n </div>\n )\n}\n\ninterface FileStatusElProps {\n status: FileStatusProps['status']\n size?: 16 | 20 | 24 | 32\n now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n const { icons } = useCerberusContext()\n const {\n waitingFileUploader: TodoIcon,\n fileUploader: FileUploaderIcon,\n invalidAlt: InvalidIcon,\n successNotification: DoneIcon,\n } = icons\n\n switch (props.status) {\n case processStatus.TODO:\n return <TodoIcon size={props.size} />\n case processStatus.PROCESSING:\n return <FileUploaderIcon size={props.size} />\n case processStatus.DONE:\n return <DoneIcon size={props.size} />\n case processStatus.ERROR:\n return <InvalidIcon size={props.size} />\n default:\n throw new Error('Unknown status')\n }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n switch (props.status) {\n case processStatus.TODO:\n return 'Waiting to upload'\n case processStatus.PROCESSING:\n return `${props.now}% Complete`\n case processStatus.DONE:\n return 'File uploaded successfully'\n case processStatus.ERROR:\n return 'There was an error uploading the file'\n default:\n throw new Error('Invalid status')\n }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n const { icons } = useCerberusContext()\n const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons\n switch (props.status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return <CloseIcon />\n case processStatus.ERROR:\n return <RedoIcon />\n case processStatus.DONE:\n return <TrashIcon />\n default:\n throw new Error('Invalid status')\n }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'Cancel'\n case processStatus.ERROR:\n return 'Retry'\n case processStatus.DONE:\n return 'Delete'\n default:\n return ''\n }\n}\n\nfunction getPalette(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'danger'\n case processStatus.ERROR:\n return 'action'\n case processStatus.DONE:\n return 'danger'\n default:\n return 'action'\n }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'charon-light'\n case processStatus.ERROR:\n return 'hades-dark'\n case processStatus.DONE:\n return 'thanatos-light'\n default:\n return 'charon-light'\n }\n}\n"],"mappings":"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","names":["processStatus"]}
@@ -1,10 +0,0 @@
1
- // src/utils/index.ts
2
- function formatNotifyCount(count) {
3
- if (count > 99) return "99+";
4
- return count.toString();
5
- }
6
-
7
- export {
8
- formatNotifyCount
9
- };
10
- //# sourceMappingURL=chunk-C5EHJUS5.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n if (count > 99) return '99+'\n return count.toString()\n}\n\nexport * from './localStorage'\n"],"mappings":";AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * A unique identifier for the radio button. Required for accessibility.\n */\n id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n * <fieldset name=\"fruit\">\n * <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n * Option 1\n * </Radio>\n * <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n * Option 2\n * </Radio>\n * <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n * Option 3\n * </Radio>\n * </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n const { children, size, ...nativeProps } = props\n const { invalid, ...state } = useFieldContext()\n const styles = radio({ size })\n\n return (\n <div\n className={cx(\n 'group',\n hstack({\n gap: 'sm',\n }),\n styles.root,\n )}\n tabIndex={0}\n >\n <input\n {...nativeProps}\n {...state}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(nativeProps.className, styles.input)}\n tabIndex={-1}\n type=\"radio\"\n />\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AA+ClB,SAUE,KAVF;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,YACjD,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Legend.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { type HTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps\n\n/**\n * A component to provide a global label for a group of related elements in a form (for accessibility).\n * @memberof Fieldset\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n * return (\n * <form>\n * <Fieldset>\n * <Legend>Do you like cats?</Legend>\n * <Hstack>\n * <Field>\n * <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n * <Label htmlFor=\"yes\">Yes</Label>\n * </Field>\n * </Hstack>\n * <Hstack>\n * <Field>\n * <Radio id=\"no\" name=\"cats\" value=\"no\" />\n * <Label htmlFor=\"no\">No</Label>\n * </Field>\n * </Hstack>\n * </Fieldset>\n * </form>\n * )\n * }\n * ```\n */\nexport function Legend(props: LegendProps) {\n const { size, ...nativeProps } = props\n const { invalid, ...formState } = useFieldContext()\n\n return (\n <legend\n {...nativeProps}\n {...formState}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n nativeProps.className,\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n label({\n size,\n }),\n )}\n >\n {nativeProps.children}\n <Show when={formState.required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </legend>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AAIxB,SAAS,aAAqC;AAC9C,SAAS,cAAc;AAgDnB,SAiBI,KAjBJ;AALG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,QACD,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,oBAAY;AAAA,QACb,oBAAC,QAAK,MAAM,UAAU,UACpB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,36 +0,0 @@
1
- import {
2
- useFieldContext
3
- } from "./chunk-UZDVOIW5.js";
4
-
5
- // src/components/Textarea.tsx
6
- import { css, cx } from "@cerberus/styled-system/css";
7
- import { input } from "@cerberus/styled-system/recipes";
8
- import { jsx } from "react/jsx-runtime";
9
- function Textarea(props) {
10
- const { describedBy, ...nativeProps } = props;
11
- const { invalid, ...fieldState } = useFieldContext();
12
- return /* @__PURE__ */ jsx(
13
- "textarea",
14
- {
15
- ...nativeProps,
16
- ...fieldState,
17
- ...describedBy && { "aria-describedby": describedBy },
18
- ...invalid && { "aria-invalid": true },
19
- className: cx(
20
- props.className,
21
- input().input,
22
- css({
23
- pxi: "2",
24
- py: "2",
25
- resize: "vertical"
26
- })
27
- ),
28
- rows: 4
29
- }
30
- );
31
- }
32
-
33
- export {
34
- Textarea
35
- };
36
- //# sourceMappingURL=chunk-JIJM6JFJ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaBaseProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n /**\n * The ID of the FieldMessage that describes the textarea.\n */\n describedBy?: string\n /**\n * The unique id of the textarea.\n */\n id: string\n}\nexport type TextareaProps = InputVariantProps & TextareaBaseProps\n\n/**\n * A component that allows the user to input large blocks of text.\n * @see https://cerberus.digitalu.design/react/textarea\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n const { describedBy, ...nativeProps } = props\n const { invalid, ...fieldState } = useFieldContext()\n\n return (\n <textarea\n {...nativeProps}\n {...fieldState}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n props.className,\n input().input,\n css({\n pxi: '2',\n py: '2',\n resize: 'vertical',\n }),\n )}\n rows={4}\n />\n )\n}\n"],"mappings":";;;;;AAGA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAqC;AA8B1C;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM,EAAE;AAAA,QACR,IAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n fieldMessage,\n type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n extends HTMLAttributes<HTMLParagraphElement> {\n /**\n * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n *\n * @example For help messages: `help:field_id`\n * @example For error messages: `error:field_id`\n */\n id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n * <Label htmlFor=\"first_name\">First Name</Label>\n * <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n * <FieldMessage id=\"help:first_name\">\n * This will only be used in your account information.\n * </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n const { invalid } = useFieldContext()\n return (\n <small\n {...props}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, fieldMessage())}\n />\n )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAoCH;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n DatePicker as ArkDP,\n type DatePickerContentProps,\n type DatePickerInputProps,\n type DatePickerRootProps,\n type DatePickerTriggerProps,\n type DatePickerViewControlProps,\n type DatePickerViewProps,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\nimport { datePicker, iconButton } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n DatePickerView,\n DatePickerContext,\n DatePickerTable,\n DatePickerTableHeader,\n DatePickerTableCellTrigger,\n DatePickerTableCell,\n DatePickerViewControl,\n} from './DatePicker.server'\nimport { IconButton } from './IconButton'\nimport { Button } from './button/button'\nimport { useCerberusContext } from '../context/cerberus'\nimport { useMemo, type InputHTMLAttributes } from 'react'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n const states = useFieldContext()\n\n // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\n // There is a bug with the Root component that causes random date selection\n // onBlur after the first selection if the format prop is used.\n // const handleFormat = useCallback((value: DateValue) => {\n // return formatISOToMilitary(value.toString())\n // }, [])\n\n return (\n <ArkDP.Root\n {...props}\n {...states}\n positioning={{\n placement: 'bottom-start',\n }}\n />\n )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n const { icons } = useCerberusContext()\n const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons\n return (\n <DatePickerViewControl {...props}>\n <ArkDP.PrevTrigger asChild>\n <IconButton ariaLabel=\"Previous\" size=\"sm\">\n <PrevIcon />\n </IconButton>\n </ArkDP.PrevTrigger>\n\n <ArkDP.ViewTrigger asChild>\n <Button\n className={css({\n h: '2rem',\n paddingInline: 'md',\n })}\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n <ArkDP.RangeText />\n </Button>\n </ArkDP.ViewTrigger>\n\n <ArkDP.NextTrigger asChild>\n <IconButton ariaLabel=\"Next\" size=\"sm\">\n <NextIcon />\n </IconButton>\n </ArkDP.NextTrigger>\n </DatePickerViewControl>\n )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n const { icons } = useCerberusContext()\n const { calendar: CalendarIcon } = icons\n return (\n <ArkDP.Trigger\n {...props}\n className={cx(\n props.className,\n iconButton({\n size: 'sm',\n usage: 'ghost',\n }),\n datePickerStyles.trigger,\n )}\n >\n <CalendarIcon />\n </ArkDP.Trigger>\n )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n return (\n <ArkDP.Control className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...props}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n />\n </ArkDP.Control>\n )\n}\n\nexport interface RangePickerInputProps\n extends Omit<DatePickerInputProps, 'defaultValue'> {\n /**\n * The defaultValue to add for the inputs. The first item is the start date\n * and the second item is the end date.\n */\n defaultValue?: [\n InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n ]\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\" selection=\"range\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <RangePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n const { defaultValue, ...nativeProps } = props\n\n const startDate = useMemo(() => defaultValue?.[0], [defaultValue])\n const endDate = useMemo(() => defaultValue?.[1], [defaultValue])\n\n return (\n <ArkDP.Control data-range className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...nativeProps}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n defaultValue={startDate}\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={0}\n />\n <ArkDP.Input\n {...nativeProps}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n defaultValue={endDate}\n data-range-end-input\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={1}\n />\n </ArkDP.Control>\n )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(\n props: DatePickerContentProps & {\n withModal?: boolean\n },\n) {\n const { children, withModal, ...contentProps } = props\n return (\n <Portal disabled={withModal ?? false}>\n <ArkDP.Positioner className={datePickerStyles.positioner}>\n <ArkDP.Content\n {...contentProps}\n className={cx(contentProps.className, datePickerStyles.content)}\n >\n {children}\n </ArkDP.Content>\n </ArkDP.Positioner>\n </Portal>\n )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n function isToday(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const formatted = today.toISOString().split('T')[0]\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return formatted === arkDate\n }\n\n function isPastDay(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return new Date(arkDate) < today\n }\n\n function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n if (isToday(date)) return 'today'\n if (isPastDay(date)) return 'past'\n return 'future'\n }\n\n return (\n <DatePickerView {...props} view=\"day\">\n <DatePickerContext>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableHead>\n <ArkDP.TableRow>\n {datePicker.weekDays.map((weekDay, id) => (\n <DatePickerTableHeader key={id}>\n {weekDay.narrow}\n </DatePickerTableHeader>\n ))}\n </ArkDP.TableRow>\n </ArkDP.TableHead>\n\n <ArkDP.TableBody>\n {datePicker.weeks.map((week, id) => (\n <ArkDP.TableRow key={id}>\n {week.map((day, id) => (\n <DatePickerTableCell key={id} value={day}>\n <DatePickerTableCellTrigger\n data-date={getDayValue(day)}\n >\n {day.day}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </DatePickerContext>\n </DatePickerView>\n )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"month\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker\n .getMonthsGrid({ columns: 4, format: 'short' })\n .map((months, id) => (\n <ArkDP.TableRow key={id}>\n {months.map((month, id) => (\n <DatePickerTableCell key={id} value={month.value}>\n <DatePickerTableCellTrigger>\n {month.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"year\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n <ArkDP.TableRow key={id}>\n {years.map((year, id) => (\n <DatePickerTableCell key={id} value={year.value}>\n <DatePickerTableCellTrigger>\n {year.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar(props: { withModal?: boolean }) {\n return (\n <DatePickerContent withModal={props.withModal}>\n <DatePickerDayView />\n <DatePickerMonthView />\n <DatePickerYearView />\n </DatePickerContent>\n )\n}\n"],"mappings":"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","names":["datePicker","id"]}
@@ -1,63 +0,0 @@
1
- import {
2
- useFieldContext
3
- } from "./chunk-UZDVOIW5.js";
4
- import {
5
- useCerberusContext
6
- } from "./chunk-GITT5645.js";
7
- import {
8
- Show
9
- } from "./chunk-BUVVRQLZ.js";
10
-
11
- // src/components/Checkbox.tsx
12
- import {
13
- checkbox
14
- } from "@cerberus/styled-system/recipes";
15
- import { vstack } from "@cerberus/styled-system/patterns";
16
- import { cx } from "@cerberus/styled-system/css";
17
- import { jsx, jsxs } from "react/jsx-runtime";
18
- function Checkbox(props) {
19
- const { describedBy, size, checked, mixed, ...nativeProps } = props;
20
- const { invalid, ...fieldStates } = useFieldContext();
21
- const styles = checkbox({ size });
22
- const { icons } = useCerberusContext();
23
- const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
24
- if (!CheckIcon) {
25
- throw new Error("The CerberusProvider is missing the checkbox icon.");
26
- }
27
- if (!IndeterminateIcon) {
28
- throw new Error("The CerberusProvider is missing the indeterminate icon.");
29
- }
30
- return /* @__PURE__ */ jsxs(
31
- "div",
32
- {
33
- className: cx(
34
- styles.root,
35
- vstack({
36
- gap: "0",
37
- justify: "center"
38
- })
39
- ),
40
- children: [
41
- /* @__PURE__ */ jsx(
42
- "input",
43
- {
44
- ...nativeProps,
45
- ...fieldStates,
46
- ...describedBy && { "aria-describedby": describedBy },
47
- ...invalid && { "aria-invalid": true },
48
- ...mixed && { "aria-checked": "mixed" },
49
- className: cx("peer", nativeProps.className, styles.input),
50
- type: "checkbox"
51
- }
52
- ),
53
- /* @__PURE__ */ jsx(Show, { when: checked && !mixed, children: /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
54
- /* @__PURE__ */ jsx(Show, { when: mixed, children: /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(IndeterminateIcon, {}) }) })
55
- ]
56
- }
57
- );
58
- }
59
-
60
- export {
61
- Checkbox
62
- };
63
- //# sourceMappingURL=chunk-NGOLRISW.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n checkbox,\n type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n /**\n * The id of the FieldMessage element describing the Checkbox.\n */\n describedBy?: string\n /**\n * The unique identifier for the checkbox. Required for accessibility.\n */\n id: string\n /**\n * Used to display a mixed checked state.\n * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n */\n mixed?: boolean\n }\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n * <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n const { describedBy, size, checked, mixed, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const styles = checkbox({ size })\n const { icons } = useCerberusContext()\n const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n if (!CheckIcon) {\n throw new Error('The CerberusProvider is missing the checkbox icon.')\n }\n if (!IndeterminateIcon) {\n throw new Error('The CerberusProvider is missing the indeterminate icon.')\n }\n\n return (\n <div\n className={cx(\n styles.root,\n vstack({\n gap: '0',\n justify: 'center',\n }),\n )}\n >\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n {...(mixed && { 'aria-checked': 'mixed' })}\n className={cx('peer', nativeProps.className, styles.input)}\n type=\"checkbox\"\n />\n <Show when={checked && !mixed}>\n <span className={styles.icon}>\n <CheckIcon />\n </span>\n </Show>\n <Show when={mixed}>\n <span className={styles.icon}>\n <IndeterminateIcon />\n </span>\n </Show>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAuDf,SASE,KATF;AAfG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,MAAI,CAAC,WAAW;AACd,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,MAAI,CAAC,mBAAmB;AACtB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,WAAW,GAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,QAAK,MAAM,WAAW,CAAC,OACtB,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,aAAU,GACb,GACF;AAAA,QACA,oBAAC,QAAK,MAAM,OACV,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}