@arkyn/components 3.0.2 → 3.0.4

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 (196) hide show
  1. package/README.md +24 -24
  2. package/dist/components/alert/alertContainer/index.d.ts +7 -7
  3. package/dist/components/alert/alertContent/index.d.ts +1 -1
  4. package/dist/components/alert/alertDescription/index.d.ts +1 -1
  5. package/dist/components/alert/alertIcon/index.d.ts +1 -1
  6. package/dist/components/alert/alertTitle/index.d.ts +1 -1
  7. package/dist/components/audioPlayer/index.d.ts +1 -1
  8. package/dist/components/audioUpload/index.d.ts +2 -2
  9. package/dist/components/badge/index.d.ts +1 -1
  10. package/dist/components/button/index.d.ts +1 -1
  11. package/dist/components/cardTab/cardTabButton/index.d.ts +1 -1
  12. package/dist/components/cardTab/cardTabContainer/index.d.ts +1 -1
  13. package/dist/components/checkbox/index.d.ts +3 -3
  14. package/dist/components/checkbox/index.d.ts.map +1 -1
  15. package/dist/components/clientOnly.d.ts +2 -2
  16. package/dist/components/clientOnly.d.ts.map +1 -1
  17. package/dist/components/currencyInput/index.d.ts +2 -2
  18. package/dist/components/datePicker/datePickerCalendarContainer/index.d.ts +9 -0
  19. package/dist/components/datePicker/datePickerCalendarContainer/index.d.ts.map +1 -0
  20. package/dist/components/datePicker/datePickerChevron/index.d.ts +11 -0
  21. package/dist/components/datePicker/datePickerChevron/index.d.ts.map +1 -0
  22. package/dist/components/datePicker/datePickerContainer/index.d.ts +19 -0
  23. package/dist/components/datePicker/datePickerContainer/index.d.ts.map +1 -0
  24. package/dist/components/datePicker/datePickerContent/index.d.ts +9 -0
  25. package/dist/components/datePicker/datePickerContent/index.d.ts.map +1 -0
  26. package/dist/components/datePicker/datePickerOverlay/index.d.ts +8 -0
  27. package/dist/components/datePicker/datePickerOverlay/index.d.ts.map +1 -0
  28. package/dist/components/datePicker/datePickerSpinner/index.d.ts +8 -0
  29. package/dist/components/datePicker/datePickerSpinner/index.d.ts.map +1 -0
  30. package/dist/components/datePicker/index.d.ts +155 -0
  31. package/dist/components/datePicker/index.d.ts.map +1 -0
  32. package/dist/components/divider/index.d.ts +1 -1
  33. package/dist/components/drawer/drawerContainer/index.d.ts +1 -1
  34. package/dist/components/drawer/drawerHeader/index.d.ts +1 -1
  35. package/dist/components/facebookPixel/index.d.ts +1 -1
  36. package/dist/components/fieldError/index.d.ts +1 -1
  37. package/dist/components/fieldLabel/index.d.ts +1 -1
  38. package/dist/components/fieldWrapper/index.d.ts +1 -1
  39. package/dist/components/fileUpload/index.d.ts +2 -2
  40. package/dist/components/googleAnalytics/index.d.ts +1 -1
  41. package/dist/components/googleTagManager/index.d.ts +1 -1
  42. package/dist/components/iconButton/index.d.ts +1 -1
  43. package/dist/components/imageUpload/index.d.ts +2 -2
  44. package/dist/components/input/index.d.ts +1 -1
  45. package/dist/components/mapView/index.d.ts +2 -2
  46. package/dist/components/mapView/index.d.ts.map +1 -1
  47. package/dist/components/maskedInput/index.d.ts +3 -3
  48. package/dist/components/modal/modalContainer/index.d.ts +1 -1
  49. package/dist/components/modal/modalFooter/index.d.ts +1 -1
  50. package/dist/components/modal/modalHeader/index.d.ts +1 -1
  51. package/dist/components/multiSelect/index.d.ts +1 -1
  52. package/dist/components/pagination/index.d.ts +1 -1
  53. package/dist/components/phoneInput/index.d.ts +2 -2
  54. package/dist/components/phoneInput/index.d.ts.map +1 -1
  55. package/dist/components/popover/index.d.ts +2 -2
  56. package/dist/components/popover/index.d.ts.map +1 -1
  57. package/dist/components/radio/radioBox/index.d.ts +4 -4
  58. package/dist/components/radio/radioGroup/index.d.ts +3 -3
  59. package/dist/components/richText/index.d.ts +3 -3
  60. package/dist/components/searchPlaces.d.ts +3 -3
  61. package/dist/components/select/index.d.ts +1 -1
  62. package/dist/components/slider/index.d.ts +1 -1
  63. package/dist/components/switch/index.d.ts +3 -3
  64. package/dist/components/switch/index.d.ts.map +1 -1
  65. package/dist/components/tab/tabButton/index.d.ts +1 -1
  66. package/dist/components/tab/tabContainer/index.d.ts +1 -1
  67. package/dist/components/table/tableBody/index.d.ts +1 -1
  68. package/dist/components/table/tableCaption/index.d.ts +2 -2
  69. package/dist/components/table/tableContainer/index.d.ts +1 -1
  70. package/dist/components/table/tableFooter/index.d.ts +1 -1
  71. package/dist/components/table/tableHeader/index.d.ts +2 -2
  72. package/dist/components/textarea/index.d.ts +1 -1
  73. package/dist/components/tooltip/index.d.ts +1 -1
  74. package/dist/hooks/useAutomation.d.ts +1 -1
  75. package/dist/hooks/useDrawer.d.ts +5 -5
  76. package/dist/hooks/useForm.d.ts +2 -2
  77. package/dist/hooks/useHydrated.d.ts +1 -1
  78. package/dist/hooks/useModal.d.ts +5 -5
  79. package/dist/hooks/useScopedParams.d.ts +5 -5
  80. package/dist/hooks/useScrollLock.d.ts +2 -2
  81. package/dist/hooks/useSearchAutomation.d.ts +6 -6
  82. package/dist/hooks/useSlider.d.ts +2 -2
  83. package/dist/hooks/useToast.d.ts +1 -1
  84. package/dist/index.d.ts +1 -0
  85. package/dist/index.d.ts.map +1 -1
  86. package/dist/index.js +642 -389
  87. package/dist/index.js.map +1 -1
  88. package/dist/modules/components/alert/alertContainer/index.js.map +1 -1
  89. package/dist/modules/components/alert/alertContent/index.js.map +1 -1
  90. package/dist/modules/components/alert/alertDescription/index.js.map +1 -1
  91. package/dist/modules/components/alert/alertIcon/index.js.map +1 -1
  92. package/dist/modules/components/alert/alertTitle/index.js.map +1 -1
  93. package/dist/modules/components/audioPlayer/index.js.map +1 -1
  94. package/dist/modules/components/audioUpload/index.js.map +1 -1
  95. package/dist/modules/components/badge/index.js.map +1 -1
  96. package/dist/modules/components/button/index.js.map +1 -1
  97. package/dist/modules/components/cardTab/cardTabButton/index.js.map +1 -1
  98. package/dist/modules/components/cardTab/cardTabContainer/index.js.map +1 -1
  99. package/dist/modules/components/checkbox/index.js.map +1 -1
  100. package/dist/modules/components/clientOnly.js.map +1 -1
  101. package/dist/modules/components/currencyInput/index.js.map +1 -1
  102. package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js +25 -0
  103. package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js.map +1 -0
  104. package/dist/modules/components/datePicker/datePickerCalendarContainer/styles.css +1 -0
  105. package/dist/modules/components/datePicker/datePickerChevron/index.js +21 -0
  106. package/dist/modules/components/datePicker/datePickerChevron/index.js.map +1 -0
  107. package/dist/modules/components/datePicker/datePickerChevron/styles.css +1 -0
  108. package/dist/modules/components/datePicker/datePickerContainer/index.js +16 -0
  109. package/dist/modules/components/datePicker/datePickerContainer/index.js.map +1 -0
  110. package/dist/modules/components/datePicker/datePickerContainer/styles.css +1 -0
  111. package/dist/modules/components/datePicker/datePickerContent/index.js +14 -0
  112. package/dist/modules/components/datePicker/datePickerContent/index.js.map +1 -0
  113. package/dist/modules/components/datePicker/datePickerContent/styles.css +1 -0
  114. package/dist/modules/components/datePicker/datePickerOverlay/index.js +14 -0
  115. package/dist/modules/components/datePicker/datePickerOverlay/index.js.map +1 -0
  116. package/dist/modules/components/datePicker/datePickerOverlay/styles.css +1 -0
  117. package/dist/modules/components/datePicker/datePickerSpinner/index.js +16 -0
  118. package/dist/modules/components/datePicker/datePickerSpinner/index.js.map +1 -0
  119. package/dist/modules/components/datePicker/datePickerSpinner/styles.css +1 -0
  120. package/dist/modules/components/datePicker/index.js +194 -0
  121. package/dist/modules/components/datePicker/index.js.map +1 -0
  122. package/dist/modules/components/datePicker/styles.css +79 -0
  123. package/dist/modules/components/divider/index.js.map +1 -1
  124. package/dist/modules/components/drawer/drawerContainer/index.js.map +1 -1
  125. package/dist/modules/components/drawer/drawerHeader/index.js.map +1 -1
  126. package/dist/modules/components/facebookPixel/index.js.map +1 -1
  127. package/dist/modules/components/fieldError/index.js.map +1 -1
  128. package/dist/modules/components/fieldLabel/index.js.map +1 -1
  129. package/dist/modules/components/fieldWrapper/index.js.map +1 -1
  130. package/dist/modules/components/fileUpload/index.js.map +1 -1
  131. package/dist/modules/components/googleAnalytics/index.js.map +1 -1
  132. package/dist/modules/components/googleTagManager/index.js.map +1 -1
  133. package/dist/modules/components/iconButton/index.js.map +1 -1
  134. package/dist/modules/components/imageUpload/index.js.map +1 -1
  135. package/dist/modules/components/input/index.js.map +1 -1
  136. package/dist/modules/components/mapView/index.js.map +1 -1
  137. package/dist/modules/components/maskedInput/index.js.map +1 -1
  138. package/dist/modules/components/modal/modalContainer/index.js.map +1 -1
  139. package/dist/modules/components/modal/modalFooter/index.js.map +1 -1
  140. package/dist/modules/components/modal/modalHeader/index.js.map +1 -1
  141. package/dist/modules/components/multiSelect/index.js.map +1 -1
  142. package/dist/modules/components/pagination/index.js.map +1 -1
  143. package/dist/modules/components/phoneInput/index.js +68 -63
  144. package/dist/modules/components/phoneInput/index.js.map +1 -1
  145. package/dist/modules/components/popover/index.js.map +1 -1
  146. package/dist/modules/components/radio/radioBox/index.js.map +1 -1
  147. package/dist/modules/components/radio/radioGroup/index.js.map +1 -1
  148. package/dist/modules/components/richText/index.js.map +1 -1
  149. package/dist/modules/components/searchPlaces.js.map +1 -1
  150. package/dist/modules/components/select/index.js.map +1 -1
  151. package/dist/modules/components/slider/index.js.map +1 -1
  152. package/dist/modules/components/switch/index.js.map +1 -1
  153. package/dist/modules/components/tab/tabButton/index.js.map +1 -1
  154. package/dist/modules/components/tab/tabContainer/index.js.map +1 -1
  155. package/dist/modules/components/table/tableBody/index.js.map +1 -1
  156. package/dist/modules/components/table/tableCaption/index.js.map +1 -1
  157. package/dist/modules/components/table/tableContainer/index.js.map +1 -1
  158. package/dist/modules/components/table/tableFooter/index.js.map +1 -1
  159. package/dist/modules/components/table/tableHeader/index.js.map +1 -1
  160. package/dist/modules/components/textarea/index.js.map +1 -1
  161. package/dist/modules/components/tooltip/index.js.map +1 -1
  162. package/dist/modules/hooks/useAutomation.js.map +1 -1
  163. package/dist/modules/hooks/useDrawer.js.map +1 -1
  164. package/dist/modules/hooks/useForm.js.map +1 -1
  165. package/dist/modules/hooks/useHydrated.js.map +1 -1
  166. package/dist/modules/hooks/useModal.js.map +1 -1
  167. package/dist/modules/hooks/useScopedParams.js.map +1 -1
  168. package/dist/modules/hooks/useScrollLock.js.map +1 -1
  169. package/dist/modules/hooks/useSearchAutomation.js.map +1 -1
  170. package/dist/modules/hooks/useSlider.js.map +1 -1
  171. package/dist/modules/hooks/useToast.js.map +1 -1
  172. package/dist/modules/providers/drawerProvider.js.map +1 -1
  173. package/dist/modules/providers/formProvider.js.map +1 -1
  174. package/dist/modules/providers/modalProvider.js +27 -33
  175. package/dist/modules/providers/modalProvider.js.map +1 -1
  176. package/dist/modules/providers/placesProvider.js.map +1 -1
  177. package/dist/modules/providers/toastProvider.js.map +1 -1
  178. package/dist/modules/services/fieldTemplate.js +1 -0
  179. package/dist/modules/services/fieldTemplate.js.map +1 -1
  180. package/dist/modules/services/toHtml.js.map +1 -1
  181. package/dist/modules/services/toRichTextValue.js.map +1 -1
  182. package/dist/modules/utils/phoneInputUtilities.js +5 -5
  183. package/dist/modules/utils/phoneInputUtilities.js.map +1 -1
  184. package/dist/providers/drawerProvider.d.ts +1 -1
  185. package/dist/providers/formProvider.d.ts +1 -1
  186. package/dist/providers/modalProvider.d.ts +1 -1
  187. package/dist/providers/modalProvider.d.ts.map +1 -1
  188. package/dist/providers/placesProvider.d.ts +1 -1
  189. package/dist/providers/toastProvider.d.ts +1 -1
  190. package/dist/services/fieldTemplate.d.ts.map +1 -1
  191. package/dist/services/toHtml.d.ts +1 -1
  192. package/dist/services/toRichTextValue.d.ts +1 -1
  193. package/dist/style.css +1 -1
  194. package/dist/utils/phoneInputUtilities.d.ts +1 -1
  195. package/dist/utils/phoneInputUtilities.d.ts.map +1 -1
  196. package/package.json +17 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContainer/index.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype HTMLAttributes,\n\ttype JSX,\n\ttype ReactNode,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport { AlertTitle } from \"../alertTitle\";\nimport \"./styles.css\";\n\ntype AlertContainerProps = {\n\t/**\n\t * Visual style and semantic meaning.\n\t * - `success`: green operation completed.\n\t * - `danger`: red error or destructive action.\n\t * - `warning`: yellow caution required.\n\t * - `info`: blue informational message.\n\t */\n\tscheme: \"success\" | \"danger\" | \"warning\" | \"info\";\n} & HTMLAttributes<HTMLDivElement>;\n\nconst AlertContainerContext = createContext({} as AlertContainerProps);\n\n/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */\nfunction useAlertContainer(): AlertContainerProps {\n\treturn useContext(AlertContainerContext);\n}\n\n/**\n * AlertContainer root wrapper for the Alert component set. Provides schema context to child components.\n *\n * Automatically detects whether an `AlertTitle` is present among children and adjusts layout:\n * centered when no title, left-aligned when a title is present.\n *\n * @param props.scheme - Visual style variant. Required.\n * @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns AlertContainer JSX element.\n *\n * @example\n * ```tsx\n * // Inline alert no title, centered layout\n * <AlertContainer scheme=\"success\">\n * <AlertIcon />\n * <AlertContent>Your subscription has been activated.</AlertContent>\n * </AlertContainer>\n *\n * // Full alert with title and description left-aligned layout\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Payment failed</AlertTitle>\n * <AlertDescription>Please check your card details and try again.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContainer(props: AlertContainerProps): JSX.Element {\n\tconst { scheme, children, className: baseClassName, ...rest } = props;\n\n\tconst hasAlertTitle = (children: ReactNode): boolean => {\n\t\tlet found = false;\n\t\tconst searchForAlertTitle = (nodes: ReactNode) => {\n\t\t\tif (Array.isArray(nodes)) {\n\t\t\t\tnodes.forEach(searchForAlertTitle);\n\t\t\t} else if (nodes && typeof nodes === \"object\" && \"type\" in nodes) {\n\t\t\t\tif (nodes.type === AlertTitle) {\n\t\t\t\t\tfound = true;\n\t\t\t\t} else if (\n\t\t\t\t\tnodes.props &&\n\t\t\t\t\ttypeof nodes.props === \"object\" &&\n\t\t\t\t\tnodes.props !== null &&\n\t\t\t\t\t\"children\" in nodes.props\n\t\t\t\t) {\n\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\tsearchForAlertTitle((nodes.props as any).children);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tsearchForAlertTitle(children);\n\t\treturn found;\n\t};\n\n\tconst shouldAlignCenter = !hasAlertTitle(children);\n\tconst finalClassName = shouldAlignCenter\n\t\t? \"nonExistsAlertTitle\"\n\t\t: \"existsAlertTitle\";\n\n\tconst className = `arkynAlertContainer ${scheme} ${finalClassName} ${baseClassName}`;\n\n\tconst value = useMemo(() => ({ scheme }), [scheme]);\n\n\treturn (\n\t\t<AlertContainerContext.Provider value={value}>\n\t\t\t<div className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</AlertContainerContext.Provider>\n\t);\n}\n\nexport { AlertContainer, useAlertContainer };\n"],"mappings":";;;;;AAsBA,IAAM,IAAwB,EAAc,CAAC,CAAwB;AAGrE,SAAS,IAAyC;CACjD,OAAO,EAAW,CAAqB;AACxC;AAkCA,SAAS,EAAe,GAAyC;CAChE,IAAM,EAAE,WAAQ,aAAU,WAAW,GAAe,GAAG,MAAS,GA8B1D,IAAY,uBAAuB,EAAO,KA5BzB,MAAiC;EACvD,IAAI,IAAQ,IACN,KAAuB,MAAqB;GACjD,AAAI,MAAM,QAAQ,CAAK,IACtB,EAAM,QAAQ,CAAmB,IACvB,KAAS,OAAO,KAAU,YAAY,UAAU,MACtD,EAAM,SAAS,IAClB,IAAQ,KAER,EAAM,SACN,OAAO,EAAM,SAAU,YACvB,EAAM,UAAU,QAChB,cAAc,EAAM,SAGpB,EAAqB,EAAM,MAAc,QAAQ;EAGpD;EAEA,OADA,EAAoB,CAAQ,GACrB;CACR,EAE2B,CAAc,CAAQ,IAG9C,qBADA,sBAG+D,GAAG,KAE/D,IAAQ,SAAe,EAAE,UAAO,IAAI,CAAC,CAAM,CAAC;CAElD,OACC,kBAAC,EAAsB,UAAvB;EAAuC;YACtC,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CAC0B,CAAA;AAElC"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContainer/index.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype HTMLAttributes,\n\ttype JSX,\n\ttype ReactNode,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport { AlertTitle } from \"../alertTitle\";\nimport \"./styles.css\";\n\ntype AlertContainerProps = {\n\t/**\n\t * Visual style and semantic meaning.\n\t * - `success`: green, operation completed.\n\t * - `danger`: red, error or destructive action.\n\t * - `warning`: yellow, caution required.\n\t * - `info`: blue, informational message.\n\t */\n\tscheme: \"success\" | \"danger\" | \"warning\" | \"info\";\n} & HTMLAttributes<HTMLDivElement>;\n\nconst AlertContainerContext = createContext({} as AlertContainerProps);\n\n/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */\nfunction useAlertContainer(): AlertContainerProps {\n\treturn useContext(AlertContainerContext);\n}\n\n/**\n * AlertContainer, root wrapper for the Alert component set. Provides schema context to child components.\n *\n * Automatically detects whether an `AlertTitle` is present among children and adjusts layout:\n * centered when no title, left-aligned when a title is present.\n *\n * @param props.scheme - Visual style variant. Required.\n * @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns AlertContainer JSX element.\n *\n * @example\n * ```tsx\n * // Inline alert, no title, centered layout\n * <AlertContainer scheme=\"success\">\n * <AlertIcon />\n * <AlertContent>Your subscription has been activated.</AlertContent>\n * </AlertContainer>\n *\n * // Full alert with title and description, left-aligned layout\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Payment failed</AlertTitle>\n * <AlertDescription>Please check your card details and try again.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContainer(props: AlertContainerProps): JSX.Element {\n\tconst { scheme, children, className: baseClassName, ...rest } = props;\n\n\tconst hasAlertTitle = (children: ReactNode): boolean => {\n\t\tlet found = false;\n\t\tconst searchForAlertTitle = (nodes: ReactNode) => {\n\t\t\tif (Array.isArray(nodes)) {\n\t\t\t\tnodes.forEach(searchForAlertTitle);\n\t\t\t} else if (nodes && typeof nodes === \"object\" && \"type\" in nodes) {\n\t\t\t\tif (nodes.type === AlertTitle) {\n\t\t\t\t\tfound = true;\n\t\t\t\t} else if (\n\t\t\t\t\tnodes.props &&\n\t\t\t\t\ttypeof nodes.props === \"object\" &&\n\t\t\t\t\tnodes.props !== null &&\n\t\t\t\t\t\"children\" in nodes.props\n\t\t\t\t) {\n\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\tsearchForAlertTitle((nodes.props as any).children);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tsearchForAlertTitle(children);\n\t\treturn found;\n\t};\n\n\tconst shouldAlignCenter = !hasAlertTitle(children);\n\tconst finalClassName = shouldAlignCenter\n\t\t? \"nonExistsAlertTitle\"\n\t\t: \"existsAlertTitle\";\n\n\tconst className = `arkynAlertContainer ${scheme} ${finalClassName} ${baseClassName}`;\n\n\tconst value = useMemo(() => ({ scheme }), [scheme]);\n\n\treturn (\n\t\t<AlertContainerContext.Provider value={value}>\n\t\t\t<div className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</AlertContainerContext.Provider>\n\t);\n}\n\nexport { AlertContainer, useAlertContainer };\n"],"mappings":";;;;;AAsBA,IAAM,IAAwB,EAAc,CAAC,CAAwB;AAGrE,SAAS,IAAyC;CACjD,OAAO,EAAW,CAAqB;AACxC;AAkCA,SAAS,EAAe,GAAyC;CAChE,IAAM,EAAE,WAAQ,aAAU,WAAW,GAAe,GAAG,MAAS,GA8B1D,IAAY,uBAAuB,EAAO,KA5BzB,MAAiC;EACvD,IAAI,IAAQ,IACN,KAAuB,MAAqB;GACjD,AAAI,MAAM,QAAQ,CAAK,IACtB,EAAM,QAAQ,CAAmB,IACvB,KAAS,OAAO,KAAU,YAAY,UAAU,MACtD,EAAM,SAAS,IAClB,IAAQ,KAER,EAAM,SACN,OAAO,EAAM,SAAU,YACvB,EAAM,UAAU,QAChB,cAAc,EAAM,SAGpB,EAAqB,EAAM,MAAc,QAAQ;EAGpD;EAEA,OADA,EAAoB,CAAQ,GACrB;CACR,EAE2B,CAAc,CAAQ,IAG9C,qBADA,sBAG+D,GAAG,KAE/D,IAAQ,SAAe,EAAE,UAAO,IAAI,CAAC,CAAM,CAAC;CAElD,OACC,kBAAC,EAAsB,UAAvB;EAAuC;YACtC,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CAC0B,CAAA;AAElC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContent/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertContentProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertContent text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertContent JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"warning\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Session expiring</AlertTitle>\n * <AlertDescription>You will be logged out in 5 minutes.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContent(props: AlertContentProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertContent ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertContent };\n"],"mappings":";;;AAwBA,SAAS,EAAa,GAAuC;CAC5D,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,qBAFgB,IAEN,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContent/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertContentProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertContent, text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertContent JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"warning\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Session expiring</AlertTitle>\n * <AlertDescription>You will be logged out in 5 minutes.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContent(props: AlertContentProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertContent ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertContent };\n"],"mappings":";;;AAwBA,SAAS,EAAa,GAAuC;CAC5D,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,qBAFgB,IAEN,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertDescription/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertDescription body text for an alert. Place inside `AlertContent`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertDescription JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"info\">\n * <AlertContent>\n * <AlertTitle>Maintenance scheduled</AlertTitle>\n * <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertDescription(props: AlertDescriptionProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertDescription ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertDescription };\n"],"mappings":";;;AAuBA,SAAS,EAAiB,GAA2C;CACpE,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,yBAFoB,IAEV,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertDescription/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertDescription, body text for an alert. Place inside `AlertContent`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertDescription JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"info\">\n * <AlertContent>\n * <AlertTitle>Maintenance scheduled</AlertTitle>\n * <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertDescription(props: AlertDescriptionProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertDescription ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertDescription };\n"],"mappings":";;;AAuBA,SAAS,EAAiB,GAA2C;CACpE,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,yBAFoB,IAEV,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertIcon/index.tsx"],"sourcesContent":["import {\n\tAlertTriangle,\n\tCheckCircle2,\n\tInfo,\n\ttype LucideProps,\n\tXCircle,\n} from \"lucide-react\";\n\nimport type { JSX } from \"react\";\nimport { useAlertContainer } from \"../alertContainer\";\nimport \"./styles.css\";\n\ntype AlertIconProps = LucideProps;\n\n/**\n * AlertIcon renders a scheme-appropriate icon from `AlertContainer` context.\n *\n * - `success` → `CheckCircle2`\n * - `danger` → `XCircle`\n * - `warning` → `AlertTriangle`\n * - `info` → `Info`\n *\n * Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.\n *\n * @returns The scheme-matched Lucide icon element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Payment failed</AlertTitle>\n * <AlertDescription>Please check your card details.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertIcon(props: AlertIconProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst { scheme } = useAlertContainer();\n\n\tconst className = `arkynAlertIcon ${scheme} ${baseClassName}`;\n\n\tswitch (scheme) {\n\t\tcase \"success\":\n\t\t\treturn <CheckCircle2 className={className} {...rest} />;\n\t\tcase \"danger\":\n\t\t\treturn <XCircle className={className} {...rest} />;\n\t\tcase \"warning\":\n\t\t\treturn <AlertTriangle className={className} {...rest} />;\n\t\tcase \"info\":\n\t\t\treturn <Info className={className} {...rest} />;\n\t}\n}\n\nexport { AlertIcon };\n"],"mappings":";;;;;AAqCA,SAAS,EAAU,GAAoC;CACtD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS,GACxC,EAAE,cAAW,EAAkB,GAE/B,IAAY,kBAAkB,EAAO,GAAG;CAE9C,QAAQ,GAAR;EACC,KAAK,WACJ,OAAO,kBAAC,GAAD;GAAyB;GAAW,GAAI;EAAO,CAAA;EACvD,KAAK,UACJ,OAAO,kBAAC,GAAD;GAAoB;GAAW,GAAI;EAAO,CAAA;EAClD,KAAK,WACJ,OAAO,kBAAC,GAAD;GAA0B;GAAW,GAAI;EAAO,CAAA;EACxD,KAAK,QACJ,OAAO,kBAAC,GAAD;GAAiB;GAAW,GAAI;EAAO,CAAA;CAChD;AACD"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertIcon/index.tsx"],"sourcesContent":["import {\n\tAlertTriangle,\n\tCheckCircle2,\n\tInfo,\n\ttype LucideProps,\n\tXCircle,\n} from \"lucide-react\";\n\nimport type { JSX } from \"react\";\nimport { useAlertContainer } from \"../alertContainer\";\nimport \"./styles.css\";\n\ntype AlertIconProps = LucideProps;\n\n/**\n * AlertIcon, renders a scheme-appropriate icon from `AlertContainer` context.\n *\n * - `success` → `CheckCircle2`\n * - `danger` → `XCircle`\n * - `warning` → `AlertTriangle`\n * - `info` → `Info`\n *\n * Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.\n *\n * @returns The scheme-matched Lucide icon element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Payment failed</AlertTitle>\n * <AlertDescription>Please check your card details.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertIcon(props: AlertIconProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst { scheme } = useAlertContainer();\n\n\tconst className = `arkynAlertIcon ${scheme} ${baseClassName}`;\n\n\tswitch (scheme) {\n\t\tcase \"success\":\n\t\t\treturn <CheckCircle2 className={className} {...rest} />;\n\t\tcase \"danger\":\n\t\t\treturn <XCircle className={className} {...rest} />;\n\t\tcase \"warning\":\n\t\t\treturn <AlertTriangle className={className} {...rest} />;\n\t\tcase \"info\":\n\t\t\treturn <Info className={className} {...rest} />;\n\t}\n}\n\nexport { AlertIcon };\n"],"mappings":";;;;;AAqCA,SAAS,EAAU,GAAoC;CACtD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS,GACxC,EAAE,cAAW,EAAkB,GAE/B,IAAY,kBAAkB,EAAO,GAAG;CAE9C,QAAQ,GAAR;EACC,KAAK,WACJ,OAAO,kBAAC,GAAD;GAAyB;GAAW,GAAI;EAAO,CAAA;EACvD,KAAK,UACJ,OAAO,kBAAC,GAAD;GAAoB;GAAW,GAAI;EAAO,CAAA;EAClD,KAAK,WACJ,OAAO,kBAAC,GAAD;GAA0B;GAAW,GAAI;EAAO,CAAA;EACxD,KAAK,QACJ,OAAO,kBAAC,GAAD;GAAiB;GAAW,GAAI;EAAO,CAAA;CAChD;AACD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertTitle/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertTitle bold heading for an alert. Place inside `AlertContent`.\n *\n * Its presence is detected by `AlertContainer` to switch the layout from centered to left-aligned.\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertTitle JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Access denied</AlertTitle>\n * <AlertDescription>You don't have permission to view this page.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertTitle(props: AlertTitleProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertTitle ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertTitle };\n"],"mappings":";;;AAwBA,SAAS,EAAW,GAAqC;CACxD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,mBAFc,IAEJ,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertTitle/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertTitle, bold heading for an alert. Place inside `AlertContent`.\n *\n * Its presence is detected by `AlertContainer` to switch the layout from centered to left-aligned.\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertTitle JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Access denied</AlertTitle>\n * <AlertDescription>You don't have permission to view this page.</AlertDescription>\n * </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertTitle(props: AlertTitleProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertTitle ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertTitle };\n"],"mappings":";;;AAwBA,SAAS,EAAW,GAAqC;CACxD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,mBAFc,IAEJ,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioPlayer/index.tsx"],"sourcesContent":["import { Pause, Play } from \"lucide-react\";\nimport {\n\ttype AudioHTMLAttributes,\n\ttype JSX,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useSlider } from \"../../hooks/useSlider\";\nimport { Slider } from \"../slider\";\nimport \"./styles.css\";\n\n/** Audio state snapshot passed to play/pause callbacks. */\ntype AudioInformationProps = {\n\t/** Current playback position in seconds. */\n\tcurrentTime: number;\n\t/** Total audio duration in seconds. */\n\ttotalTime: number;\n\t/** Current position formatted as `MM:SS`. */\n\tformattedCurrentTime: string;\n\t/** Total duration formatted as `MM:SS`. */\n\tformattedTotalTime: string;\n};\n\ntype AudioPlayerProps = Omit<\n\tAudioHTMLAttributes<HTMLAudioElement>,\n\t\"onEnded\" | \"src\"\n> & {\n\t/** Audio file URL. Required. */\n\tsrc: string;\n\t/** Disables the play/pause button and the progress slider. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when playback starts. Receives the current audio state. */\n\tonPlayAudio?: (props: AudioInformationProps) => void;\n\t/** Callback fired when playback is paused. Receives the current audio state. */\n\tonPauseAudio?: (props: AudioInformationProps) => void;\n};\n\n/**\n * AudioPlayer play/pause controls, a scrubable progress bar, and elapsed/total time display.\n *\n * @param props.src - Audio file URL. Required.\n * @param props.disabled - Disables controls. Default: false\n * @param props.onPlayAudio - Callback fired when playback starts.\n * @param props.onPauseAudio - Callback fired when playback is paused.\n *\n * **...Other valid HTML properties for `<audio>` (except `onEnded` and `src`)**\n *\n * @returns AudioPlayer JSX element.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioPlayer src=\"/audio/episode.mp3\" />\n *\n * // With play/pause callbacks\n * <AudioPlayer\n * src=\"/audio/episode.mp3\"\n * onPlayAudio={(info) => console.log(\"Playing at\", info.formattedCurrentTime)}\n * onPauseAudio={(info) => console.log(\"Paused at\", info.formattedCurrentTime)}\n * />\n * ```\n */\nfunction AudioPlayer(props: AudioPlayerProps): JSX.Element {\n\tconst { onPlayAudio, onPauseAudio, disabled, style, ...rest } = props;\n\n\tconst [sliderValue, setSliderValue] = useSlider(0);\n\tconst [isPlaying, setIsPlaying] = useState(false);\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst audioReference = useRef<HTMLAudioElement>(null);\n\n\tconst currentTime = audioReference.current?.currentTime || 0;\n\tconst totalTime = audioReference.current?.duration || 0;\n\n\tconst formattedCurrentTime = formatTime(currentTime);\n\tconst formattedTotalTime = formatTime(totalTime);\n\n\tconst audioInformation: AudioInformationProps = {\n\t\ttotalTime,\n\t\tcurrentTime,\n\t\tformattedCurrentTime,\n\t\tformattedTotalTime,\n\t};\n\n\tfunction formatTime(time?: number): string {\n\t\tif (!time) return \"00:00\";\n\n\t\tconst minutes = Math.floor(time / 60);\n\t\tconst seconds = Math.floor(time % 60);\n\n\t\tconst formattedMinutes = String(minutes).padStart(2, \"0\");\n\t\tconst formattedSeconds = String(seconds).padStart(2, \"0\");\n\n\t\treturn `${formattedMinutes}:${formattedSeconds}`;\n\t}\n\n\tfunction handlePlayAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPlayAudio) props.onPlayAudio(audioInformation);\n\t\taudioElement.play();\n\t\tsetIsPlaying(true);\n\t}\n\n\tfunction handlePauseAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPauseAudio) props.onPauseAudio(audioInformation);\n\t\taudioElement.pause();\n\t\tsetIsPlaying(false);\n\t}\n\n\tfunction handleToggleAudio(): void {\n\t\tif (isPlaying) handlePauseAudio();\n\t\telse handlePlayAudio();\n\t}\n\n\tfunction handleSliderChange(value: number): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst totalTime = audioElement.duration;\n\t\tconst currentTime = (value / 100) * totalTime;\n\n\t\taudioElement.currentTime = currentTime;\n\t}\n\n\tif (isDragging || !isPlaying) {\n\t\taudioReference.current?.pause();\n\t} else if (isPlaying) {\n\t\taudioReference.current?.play();\n\t}\n\n\tuseEffect(() => {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst handleTimeUpdate = () => {\n\t\t\tconst totalTime = audioElement.duration;\n\t\t\tconst currentTime = audioElement.currentTime;\n\n\t\t\tconst value = (currentTime / totalTime) * 100;\n\t\t\tsetSliderValue(value);\n\t\t};\n\n\t\taudioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n\n\t\treturn () => {\n\t\t\taudioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n\t\t};\n\t}, [setSliderValue]);\n\n\treturn (\n\t\t<div className=\"arkynAudioPlayer\" style={style}>\n\t\t\t<audio\n\t\t\t\t{...rest}\n\t\t\t\tref={audioReference}\n\t\t\t\tsrc={props.src || undefined}\n\t\t\t\tonEnded={handlePauseAudio}\n\t\t\t/>\n\n\t\t\t<button type=\"button\" disabled={disabled} onClick={handleToggleAudio}>\n\t\t\t\t{isPlaying && <Pause />}\n\t\t\t\t{!isPlaying && <Play />}\n\t\t\t</button>\n\n\t\t\t<p>{formattedCurrentTime}</p>\n\n\t\t\t<Slider\n\t\t\t\tvalue={sliderValue}\n\t\t\t\tonChange={handleSliderChange}\n\t\t\t\tonDragging={setIsDragging}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\n\t\t\t<p>{formattedTotalTime}</p>\n\t\t</div>\n\t);\n}\n\nexport { AudioPlayer };\n"],"mappings":";;;;;;;AAgEA,SAAS,EAAY,GAAsC;CAC1D,IAAM,EAAE,gBAAa,iBAAc,aAAU,UAAO,GAAG,MAAS,GAE1D,CAAC,GAAa,KAAkB,EAAU,CAAC,GAC3C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAY,KAAiB,EAAS,EAAK,GAE5C,IAAiB,EAAyB,IAAI,GAE9C,IAAc,EAAe,SAAS,eAAe,GACrD,IAAY,EAAe,SAAS,YAAY,GAEhD,IAAuB,EAAW,CAAW,GAC7C,IAAqB,EAAW,CAAS,GAEzC,IAA0C;EAC/C;EACA;EACA;EACA;CACD;CAEA,SAAS,EAAW,GAAuB;EAC1C,IAAI,CAAC,GAAM,OAAO;EAElB,IAAM,IAAU,KAAK,MAAM,IAAO,EAAE,GAC9B,IAAU,KAAK,MAAM,IAAO,EAAE;EAKpC,OAAO,GAHkB,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAG3C,EAAiB,GAFF,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAEvB;CAC/B;CAEA,SAAS,IAAwB;EAChC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,eAAa,EAAM,YAAY,CAAgB,GACzD,EAAa,KAAK,GAClB,EAAa,EAAI;CAClB;CAEA,SAAS,IAAyB;EACjC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,gBAAc,EAAM,aAAa,CAAgB,GAC3D,EAAa,MAAM,GACnB,EAAa,EAAK;CACnB;CAEA,SAAS,IAA0B;EAClC,AAAI,IAAW,EAAiB,IAC3B,EAAgB;CACtB;CAEA,SAAS,EAAmB,GAAqB;EAChD,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,IAAY,EAAa;EAG/B,EAAa,cAFQ,IAAQ,MAAO;CAGrC;CA2BA,OAzBI,KAAc,CAAC,IAClB,EAAe,SAAS,MAAM,IACpB,KACV,EAAe,SAAS,KAAK,GAG9B,QAAgB;EACf,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,UAAyB;GAC9B,IAAM,IAAY,EAAa;GAI/B,EAHoB,EAAa,cAEJ,IAAa,GACtB;EACrB;EAIA,OAFA,EAAa,iBAAiB,cAAc,CAAgB,SAE/C;GACZ,EAAa,oBAAoB,cAAc,CAAgB;EAChE;CACD,GAAG,CAAC,CAAc,CAAC,GAGlB,kBAAC,OAAD;EAAK,WAAU;EAA0B;YAAzC;GACC,kBAAC,SAAD;IACC,GAAI;IACJ,KAAK;IACL,KAAK,EAAM,OAAO,KAAA;IAClB,SAAS;GACT,CAAA;GAED,kBAAC,UAAD;IAAQ,MAAK;IAAmB;IAAU,SAAS;cAAnD,CACE,KAAa,kBAAC,GAAD,CAAQ,CAAA,GACrB,CAAC,KAAa,kBAAC,GAAD,CAAO,CAAA,CACf;;GAER,kBAAC,KAAD,EAAA,UAAI,EAAwB,CAAA;GAE5B,kBAAC,GAAD;IACC,OAAO;IACP,UAAU;IACV,YAAY;IACF;GACV,CAAA;GAED,kBAAC,KAAD,EAAA,UAAI,EAAsB,CAAA;EACtB;;AAEP"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioPlayer/index.tsx"],"sourcesContent":["import { Pause, Play } from \"lucide-react\";\nimport {\n\ttype AudioHTMLAttributes,\n\ttype JSX,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useSlider } from \"../../hooks/useSlider\";\nimport { Slider } from \"../slider\";\nimport \"./styles.css\";\n\n/** Audio state snapshot passed to play/pause callbacks. */\ntype AudioInformationProps = {\n\t/** Current playback position in seconds. */\n\tcurrentTime: number;\n\t/** Total audio duration in seconds. */\n\ttotalTime: number;\n\t/** Current position formatted as `MM:SS`. */\n\tformattedCurrentTime: string;\n\t/** Total duration formatted as `MM:SS`. */\n\tformattedTotalTime: string;\n};\n\ntype AudioPlayerProps = Omit<\n\tAudioHTMLAttributes<HTMLAudioElement>,\n\t\"onEnded\" | \"src\"\n> & {\n\t/** Audio file URL. Required. */\n\tsrc: string;\n\t/** Disables the play/pause button and the progress slider. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when playback starts. Receives the current audio state. */\n\tonPlayAudio?: (props: AudioInformationProps) => void;\n\t/** Callback fired when playback is paused. Receives the current audio state. */\n\tonPauseAudio?: (props: AudioInformationProps) => void;\n};\n\n/**\n * AudioPlayer, play/pause controls, a scrubable progress bar, and elapsed/total time display.\n *\n * @param props.src - Audio file URL. Required.\n * @param props.disabled - Disables controls. Default: false\n * @param props.onPlayAudio - Callback fired when playback starts.\n * @param props.onPauseAudio - Callback fired when playback is paused.\n *\n * **...Other valid HTML properties for `<audio>` (except `onEnded` and `src`)**\n *\n * @returns AudioPlayer JSX element.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioPlayer src=\"/audio/episode.mp3\" />\n *\n * // With play/pause callbacks\n * <AudioPlayer\n * src=\"/audio/episode.mp3\"\n * onPlayAudio={(info) => console.log(\"Playing at\", info.formattedCurrentTime)}\n * onPauseAudio={(info) => console.log(\"Paused at\", info.formattedCurrentTime)}\n * />\n * ```\n */\nfunction AudioPlayer(props: AudioPlayerProps): JSX.Element {\n\tconst { onPlayAudio, onPauseAudio, disabled, style, ...rest } = props;\n\n\tconst [sliderValue, setSliderValue] = useSlider(0);\n\tconst [isPlaying, setIsPlaying] = useState(false);\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst audioReference = useRef<HTMLAudioElement>(null);\n\n\tconst currentTime = audioReference.current?.currentTime || 0;\n\tconst totalTime = audioReference.current?.duration || 0;\n\n\tconst formattedCurrentTime = formatTime(currentTime);\n\tconst formattedTotalTime = formatTime(totalTime);\n\n\tconst audioInformation: AudioInformationProps = {\n\t\ttotalTime,\n\t\tcurrentTime,\n\t\tformattedCurrentTime,\n\t\tformattedTotalTime,\n\t};\n\n\tfunction formatTime(time?: number): string {\n\t\tif (!time) return \"00:00\";\n\n\t\tconst minutes = Math.floor(time / 60);\n\t\tconst seconds = Math.floor(time % 60);\n\n\t\tconst formattedMinutes = String(minutes).padStart(2, \"0\");\n\t\tconst formattedSeconds = String(seconds).padStart(2, \"0\");\n\n\t\treturn `${formattedMinutes}:${formattedSeconds}`;\n\t}\n\n\tfunction handlePlayAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPlayAudio) props.onPlayAudio(audioInformation);\n\t\taudioElement.play();\n\t\tsetIsPlaying(true);\n\t}\n\n\tfunction handlePauseAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPauseAudio) props.onPauseAudio(audioInformation);\n\t\taudioElement.pause();\n\t\tsetIsPlaying(false);\n\t}\n\n\tfunction handleToggleAudio(): void {\n\t\tif (isPlaying) handlePauseAudio();\n\t\telse handlePlayAudio();\n\t}\n\n\tfunction handleSliderChange(value: number): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst totalTime = audioElement.duration;\n\t\tconst currentTime = (value / 100) * totalTime;\n\n\t\taudioElement.currentTime = currentTime;\n\t}\n\n\tif (isDragging || !isPlaying) {\n\t\taudioReference.current?.pause();\n\t} else if (isPlaying) {\n\t\taudioReference.current?.play();\n\t}\n\n\tuseEffect(() => {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst handleTimeUpdate = () => {\n\t\t\tconst totalTime = audioElement.duration;\n\t\t\tconst currentTime = audioElement.currentTime;\n\n\t\t\tconst value = (currentTime / totalTime) * 100;\n\t\t\tsetSliderValue(value);\n\t\t};\n\n\t\taudioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n\n\t\treturn () => {\n\t\t\taudioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n\t\t};\n\t}, [setSliderValue]);\n\n\treturn (\n\t\t<div className=\"arkynAudioPlayer\" style={style}>\n\t\t\t<audio\n\t\t\t\t{...rest}\n\t\t\t\tref={audioReference}\n\t\t\t\tsrc={props.src || undefined}\n\t\t\t\tonEnded={handlePauseAudio}\n\t\t\t/>\n\n\t\t\t<button type=\"button\" disabled={disabled} onClick={handleToggleAudio}>\n\t\t\t\t{isPlaying && <Pause />}\n\t\t\t\t{!isPlaying && <Play />}\n\t\t\t</button>\n\n\t\t\t<p>{formattedCurrentTime}</p>\n\n\t\t\t<Slider\n\t\t\t\tvalue={sliderValue}\n\t\t\t\tonChange={handleSliderChange}\n\t\t\t\tonDragging={setIsDragging}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\n\t\t\t<p>{formattedTotalTime}</p>\n\t\t</div>\n\t);\n}\n\nexport { AudioPlayer };\n"],"mappings":";;;;;;;AAgEA,SAAS,EAAY,GAAsC;CAC1D,IAAM,EAAE,gBAAa,iBAAc,aAAU,UAAO,GAAG,MAAS,GAE1D,CAAC,GAAa,KAAkB,EAAU,CAAC,GAC3C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAY,KAAiB,EAAS,EAAK,GAE5C,IAAiB,EAAyB,IAAI,GAE9C,IAAc,EAAe,SAAS,eAAe,GACrD,IAAY,EAAe,SAAS,YAAY,GAEhD,IAAuB,EAAW,CAAW,GAC7C,IAAqB,EAAW,CAAS,GAEzC,IAA0C;EAC/C;EACA;EACA;EACA;CACD;CAEA,SAAS,EAAW,GAAuB;EAC1C,IAAI,CAAC,GAAM,OAAO;EAElB,IAAM,IAAU,KAAK,MAAM,IAAO,EAAE,GAC9B,IAAU,KAAK,MAAM,IAAO,EAAE;EAKpC,OAAO,GAHkB,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAG3C,EAAiB,GAFF,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAEvB;CAC/B;CAEA,SAAS,IAAwB;EAChC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,eAAa,EAAM,YAAY,CAAgB,GACzD,EAAa,KAAK,GAClB,EAAa,EAAI;CAClB;CAEA,SAAS,IAAyB;EACjC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,gBAAc,EAAM,aAAa,CAAgB,GAC3D,EAAa,MAAM,GACnB,EAAa,EAAK;CACnB;CAEA,SAAS,IAA0B;EAClC,AAAI,IAAW,EAAiB,IAC3B,EAAgB;CACtB;CAEA,SAAS,EAAmB,GAAqB;EAChD,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,IAAY,EAAa;EAG/B,EAAa,cAFQ,IAAQ,MAAO;CAGrC;CA2BA,OAzBI,KAAc,CAAC,IAClB,EAAe,SAAS,MAAM,IACpB,KACV,EAAe,SAAS,KAAK,GAG9B,QAAgB;EACf,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,UAAyB;GAC9B,IAAM,IAAY,EAAa;GAI/B,EAHoB,EAAa,cAEJ,IAAa,GACtB;EACrB;EAIA,OAFA,EAAa,iBAAiB,cAAc,CAAgB,SAE/C;GACZ,EAAa,oBAAoB,cAAc,CAAgB;EAChE;CACD,GAAG,CAAC,CAAc,CAAC,GAGlB,kBAAC,OAAD;EAAK,WAAU;EAA0B;YAAzC;GACC,kBAAC,SAAD;IACC,GAAI;IACJ,KAAK;IACL,KAAK,EAAM,OAAO,KAAA;IAClB,SAAS;GACT,CAAA;GAED,kBAAC,UAAD;IAAQ,MAAK;IAAmB;IAAU,SAAS;cAAnD,CACE,KAAa,kBAAC,GAAD,CAAQ,CAAA,GACrB,CAAC,KAAa,kBAAC,GAAD,CAAO,CAAA,CACf;;GAER,kBAAC,KAAD,EAAA,UAAI,EAAwB,CAAA;GAE5B,kBAAC,GAAD;IACC,OAAO;IACP,UAAU;IACV,YAAY;IACF;GACV,CAAA;GAED,kBAAC,KAAD,EAAA,UAAI,EAAsB,CAAA;EACtB;;AAEP"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype AudioUploadProps = {\n\t/** Field name for form submission (stores the uploaded audio URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: string;\n\t/** Form-data field name used for the file. @default \"file\" */\n\tfileName?: string;\n\t/** HTTP method for the upload request. @default \"POST\" */\n\tmethod?: string;\n\t/** Accepted audio MIME types or extensions (e.g. `\"audio/mp3,audio/wav\"`). @default \"audio/*\" */\n\tacceptAudio?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte um arquivo de áudio aqui\" */\n\tdropAudioText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo de áudio\" */\n\tselectAudioButtonText?: string;\n\t/** Label for the file-picker button after a file is selected. @default \"Trocar arquivo de áudio\" */\n\tchangeAudioButtonText?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n\t/** Property name in the server response that contains the file URL. @default \"url\" */\n\tfileResponseName?: string;\n\t/** Optional label text displayed above the upload area. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. @default false */\n\tshowAsterisk?: boolean;\n\t/** Disables file selection and upload. @default false */\n\tdisabled?: boolean;\n\t/** Pre-populated audio URL (e.g. an existing recording). @default \"\" */\n\tdefaultValue?: string;\n};\n\n/**\n * AudioUpload drag-and-drop audio file uploader with server upload and playback preview.\n *\n * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.action - Upload endpoint URL. Required.\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.method - HTTP method. Default: \"POST\"\n * @param props.acceptAudio - Accepted MIME types / extensions. Default: \"audio/*\"\n * @param props.onChange - Callback fired after a successful upload receives the audio URL.\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.defaultValue - Pre-populated audio URL.\n *\n * @returns AudioUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioUpload name=\"audio\" action=\"/api/upload\" />\n *\n * // With label and custom texts\n * <AudioUpload\n * name=\"podcast\"\n * action=\"/api/upload/podcast\"\n * label=\"Podcast Episode\"\n * showAsterisk\n * selectAudioButtonText=\"Choose audio file\"\n * onChange={(url) => setPodcastUrl(url)}\n * />\n * ```\n */\n\nfunction AudioUpload(props: AudioUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tonChange,\n\t\tfileResponseName = \"url\",\n\t\tselectAudioButtonText = \"Selecionar arquivo de áudio\",\n\t\tdropAudioText = \"Ou arraste e solte um arquivo de áudio aqui\",\n\t\tchangeAudioButtonText = \"Trocar arquivo de áudio\",\n\t\tacceptAudio = \"audio/*\",\n\t\taction,\n\t\tdefaultValue = \"\",\n\t\tshowAsterisk = false,\n\t\tdisabled = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File | null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadAudio(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar audio\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tif (file.type.indexOf(\"audio\") === -1) {\n\t\t\tsetError(\"O arquivo selecionado não é um arquivo de áudio\");\n\t\t\treturn;\n\t\t}\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadAudio(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasAudio\" : \"noHasAudio\";\n\tconst className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\n\t\t\t<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value || \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tdropAudioText={dropAudioText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectAudioButtonText={selectAudioButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tchangeAudioButtonText={changeAudioButtonText}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\treSendAudio={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadAudio(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { AudioUpload };\n"],"mappings":";;;;;;;;;;AAgFA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,UACA,cAAW,QACX,YAAS,QACT,aACA,sBAAmB,OACnB,2BAAwB,+BACxB,mBAAgB,+CAChB,2BAAwB,2BACxB,iBAAc,WACd,WACA,kBAAe,IACf,kBAAe,IACf,cAAW,OACR,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,sBAAsB;EAChC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,QAEJ;OAAI,EAAK,KAAK,QAAQ,OAAO,MAAM,IAAI;IACtC,EAAS,iDAAiD;IAC1D;GACD;GAGA,AADA,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;EAHtB;CAID;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,oBARQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAOhD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACG;KACU;KACb;KACQ;KACP;KACX,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype AudioUploadProps = {\n\t/** Field name for form submission (stores the uploaded audio URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: string;\n\t/** Form-data field name used for the file. @default \"file\" */\n\tfileName?: string;\n\t/** HTTP method for the upload request. @default \"POST\" */\n\tmethod?: string;\n\t/** Accepted audio MIME types or extensions (e.g. `\"audio/mp3,audio/wav\"`). @default \"audio/*\" */\n\tacceptAudio?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte um arquivo de áudio aqui\" */\n\tdropAudioText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo de áudio\" */\n\tselectAudioButtonText?: string;\n\t/** Label for the file-picker button after a file is selected. @default \"Trocar arquivo de áudio\" */\n\tchangeAudioButtonText?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n\t/** Property name in the server response that contains the file URL. @default \"url\" */\n\tfileResponseName?: string;\n\t/** Optional label text displayed above the upload area. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. @default false */\n\tshowAsterisk?: boolean;\n\t/** Disables file selection and upload. @default false */\n\tdisabled?: boolean;\n\t/** Pre-populated audio URL (e.g. an existing recording). @default \"\" */\n\tdefaultValue?: string;\n};\n\n/**\n * AudioUpload, drag-and-drop audio file uploader with server upload and playback preview.\n *\n * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.action - Upload endpoint URL. Required.\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.method - HTTP method. Default: \"POST\"\n * @param props.acceptAudio - Accepted MIME types / extensions. Default: \"audio/*\"\n * @param props.onChange - Callback fired after a successful upload, receives the audio URL.\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.defaultValue - Pre-populated audio URL.\n *\n * @returns AudioUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioUpload name=\"audio\" action=\"/api/upload\" />\n *\n * // With label and custom texts\n * <AudioUpload\n * name=\"podcast\"\n * action=\"/api/upload/podcast\"\n * label=\"Podcast Episode\"\n * showAsterisk\n * selectAudioButtonText=\"Choose audio file\"\n * onChange={(url) => setPodcastUrl(url)}\n * />\n * ```\n */\n\nfunction AudioUpload(props: AudioUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tonChange,\n\t\tfileResponseName = \"url\",\n\t\tselectAudioButtonText = \"Selecionar arquivo de áudio\",\n\t\tdropAudioText = \"Ou arraste e solte um arquivo de áudio aqui\",\n\t\tchangeAudioButtonText = \"Trocar arquivo de áudio\",\n\t\tacceptAudio = \"audio/*\",\n\t\taction,\n\t\tdefaultValue = \"\",\n\t\tshowAsterisk = false,\n\t\tdisabled = false,\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File | null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadAudio(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar audio\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tif (file.type.indexOf(\"audio\") === -1) {\n\t\t\tsetError(\"O arquivo selecionado não é um arquivo de áudio\");\n\t\t\treturn;\n\t\t}\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadAudio(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasAudio\" : \"noHasAudio\";\n\tconst className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\n\t\t\t<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value || \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tdropAudioText={dropAudioText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectAudioButtonText={selectAudioButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tchangeAudioButtonText={changeAudioButtonText}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\treSendAudio={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadAudio(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { AudioUpload };\n"],"mappings":";;;;;;;;;;AAgFA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,UACA,cAAW,QACX,YAAS,QACT,aACA,sBAAmB,OACnB,2BAAwB,+BACxB,mBAAgB,+CAChB,2BAAwB,2BACxB,iBAAc,WACd,WACA,kBAAe,IACf,kBAAe,IACf,cAAW,OACR,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,sBAAsB;EAChC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,QAEJ;OAAI,EAAK,KAAK,QAAQ,OAAO,MAAM,IAAI;IACtC,EAAS,iDAAiD;IAC1D;GACD;GAGA,AADA,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;EAHtB;CAID;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,oBARQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAOhD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACG;KACU;KACb;KACQ;KACP;KACX,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/badge/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport \"./styles.css\";\n\ntype BadgeProps = HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Badge size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle background on hover.\n\t * @default \"ghost\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\";\n\t/**\n\t * Color scheme applied to the badge.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\t/** Lucide icon rendered to the left of the label. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered to the right of the label. */\n\trightIcon?: LucideIcon;\n};\n\n/**\n * Badge displays labels, statuses, and categorization tags.\n *\n * @param props.size - Badge size (`md` | `lg`). Default: \"lg\"\n * @param props.variant - Visual style variant. Default: \"ghost\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n * @param props.leftIcon - Lucide icon rendered to the left of the label.\n * @param props.rightIcon - Lucide icon rendered to the right of the label.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Badge JSX element.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // With color scheme\n * <Badge scheme=\"success\">Approved</Badge>\n *\n * // With icon\n * <Badge leftIcon={CheckIcon} scheme=\"success\">Completed</Badge>\n *\n * // Custom size, variant and scheme\n * <Badge size=\"lg\" variant=\"solid\" scheme=\"warning\" rightIcon={AlertIcon}>\n * Warning\n * </Badge>\n * ```\n */\n\nfunction Badge(props: BadgeProps) {\n\tconst {\n\t\tvariant = \"ghost\",\n\t\tscheme = \"primary\",\n\t\tsize = \"lg\",\n\t\tleftIcon,\n\t\trightIcon,\n\t\tclassName: baseClassName = \"\",\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst iconSizes = { md: 12, lg: 14 };\n\tconst iconSize = iconSizes[size];\n\n\tconst className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest}>\n\t\t\t<IconRenderer iconSize={iconSize} icon={leftIcon} />\n\t\t\t<p>{children}</p>\n\t\t\t<IconRenderer iconSize={iconSize} icon={rightIcon} />\n\t\t</div>\n\t);\n}\n\nexport { Badge };\n"],"mappings":";;;;AA8DA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,aAAU,SACV,YAAS,WACT,UAAO,MACP,aACA,cACA,WAAW,IAAgB,IAC3B,aACA,GAAG,MACA,GAGE,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU;CAI3B,OACC,kBAAC,OAAD;EAAK,WAAW,cAHe,EAAQ,GAAG,EAAO,GAAG,EAAK,GAAG,IAGlC,KAAK;EAAG,GAAI;YAAtC;GACC,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAW,CAAA;GACnD,kBAAC,KAAD,EAAI,YAAY,CAAA;GAChB,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAY,CAAA;EAChD;;AAEP"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/badge/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport \"./styles.css\";\n\ntype BadgeProps = HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Badge size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle background on hover.\n\t * @default \"ghost\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\";\n\t/**\n\t * Color scheme applied to the badge.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\t/** Lucide icon rendered to the left of the label. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered to the right of the label. */\n\trightIcon?: LucideIcon;\n};\n\n/**\n * Badge, displays labels, statuses, and categorization tags.\n *\n * @param props.size - Badge size (`md` | `lg`). Default: \"lg\"\n * @param props.variant - Visual style variant. Default: \"ghost\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n * @param props.leftIcon - Lucide icon rendered to the left of the label.\n * @param props.rightIcon - Lucide icon rendered to the right of the label.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Badge JSX element.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // With color scheme\n * <Badge scheme=\"success\">Approved</Badge>\n *\n * // With icon\n * <Badge leftIcon={CheckIcon} scheme=\"success\">Completed</Badge>\n *\n * // Custom size, variant and scheme\n * <Badge size=\"lg\" variant=\"solid\" scheme=\"warning\" rightIcon={AlertIcon}>\n * Warning\n * </Badge>\n * ```\n */\n\nfunction Badge(props: BadgeProps) {\n\tconst {\n\t\tvariant = \"ghost\",\n\t\tscheme = \"primary\",\n\t\tsize = \"lg\",\n\t\tleftIcon,\n\t\trightIcon,\n\t\tclassName: baseClassName = \"\",\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst iconSizes = { md: 12, lg: 14 };\n\tconst iconSize = iconSizes[size];\n\n\tconst className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest}>\n\t\t\t<IconRenderer iconSize={iconSize} icon={leftIcon} />\n\t\t\t<p>{children}</p>\n\t\t\t<IconRenderer iconSize={iconSize} icon={rightIcon} />\n\t\t</div>\n\t);\n}\n\nexport { Badge };\n"],"mappings":";;;;AA8DA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,aAAU,SACV,YAAS,WACT,UAAO,MACP,aACA,cACA,WAAW,IAAgB,IAC3B,aACA,GAAG,MACA,GAGE,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU;CAI3B,OACC,kBAAC,OAAD;EAAK,WAAW,cAHe,EAAQ,GAAG,EAAO,GAAG,EAAK,GAAG,IAGlC,KAAK;EAAG,GAAI;YAAtC;GACC,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAW,CAAA;GACnD,kBAAC,KAAD,EAAI,YAAY,CAAA;GAChB,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAY,CAAA;EAChD;;AAEP"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/button/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport \"./styles.css\";\n\ntype ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Shows a spinner and disables the button during async operations. @default false */\n\tisLoading?: boolean;\n\t/** Text displayed beside the spinner when `isLoading` is true. */\n\tloadingText?: string;\n\t/**\n\t * Button size.\n\t * @default \"md\"\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle hover.\n\t * - `invisible`: no visual styling.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\" | \"invisible\";\n\t/**\n\t * Color scheme applied to the button.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\t/** Lucide icon rendered to the left of the label. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered to the right of the label. */\n\trightIcon?: LucideIcon;\n};\n\n/**\n * Button used for user interactions and form submissions.\n *\n * @param props.isLoading - Shows a spinner and disables the button. Default: false\n * @param props.loadingText - Text displayed beside the spinner when loading.\n * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n * @param props.leftIcon - Lucide icon rendered to the left of the label.\n * @param props.rightIcon - Lucide icon rendered to the right of the label.\n *\n * **...Other valid HTML properties for `<button>`**\n *\n * @returns Button JSX element.\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button>Click me</Button>\n *\n * // With color scheme\n * <Button scheme=\"success\">Save</Button>\n *\n * // With loading state\n * <Button isLoading loadingText=\"Saving...\">Save</Button>\n *\n * // With icons\n * <Button leftIcon={SaveIcon} scheme=\"success\">Save</Button>\n *\n * // Custom size, variant and scheme\n * <Button size=\"lg\" variant=\"outline\" scheme=\"danger\" rightIcon={TrashIcon}>\n * Delete\n * </Button>\n * ```\n */\n\nfunction Button(props: ButtonProps) {\n\tconst {\n\t\tisLoading = false,\n\t\tscheme = \"primary\",\n\t\tvariant = \"solid\",\n\t\tloadingText,\n\t\tsize = \"md\",\n\t\tleftIcon,\n\t\trightIcon,\n\t\tdisabled,\n\t\tclassName: baseClassName = \"\",\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingClass = isLoading ? \"loadingTrue\" : \"loadingFalse\";\n\tconst loadingTextClass = loadingText ? \"loadingTextTrue\" : \"loadingTextFalse\";\n\n\tconst className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;\n\n\treturn (\n\t\t<button className={className} disabled={disabled || isLoading} {...rest}>\n\t\t\t<div className=\"arkynButtonSpinner\">\n\t\t\t\t<Loader2 size={iconSize} strokeWidth={2.5} />\n\t\t\t\t{loadingText && loadingText}\n\t\t\t</div>\n\n\t\t\t<div className=\"arkynButtonContent\">\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={leftIcon} />\n\t\t\t\t{children}\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={rightIcon} />\n\t\t\t</div>\n\t\t</button>\n\t);\n}\n\nexport { Button };\n"],"mappings":";;;;;AAwEA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,eAAY,IACZ,YAAS,WACT,aAAU,SACV,gBACA,UAAO,MACP,aACA,cACA,aACA,WAAW,IAAgB,IAC3B,aACA,GAAG,MACA,GAGE,IAAW;EADG,IAAI;EAAI,IAAI;EAAI,IAAI;EAAI,IAAI;CAC/B,EAAU;CAO3B,OACC,kBAAC,UAAD;EAAmB,WAAA,eANC,IAAY,gBAAgB,eAGH,GAAG,EAAQ,GAAG,EAAO,GAAG,EAAK,GAFlD,IAAc,oBAAoB,mBAEoC,GAAG;EAGnE,UAAU,KAAY;EAAW,GAAI;YAAnE,CACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACC,kBAAC,GAAD;IAAS,MAAM;IAAU,aAAa;GAAM,CAAA,GAC3C,KAAe,CACZ;MAEL,kBAAC,OAAD;GAAK,WAAU;aAAf;IACC,kBAAC,GAAD;KAAwB;KAAU,MAAM;IAAW,CAAA;IAClD;IACD,kBAAC,GAAD;KAAwB;KAAU,MAAM;IAAY,CAAA;GAChD;IACE;;AAEV"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/button/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport \"./styles.css\";\n\ntype ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Shows a spinner and disables the button during async operations. @default false */\n\tisLoading?: boolean;\n\t/** Text displayed beside the spinner when `isLoading` is true. */\n\tloadingText?: string;\n\t/**\n\t * Button size.\n\t * @default \"md\"\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle hover.\n\t * - `invisible`: no visual styling.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\" | \"invisible\";\n\t/**\n\t * Color scheme applied to the button.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\t/** Lucide icon rendered to the left of the label. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered to the right of the label. */\n\trightIcon?: LucideIcon;\n};\n\n/**\n * Button, used for user interactions and form submissions.\n *\n * @param props.isLoading - Shows a spinner and disables the button. Default: false\n * @param props.loadingText - Text displayed beside the spinner when loading.\n * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n * @param props.leftIcon - Lucide icon rendered to the left of the label.\n * @param props.rightIcon - Lucide icon rendered to the right of the label.\n *\n * **...Other valid HTML properties for `<button>`**\n *\n * @returns Button JSX element.\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button>Click me</Button>\n *\n * // With color scheme\n * <Button scheme=\"success\">Save</Button>\n *\n * // With loading state\n * <Button isLoading loadingText=\"Saving...\">Save</Button>\n *\n * // With icons\n * <Button leftIcon={SaveIcon} scheme=\"success\">Save</Button>\n *\n * // Custom size, variant and scheme\n * <Button size=\"lg\" variant=\"outline\" scheme=\"danger\" rightIcon={TrashIcon}>\n * Delete\n * </Button>\n * ```\n */\n\nfunction Button(props: ButtonProps) {\n\tconst {\n\t\tisLoading = false,\n\t\tscheme = \"primary\",\n\t\tvariant = \"solid\",\n\t\tloadingText,\n\t\tsize = \"md\",\n\t\tleftIcon,\n\t\trightIcon,\n\t\tdisabled,\n\t\tclassName: baseClassName = \"\",\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingClass = isLoading ? \"loadingTrue\" : \"loadingFalse\";\n\tconst loadingTextClass = loadingText ? \"loadingTextTrue\" : \"loadingTextFalse\";\n\n\tconst className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;\n\n\treturn (\n\t\t<button className={className} disabled={disabled || isLoading} {...rest}>\n\t\t\t<div className=\"arkynButtonSpinner\">\n\t\t\t\t<Loader2 size={iconSize} strokeWidth={2.5} />\n\t\t\t\t{loadingText && loadingText}\n\t\t\t</div>\n\n\t\t\t<div className=\"arkynButtonContent\">\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={leftIcon} />\n\t\t\t\t{children}\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={rightIcon} />\n\t\t\t</div>\n\t\t</button>\n\t);\n}\n\nexport { Button };\n"],"mappings":";;;;;AAwEA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,eAAY,IACZ,YAAS,WACT,aAAU,SACV,gBACA,UAAO,MACP,aACA,cACA,aACA,WAAW,IAAgB,IAC3B,aACA,GAAG,MACA,GAGE,IAAW;EADG,IAAI;EAAI,IAAI;EAAI,IAAI;EAAI,IAAI;CAC/B,EAAU;CAO3B,OACC,kBAAC,UAAD;EAAmB,WAAA,eANC,IAAY,gBAAgB,eAGH,GAAG,EAAQ,GAAG,EAAO,GAAG,EAAK,GAFlD,IAAc,oBAAoB,mBAEoC,GAAG;EAGnE,UAAU,KAAY;EAAW,GAAI;YAAnE,CACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACC,kBAAC,GAAD;IAAS,MAAM;IAAU,aAAa;GAAM,CAAA,GAC3C,KAAe,CACZ;MAEL,kBAAC,OAAD;GAAK,WAAU;aAAf;IACC,kBAAC,GAAD;KAAwB;KAAU,MAAM;IAAW,CAAA;IAClD;IACD,kBAAC,GAAD;KAAwB;KAAU,MAAM;IAAY,CAAA;GAChD;IACE;;AAEV"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabButton/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { useCardTab } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabButtonProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"value\" | \"type\"\n> & {\n\t/** Content displayed inside the tab button. */\n\tchildren: ReactNode;\n\t/** Unique identifier for this tab; matched against the container's active value. */\n\tvalue: string;\n};\n\n/**\n * CardTabButton individual tab button inside a `CardTabContainer`.\n *\n * Reads active state and disabled state from `CardTabContainer` context.\n * The button's own `disabled` prop is ORed with the container's `disabled`.\n *\n * @param props.children - Tab label content. Required.\n * @param props.value - Tab identifier. Required.\n * @param props.disabled - Disables this tab individually (container can also disable all tabs).\n *\n * **...Other valid HTML `<button>` properties except `type`**\n *\n * @returns CardTabButton JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"details\" onChange={setTab}>\n * <CardTabButton value=\"details\">Details</CardTabButton>\n * <CardTabButton value=\"history\">History</CardTabButton>\n * <CardTabButton value=\"settings\" disabled>Settings</CardTabButton>\n * </CardTabContainer>\n * ```\n */\n\nfunction CardTabButton(props: CardTabButtonProps) {\n\tconst {\n\t\tchildren,\n\t\tdisabled: rawDisabled = false,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { disabled, currentTab, changeCurrentTab } = useCardTab();\n\n\tconst isDisabled = disabled || rawDisabled;\n\n\tconst disabledClass = isDisabled ? \"isDisabled\" : \"\";\n\tconst activeClass = currentTab === value && value ? \"isActive\" : \"\";\n\tconst className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;\n\n\tfunction handleClick(event: MouseEvent<HTMLButtonElement>) {\n\t\tchangeCurrentTab(value);\n\t\tonClick?.(event);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tonClick={handleClick}\n\t\t\tclassName={className.trim()}\n\t\t\t{...rest}\n\t\t\tdisabled={isDisabled}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { CardTabButton };\n"],"mappings":";;;;AAuCA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,aACA,UAAU,IAAc,IACxB,WAAW,IAAgB,IAC3B,YACA,UACA,GAAG,MACA,GAEE,EAAE,aAAU,eAAY,wBAAqB,EAAW,GAExD,IAAa,KAAY,GAIzB,IAAY,sBAFI,IAAa,eAAe,GAEI,GADlC,MAAe,KAAS,IAAQ,aAAa,GACI,GAAG;CAExE,SAAS,EAAY,GAAsC;EAE1D,AADA,EAAiB,CAAK,GACtB,IAAU,CAAK;CAChB;CAEA,OACC,kBAAC,UAAD;EACC,SAAS;EACT,WAAW,EAAU,KAAK;EAC1B,GAAI;EACJ,UAAU;EACV,MAAK;EAEJ;CACM,CAAA;AAEV"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabButton/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { useCardTab } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabButtonProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"value\" | \"type\"\n> & {\n\t/** Content displayed inside the tab button. */\n\tchildren: ReactNode;\n\t/** Unique identifier for this tab; matched against the container's active value. */\n\tvalue: string;\n};\n\n/**\n * CardTabButton, individual tab button inside a `CardTabContainer`.\n *\n * Reads active state and disabled state from `CardTabContainer` context.\n * The button's own `disabled` prop is ORed with the container's `disabled`.\n *\n * @param props.children - Tab label content. Required.\n * @param props.value - Tab identifier. Required.\n * @param props.disabled - Disables this tab individually (container can also disable all tabs).\n *\n * **...Other valid HTML `<button>` properties except `type`**\n *\n * @returns CardTabButton JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"details\" onChange={setTab}>\n * <CardTabButton value=\"details\">Details</CardTabButton>\n * <CardTabButton value=\"history\">History</CardTabButton>\n * <CardTabButton value=\"settings\" disabled>Settings</CardTabButton>\n * </CardTabContainer>\n * ```\n */\n\nfunction CardTabButton(props: CardTabButtonProps) {\n\tconst {\n\t\tchildren,\n\t\tdisabled: rawDisabled = false,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { disabled, currentTab, changeCurrentTab } = useCardTab();\n\n\tconst isDisabled = disabled || rawDisabled;\n\n\tconst disabledClass = isDisabled ? \"isDisabled\" : \"\";\n\tconst activeClass = currentTab === value && value ? \"isActive\" : \"\";\n\tconst className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;\n\n\tfunction handleClick(event: MouseEvent<HTMLButtonElement>) {\n\t\tchangeCurrentTab(value);\n\t\tonClick?.(event);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tonClick={handleClick}\n\t\t\tclassName={className.trim()}\n\t\t\t{...rest}\n\t\t\tdisabled={isDisabled}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { CardTabButton };\n"],"mappings":";;;;AAuCA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,aACA,UAAU,IAAc,IACxB,WAAW,IAAgB,IAC3B,YACA,UACA,GAAG,MACA,GAEE,EAAE,aAAU,eAAY,wBAAqB,EAAW,GAExD,IAAa,KAAY,GAIzB,IAAY,sBAFI,IAAa,eAAe,GAEI,GADlC,MAAe,KAAS,IAAQ,aAAa,GACI,GAAG;CAExE,SAAS,EAAY,GAAsC;EAE1D,AADA,EAAiB,CAAK,GACtB,IAAU,CAAK;CAChB;CAEA,OACC,kBAAC,UAAD;EACC,SAAS;EACT,WAAW,EAAU,KAAK;EAC1B,GAAI;EACJ,UAAU;EACV,MAAK;EAEJ;CACM,CAAA;AAEV"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabContainer/index.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useState } from \"react\";\n\nimport { CardTabProvider } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabContainerProps = Omit<\n\tHTMLAttributes<HTMLElement>,\n\t\"onClick\" | \"children\" | \"ref\" | \"onChange\"\n> & {\n\t/** `CardTabButton` components to render as tabs. Required. */\n\tchildren: ReactNode;\n\t/** Disables all tab buttons at once. @default false */\n\tdisabled?: boolean;\n\t/** Initially selected tab value. */\n\tdefaultValue?: string;\n\t/** Callback fired when the active tab changes, receiving the new value. */\n\tonChange?: (index: string) => void;\n};\n\n/**\n * CardTabContainer wrapper that manages active state for a group of `CardTabButton` components.\n *\n * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.\n *\n * @param props.children - `CardTabButton` elements. Required.\n * @param props.defaultValue - Initially selected tab value.\n * @param props.disabled - Disables all buttons. Default: false\n * @param props.onChange - Called with the new value whenever the active tab changes.\n *\n * **...Other valid HTML `<nav>` properties**\n *\n * @returns CardTabContainer JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"overview\" onChange={setActiveTab}>\n * <CardTabButton value=\"overview\">Overview</CardTabButton>\n * <CardTabButton value=\"analytics\">Analytics</CardTabButton>\n * <CardTabButton value=\"settings\">Settings</CardTabButton>\n * </CardTabContainer>\n *\n * {activeTab === 'overview' && <OverviewPanel />}\n * {activeTab === 'analytics' && <AnalyticsPanel />}\n * ```\n */\n\nfunction CardTabContainer(props: CardTabContainerProps) {\n\tconst {\n\t\tchildren,\n\t\tonChange,\n\t\tdefaultValue,\n\t\tdisabled = false,\n\t\tclassName: baseClassName,\n\t\t...rest\n\t} = props;\n\n\tconst [currentTab, setCurrentTab] = useState(defaultValue || \"\");\n\n\tconst className = `arkynCardTabContainer ${baseClassName || \"\"}`;\n\n\tfunction changeCurrentTab(value: string) {\n\t\tsetCurrentTab(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\treturn (\n\t\t<CardTabProvider\n\t\t\tdisabled={disabled}\n\t\t\tcurrentTab={currentTab}\n\t\t\tchangeCurrentTab={changeCurrentTab}\n\t\t>\n\t\t\t<nav className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</nav>\n\t\t</CardTabProvider>\n\t);\n}\n\nexport { CardTabContainer };\n"],"mappings":";;;;;AA8CA,SAAS,EAAiB,GAA8B;CACvD,IAAM,EACL,aACA,aACA,iBACA,cAAW,IACX,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,KAAgB,EAAE,GAEzD,IAAY,yBAAyB,KAAiB;CAE5D,SAAS,EAAiB,GAAe;EAExC,AADA,EAAc,CAAK,GACf,KAAU,EAAS,CAAK;CAC7B;CAEA,OACC,kBAAC,GAAD;EACW;EACE;EACM;YAElB,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CACW,CAAA;AAEnB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabContainer/index.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useState } from \"react\";\n\nimport { CardTabProvider } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabContainerProps = Omit<\n\tHTMLAttributes<HTMLElement>,\n\t\"onClick\" | \"children\" | \"ref\" | \"onChange\"\n> & {\n\t/** `CardTabButton` components to render as tabs. Required. */\n\tchildren: ReactNode;\n\t/** Disables all tab buttons at once. @default false */\n\tdisabled?: boolean;\n\t/** Initially selected tab value. */\n\tdefaultValue?: string;\n\t/** Callback fired when the active tab changes, receiving the new value. */\n\tonChange?: (index: string) => void;\n};\n\n/**\n * CardTabContainer, wrapper that manages active state for a group of `CardTabButton` components.\n *\n * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.\n *\n * @param props.children - `CardTabButton` elements. Required.\n * @param props.defaultValue - Initially selected tab value.\n * @param props.disabled - Disables all buttons. Default: false\n * @param props.onChange - Called with the new value whenever the active tab changes.\n *\n * **...Other valid HTML `<nav>` properties**\n *\n * @returns CardTabContainer JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"overview\" onChange={setActiveTab}>\n * <CardTabButton value=\"overview\">Overview</CardTabButton>\n * <CardTabButton value=\"analytics\">Analytics</CardTabButton>\n * <CardTabButton value=\"settings\">Settings</CardTabButton>\n * </CardTabContainer>\n *\n * {activeTab === 'overview' && <OverviewPanel />}\n * {activeTab === 'analytics' && <AnalyticsPanel />}\n * ```\n */\n\nfunction CardTabContainer(props: CardTabContainerProps) {\n\tconst {\n\t\tchildren,\n\t\tonChange,\n\t\tdefaultValue,\n\t\tdisabled = false,\n\t\tclassName: baseClassName,\n\t\t...rest\n\t} = props;\n\n\tconst [currentTab, setCurrentTab] = useState(defaultValue || \"\");\n\n\tconst className = `arkynCardTabContainer ${baseClassName || \"\"}`;\n\n\tfunction changeCurrentTab(value: string) {\n\t\tsetCurrentTab(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\treturn (\n\t\t<CardTabProvider\n\t\t\tdisabled={disabled}\n\t\t\tcurrentTab={currentTab}\n\t\t\tchangeCurrentTab={changeCurrentTab}\n\t\t>\n\t\t\t<nav className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</nav>\n\t\t</CardTabProvider>\n\t);\n}\n\nexport { CardTabContainer };\n"],"mappings":";;;;;AA8CA,SAAS,EAAiB,GAA8B;CACvD,IAAM,EACL,aACA,aACA,iBACA,cAAW,IACX,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,KAAgB,EAAE,GAEzD,IAAY,yBAAyB,KAAiB;CAE5D,SAAS,EAAiB,GAAe;EAExC,AADA,EAAc,CAAK,GACf,KAAU,EAAS,CAAK;CAC7B;CAEA,OACC,kBAAC,GAAD;EACW;EACE;EACM;YAElB,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CACW,CAAA;AAEnB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/checkbox/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { type ButtonHTMLAttributes, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport \"./styles.css\";\n\ntype CheckboxProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"type\"\n\t| \"name\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"onSelect\"\n\t| \"onClick\"\n> & {\n\t/** Optional label text displayed beside the checkbox. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Validation error message displayed below the checkbox. */\n\terrorMessage?: string;\n\t/**\n\t * Checkbox size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\" | \"sm\";\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Value stored in the hidden input when checked. @default \"checked\" */\n\tvalue?: string;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Callback fired on toggle receives the value string (or `\"\"` when unchecked). */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Checkbox interactive checkbox input with label, validation, and form integration.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the checkbox.\n * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: \"md\"\n * @param props.value - Value stored when checked. Default: \"checked\"\n * @param props.checked - Controlled checked state.\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.onCheck - Callback fired on toggle receives value or `\"\"` when unchecked.\n * @param props.errorMessage - Validation error message.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**\n *\n * @returns Checkbox JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" />\n *\n * // With custom value and error\n * <Checkbox\n * name=\"newsletter\"\n * label=\"Subscribe to newsletter\"\n * value=\"subscribed\"\n * errorMessage={errors.newsletter}\n * />\n *\n * // Controlled\n * <Checkbox\n * name=\"premium\"\n * label=\"Enable premium features\"\n * size=\"lg\"\n * checked={isPremium}\n * onCheck={(v) => setIsPremium(!!v)}\n * />\n * ```\n */\n\nfunction Checkbox(props: CheckboxProps) {\n\tconst {\n\t\tid,\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tsize = \"md\",\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultChecked = false,\n\t\tlabel,\n\t\tchecked: baseChecked = null,\n\t\tonCheck,\n\t\torientation = \"horizontalReverse\",\n\t\tshowAsterisk,\n\t\tunShowFieldTemplate,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst checkboxRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked || false);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst currentCheckedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\n\tconst className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;\n\n\tfunction handleCheck() {\n\t\tconst defaultChecked = isChecked;\n\t\tsetIsChecked(!defaultChecked);\n\t\tonCheck?.(!defaultChecked ? value || \"checked\" : \"\");\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<button\n\t\t\t\tid={checkboxId}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={checkboxRef}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : \"\"}\n\t\t\t\t/>\n\n\t\t\t\t<Check />\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAgGA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OACA,SACA,WAAW,IAAmB,IAC9B,UAAO,MACP,cAAc,GACd,oBAAiB,IACjB,UACA,SAAS,IAAc,MACvB,YACA,iBAAc,qBACd,iBACA,wBACA,UACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAc,EAAyB,IAAI,GAC3C,IAAc,EAAM,GACpB,IAAa,KAAM,GAEnB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GAEZ,CAAC,GAAW,KAAgB,EAAS,KAAkB,EAAK,GAE5D,IACL,OAAO,KAAgB,YAAY,IAAc,GAK5C,IAAY,iBAAiB,EAAK,GAHrB,IAAU,cAAc,aAGW,GAF1B,IAAiB,gBAAgB;CAI7D,SAAS,IAAc;EACtB,IAAM,IAAiB;EAEvB,AADA,EAAa,CAAC,CAAc,GAC5B,IAAW,IAAsC,KAArB,KAAS,SAAc;CACpD;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,IAAI;GACJ,MAAK;GACM;GACX,SAAS;GACT,GAAI;aALL,CAOC,kBAAC,SAAD;IACC,MAAK;IACC;IACN,KAAK;IACL,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA,GAED,kBAAC,GAAD,CAAQ,CAAA,CACD;;CACM,CAAA;AAEjB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/checkbox/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { type ButtonHTMLAttributes, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport \"./styles.css\";\n\ntype CheckboxProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"type\"\n\t| \"name\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"onSelect\"\n\t| \"onClick\"\n> & {\n\t/** Optional label text displayed beside the checkbox. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Validation error message displayed below the checkbox. */\n\terrorMessage?: string;\n\t/**\n\t * Checkbox size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\" | \"sm\";\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Value stored in the hidden input when checked. @default \"checked\" */\n\tvalue?: string;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Callback fired on toggle, receives the value string (or `\"\"` when unchecked). */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Checkbox, interactive checkbox input with label, validation, and form integration.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the checkbox.\n * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: \"md\"\n * @param props.value - Value stored when checked. Default: \"checked\"\n * @param props.checked - Controlled checked state.\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.onCheck - Callback fired on toggle, receives value or `\"\"` when unchecked.\n * @param props.errorMessage - Validation error message.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**\n *\n * @returns Checkbox JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" />\n *\n * // With custom value and error\n * <Checkbox\n * name=\"newsletter\"\n * label=\"Subscribe to newsletter\"\n * value=\"subscribed\"\n * errorMessage={errors.newsletter}\n * />\n *\n * // Controlled\n * <Checkbox\n * name=\"premium\"\n * label=\"Enable premium features\"\n * size=\"lg\"\n * checked={isPremium}\n * onCheck={(v) => setIsPremium(!!v)}\n * />\n * ```\n */\n\nfunction Checkbox(props: CheckboxProps) {\n\tconst {\n\t\tid,\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tsize = \"md\",\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultChecked = false,\n\t\tlabel,\n\t\tchecked: baseChecked = null,\n\t\tonCheck,\n\t\torientation = \"horizontalReverse\",\n\t\tshowAsterisk,\n\t\tunShowFieldTemplate,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst checkboxRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked || false);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst currentCheckedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\n\tconst className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;\n\n\tfunction handleCheck() {\n\t\tconst defaultChecked = isChecked;\n\t\tsetIsChecked(!defaultChecked);\n\t\tonCheck?.(!defaultChecked ? value || \"checked\" : \"\");\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<button\n\t\t\t\tid={checkboxId}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={checkboxRef}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : \"\"}\n\t\t\t\t/>\n\n\t\t\t\t<Check />\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAgGA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OACA,SACA,WAAW,IAAmB,IAC9B,UAAO,MACP,cAAc,GACd,oBAAiB,IACjB,UACA,SAAS,IAAc,MACvB,YACA,iBAAc,qBACd,iBACA,wBACA,UACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAc,EAAyB,IAAI,GAC3C,IAAc,EAAM,GACpB,IAAa,KAAM,GAEnB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GAEZ,CAAC,GAAW,KAAgB,EAAS,KAAkB,EAAK,GAE5D,IACL,OAAO,KAAgB,YAAY,IAAc,GAK5C,IAAY,iBAAiB,EAAK,GAHrB,IAAU,cAAc,aAGW,GAF1B,IAAiB,gBAAgB;CAI7D,SAAS,IAAc;EACtB,IAAM,IAAiB;EAEvB,AADA,EAAa,CAAC,CAAc,GAC5B,IAAW,IAAsC,KAArB,KAAS,SAAc;CACpD;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,IAAI;GACJ,MAAK;GACM;GACX,SAAS;GACT,GAAI;aALL,CAOC,kBAAC,SAAD;IACC,MAAK;IACC;IACN,KAAK;IACL,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA,GAED,kBAAC,GAAD,CAAQ,CAAA,CACD;;CACM,CAAA;AAEjB"}
@@ -1 +1 @@
1
- {"version":3,"file":"clientOnly.js","names":[],"sources":["../../../src/components/clientOnly.tsx"],"sourcesContent":["import { useHydrated } from \"../hooks/useHydrated\";\n\ntype ClientOnlyProps = {\n\t/** Render function called after hydration on the client. Required. */\n\tchildren(): React.ReactNode;\n\t/** Content rendered during SSR or before hydration. @default null */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * ClientOnly renders its children only after client-side hydration.\n *\n * Prevents React hydration mismatches for components that rely on browser-only APIs\n * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.\n *\n * @param props.children - Render function executed after hydration. Required.\n * @param props.fallback - Content shown during SSR / before hydration. Default: null\n *\n * @returns `children()` after hydration, otherwise `fallback`.\n *\n * @example\n * ```tsx\n * // With a skeleton fallback\n * <ClientOnly fallback={<Skeleton />}>\n * {() => <InteractiveWidget />}\n * </ClientOnly>\n *\n * // Using browser APIs safely\n * <ClientOnly fallback={<p>Loading...</p>}>\n * {() => <p>Current time: {new Date().toLocaleString()}</p>}\n * </ClientOnly>\n * ```\n */\n\nfunction ClientOnly(props: ClientOnlyProps) {\n\tconst { children, fallback = null } = props;\n\treturn useHydrated() ? children() : fallback;\n}\n\nexport { ClientOnly };\n"],"mappings":";;AAkCA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EAAE,aAAU,cAAW,SAAS;CACtC,OAAO,EAAY,IAAI,EAAS,IAAI;AACrC"}
1
+ {"version":3,"file":"clientOnly.js","names":[],"sources":["../../../src/components/clientOnly.tsx"],"sourcesContent":["import { useHydrated } from \"../hooks/useHydrated\";\n\ntype ClientOnlyProps = {\n\t/** Render function, called after hydration on the client. Required. */\n\tchildren(): React.ReactNode;\n\t/** Content rendered during SSR or before hydration. @default null */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * ClientOnly, renders its children only after client-side hydration.\n *\n * Prevents React hydration mismatches for components that rely on browser-only APIs\n * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.\n *\n * @param props.children - Render function executed after hydration. Required.\n * @param props.fallback - Content shown during SSR / before hydration. Default: null\n *\n * @returns `children()` after hydration, otherwise `fallback`.\n *\n * @example\n * ```tsx\n * // With a skeleton fallback\n * <ClientOnly fallback={<Skeleton />}>\n * {() => <InteractiveWidget />}\n * </ClientOnly>\n *\n * // Using browser APIs safely\n * <ClientOnly fallback={<p>Loading...</p>}>\n * {() => <p>Current time: {new Date().toLocaleString()}</p>}\n * </ClientOnly>\n * ```\n */\n\nfunction ClientOnly(props: ClientOnlyProps) {\n\tconst { children, fallback = null } = props;\n\treturn useHydrated() ? children() : fallback;\n}\n\nexport { ClientOnly };\n"],"mappings":";;AAkCA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EAAE,aAAU,cAAW,SAAS;CACtC,OAAO,EAAY,IAAI,EAAS,IAAI;AACrC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/currencyInput/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport {\n\tmaskCurrencyValues,\n\tnormalizeValue,\n} from \"../../services/maskCurrencyValues\";\n\nimport \"./style.css\";\n\ntype Locale =\n\t| \"USD\"\n\t| \"EUR\"\n\t| \"JPY\"\n\t| \"GBP\"\n\t| \"AUD\"\n\t| \"CAD\"\n\t| \"CHF\"\n\t| \"CNY\"\n\t| \"SEK\"\n\t| \"NZD\"\n\t| \"BRL\"\n\t| \"INR\"\n\t| \"RUB\"\n\t| \"ZAR\"\n\t| \"MXN\"\n\t| \"SGD\"\n\t| \"HKD\"\n\t| \"NOK\"\n\t| \"KRW\"\n\t| \"TRY\"\n\t| \"IDR\"\n\t| \"THB\";\n\ntype CurrencyInputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"name\"\n\t| \"type\"\n\t| \"max\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"placeholder\"\n> & {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/**\n\t * Currency locale used to format the displayed value.\n\t * Supported: `\"USD\"` | `\"EUR\"` | `\"BRL\"` | `\"JPY\"` | `\"GBP\"` | … (22 locales).\n\t * Required.\n\t */\n\tlocale: Locale;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Validation error message displayed below the input. */\n\terrorMessage?: string;\n\t/** Shows a spinner and disables the input during async operations. @default false */\n\tisLoading?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Input size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\t/** Text or icon rendered at the far left, outside the input area. */\n\tprefix?: string | LucideIcon;\n\t/** Text or icon rendered at the far right, outside the input area. */\n\tsuffix?: string | LucideIcon;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Lucide icon rendered inside the input on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered inside the input on the right. */\n\trightIcon?: LucideIcon;\n\t/** Maximum numeric value allowed. @default 1_000_000_000 */\n\tmax?: number;\n\t/** Controlled numeric value. */\n\tvalue?: number;\n\t/** Uncontrolled default numeric value. */\n\tdefaultValue?: number;\n\t/**\n\t * Callback fired on value change.\n\t * @param event - Native change event.\n\t * @param originalValue - Raw numeric string (e.g. `\"1234.56\"`).\n\t * @param maskedValue - Formatted display string (e.g. `\"$ 1,234.56\"`).\n\t */\n\tonChange?: (\n\t\tevent: ChangeEvent<HTMLInputElement>,\n\t\toriginalValue: string,\n\t\tmaskedValue: string,\n\t) => void;\n};\n\n/**\n * CurrencyInput — numeric input that automatically formats the displayed value according to a currency locale.\n *\n * The raw numeric value is stored in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.locale - Currency locale (e.g. `\"USD\"`, `\"BRL\"`, `\"EUR\"`). Required.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000\n * @param props.value - Controlled numeric value.\n * @param props.defaultValue - Uncontrolled default numeric value.\n * @param props.onChange - Callback fired on change — receives the event, the raw numeric string, and the formatted string.\n * @param props.prefix - Text or icon at the far left.\n * @param props.suffix - Text or icon at the far right.\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**\n *\n * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <CurrencyInput name=\"price\" locale=\"USD\" />\n *\n * // With label and validation\n * <CurrencyInput\n * name=\"salary\"\n * locale=\"BRL\"\n * label=\"Monthly Salary\"\n * showAsterisk\n * errorMessage=\"Please enter a valid amount\"\n * />\n *\n * // With max value and controlled state\n * <CurrencyInput\n * name=\"limit\"\n * locale=\"USD\"\n * label=\"Credit Limit\"\n * max={10000}\n * value={creditLimit}\n * onChange={(e, original) => setCreditLimit(Number(original))}\n * />\n * ```\n */\n\nfunction CurrencyInput(props: CurrencyInputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tvalue,\n\t\tdefaultValue,\n\t\tmax = 1000000000,\n\t\tlocale,\n\t\tonChange,\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\terrorMessage: baseErrorMessage,\n\t\tunShowFieldTemplate,\n\t\torientation,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\tsize = \"md\",\n\t\tid,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [maskedValue, setMaskedValue] = useState(\"0\");\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled || !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tconst updateValues = (originalValue: string | number) => {\n\t\tconst [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(\n\t\t\toriginalValue,\n\t\t\tlocale,\n\t\t);\n\n\t\tif (!max || calculatedValue <= max) {\n\t\t\tsetMaskedValue(calculatedMaskedValue);\n\t\t\treturn [calculatedValue, calculatedMaskedValue];\n\t\t}\n\n\t\treturn maskCurrencyValues(originalValue, locale);\n\t};\n\n\tconst handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tevent.preventDefault();\n\t\tconst [originalValue, maskedValue] = updateValues(event.target.value);\n\n\t\tonChange?.(event, String(originalValue), String(maskedValue));\n\t};\n\n\tuseEffect(() => {\n\t\tfunction currentValue() {\n\t\t\tif (typeof value === \"number\") return value;\n\t\t\tif (typeof defaultValue === \"number\") return defaultValue;\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst [, maskedValue] = maskCurrencyValues(currentValue(), locale);\n\n\t\tsetMaskedValue(maskedValue);\n\t}, [locale, defaultValue, value]);\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tplaceholder={isDisabled ? maskedValue : undefined}\n\t\t\t\t\tvalue={isDisabled ? undefined : maskedValue}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={normalizeValue(maskedValue)}\n\t\t\t\t\treadOnly\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { CurrencyInput };\n"],"mappings":";;;;;;;;;AA+KA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,UACA,iBACA,SAAM,KACN,WACA,aACA,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,cAAc,GACd,wBACA,gBACA,iBACA,cACA,UAAO,MACP,OACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAa,KAAkB,EAAS,GAAG,GAE5C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,KAAmB,MAAoB,WAAW;CAExD,SAAS,KAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,GAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,GAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAEA,IAAM,MAAgB,MAAmC;EACxD,IAAM,CAAC,GAAiB,KAAyB,EAChD,GACA,CACD;EAOA,OALI,CAAC,KAAO,KAAmB,KAC9B,EAAe,CAAqB,GAC7B,CAAC,GAAiB,CAAqB,KAGxC,EAAmB,GAAe,CAAM;CAChD;CA6BA,OApBA,QAAgB;EACf,SAAS,IAAe;GACvB,IAAI,OAAO,KAAU,UAAU,OAAO;GACtC,IAAI,OAAO,KAAiB,UAAU,OAAO;EAE9C;EAEA,IAAM,GAAG,KAAe,EAAmB,EAAa,GAAG,CAAM;EAEjE,EAAe,CAAW;CAC3B,GAAG;EAAC;EAAQ;EAAc;CAAK,CAAC,GAW/B,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACI,WAAA,sBArBI,IAAS,cAAc,GAMS,GALhC,IAAS,cAAc,GAKsB,GAAG,EAAQ,GAAG,EAAK,GAHlE,KAAc,KAAY,IAAY,YAAY,GAG2B,GAJ7E,IAAU,YAAY,GAIkE,GAFxF,IAAY,YAAY;GAkBrC,SAAS;aAJV;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACR,WA5DkB,MAAyC;MAC9D,EAAM,eAAe;MACrB,IAAM,CAAC,GAAe,KAAe,GAAa,EAAM,OAAO,KAAK;MAEpE,IAAW,GAAO,OAAO,CAAa,GAAG,OAAO,CAAW,CAAC;KAC7D;KAwDI,IAAI;KACJ,aAAa,IAAa,IAAc,KAAA;KACxC,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,SAAD;KACC,MAAK;KACC;KACN,OAAO,EAAe,CAAW;KACjC,UAAA;IACA,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/currencyInput/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport {\n\tmaskCurrencyValues,\n\tnormalizeValue,\n} from \"../../services/maskCurrencyValues\";\n\nimport \"./style.css\";\n\ntype Locale =\n\t| \"USD\"\n\t| \"EUR\"\n\t| \"JPY\"\n\t| \"GBP\"\n\t| \"AUD\"\n\t| \"CAD\"\n\t| \"CHF\"\n\t| \"CNY\"\n\t| \"SEK\"\n\t| \"NZD\"\n\t| \"BRL\"\n\t| \"INR\"\n\t| \"RUB\"\n\t| \"ZAR\"\n\t| \"MXN\"\n\t| \"SGD\"\n\t| \"HKD\"\n\t| \"NOK\"\n\t| \"KRW\"\n\t| \"TRY\"\n\t| \"IDR\"\n\t| \"THB\";\n\ntype CurrencyInputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"name\"\n\t| \"type\"\n\t| \"max\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"placeholder\"\n> & {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/**\n\t * Currency locale used to format the displayed value.\n\t * Supported: `\"USD\"` | `\"EUR\"` | `\"BRL\"` | `\"JPY\"` | `\"GBP\"` | … (22 locales).\n\t * Required.\n\t */\n\tlocale: Locale;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Validation error message displayed below the input. */\n\terrorMessage?: string;\n\t/** Shows a spinner and disables the input during async operations. @default false */\n\tisLoading?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Input size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\t/** Text or icon rendered at the far left, outside the input area. */\n\tprefix?: string | LucideIcon;\n\t/** Text or icon rendered at the far right, outside the input area. */\n\tsuffix?: string | LucideIcon;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Lucide icon rendered inside the input on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered inside the input on the right. */\n\trightIcon?: LucideIcon;\n\t/** Maximum numeric value allowed. @default 1_000_000_000 */\n\tmax?: number;\n\t/** Controlled numeric value. */\n\tvalue?: number;\n\t/** Uncontrolled default numeric value. */\n\tdefaultValue?: number;\n\t/**\n\t * Callback fired on value change.\n\t * @param event - Native change event.\n\t * @param originalValue - Raw numeric string (e.g. `\"1234.56\"`).\n\t * @param maskedValue - Formatted display string (e.g. `\"$ 1,234.56\"`).\n\t */\n\tonChange?: (\n\t\tevent: ChangeEvent<HTMLInputElement>,\n\t\toriginalValue: string,\n\t\tmaskedValue: string,\n\t) => void;\n};\n\n/**\n * CurrencyInput, numeric input that automatically formats the displayed value according to a currency locale.\n *\n * The raw numeric value is stored in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.locale - Currency locale (e.g. `\"USD\"`, `\"BRL\"`, `\"EUR\"`). Required.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000\n * @param props.value - Controlled numeric value.\n * @param props.defaultValue - Uncontrolled default numeric value.\n * @param props.onChange - Callback fired on change, receives the event, the raw numeric string, and the formatted string.\n * @param props.prefix - Text or icon at the far left.\n * @param props.suffix - Text or icon at the far right.\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**\n *\n * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <CurrencyInput name=\"price\" locale=\"USD\" />\n *\n * // With label and validation\n * <CurrencyInput\n * name=\"salary\"\n * locale=\"BRL\"\n * label=\"Monthly Salary\"\n * showAsterisk\n * errorMessage=\"Please enter a valid amount\"\n * />\n *\n * // With max value and controlled state\n * <CurrencyInput\n * name=\"limit\"\n * locale=\"USD\"\n * label=\"Credit Limit\"\n * max={10000}\n * value={creditLimit}\n * onChange={(e, original) => setCreditLimit(Number(original))}\n * />\n * ```\n */\n\nfunction CurrencyInput(props: CurrencyInputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tvalue,\n\t\tdefaultValue,\n\t\tmax = 1000000000,\n\t\tlocale,\n\t\tonChange,\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\terrorMessage: baseErrorMessage,\n\t\tunShowFieldTemplate,\n\t\torientation,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\tsize = \"md\",\n\t\tid,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [maskedValue, setMaskedValue] = useState(\"0\");\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled || !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tconst updateValues = (originalValue: string | number) => {\n\t\tconst [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(\n\t\t\toriginalValue,\n\t\t\tlocale,\n\t\t);\n\n\t\tif (!max || calculatedValue <= max) {\n\t\t\tsetMaskedValue(calculatedMaskedValue);\n\t\t\treturn [calculatedValue, calculatedMaskedValue];\n\t\t}\n\n\t\treturn maskCurrencyValues(originalValue, locale);\n\t};\n\n\tconst handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tevent.preventDefault();\n\t\tconst [originalValue, maskedValue] = updateValues(event.target.value);\n\n\t\tonChange?.(event, String(originalValue), String(maskedValue));\n\t};\n\n\tuseEffect(() => {\n\t\tfunction currentValue() {\n\t\t\tif (typeof value === \"number\") return value;\n\t\t\tif (typeof defaultValue === \"number\") return defaultValue;\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst [, maskedValue] = maskCurrencyValues(currentValue(), locale);\n\n\t\tsetMaskedValue(maskedValue);\n\t}, [locale, defaultValue, value]);\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tplaceholder={isDisabled ? maskedValue : undefined}\n\t\t\t\t\tvalue={isDisabled ? undefined : maskedValue}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={normalizeValue(maskedValue)}\n\t\t\t\t\treadOnly\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { CurrencyInput };\n"],"mappings":";;;;;;;;;AA+KA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,UACA,iBACA,SAAM,KACN,WACA,aACA,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,cAAc,GACd,wBACA,gBACA,iBACA,cACA,UAAO,MACP,OACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAa,KAAkB,EAAS,GAAG,GAE5C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,KAAmB,MAAoB,WAAW;CAExD,SAAS,KAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,GAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,GAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAEA,IAAM,MAAgB,MAAmC;EACxD,IAAM,CAAC,GAAiB,KAAyB,EAChD,GACA,CACD;EAOA,OALI,CAAC,KAAO,KAAmB,KAC9B,EAAe,CAAqB,GAC7B,CAAC,GAAiB,CAAqB,KAGxC,EAAmB,GAAe,CAAM;CAChD;CA6BA,OApBA,QAAgB;EACf,SAAS,IAAe;GACvB,IAAI,OAAO,KAAU,UAAU,OAAO;GACtC,IAAI,OAAO,KAAiB,UAAU,OAAO;EAE9C;EAEA,IAAM,GAAG,KAAe,EAAmB,EAAa,GAAG,CAAM;EAEjE,EAAe,CAAW;CAC3B,GAAG;EAAC;EAAQ;EAAc;CAAK,CAAC,GAW/B,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACI,WAAA,sBArBI,IAAS,cAAc,GAMS,GALhC,IAAS,cAAc,GAKsB,GAAG,EAAQ,GAAG,EAAK,GAHlE,KAAc,KAAY,IAAY,YAAY,GAG2B,GAJ7E,IAAU,YAAY,GAIkE,GAFxF,IAAY,YAAY;GAkBrC,SAAS;aAJV;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACR,WA5DkB,MAAyC;MAC9D,EAAM,eAAe;MACrB,IAAM,CAAC,GAAe,KAAe,GAAa,EAAM,OAAO,KAAK;MAEpE,IAAW,GAAO,OAAO,CAAa,GAAG,OAAO,CAAW,CAAC;KAC7D;KAwDI,IAAI;KACJ,aAAa,IAAa,IAAc,KAAA;KACxC,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,SAAD;KACC,MAAK;KACC;KACN,OAAO,EAAe,CAAW;KACjC,UAAA;IACA,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}
@@ -0,0 +1,25 @@
1
+ import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
2
+ /* empty css */
3
+ import { useEffect as t, useRef as n, useState as r } from "react";
4
+ import { jsx as i } from "react/jsx-runtime";
5
+ //#region src/components/datePicker/datePickerCalendarContainer/index.tsx
6
+ function a(a) {
7
+ let { children: o, isFocused: s } = a, c = n(null), [l, u] = r("bottom");
8
+ return e(s), t(() => {
9
+ s && (() => {
10
+ if (!c.current) return;
11
+ let e = c.current.parentElement;
12
+ if (!e) return;
13
+ let t = e.getBoundingClientRect();
14
+ window.innerHeight - t.bottom < 420 && t.top > 420 ? u("top") : u("bottom");
15
+ })();
16
+ }, [s]), s ? /* @__PURE__ */ i("div", {
17
+ ref: c,
18
+ className: `arkynDatePickerCalendarContainer ${l}`,
19
+ children: o
20
+ }) : null;
21
+ }
22
+ //#endregion
23
+ export { a as DatePickerCalendarContainer };
24
+
25
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerCalendarContainer/index.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\n\nimport \"./styles.css\";\n\ntype DatePickerCalendarContainerProps = {\n\tisFocused: boolean;\n\tchildren: ReactNode;\n};\n\nfunction DatePickerCalendarContainer(props: DatePickerCalendarContainerProps) {\n\tconst { children, isFocused } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tuseScrollLock(isFocused);\n\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\n\t\tconst checkContainerPosition = () => {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst estimatedContainerHeight = 420;\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t};\n\n\t\tcheckContainerPosition();\n\t}, [isFocused]);\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynDatePickerCalendarContainer ${position}`}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { DatePickerCalendarContainer };\n"],"mappings":";;;;;AAWA,SAAS,EAA4B,GAAyC;CAC7E,IAAM,EAAE,aAAU,iBAAc,GAE1B,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAkCnE,OAhCA,EAAc,CAAS,GAEvB,QAAgB;EACV,YAEgC;GACpC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAMvD,AALuB,OAAO,cAGM,EAAW,SAGjC,OACb,EAAW,MAAM,MAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB,EAEA,CAAuB;CACxB,GAAG,CAAC,CAAS,CAAC,GAET,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,oCAAoC;EAE9C;CACG,CAAA,IARiB;AAUxB"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerCalendarContainer{z-index:7;border-radius:8px;width:max-content;max-width:calc(100vw - 32px);position:absolute;left:0;box-shadow:0 4px 8px #0000001a}.arkynDatePickerCalendarContainer.bottom{top:calc(100% + 5px)}.arkynDatePickerCalendarContainer.top{bottom:calc(100% + 5px)}.arkynDatePickerCalendarContainer .arkynCalendarContainer{max-width:100%}}
@@ -0,0 +1,21 @@
1
+ /* empty css */
2
+ import { jsx as e } from "react/jsx-runtime";
3
+ import { ChevronDown as t } from "lucide-react";
4
+ //#region src/components/datePicker/datePickerChevron/index.tsx
5
+ function n(n) {
6
+ let { iconSize: r, isLoading: i, disabled: a, readOnly: o, isFocused: s } = n;
7
+ return i ? null : /* @__PURE__ */ e(t, {
8
+ className: `arkynDatePickerChevron ${a || o ? "notAnimate" : ""} ${s ? "focused" : ""}`,
9
+ strokeWidth: 2.5,
10
+ style: {
11
+ minWidth: r,
12
+ minHeight: r,
13
+ maxWidth: r,
14
+ maxHeight: r
15
+ }
16
+ });
17
+ }
18
+ //#endregion
19
+ export { n as DatePickerChevron };
20
+
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerChevron/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerChevronProps = {\n\tisLoading: boolean;\n\ticonSize: number;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisFocused: boolean;\n};\n\nfunction DatePickerChevron(props: DatePickerChevronProps) {\n\tconst { iconSize, isLoading, disabled, readOnly, isFocused } = props;\n\n\tconst notAnimate = disabled || readOnly ? \"notAnimate\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynDatePickerChevron ${notAnimate} ${focused}`;\n\n\tif (isLoading) return null;\n\treturn (\n\t\t<ChevronDown\n\t\t\tclassName={className}\n\t\t\tstrokeWidth={2.5}\n\t\t\tstyle={{\n\t\t\t\tminWidth: iconSize,\n\t\t\t\tminHeight: iconSize,\n\t\t\t\tmaxWidth: iconSize,\n\t\t\t\tmaxHeight: iconSize,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport { DatePickerChevron };\n"],"mappings":";;;;AAWA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,cAAW,aAAU,aAAU,iBAAc;CAQ/D,OADI,IAAkB,OAErB,kBAAC,GAAD;EACY,qCARM,KAAY,IAAW,eAAe,GAGF,GAFvC,IAAY,YAAY;EAQtC,aAAa;EACb,OAAO;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,WAAW;EACZ;CACA,CAAA;AAEH"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynDatePickerChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
@@ -0,0 +1,16 @@
1
+ /* empty css */
2
+ import { jsx as e } from "react/jsx-runtime";
3
+ //#region src/components/datePicker/datePickerContainer/index.tsx
4
+ function t(t) {
5
+ let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p } = t;
6
+ return /* @__PURE__ */ e("section", {
7
+ id: f,
8
+ className: `arkynDatePickerContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
9
+ onClick: r,
10
+ children: n
11
+ });
12
+ }
13
+ //#endregion
14
+ export { t as DatePickerContainer };
15
+
16
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContainerProps = {\n\tchildren: ReactNode;\n\thandleContainerFocus: () => void;\n\tprefixExists: boolean;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tid: string;\n\tvariant: \"solid\" | \"outline\" | \"underline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContainer(props: DatePickerContainerProps) {\n\tconst {\n\t\tchildren,\n\t\thandleContainerFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName,\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t\tid,\n\t\tprefixExists,\n\t} = props;\n\n\tconst hasPrefix = prefixExists ? \"hasPrefix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\treturn (\n\t\t<section\n\t\t\tid={id}\n\t\t\tclassName={`arkynDatePickerContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}\n\t\t\tonClick={handleContainerFocus}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { DatePickerContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAoB,GAAiC;CAC7D,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,4BARK,IAAe,cAAc,GAQI,GAAG,EAAQ,GAAG,EAAK,GANtD,KAAY,KAAY,IAAY,YAAY,GAMiB,GAPjE,IAAU,YAAY,GAOsD,GAL5E,IAAY,YAAY,GAK+D,GAAG;EACxG,SAAS;EAER;CACO,CAAA;AAEX"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynDatePickerContainer:hover{cursor:pointer}.arkynDatePickerContainer.opacity{opacity:.5}.arkynDatePickerContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynDatePickerContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynDatePickerContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynDatePickerContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynDatePickerContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynDatePickerContainer.underline .prefix{display:none}.arkynDatePickerContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynDatePickerContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.md{min-height:40px}.arkynDatePickerContainer.md.hasPrefix{padding-left:60px}.arkynDatePickerContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynDatePickerContainer.lg{min-height:44px}.arkynDatePickerContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynDatePickerContainer.lg.hasPrefix{padding-left:64px}}
@@ -0,0 +1,14 @@
1
+ /* empty css */
2
+ import { jsx as e } from "react/jsx-runtime";
3
+ //#region src/components/datePicker/datePickerContent/index.tsx
4
+ function t(t) {
5
+ let { children: n, size: r } = t;
6
+ return /* @__PURE__ */ e("div", {
7
+ className: `arkynDatePickerContent ${r}`,
8
+ children: n
9
+ });
10
+ }
11
+ //#endregion
12
+ export { t as DatePickerContent };
13
+
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContent(props: DatePickerContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynDatePickerContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { DatePickerContent };\n"],"mappings":";;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,0BADqB;EACT;CAAc,CAAA;AAClD"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynDatePickerContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynDatePickerContent>p.hasValue{color:var(--text-body,#52525b)}.arkynDatePickerContent.md>p{font-size:14px;line-height:14px}.arkynDatePickerContent.lg>p{font-size:16px;line-height:16px}}
@@ -0,0 +1,14 @@
1
+ /* empty css */
2
+ import { jsx as e } from "react/jsx-runtime";
3
+ //#region src/components/datePicker/datePickerOverlay/index.tsx
4
+ function t(t) {
5
+ let { isFocused: n, handleBlur: r } = t;
6
+ return n ? /* @__PURE__ */ e("aside", {
7
+ className: "arkynDatePickerOverlay",
8
+ onClick: r
9
+ }) : null;
10
+ }
11
+ //#endregion
12
+ export { t as DatePickerOverlay };
13
+
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype DatePickerOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction DatePickerOverlay(props: DatePickerOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynDatePickerOverlay\" onClick={handleBlur} />;\n}\n\nexport { DatePickerOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAAyB,SAAS;CAAa,CAAA,IADhD;AAExB"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerOverlay{z-index:5;position:fixed;inset:0}}
@@ -0,0 +1,16 @@
1
+ /* empty css */
2
+ import { jsx as e } from "react/jsx-runtime";
3
+ import { Loader2 as t } from "lucide-react";
4
+ //#region src/components/datePicker/datePickerSpinner/index.tsx
5
+ function n(n) {
6
+ let { iconSize: r, isLoading: i } = n;
7
+ return i ? /* @__PURE__ */ e(t, {
8
+ className: "arkynDatePickerSpinner",
9
+ size: r,
10
+ strokeWidth: 2.5
11
+ }) : null;
12
+ }
13
+ //#endregion
14
+ export { n as DatePickerSpinner };
15
+
16
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerSpinner/index.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerSpinnerProps = {\n\ticonSize: number;\n\tisLoading: boolean;\n};\n\nfunction DatePickerSpinner(props: DatePickerSpinnerProps) {\n\tconst { iconSize, isLoading } = props;\n\n\tif (!isLoading) return null;\n\treturn (\n\t\t<Loader2\n\t\t\tclassName=\"arkynDatePickerSpinner\"\n\t\t\tsize={iconSize}\n\t\t\tstrokeWidth={2.5}\n\t\t/>\n\t);\n}\n\nexport { DatePickerSpinner };\n"],"mappings":";;;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,iBAAc;CAGhC,OADK,IAEJ,kBAAC,GAAD;EACC,WAAU;EACV,MAAM;EACN,aAAa;CACb,CAAA,IANqB;AAQxB"}
@@ -0,0 +1 @@
1
+ @layer arkyn{.arkynDatePickerSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}