@arkyn/components 3.0.3 → 3.0.5

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 (177) 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/index.d.ts +1 -1
  19. package/dist/components/divider/index.d.ts +1 -1
  20. package/dist/components/drawer/drawerContainer/index.d.ts +1 -1
  21. package/dist/components/drawer/drawerHeader/index.d.ts +1 -1
  22. package/dist/components/facebookPixel/index.d.ts +1 -1
  23. package/dist/components/fieldError/index.d.ts +1 -1
  24. package/dist/components/fieldLabel/index.d.ts +1 -1
  25. package/dist/components/fieldWrapper/index.d.ts +1 -1
  26. package/dist/components/fileUpload/index.d.ts +2 -2
  27. package/dist/components/googleAnalytics/index.d.ts +1 -1
  28. package/dist/components/googleTagManager/index.d.ts +1 -1
  29. package/dist/components/iconButton/index.d.ts +1 -1
  30. package/dist/components/imageUpload/index.d.ts +2 -2
  31. package/dist/components/input/index.d.ts +1 -1
  32. package/dist/components/mapView/index.d.ts +2 -2
  33. package/dist/components/mapView/index.d.ts.map +1 -1
  34. package/dist/components/maskedInput/index.d.ts +3 -3
  35. package/dist/components/modal/modalContainer/index.d.ts +1 -1
  36. package/dist/components/modal/modalFooter/index.d.ts +1 -1
  37. package/dist/components/modal/modalHeader/index.d.ts +1 -1
  38. package/dist/components/multiSelect/index.d.ts +1 -1
  39. package/dist/components/pagination/index.d.ts +1 -1
  40. package/dist/components/phoneInput/index.d.ts +2 -2
  41. package/dist/components/phoneInput/index.d.ts.map +1 -1
  42. package/dist/components/popover/index.d.ts +2 -2
  43. package/dist/components/popover/index.d.ts.map +1 -1
  44. package/dist/components/radio/radioBox/index.d.ts +4 -4
  45. package/dist/components/radio/radioGroup/index.d.ts +3 -3
  46. package/dist/components/richText/index.d.ts +13 -4
  47. package/dist/components/richText/index.d.ts.map +1 -1
  48. package/dist/components/richText/insertLink/index.d.ts +5 -0
  49. package/dist/components/richText/insertLink/index.d.ts.map +1 -0
  50. package/dist/components/richText/insertVideo/index.d.ts.map +1 -1
  51. package/dist/components/richText/leaf/index.d.ts +1 -0
  52. package/dist/components/richText/leaf/index.d.ts.map +1 -1
  53. package/dist/components/searchPlaces.d.ts +3 -3
  54. package/dist/components/select/index.d.ts +1 -1
  55. package/dist/components/slider/index.d.ts +1 -1
  56. package/dist/components/switch/index.d.ts +3 -3
  57. package/dist/components/switch/index.d.ts.map +1 -1
  58. package/dist/components/tab/tabButton/index.d.ts +1 -1
  59. package/dist/components/tab/tabContainer/index.d.ts +1 -1
  60. package/dist/components/table/tableBody/index.d.ts +1 -1
  61. package/dist/components/table/tableCaption/index.d.ts +2 -2
  62. package/dist/components/table/tableContainer/index.d.ts +1 -1
  63. package/dist/components/table/tableFooter/index.d.ts +1 -1
  64. package/dist/components/table/tableHeader/index.d.ts +2 -2
  65. package/dist/components/textarea/index.d.ts +1 -1
  66. package/dist/components/tooltip/index.d.ts +1 -1
  67. package/dist/hooks/useAutomation.d.ts +1 -1
  68. package/dist/hooks/useDrawer.d.ts +5 -5
  69. package/dist/hooks/useForm.d.ts +2 -2
  70. package/dist/hooks/useHydrated.d.ts +1 -1
  71. package/dist/hooks/useModal.d.ts +5 -5
  72. package/dist/hooks/useScopedParams.d.ts +5 -5
  73. package/dist/hooks/useScrollLock.d.ts +2 -2
  74. package/dist/hooks/useSearchAutomation.d.ts +6 -6
  75. package/dist/hooks/useSlider.d.ts +2 -2
  76. package/dist/hooks/useToast.d.ts +1 -1
  77. package/dist/index.js +710 -633
  78. package/dist/index.js.map +1 -1
  79. package/dist/modules/components/alert/alertContainer/index.js.map +1 -1
  80. package/dist/modules/components/alert/alertContent/index.js.map +1 -1
  81. package/dist/modules/components/alert/alertDescription/index.js.map +1 -1
  82. package/dist/modules/components/alert/alertIcon/index.js.map +1 -1
  83. package/dist/modules/components/alert/alertTitle/index.js.map +1 -1
  84. package/dist/modules/components/audioPlayer/index.js.map +1 -1
  85. package/dist/modules/components/audioUpload/index.js.map +1 -1
  86. package/dist/modules/components/badge/index.js.map +1 -1
  87. package/dist/modules/components/button/index.js.map +1 -1
  88. package/dist/modules/components/cardTab/cardTabButton/index.js.map +1 -1
  89. package/dist/modules/components/cardTab/cardTabContainer/index.js.map +1 -1
  90. package/dist/modules/components/checkbox/index.js.map +1 -1
  91. package/dist/modules/components/clientOnly.js.map +1 -1
  92. package/dist/modules/components/currencyInput/index.js.map +1 -1
  93. package/dist/modules/components/datePicker/index.js.map +1 -1
  94. package/dist/modules/components/divider/index.js.map +1 -1
  95. package/dist/modules/components/drawer/drawerContainer/index.js.map +1 -1
  96. package/dist/modules/components/drawer/drawerHeader/index.js.map +1 -1
  97. package/dist/modules/components/facebookPixel/index.js.map +1 -1
  98. package/dist/modules/components/fieldError/index.js.map +1 -1
  99. package/dist/modules/components/fieldLabel/index.js.map +1 -1
  100. package/dist/modules/components/fieldWrapper/index.js.map +1 -1
  101. package/dist/modules/components/fileUpload/index.js.map +1 -1
  102. package/dist/modules/components/googleAnalytics/index.js.map +1 -1
  103. package/dist/modules/components/googleTagManager/index.js.map +1 -1
  104. package/dist/modules/components/iconButton/index.js.map +1 -1
  105. package/dist/modules/components/imageUpload/index.js.map +1 -1
  106. package/dist/modules/components/input/index.js.map +1 -1
  107. package/dist/modules/components/mapView/index.js.map +1 -1
  108. package/dist/modules/components/maskedInput/index.js.map +1 -1
  109. package/dist/modules/components/modal/modalContainer/index.js.map +1 -1
  110. package/dist/modules/components/modal/modalFooter/index.js.map +1 -1
  111. package/dist/modules/components/modal/modalHeader/index.js.map +1 -1
  112. package/dist/modules/components/multiSelect/index.js.map +1 -1
  113. package/dist/modules/components/pagination/index.js.map +1 -1
  114. package/dist/modules/components/phoneInput/index.js +59 -59
  115. package/dist/modules/components/phoneInput/index.js.map +1 -1
  116. package/dist/modules/components/popover/index.js.map +1 -1
  117. package/dist/modules/components/radio/radioBox/index.js.map +1 -1
  118. package/dist/modules/components/radio/radioGroup/index.js.map +1 -1
  119. package/dist/modules/components/richText/index.js +58 -56
  120. package/dist/modules/components/richText/index.js.map +1 -1
  121. package/dist/modules/components/richText/insertLink/index.js +68 -0
  122. package/dist/modules/components/richText/insertLink/index.js.map +1 -0
  123. package/dist/modules/components/richText/insertLink/styles.css +1 -0
  124. package/dist/modules/components/richText/insertVideo/index.js +45 -41
  125. package/dist/modules/components/richText/insertVideo/index.js.map +1 -1
  126. package/dist/modules/components/richText/leaf/index.js +6 -1
  127. package/dist/modules/components/richText/leaf/index.js.map +1 -1
  128. package/dist/modules/components/richText/leaf/styles.css +1 -0
  129. package/dist/modules/components/richText/styles.css +4 -0
  130. package/dist/modules/components/searchPlaces.js.map +1 -1
  131. package/dist/modules/components/select/index.js.map +1 -1
  132. package/dist/modules/components/slider/index.js.map +1 -1
  133. package/dist/modules/components/switch/index.js.map +1 -1
  134. package/dist/modules/components/tab/tabButton/index.js.map +1 -1
  135. package/dist/modules/components/tab/tabContainer/index.js.map +1 -1
  136. package/dist/modules/components/table/tableBody/index.js.map +1 -1
  137. package/dist/modules/components/table/tableCaption/index.js.map +1 -1
  138. package/dist/modules/components/table/tableContainer/index.js.map +1 -1
  139. package/dist/modules/components/table/tableFooter/index.js.map +1 -1
  140. package/dist/modules/components/table/tableHeader/index.js.map +1 -1
  141. package/dist/modules/components/textarea/index.js.map +1 -1
  142. package/dist/modules/components/tooltip/index.js.map +1 -1
  143. package/dist/modules/hooks/useAutomation.js.map +1 -1
  144. package/dist/modules/hooks/useDrawer.js.map +1 -1
  145. package/dist/modules/hooks/useForm.js.map +1 -1
  146. package/dist/modules/hooks/useHydrated.js.map +1 -1
  147. package/dist/modules/hooks/useModal.js.map +1 -1
  148. package/dist/modules/hooks/useScopedParams.js.map +1 -1
  149. package/dist/modules/hooks/useScrollLock.js.map +1 -1
  150. package/dist/modules/hooks/useSearchAutomation.js.map +1 -1
  151. package/dist/modules/hooks/useSlider.js.map +1 -1
  152. package/dist/modules/hooks/useToast.js.map +1 -1
  153. package/dist/modules/providers/drawerProvider.js.map +1 -1
  154. package/dist/modules/providers/formProvider.js.map +1 -1
  155. package/dist/modules/providers/modalProvider.js.map +1 -1
  156. package/dist/modules/providers/placesProvider.js.map +1 -1
  157. package/dist/modules/providers/toastProvider.js.map +1 -1
  158. package/dist/modules/services/isValidHttpsUrl.js +12 -0
  159. package/dist/modules/services/isValidHttpsUrl.js.map +1 -0
  160. package/dist/modules/services/toHtml.js.map +1 -1
  161. package/dist/modules/services/toRichTextValue.js.map +1 -1
  162. package/dist/modules/utils/richTextUtilities.js +24 -17
  163. package/dist/modules/utils/richTextUtilities.js.map +1 -1
  164. package/dist/providers/drawerProvider.d.ts +1 -1
  165. package/dist/providers/formProvider.d.ts +1 -1
  166. package/dist/providers/modalProvider.d.ts +1 -1
  167. package/dist/providers/placesProvider.d.ts +1 -1
  168. package/dist/providers/toastProvider.d.ts +1 -1
  169. package/dist/services/isValidHttpsUrl.d.ts +3 -0
  170. package/dist/services/isValidHttpsUrl.d.ts.map +1 -0
  171. package/dist/services/toHtml.d.ts +1 -1
  172. package/dist/services/toRichTextValue.d.ts +1 -1
  173. package/dist/style.css +1 -1
  174. package/dist/types/richTextTypes.d.ts +13 -2
  175. package/dist/types/richTextTypes.d.ts.map +1 -1
  176. package/dist/utils/richTextUtilities.d.ts.map +1 -1
  177. package/package.json +2 -2
@@ -3,102 +3,102 @@ import { FieldTemplate as t } from "../../services/fieldTemplate.js";
3
3
  import { TYPES as n, applyMask as r, getMask as i } from "../../utils/phoneInputUtilities.js";
4
4
  import { PhoneInputContainer as a } from "./phoneInputContainer/index.js";
5
5
  import { PhoneInputCountriesOverlay as o } from "./phoneInputCountriesOverlay/index.js";
6
- import { PhoneInputCountryOption as ee } from "./phoneInputCountryOption/index.js";
7
- import { PhoneInputCountryOptionsContainer as s } from "./phoneInputCountryOptionsContainer/index.js";
8
- import { PhoneInputCountrySelector as te } from "./phoneInputCountrySelector/index.js";
9
- import { PhoneInputMask as c } from "./phoneInputMask/index.js";
10
- import { useId as l, useRef as u, useState as d } from "react";
11
- import { jsx as f, jsxs as p } from "react/jsx-runtime";
12
- import { findCountryMask as ne, formatToPhone as re, removeNonNumeric as m } from "@arkyn/shared";
13
- import { countries as h } from "@arkyn/templates";
6
+ import { PhoneInputCountryOption as s } from "./phoneInputCountryOption/index.js";
7
+ import { PhoneInputCountryOptionsContainer as c } from "./phoneInputCountryOptionsContainer/index.js";
8
+ import { PhoneInputCountrySelector as ee } from "./phoneInputCountrySelector/index.js";
9
+ import { PhoneInputMask as l } from "./phoneInputMask/index.js";
10
+ import { useId as u, useRef as d, useState as f } from "react";
11
+ import { jsx as p, jsxs as m } from "react/jsx-runtime";
12
+ import { findCountryMask as h, formatToPhone as g, removeNonNumeric as _ } from "@arkyn/shared";
13
+ import { countries as v } from "@arkyn/templates";
14
14
  //#region src/components/phoneInput/index.tsx
15
- function g(e, t) {
16
- let a = m(e);
17
- return t.code === "+55" ? r(a, n[i(a)]) : r(a, typeof t.mask == "string" ? t.mask : t.mask[0], "_");
15
+ function y(e, t) {
16
+ let a = _(e), o = _(t.code), s = e.trim().startsWith("+") && a.startsWith(o) ? a.slice(o.length) : a;
17
+ return t.code === "+55" ? r(s, n[i(s)]) : r(s, typeof t.mask == "string" ? t.mask : t.mask[0], "_");
18
18
  }
19
- function _(n) {
20
- let { value: r, label: i, className: _ = "", disabled: v = !1, errorMessage: y, isLoading: b = !1, readOnly: x = !1, size: S = "md", defaultValue: C = "", variant: ie = "solid", showAsterisk: ae, name: w, onChange: oe, searchCountryPlaceholder: T = "Pesquisar país", notFoundCountryText: E = "Nenhum país encontrado", id: D, unShowFieldTemplate: O = !1, orientation: k = "vertical" } = n, A = h.find((e) => e.iso === "BR"), j = C ? re(C) : "", M = C ? ne(C)[1] : A, [N, P] = d(!1), [F, I] = d(""), [L, R] = d(!1), [z, B] = d(j), [V, H] = d(M), U = r === void 0 ? z : g(r, V), { fieldErrors: W } = e(), G = u(null), K = l(), q = D || K, J = y || W?.[w], se = !!J, Y = v || b, X = u(null);
19
+ function b(n) {
20
+ let { value: r, label: i, className: b = "", disabled: x = !1, errorMessage: S, isLoading: C = !1, readOnly: w = !1, size: T = "md", defaultValue: E = "", variant: te = "solid", showAsterisk: ne, name: D, onChange: re, searchCountryPlaceholder: ie = "Pesquisar país", notFoundCountryText: ae = "Nenhum país encontrado", id: O, unShowFieldTemplate: k = !1, orientation: A = "vertical" } = n, j = v.find((e) => e.iso === "BR"), M = E ? g(E) : "", N = E ? h(E)[1] : j, [P, F] = f(!1), [I, L] = f(""), [R, z] = f(!1), [B, V] = f(M), [H, U] = f(N), W = r === void 0 ? B : y(r, H), { fieldErrors: G } = e(), K = d(null), q = u(), oe = O || q, J = S || G?.[D], se = !!J, Y = x || C, X = d(null);
21
21
  function ce() {
22
- Y || N || L || (P(!0), X.current && X.current.focus());
22
+ Y || P || R || (F(!0), X.current && X.current.focus());
23
23
  }
24
24
  function Z() {
25
- R(!0), P(!0);
25
+ z(!0), F(!0);
26
26
  }
27
27
  function le() {
28
- R(!1), P(!1);
28
+ z(!1), F(!1);
29
29
  }
30
30
  function ue() {
31
- P(!0);
31
+ F(!0);
32
32
  }
33
33
  function de() {
34
- P(!1);
34
+ F(!1);
35
35
  }
36
36
  function Q(e) {
37
- return e.name.toLowerCase().includes(F.toLowerCase());
37
+ return e.name.toLowerCase().includes(I.toLowerCase());
38
38
  }
39
39
  function $(e) {
40
- let t = V.code;
41
- return t += m(e || U), t;
40
+ let t = H.code;
41
+ return t += _(e || W), t;
42
42
  }
43
- return /* @__PURE__ */ f(t, {
44
- name: w,
43
+ return /* @__PURE__ */ p(t, {
44
+ name: D,
45
45
  label: i,
46
- showAsterisk: ae,
47
- className: _,
46
+ showAsterisk: ne,
47
+ className: b,
48
48
  errorMessage: J,
49
- unShowFieldTemplate: O,
50
- orientation: k,
51
- children: /* @__PURE__ */ p(a, {
49
+ unShowFieldTemplate: k,
50
+ orientation: A,
51
+ children: /* @__PURE__ */ m(a, {
52
52
  disabled: Y,
53
53
  isError: se,
54
- isLoading: b,
55
- isFocused: N,
56
- readOnly: x,
57
- size: S,
58
- variant: ie,
54
+ isLoading: C,
55
+ isFocused: P,
56
+ readOnly: w,
57
+ size: T,
58
+ variant: te,
59
59
  onFocus: ce,
60
60
  children: [
61
- /* @__PURE__ */ f(te, {
62
- currentCountry: V,
61
+ /* @__PURE__ */ p(ee, {
62
+ currentCountry: H,
63
63
  onClick: Z,
64
- size: S
64
+ size: T
65
65
  }),
66
- /* @__PURE__ */ p(s, {
67
- isOpen: Y || x ? !1 : L,
68
- search: F,
69
- placeholder: T,
70
- onSearch: I,
71
- children: [h.filter((e) => Q(e)).map((e) => /* @__PURE__ */ f(ee, {
66
+ /* @__PURE__ */ m(c, {
67
+ isOpen: Y || w ? !1 : R,
68
+ search: I,
69
+ placeholder: ie,
70
+ onSearch: L,
71
+ children: [v.filter((e) => Q(e)).map((e) => /* @__PURE__ */ p(s, {
72
72
  country: e,
73
73
  handleChangeValue: () => {
74
- H(e), R(!1), B("");
74
+ U(e), z(!1), V("");
75
75
  },
76
- isActive: e.iso === V.iso,
77
- size: S
78
- }, e.iso)), h.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ f("p", { children: E })]
76
+ isActive: e.iso === H.iso,
77
+ size: T
78
+ }, e.iso)), v.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ p("p", { children: ae })]
79
79
  }),
80
- /* @__PURE__ */ f(o, {
81
- isOpen: Y || x ? !1 : L,
80
+ /* @__PURE__ */ p(o, {
81
+ isOpen: Y || w ? !1 : R,
82
82
  onClick: le
83
83
  }),
84
- /* @__PURE__ */ f(c, {
85
- id: q,
84
+ /* @__PURE__ */ p(l, {
85
+ id: oe,
86
86
  ref: X,
87
- readonly: x,
88
- currentCountry: V,
89
- value: U,
87
+ readonly: w,
88
+ currentCountry: H,
89
+ value: W,
90
90
  disabled: Y,
91
91
  onBlur: de,
92
92
  onFocus: ue,
93
- size: S,
93
+ size: T,
94
94
  onChange: (e) => {
95
- B(e), oe?.($(e));
95
+ V(e), re?.($(e));
96
96
  }
97
97
  }),
98
- /* @__PURE__ */ f("input", {
99
- ref: G,
98
+ /* @__PURE__ */ p("input", {
99
+ ref: K,
100
100
  type: "hidden",
101
- name: w,
101
+ name: D,
102
102
  value: $()
103
103
  })
104
104
  ]
@@ -106,6 +106,6 @@ function _(n) {
106
106
  });
107
107
  }
108
108
  //#endregion
109
- export { _ as PhoneInput };
109
+ export { b as PhoneInput };
110
110
 
111
111
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { applyMask, getMask, TYPES } from \"../../utils/phoneInputUtilities\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: 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 * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\nfunction formatLocalValue(rawValue: string, country: CountryType) {\n\tconst digits = removeNonNumeric(rawValue);\n\n\tif (country.code === \"+55\") {\n\t\treturn applyMask(digits, TYPES[getMask(digits)]);\n\t}\n\n\tconst mask =\n\t\ttypeof country.mask === \"string\" ? country.mask : country.mask[0];\n\treturn applyMask(digits, mask, \"_\");\n}\n\n/**\n * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code 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.label - Label text displayed above the input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change — receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n * name=\"contactPhone\"\n * label=\"Contact Phone\"\n * value={phone}\n * onChange={(v) => setPhone(v)}\n * variant=\"outline\"\n * size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n * name=\"phone\"\n * label=\"Phone\"\n * defaultCountryIso=\"US\"\n * showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst value =\n\t\trawValue !== undefined\n\t\t\t? formatLocalValue(rawValue, currentCountry)\n\t\t\t: internalValue;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\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<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { applyMask, getMask, TYPES } from \"../../utils/phoneInputUtilities\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: 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 * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\nfunction formatLocalValue(rawValue: string, country: CountryType) {\n\tconst digits = removeNonNumeric(rawValue);\n\tconst codeDigits = removeNonNumeric(country.code);\n\tconst hasCountryCode = rawValue.trim().startsWith(\"+\");\n\tconst localDigits =\n\t\thasCountryCode && digits.startsWith(codeDigits)\n\t\t\t? digits.slice(codeDigits.length)\n\t\t\t: digits;\n\n\tif (country.code === \"+55\") {\n\t\treturn applyMask(localDigits, TYPES[getMask(localDigits)]);\n\t}\n\n\tconst mask =\n\t\ttypeof country.mask === \"string\" ? country.mask : country.mask[0];\n\treturn applyMask(localDigits, mask, \"_\");\n}\n\n/**\n * PhoneInput, phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code 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.label - Label text displayed above the input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change, receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n * name=\"contactPhone\"\n * label=\"Contact Phone\"\n * value={phone}\n * onChange={(v) => setPhone(v)}\n * variant=\"outline\"\n * size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n * name=\"phone\"\n * label=\"Phone\"\n * defaultCountryIso=\"US\"\n * showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst value =\n\t\trawValue !== undefined\n\t\t\t? formatLocalValue(rawValue, currentCountry)\n\t\t\t: internalValue;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\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<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/popover/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\n\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype OrientationProps =\n\t| \"bottomLeft\"\n\t| \"bottomRight\"\n\t| \"topLeft\"\n\t| \"topRight\"\n\t| \"top\"\n\t| \"left\"\n\t| \"bottom\"\n\t| \"right\";\n\ntype PopoverProps = {\n\t/** Content rendered inside the floating panel. Required. */\n\tchildren: ReactNode;\n\t/** Trigger element clicking it opens the popover. Required. */\n\tbutton: ReactNode;\n\t/** When true, clicking the popover content also closes it. @default false */\n\tcloseOnClick?: boolean;\n\t/**\n\t * Position of the floating panel relative to the trigger.\n\t * Options: `\"bottomLeft\"` | `\"bottomRight\"` | `\"topLeft\"` | `\"topRight\"` | `\"top\"` | `\"bottom\"` | `\"left\"` | `\"right\"`.\n\t * @default \"bottomLeft\"\n\t */\n\torientation?: OrientationProps;\n\t/** Additional CSS class applied to the popover root element. */\n\tclassName?: string;\n};\n\n/**\n * Popover floating panel that appears relative to a trigger element.\n *\n * Clicking outside the popover (or clicking the content when `closeOnClick` is set)\n * dismisses it. Locks body scroll while open.\n *\n * @param props.children - Content to display inside the panel. Required.\n * @param props.button - Trigger element that opens the popover. Required.\n * @param props.closeOnClick - Clicking the content also closes the popover. Default: false\n * @param props.orientation - Panel position relative to the trigger. Default: \"bottomLeft\"\n * @param props.className - Additional CSS class for the root element.\n *\n * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.\n *\n * @example\n * ```tsx\n * // Basic dropdown menu\n * <Popover button={<Button>Options</Button>} closeOnClick>\n * <ul>\n * <li onClick={handleEdit}>Edit</li>\n * <li onClick={handleDelete}>Delete</li>\n * </ul>\n * </Popover>\n *\n * // User profile menu (bottom-right)\n * <Popover\n * button={<IconButton icon={User} aria-label=\"Account\" />}\n * orientation=\"bottomRight\"\n * closeOnClick\n * >\n * <nav>\n * <a href=\"/profile\">Profile</a>\n * <a href=\"/settings\">Settings</a>\n * <a href=\"/logout\">Sign out</a>\n * </nav>\n * </Popover>\n *\n * // Filter panel (top-left)\n * <Popover button={<Badge>Filters</Badge>} orientation=\"topLeft\">\n * <Input name=\"search\" placeholder=\"Search...\" />\n * <Select name=\"status\" options={statusOptions} />\n * </Popover>\n * ```\n */\n\nfunction Popover(props: PopoverProps) {\n\tconst {\n\t\tchildren,\n\t\tbutton,\n\t\tcloseOnClick,\n\t\tclassName: baseClassName = \"\",\n\t\torientation = \"bottomLeft\",\n\t} = props;\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst visible = isOpen ? \"visibleTrue\" : \"visibleFalse\";\n\tconst className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;\n\n\tfunction handleOpenPopover() {\n\t\tif (!isOpen) setIsOpen(true);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\treturn (\n\t\t<div className={className} onClick={handleOpenPopover}>\n\t\t\t{button}\n\n\t\t\t<div\n\t\t\t\tstyle={{ visibility: isOpen ? \"visible\" : \"hidden\" }}\n\t\t\t\tonClick={() => closeOnClick && setIsOpen(false)}\n\t\t\t\tclassName=\"arkynPopoverContent\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t{isOpen && (\n\t\t\t\t<div onClick={() => setIsOpen(false)} className=\"arkynPopoverOverlay\" />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { Popover };\n"],"mappings":";;;;;AA6EA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,aACA,WACA,iBACA,WAAW,IAAgB,IAC3B,iBAAc,iBACX,GACE,CAAC,GAAQ,KAAa,EAAS,EAAK,GAGpC,IAAY,gBAAgB,EAAY,GAD9B,IAAS,gBAAgB,eACgB,GAAG;CAE5D,SAAS,IAAoB;EAC5B,AAAK,KAAQ,EAAU,EAAI;CAC5B;CAIA,OAFA,EAAc,CAAM,GAGnB,kBAAC,OAAD;EAAgB;EAAW,SAAS;YAApC;GACE;GAED,kBAAC,OAAD;IACC,OAAO,EAAE,YAAY,IAAS,YAAY,SAAS;IACnD,eAAe,KAAgB,EAAU,EAAK;IAC9C,WAAU;IAET;GACG,CAAA;GAEJ,KACA,kBAAC,OAAD;IAAK,eAAe,EAAU,EAAK;IAAG,WAAU;GAAuB,CAAA;EAEpE;;AAEP"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/popover/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\n\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype OrientationProps =\n\t| \"bottomLeft\"\n\t| \"bottomRight\"\n\t| \"topLeft\"\n\t| \"topRight\"\n\t| \"top\"\n\t| \"left\"\n\t| \"bottom\"\n\t| \"right\";\n\ntype PopoverProps = {\n\t/** Content rendered inside the floating panel. Required. */\n\tchildren: ReactNode;\n\t/** Trigger element, clicking it opens the popover. Required. */\n\tbutton: ReactNode;\n\t/** When true, clicking the popover content also closes it. @default false */\n\tcloseOnClick?: boolean;\n\t/**\n\t * Position of the floating panel relative to the trigger.\n\t * Options: `\"bottomLeft\"` | `\"bottomRight\"` | `\"topLeft\"` | `\"topRight\"` | `\"top\"` | `\"bottom\"` | `\"left\"` | `\"right\"`.\n\t * @default \"bottomLeft\"\n\t */\n\torientation?: OrientationProps;\n\t/** Additional CSS class applied to the popover root element. */\n\tclassName?: string;\n};\n\n/**\n * Popover, floating panel that appears relative to a trigger element.\n *\n * Clicking outside the popover (or clicking the content when `closeOnClick` is set)\n * dismisses it. Locks body scroll while open.\n *\n * @param props.children - Content to display inside the panel. Required.\n * @param props.button - Trigger element that opens the popover. Required.\n * @param props.closeOnClick - Clicking the content also closes the popover. Default: false\n * @param props.orientation - Panel position relative to the trigger. Default: \"bottomLeft\"\n * @param props.className - Additional CSS class for the root element.\n *\n * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.\n *\n * @example\n * ```tsx\n * // Basic dropdown menu\n * <Popover button={<Button>Options</Button>} closeOnClick>\n * <ul>\n * <li onClick={handleEdit}>Edit</li>\n * <li onClick={handleDelete}>Delete</li>\n * </ul>\n * </Popover>\n *\n * // User profile menu (bottom-right)\n * <Popover\n * button={<IconButton icon={User} aria-label=\"Account\" />}\n * orientation=\"bottomRight\"\n * closeOnClick\n * >\n * <nav>\n * <a href=\"/profile\">Profile</a>\n * <a href=\"/settings\">Settings</a>\n * <a href=\"/logout\">Sign out</a>\n * </nav>\n * </Popover>\n *\n * // Filter panel (top-left)\n * <Popover button={<Badge>Filters</Badge>} orientation=\"topLeft\">\n * <Input name=\"search\" placeholder=\"Search...\" />\n * <Select name=\"status\" options={statusOptions} />\n * </Popover>\n * ```\n */\n\nfunction Popover(props: PopoverProps) {\n\tconst {\n\t\tchildren,\n\t\tbutton,\n\t\tcloseOnClick,\n\t\tclassName: baseClassName = \"\",\n\t\torientation = \"bottomLeft\",\n\t} = props;\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst visible = isOpen ? \"visibleTrue\" : \"visibleFalse\";\n\tconst className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;\n\n\tfunction handleOpenPopover() {\n\t\tif (!isOpen) setIsOpen(true);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\treturn (\n\t\t<div className={className} onClick={handleOpenPopover}>\n\t\t\t{button}\n\n\t\t\t<div\n\t\t\t\tstyle={{ visibility: isOpen ? \"visible\" : \"hidden\" }}\n\t\t\t\tonClick={() => closeOnClick && setIsOpen(false)}\n\t\t\t\tclassName=\"arkynPopoverContent\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t{isOpen && (\n\t\t\t\t<div onClick={() => setIsOpen(false)} className=\"arkynPopoverOverlay\" />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { Popover };\n"],"mappings":";;;;;AA6EA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,aACA,WACA,iBACA,WAAW,IAAgB,IAC3B,iBAAc,iBACX,GACE,CAAC,GAAQ,KAAa,EAAS,EAAK,GAGpC,IAAY,gBAAgB,EAAY,GAD9B,IAAS,gBAAgB,eACgB,GAAG;CAE5D,SAAS,IAAoB;EAC5B,AAAK,KAAQ,EAAU,EAAI;CAC5B;CAIA,OAFA,EAAc,CAAM,GAGnB,kBAAC,OAAD;EAAgB;EAAW,SAAS;YAApC;GACE;GAED,kBAAC,OAAD;IACC,OAAO,EAAE,YAAY,IAAS,YAAY,SAAS;IACnD,eAAe,KAAgB,EAAU,EAAK;IAC9C,WAAU;IAET;GACG,CAAA;GAEJ,KACA,kBAAC,OAAD;IAAK,eAAe,EAAU,EAAK;IAAG,WAAU;GAAuB,CAAA;EAEpE;;AAEP"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioBox/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nimport { useRadioGroup } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Value submitted to the form when this option is selected. Required. */\n\tvalue: string;\n\t/** Applies error styling. Inherited from `RadioGroup` when not set. */\n\tisError?: boolean;\n\t/** Size variant. Inherits from `RadioGroup` when not set. */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * RadioBox individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.\n *\n * Reads active value, size, error state, and disabled state from `RadioGroup` context.\n * Must be used as a direct child of `RadioGroup`.\n *\n * @param props.value - Option value. Required.\n * @param props.children - Option label content (text, icons, or rich markup).\n * @param props.disabled - Disables this option (group can also disable all options).\n * @param props.size - Size override. Inherits from group by default.\n *\n * **...Other valid HTML `<button>` properties**\n *\n * @returns RadioBox JSX element.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Choose a plan\" onChange={setPlan}>\n * <RadioBox value=\"basic\">Basic $9/mo</RadioBox>\n * <RadioBox value=\"pro\">Pro $29/mo</RadioBox>\n * <RadioBox value=\"enterprise\" disabled>Enterprise contact us</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioBox(props: RadioBoxProps) {\n\tconst {\n\t\tvalue: componentValue,\n\t\tsize: componentSize,\n\t\tdisabled,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tonFocus,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\thandleChange,\n\t\tsize: groupSize,\n\t\tvalue,\n\t\tisError,\n\t\tdisabled: groupDisabled,\n\t} = useRadioGroup();\n\n\tconst isChecked = value === componentValue;\n\tconst size = componentSize || groupSize;\n\n\tconst isDisabled = disabled || groupDisabled;\n\n\tconst checkedClass = isChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst disabledClass = isDisabled ? \"disabledTrue\" : \"disabledFalse\";\n\tconst className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tonClick?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\tfunction handleFocus(event: React.FocusEvent<HTMLButtonElement>) {\n\t\tonFocus?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\treturn (\n\t\t<label className={className.trim()}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\t{...rest}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</label>\n\t);\n}\n\nexport { RadioBox };\n"],"mappings":";;;;AAuCA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OAAO,GACP,MAAM,GACN,aACA,aACA,WAAW,IAAgB,IAC3B,YACA,YACA,GAAG,MACA,GAEE,EACL,iBACA,MAAM,GACN,UACA,YACA,UAAU,MACP,EAAc,GAEZ,IAAY,MAAU,GACtB,IAAO,KAAiB,GAExB,IAAa,KAAY,GAKzB,IAAY,iBAAiB,EAAK,GAHnB,IAAY,gBAAgB,eAGO,GAFrC,IAAU,cAAc,aAE2B,GADhD,IAAa,iBAAiB,gBACmC,GAAG;CAE1F,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;YAAjC,CACC,kBAAC,UAAD;GACC,MAAK;GACL,UAAU;GACV,SAAS;GACT,SAAS;GACT,GAAI;EACJ,CAAA,GAEA,CACK;;AAET"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioBox/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nimport { useRadioGroup } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Value submitted to the form when this option is selected. Required. */\n\tvalue: string;\n\t/** Applies error styling. Inherited from `RadioGroup` when not set. */\n\tisError?: boolean;\n\t/** Size variant. Inherits from `RadioGroup` when not set. */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * RadioBox, individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.\n *\n * Reads active value, size, error state, and disabled state from `RadioGroup` context.\n * Must be used as a direct child of `RadioGroup`.\n *\n * @param props.value - Option value. Required.\n * @param props.children - Option label content (text, icons, or rich markup).\n * @param props.disabled - Disables this option (group can also disable all options).\n * @param props.size - Size override. Inherits from group by default.\n *\n * **...Other valid HTML `<button>` properties**\n *\n * @returns RadioBox JSX element.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Choose a plan\" onChange={setPlan}>\n * <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n * <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n * <RadioBox value=\"enterprise\" disabled>Enterprise, contact us</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioBox(props: RadioBoxProps) {\n\tconst {\n\t\tvalue: componentValue,\n\t\tsize: componentSize,\n\t\tdisabled,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tonFocus,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\thandleChange,\n\t\tsize: groupSize,\n\t\tvalue,\n\t\tisError,\n\t\tdisabled: groupDisabled,\n\t} = useRadioGroup();\n\n\tconst isChecked = value === componentValue;\n\tconst size = componentSize || groupSize;\n\n\tconst isDisabled = disabled || groupDisabled;\n\n\tconst checkedClass = isChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst disabledClass = isDisabled ? \"disabledTrue\" : \"disabledFalse\";\n\tconst className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tonClick?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\tfunction handleFocus(event: React.FocusEvent<HTMLButtonElement>) {\n\t\tonFocus?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\treturn (\n\t\t<label className={className.trim()}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\t{...rest}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</label>\n\t);\n}\n\nexport { RadioBox };\n"],"mappings":";;;;AAuCA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OAAO,GACP,MAAM,GACN,aACA,aACA,WAAW,IAAgB,IAC3B,YACA,YACA,GAAG,MACA,GAEE,EACL,iBACA,MAAM,GACN,UACA,YACA,UAAU,MACP,EAAc,GAEZ,IAAY,MAAU,GACtB,IAAO,KAAiB,GAExB,IAAa,KAAY,GAKzB,IAAY,iBAAiB,EAAK,GAHnB,IAAY,gBAAgB,eAGO,GAFrC,IAAU,cAAc,aAE2B,GADhD,IAAa,iBAAiB,gBACmC,GAAG;CAE1F,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;YAAjC,CACC,kBAAC,UAAD;GACC,MAAK;GACL,UAAU;GACV,SAAS;GACT,SAAS;GACT,GAAI;EACJ,CAAA,GAEA,CACK;;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"sourcesContent":["import { type HTMLAttributes, useState } from \"react\";\n\nimport { useForm } from \"../../../hooks/useForm\";\nimport { FieldTemplate } from \"../../../services/fieldTemplate\";\n\nimport { RadioProvider } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Field name used for form submission. Required. */\n\tname: string;\n\t/** Label displayed above the group. */\n\tlabel?: string;\n\t/** Appends an asterisk to the label. @default false */\n\tshowAsterisk?: boolean;\n\t/** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */\n\terrorMessage?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Initial selected value (uncontrolled). @default \"\" */\n\tdefaultValue?: string;\n\t/** Callback fired when the selected option changes. */\n\tonChange?: (value: string) => void;\n\t/** Size variant applied to all `RadioBox` children. @default \"md\" */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Disables all `RadioBox` children. @default false */\n\tdisabled?: boolean;\n\t/** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Layout direction of the `FieldWrapper`. @default \"horizontal\" */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * RadioGroup managed group of `RadioBox` options with form integration.\n *\n * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from\n * the nearest `FormProvider` when no `errorMessage` is explicitly provided.\n *\n * @param props.name - Form field name. Required.\n * @param props.label - Label displayed above the group.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.value - Controlled selection.\n * @param props.defaultValue - Initial selection (uncontrolled). Default: `\"\"`\n * @param props.onChange - Called with the newly selected value.\n * @param props.size - Size for all child `RadioBox` elements. Default: `\"md\"`\n * @param props.disabled - Disables all options. Default: false\n * @param props.errorMessage - Validation error message.\n * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false\n *\n * **...Other valid HTML `<div>` properties**\n *\n * @returns RadioGroup JSX element.\n *\n * @example\n * ```tsx\n * // Uncontrolled with label\n * <RadioGroup name=\"gender\" label=\"Gender\" showAsterisk defaultValue=\"male\">\n * <RadioBox value=\"male\">Male</RadioBox>\n * <RadioBox value=\"female\">Female</RadioBox>\n * <RadioBox value=\"other\">Other</RadioBox>\n * </RadioGroup>\n *\n * // Controlled with change handler\n * <RadioGroup name=\"plan\" label=\"Subscription plan\" value={plan} onChange={setPlan}>\n * <RadioBox value=\"basic\">Basic $9/mo</RadioBox>\n * <RadioBox value=\"pro\">Pro $29/mo</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioGroup(props: RadioGroupProps) {\n\tconst {\n\t\tdefaultValue = \"\",\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\terrorMessage: baseErrorMessage,\n\t\tvalue: forceValue,\n\t\tonChange,\n\t\tsize = \"md\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t\t...rest\n\t} = props;\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst { fieldErrors } = useForm();\n\n\tfunction handleChange(value: string) {\n\t\tsetValue(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst className = `arkynRadioGroup ${size}`;\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<RadioProvider\n\t\t\t\tisError={isError}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={forceValue || value}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadOnly\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceValue || value}\n\t\t\t\t/>\n\n\t\t\t\t<div className={className.trim()} {...rest} />\n\t\t\t</RadioProvider>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RadioGroup };\n"],"mappings":";;;;;;;AAuEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,kBAAe,IACf,SACA,UACA,iBACA,cAAc,GACd,OAAO,GACP,aACA,UAAO,MACP,WAAW,IAAmB,IAC9B,cAAW,IACX,yBAAsB,IACtB,iBAAc,YACd,GAAG,MACA,GAEE,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,EAAE,mBAAgB,EAAQ;CAEhC,SAAS,EAAa,GAAe;EAEpC,AADA,EAAS,CAAK,GACV,KAAU,EAAS,CAAK;CAC7B;CAEA,IAAM,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAY,mBAAmB;CAErC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACU;GACH;GACN,OAAO,KAAc;GACP;GACJ;aALX,CAOC,kBAAC,SAAD;IACC,OAAO,EAAE,SAAS,OAAO;IACzB,MAAK;IACL,UAAA;IACM;IACN,OAAO,KAAc;GACrB,CAAA,GAED,kBAAC,OAAD;IAAK,WAAW,EAAU,KAAK;IAAG,GAAI;GAAO,CAAA,CAC/B;;CACD,CAAA;AAEjB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"sourcesContent":["import { type HTMLAttributes, useState } from \"react\";\n\nimport { useForm } from \"../../../hooks/useForm\";\nimport { FieldTemplate } from \"../../../services/fieldTemplate\";\n\nimport { RadioProvider } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Field name used for form submission. Required. */\n\tname: string;\n\t/** Label displayed above the group. */\n\tlabel?: string;\n\t/** Appends an asterisk to the label. @default false */\n\tshowAsterisk?: boolean;\n\t/** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */\n\terrorMessage?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Initial selected value (uncontrolled). @default \"\" */\n\tdefaultValue?: string;\n\t/** Callback fired when the selected option changes. */\n\tonChange?: (value: string) => void;\n\t/** Size variant applied to all `RadioBox` children. @default \"md\" */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Disables all `RadioBox` children. @default false */\n\tdisabled?: boolean;\n\t/** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Layout direction of the `FieldWrapper`. @default \"horizontal\" */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * RadioGroup, managed group of `RadioBox` options with form integration.\n *\n * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from\n * the nearest `FormProvider` when no `errorMessage` is explicitly provided.\n *\n * @param props.name - Form field name. Required.\n * @param props.label - Label displayed above the group.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.value - Controlled selection.\n * @param props.defaultValue - Initial selection (uncontrolled). Default: `\"\"`\n * @param props.onChange - Called with the newly selected value.\n * @param props.size - Size for all child `RadioBox` elements. Default: `\"md\"`\n * @param props.disabled - Disables all options. Default: false\n * @param props.errorMessage - Validation error message.\n * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false\n *\n * **...Other valid HTML `<div>` properties**\n *\n * @returns RadioGroup JSX element.\n *\n * @example\n * ```tsx\n * // Uncontrolled with label\n * <RadioGroup name=\"gender\" label=\"Gender\" showAsterisk defaultValue=\"male\">\n * <RadioBox value=\"male\">Male</RadioBox>\n * <RadioBox value=\"female\">Female</RadioBox>\n * <RadioBox value=\"other\">Other</RadioBox>\n * </RadioGroup>\n *\n * // Controlled with change handler\n * <RadioGroup name=\"plan\" label=\"Subscription plan\" value={plan} onChange={setPlan}>\n * <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n * <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioGroup(props: RadioGroupProps) {\n\tconst {\n\t\tdefaultValue = \"\",\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\terrorMessage: baseErrorMessage,\n\t\tvalue: forceValue,\n\t\tonChange,\n\t\tsize = \"md\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t\t...rest\n\t} = props;\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst { fieldErrors } = useForm();\n\n\tfunction handleChange(value: string) {\n\t\tsetValue(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst className = `arkynRadioGroup ${size}`;\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<RadioProvider\n\t\t\t\tisError={isError}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={forceValue || value}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadOnly\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceValue || value}\n\t\t\t\t/>\n\n\t\t\t\t<div className={className.trim()} {...rest} />\n\t\t\t</RadioProvider>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RadioGroup };\n"],"mappings":";;;;;;;AAuEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,kBAAe,IACf,SACA,UACA,iBACA,cAAc,GACd,OAAO,GACP,aACA,UAAO,MACP,WAAW,IAAmB,IAC9B,cAAW,IACX,yBAAsB,IACtB,iBAAc,YACd,GAAG,MACA,GAEE,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,EAAE,mBAAgB,EAAQ;CAEhC,SAAS,EAAa,GAAe;EAEpC,AADA,EAAS,CAAK,GACV,KAAU,EAAS,CAAK;CAC7B;CAEA,IAAM,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAY,mBAAmB;CAErC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACU;GACH;GACN,OAAO,KAAc;GACP;GACJ;aALX,CAOC,kBAAC,SAAD;IACC,OAAO,EAAE,SAAS,OAAO;IACzB,MAAK;IACL,UAAA;IACM;IACN,OAAO,KAAc;GACrB,CAAA,GAED,kBAAC,OAAD;IAAK,WAAW,EAAU,KAAK;IAAG,GAAI;GAAO,CAAA,CAC/B;;CACD,CAAA;AAEjB"}
@@ -6,133 +6,135 @@ import { hotKeys as i, initialValue as a } from "../../templates/richTextTemplat
6
6
  import { BlockButton as o } from "./blockButton/index.js";
7
7
  import { Element as s } from "./element/index.js";
8
8
  import { InsertImage as c } from "./insertImage/index.js";
9
- import { InsertVideo as l } from "./insertVideo/index.js";
10
- import { Leaf as u } from "./leaf/index.js";
11
- import { MarkButton as d } from "./markButton/index.js";
12
- import { Toolbar as ee } from "./toolbar/index.js";
9
+ import { InsertLink as ee } from "./insertLink/index.js";
10
+ import { InsertVideo as te } from "./insertVideo/index.js";
11
+ import { Leaf as ne } from "./leaf/index.js";
12
+ import { MarkButton as l } from "./markButton/index.js";
13
+ import { Toolbar as u } from "./toolbar/index.js";
13
14
  /* empty css */
14
- import { useCallback as f, useId as te, useMemo as p, useRef as m, useState as h } from "react";
15
- import { jsx as g, jsxs as _ } from "react/jsx-runtime";
16
- import { AlignCenter as ne, AlignJustify as re, AlignLeft as ie, AlignRight as ae, Bold as oe, Code as se, Heading1 as v, Heading2 as y, Italic as b, Quote as x, Underline as S } from "lucide-react";
15
+ import { useCallback as d, useId as f, useMemo as p, useRef as re, useState as m } from "react";
16
+ import { jsx as h, jsxs as g } from "react/jsx-runtime";
17
+ import { AlignCenter as ie, AlignJustify as ae, AlignLeft as oe, AlignRight as se, Bold as ce, Code as _, Heading1 as v, Heading2 as y, Italic as b, Quote as x, Underline as S } from "lucide-react";
17
18
  import C from "is-hotkey";
18
19
  import { createEditor as w } from "slate";
19
20
  import { withHistory as T } from "slate-history";
20
21
  import { Editable as E, Slate as D, withReact as O } from "slate-react";
21
22
  //#region src/components/richText/index.tsx
22
23
  function k(k) {
23
- let { name: A, hiddenButtons: j, imageConfig: M, videoConfig: N, className: P = "", defaultValue: F = "[]", enforceCharacterLimit: I = !1, onChangeCharactersCount: L, baseErrorMessage: R, maxLimit: z = 1e4, onChange: B, isError: V, label: ce, showAsterisk: H, id: U, orientation: W = "vertical", unShowFieldTemplate: G = !1 } = k, K = p(() => T(O(w())), []), { fieldErrors: le } = e(), q = p(() => {
24
+ let { name: A, hiddenButtons: j, imageConfig: M, videoConfig: N, linkConfig: P, className: F = "", defaultValue: I = "[]", enforceCharacterLimit: L = !1, onChangeCharactersCount: R, baseErrorMessage: z, maxLimit: B = 1e4, onChange: le, isError: V, label: H, showAsterisk: U, id: W, orientation: ue = "vertical", unShowFieldTemplate: de = !1 } = k, G = p(() => T(O(w())), []), { fieldErrors: fe } = e(), K = p(() => {
24
25
  try {
25
- let e = JSON.parse(F);
26
+ let e = JSON.parse(I);
26
27
  return !Array.isArray(e) || e.length === 0 ? structuredClone(a) : e.every((e) => typeof e == "object" && !!e && "type" in e && "children" in e) ? e : structuredClone(a);
27
28
  } catch {
28
29
  return structuredClone(a);
29
30
  }
30
- }, [F]), [J, ue] = h(n(q).length), [de, fe] = h(JSON.stringify(q) || "[]"), [pe, Y] = h(!1), me = m(null), he = te(), ge = U || he, X = R || le?.[A], _e = V || !!X, ve = f(u, []), ye = f(s, []);
31
+ }, [I]), [q, pe] = m(n(K).length), [me, he] = m(JSON.stringify(K) || "[]"), [ge, J] = m(!1), _e = re(null), Y = f(), ve = W || Y, X = z || fe?.[A], ye = V || !!X, be = d(ne, []), xe = d(s, []);
31
32
  function Z(e) {
32
33
  let t = n(e);
33
- ue(t.length), L?.(t.length), !(I && t.length >= z) && (fe(JSON.stringify(e)), B?.(e));
34
+ pe(t.length), R?.(t.length), !(L && t.length >= B) && (he(JSON.stringify(e)), le?.(e));
34
35
  }
35
- let be = `arkynRichText ${_e || z < J ? "errorTrue" : "errorFalse"} ${pe ? "focusTrue" : "focusFalse"}`, Q = z - J;
36
+ let Se = `arkynRichText ${ye || B < q ? "errorTrue" : "errorFalse"} ${ge ? "focusTrue" : "focusFalse"}`, Q = B - q;
36
37
  function $(e) {
37
38
  return !j?.includes(e);
38
39
  }
39
- return /* @__PURE__ */ g(t, {
40
+ return /* @__PURE__ */ h(t, {
40
41
  name: A,
41
- label: ce,
42
- showAsterisk: H,
43
- className: P,
42
+ label: H,
43
+ showAsterisk: U,
44
+ className: F,
44
45
  errorMessage: X,
45
- unShowFieldTemplate: G,
46
- orientation: W,
47
- children: /* @__PURE__ */ _(D, {
48
- editor: K,
49
- initialValue: q,
46
+ unShowFieldTemplate: de,
47
+ orientation: ue,
48
+ children: /* @__PURE__ */ g(D, {
49
+ editor: G,
50
+ initialValue: K,
50
51
  onChange: Z,
51
52
  onValueChange: Z,
52
53
  children: [
53
- /* @__PURE__ */ _("div", {
54
- className: be,
54
+ /* @__PURE__ */ g("div", {
55
+ className: Se,
55
56
  children: [
56
- /* @__PURE__ */ _(ee, { children: [
57
- $("headingOne") && /* @__PURE__ */ g(o, {
57
+ /* @__PURE__ */ g(u, { children: [
58
+ $("headingOne") && /* @__PURE__ */ h(o, {
58
59
  format: "headingOne",
59
60
  icon: v
60
61
  }),
61
- $("headingTwo") && /* @__PURE__ */ g(o, {
62
+ $("headingTwo") && /* @__PURE__ */ h(o, {
62
63
  format: "headingTwo",
63
64
  icon: y
64
65
  }),
65
- $("blockQuote") && /* @__PURE__ */ g(o, {
66
+ $("blockQuote") && /* @__PURE__ */ h(o, {
66
67
  format: "blockQuote",
67
68
  icon: x
68
69
  }),
69
- $("bold") && /* @__PURE__ */ g(d, {
70
+ $("bold") && /* @__PURE__ */ h(l, {
70
71
  format: "bold",
71
- icon: oe
72
+ icon: ce
72
73
  }),
73
- $("italic") && /* @__PURE__ */ g(d, {
74
+ $("italic") && /* @__PURE__ */ h(l, {
74
75
  format: "italic",
75
76
  icon: b
76
77
  }),
77
- $("underline") && /* @__PURE__ */ g(d, {
78
+ $("underline") && /* @__PURE__ */ h(l, {
78
79
  format: "underline",
79
80
  icon: S
80
81
  }),
81
- $("code") && /* @__PURE__ */ g(d, {
82
+ $("code") && /* @__PURE__ */ h(l, {
82
83
  format: "code",
83
- icon: se
84
+ icon: _
84
85
  }),
85
- $("left") && /* @__PURE__ */ g(o, {
86
+ $("left") && /* @__PURE__ */ h(o, {
86
87
  format: "left",
87
- icon: ie
88
+ icon: oe
88
89
  }),
89
- $("right") && /* @__PURE__ */ g(o, {
90
+ $("right") && /* @__PURE__ */ h(o, {
90
91
  format: "right",
91
- icon: ae
92
+ icon: se
92
93
  }),
93
- $("center") && /* @__PURE__ */ g(o, {
94
+ $("center") && /* @__PURE__ */ h(o, {
94
95
  format: "center",
95
- icon: ne
96
+ icon: ie
96
97
  }),
97
- $("justify") && /* @__PURE__ */ g(o, {
98
+ $("justify") && /* @__PURE__ */ h(o, {
98
99
  format: "justify",
99
- icon: re
100
+ icon: ae
100
101
  }),
101
- M && $("image") && /* @__PURE__ */ g(c, { ...M }),
102
- $("video") && /* @__PURE__ */ g(l, { ...N })
102
+ M && $("image") && /* @__PURE__ */ h(c, { ...M }),
103
+ $("video") && /* @__PURE__ */ h(te, { ...N }),
104
+ $("link") && /* @__PURE__ */ h(ee, { ...P })
103
105
  ] }),
104
- /* @__PURE__ */ g(E, {
106
+ /* @__PURE__ */ h(E, {
105
107
  className: "editorContainer",
106
- renderElement: ye,
107
- renderLeaf: ve,
108
+ renderElement: xe,
109
+ renderLeaf: be,
108
110
  spellCheck: !0,
109
- ref: me,
110
- id: ge,
111
- onFocus: () => Y(!0),
112
- onBlur: () => Y(!1),
111
+ ref: _e,
112
+ id: ve,
113
+ onFocus: () => J(!0),
114
+ onBlur: () => J(!1),
113
115
  onKeyDown: (e) => {
114
116
  for (let t in i) if (C(t, e)) {
115
117
  e.preventDefault();
116
118
  let n = i[t];
117
- r(K, n);
119
+ r(G, n);
118
120
  }
119
121
  }
120
122
  }),
121
- Q < 0 && /* @__PURE__ */ g("div", {
123
+ Q < 0 && /* @__PURE__ */ h("div", {
122
124
  className: "restatesCharacters",
123
125
  children: Q
124
126
  })
125
127
  ]
126
128
  }),
127
- /* @__PURE__ */ g("input", {
129
+ /* @__PURE__ */ h("input", {
128
130
  type: "hidden",
129
131
  name: A,
130
- value: de.slice(0, z)
132
+ value: me.slice(0, B)
131
133
  }),
132
- /* @__PURE__ */ g("input", {
134
+ /* @__PURE__ */ h("input", {
133
135
  type: "hidden",
134
136
  name: `${A}Count`,
135
- value: J
137
+ value: q
136
138
  })
137
139
  ]
138
140
  })
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/richText/index.tsx"],"sourcesContent":["import isHotkey from \"is-hotkey\";\nimport {\n\tAlignCenter,\n\tAlignJustify,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tHeading1,\n\tHeading2,\n\tItalic,\n\tQuote,\n\tUnderline,\n} from \"lucide-react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { createEditor, type Descendant } from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, Slate, withReact } from \"slate-react\";\nimport { useForm } from \"../../hooks/useForm\";\nimport { extractTextFromNode } from \"../../services/extractTextFromNode\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { toggleMark } from \"../../services/toggleMark\";\nimport { hotKeys, initialValue } from \"../../templates/richTextTemplates\";\nimport type {\n\tRichTextHiddenButtonKey,\n\tRichTextProps,\n} from \"../../types/richTextTypes\";\nimport { BlockButton } from \"./blockButton\";\nimport { Element } from \"./element\";\nimport { InsertImage } from \"./insertImage\";\nimport { InsertVideo } from \"./insertVideo\";\nimport { Leaf } from \"./leaf\";\nimport { MarkButton } from \"./markButton\";\nimport { Toolbar } from \"./toolbar\";\nimport \"./styles.css\";\n\n/**\n * RichText — WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.\n *\n * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image and video insertion.\n *\n * Editor content is stored as a Slate JSON string 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.label - Label text displayed above the editor.\n * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `[\"image\", \"code\"]`).\n * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.\n * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: \"[]\"\n * @param props.maxLimit - Maximum character count. Default: 10000\n * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false\n * @param props.onChangeCharactersCount - Callback fired on every keystroke — receives the current character count.\n * @param props.onChange - Callback fired when editor content changes — receives the Slate `Descendant[]`.\n * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).\n * @param props.isError - Forces the error visual state.\n * @param props.id - Custom id for the editable area element.\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 * @returns RichText JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <RichText name=\"content\" />\n *\n * // With character limit and hidden toolbar buttons\n * <RichText\n * name=\"description\"\n * label=\"Description\"\n * maxLimit={500}\n * enforceCharacterLimit\n * hiddenButtons={[\"image\", \"video\", \"code\"]}\n * onChangeCharactersCount={(n) => setCharCount(n)}\n * />\n *\n * // With image upload support\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * imageConfig={{ action: \"/api/upload\" }}\n * />\n * ```\n */\n\nfunction RichText(props: RichTextProps) {\n\tconst {\n\t\tname,\n\t\thiddenButtons,\n\t\timageConfig,\n\t\tvideoConfig,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdefaultValue = \"[]\",\n\t\tenforceCharacterLimit = false,\n\t\tonChangeCharactersCount,\n\t\tbaseErrorMessage,\n\t\tmaxLimit = 10000,\n\t\tonChange,\n\t\tisError: baseIsError,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tid,\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst editor = useMemo(() => withHistory(withReact(createEditor())), []);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst defaultNodes = useMemo((): Descendant[] => {\n\t\ttry {\n\t\t\tconst parsedNodes = JSON.parse(defaultValue);\n\t\t\tif (!Array.isArray(parsedNodes) || parsedNodes.length === 0) {\n\t\t\t\treturn structuredClone(initialValue);\n\t\t\t}\n\n\t\t\tconst isValidNodes = parsedNodes.every(\n\t\t\t\t(node) =>\n\t\t\t\t\ttypeof node === \"object\" &&\n\t\t\t\t\tnode !== null &&\n\t\t\t\t\t\"type\" in node &&\n\t\t\t\t\t\"children\" in node,\n\t\t\t);\n\n\t\t\treturn isValidNodes ? parsedNodes : structuredClone(initialValue);\n\t\t} catch (_error) {\n\t\t\treturn structuredClone(initialValue);\n\t\t}\n\t}, [defaultValue]);\n\n\tconst textFromNodes = extractTextFromNode(defaultNodes);\n\n\tconst [charactersCount, setCharactersCount] = useState(textFromNodes.length);\n\tconst [inputValue, setInputValue] = useState(\n\t\tJSON.stringify(defaultNodes) || \"[]\",\n\t);\n\n\tconst [onFocus, setOnFocus] = useState(false);\n\n\tconst ref = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = baseIsError || !!errorMessage;\n\n\tconst renderLeaf = useCallback(Leaf, []);\n\tconst renderElement = useCallback(Element, []);\n\n\tfunction handleChange(value: Descendant[]) {\n\t\tconst text = extractTextFromNode(value);\n\n\t\tsetCharactersCount(text.length);\n\t\tonChangeCharactersCount?.(text.length);\n\n\t\tif (enforceCharacterLimit && text.length >= maxLimit) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInputValue(JSON.stringify(value));\n\t\tonChange?.(value);\n\t}\n\n\tconst focusClass = onFocus ? \"focusTrue\" : \"focusFalse\";\n\tconst errorClass = isError\n\t\t? \"errorTrue\"\n\t\t: maxLimit < charactersCount\n\t\t\t? \"errorTrue\"\n\t\t\t: \"errorFalse\";\n\n\tconst className = `arkynRichText ${errorClass} ${focusClass}`;\n\n\tconst restatesCharacters = maxLimit - charactersCount;\n\n\tfunction buttonIsNotHidden(format: RichTextHiddenButtonKey) {\n\t\treturn !hiddenButtons?.includes(format);\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<Slate\n\t\t\t\teditor={editor}\n\t\t\t\tinitialValue={defaultNodes}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonValueChange={handleChange}\n\t\t\t>\n\t\t\t\t<div className={className}>\n\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingOne\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingOne\" icon={Heading1} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingTwo\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingTwo\" icon={Heading2} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"blockQuote\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"blockQuote\" icon={Quote} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"bold\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"bold\" icon={Bold} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"italic\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"italic\" icon={Italic} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"underline\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"underline\" icon={Underline} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"code\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"code\" icon={Code} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"left\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"left\" icon={AlignLeft} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"right\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"right\" icon={AlignRight} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"center\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"center\" icon={AlignCenter} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"justify\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"justify\" icon={AlignJustify} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{imageConfig && buttonIsNotHidden(\"image\") && (\n\t\t\t\t\t\t\t<InsertImage {...imageConfig} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"video\") && <InsertVideo {...videoConfig} />}\n\t\t\t\t\t</Toolbar>\n\n\t\t\t\t\t<Editable\n\t\t\t\t\t\tclassName=\"editorContainer\"\n\t\t\t\t\t\trenderElement={renderElement}\n\t\t\t\t\t\trenderLeaf={renderLeaf}\n\t\t\t\t\t\tspellCheck\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tonFocus={() => setOnFocus(true)}\n\t\t\t\t\t\tonBlur={() => setOnFocus(false)}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tfor (const hotkey in hotKeys) {\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\t\t\t\tif (isHotkey(hotkey, event as any)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tconst mark = hotKeys[hotkey as keyof typeof hotKeys];\n\t\t\t\t\t\t\t\t\ttoggleMark(editor, mark);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{restatesCharacters < 0 && (\n\t\t\t\t\t\t<div className=\"restatesCharacters\">{restatesCharacters}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\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={inputValue.slice(0, maxLimit)}\n\t\t\t\t/>\n\n\t\t\t\t<input type=\"hidden\" name={`${name}Count`} value={charactersCount} />\n\t\t\t</Slate>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RichText };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/richText/index.tsx"],"sourcesContent":["import isHotkey from \"is-hotkey\";\nimport {\n\tAlignCenter,\n\tAlignJustify,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tHeading1,\n\tHeading2,\n\tItalic,\n\tQuote,\n\tUnderline,\n} from \"lucide-react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { createEditor, type Descendant } from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, Slate, withReact } from \"slate-react\";\nimport { useForm } from \"../../hooks/useForm\";\nimport { extractTextFromNode } from \"../../services/extractTextFromNode\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { toggleMark } from \"../../services/toggleMark\";\nimport { hotKeys, initialValue } from \"../../templates/richTextTemplates\";\nimport type {\n\tRichTextHiddenButtonKey,\n\tRichTextProps,\n} from \"../../types/richTextTypes\";\nimport { BlockButton } from \"./blockButton\";\nimport { Element } from \"./element\";\nimport { InsertImage } from \"./insertImage\";\nimport { InsertLink } from \"./insertLink\";\nimport { InsertVideo } from \"./insertVideo\";\nimport { Leaf } from \"./leaf\";\nimport { MarkButton } from \"./markButton\";\nimport { Toolbar } from \"./toolbar\";\nimport \"./styles.css\";\n\n/**\n * RichText, WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.\n *\n * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image, video, and link insertion.\n *\n * Editor content is stored as a Slate JSON string 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.label - Label text displayed above the editor.\n * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `[\"image\", \"code\"]`).\n * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.\n * @param props.videoConfig - Customizes the video insertion modal labels.\n * @param props.linkConfig - Customizes the link insertion modal labels.\n * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: \"[]\"\n * @param props.maxLimit - Maximum character count. Default: 10000\n * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false\n * @param props.onChangeCharactersCount - Callback fired on every keystroke, receives the current character count.\n * @param props.onChange - Callback fired when editor content changes, receives the Slate `Descendant[]`.\n * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).\n * @param props.isError - Forces the error visual state.\n * @param props.id - Custom id for the editable area element.\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 * @returns RichText JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <RichText name=\"content\" />\n *\n * // With character limit and hidden toolbar buttons\n * <RichText\n * name=\"description\"\n * label=\"Description\"\n * maxLimit={500}\n * enforceCharacterLimit\n * hiddenButtons={[\"image\", \"video\", \"code\"]}\n * onChangeCharactersCount={(n) => setCharCount(n)}\n * />\n *\n * // With image upload support\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * imageConfig={{ action: \"/api/upload\" }}\n * />\n *\n * // With custom link insertion modal labels\n * <RichText\n * name=\"article\"\n * label=\"Article Body\"\n * linkConfig={{ modalTitle: \"Add a link\" }}\n * />\n * ```\n */\n\nfunction RichText(props: RichTextProps) {\n\tconst {\n\t\tname,\n\t\thiddenButtons,\n\t\timageConfig,\n\t\tvideoConfig,\n\t\tlinkConfig,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdefaultValue = \"[]\",\n\t\tenforceCharacterLimit = false,\n\t\tonChangeCharactersCount,\n\t\tbaseErrorMessage,\n\t\tmaxLimit = 10000,\n\t\tonChange,\n\t\tisError: baseIsError,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tid,\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst editor = useMemo(() => withHistory(withReact(createEditor())), []);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst defaultNodes = useMemo((): Descendant[] => {\n\t\ttry {\n\t\t\tconst parsedNodes = JSON.parse(defaultValue);\n\t\t\tif (!Array.isArray(parsedNodes) || parsedNodes.length === 0) {\n\t\t\t\treturn structuredClone(initialValue);\n\t\t\t}\n\n\t\t\tconst isValidNodes = parsedNodes.every(\n\t\t\t\t(node) =>\n\t\t\t\t\ttypeof node === \"object\" &&\n\t\t\t\t\tnode !== null &&\n\t\t\t\t\t\"type\" in node &&\n\t\t\t\t\t\"children\" in node,\n\t\t\t);\n\n\t\t\treturn isValidNodes ? parsedNodes : structuredClone(initialValue);\n\t\t} catch (_error) {\n\t\t\treturn structuredClone(initialValue);\n\t\t}\n\t}, [defaultValue]);\n\n\tconst textFromNodes = extractTextFromNode(defaultNodes);\n\n\tconst [charactersCount, setCharactersCount] = useState(textFromNodes.length);\n\tconst [inputValue, setInputValue] = useState(\n\t\tJSON.stringify(defaultNodes) || \"[]\",\n\t);\n\n\tconst [onFocus, setOnFocus] = useState(false);\n\n\tconst ref = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = baseIsError || !!errorMessage;\n\n\tconst renderLeaf = useCallback(Leaf, []);\n\tconst renderElement = useCallback(Element, []);\n\n\tfunction handleChange(value: Descendant[]) {\n\t\tconst text = extractTextFromNode(value);\n\n\t\tsetCharactersCount(text.length);\n\t\tonChangeCharactersCount?.(text.length);\n\n\t\tif (enforceCharacterLimit && text.length >= maxLimit) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInputValue(JSON.stringify(value));\n\t\tonChange?.(value);\n\t}\n\n\tconst focusClass = onFocus ? \"focusTrue\" : \"focusFalse\";\n\tconst errorClass = isError\n\t\t? \"errorTrue\"\n\t\t: maxLimit < charactersCount\n\t\t\t? \"errorTrue\"\n\t\t\t: \"errorFalse\";\n\n\tconst className = `arkynRichText ${errorClass} ${focusClass}`;\n\n\tconst restatesCharacters = maxLimit - charactersCount;\n\n\tfunction buttonIsNotHidden(format: RichTextHiddenButtonKey) {\n\t\treturn !hiddenButtons?.includes(format);\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<Slate\n\t\t\t\teditor={editor}\n\t\t\t\tinitialValue={defaultNodes}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonValueChange={handleChange}\n\t\t\t>\n\t\t\t\t<div className={className}>\n\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingOne\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingOne\" icon={Heading1} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingTwo\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingTwo\" icon={Heading2} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"blockQuote\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"blockQuote\" icon={Quote} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"bold\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"bold\" icon={Bold} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"italic\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"italic\" icon={Italic} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"underline\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"underline\" icon={Underline} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"code\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"code\" icon={Code} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"left\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"left\" icon={AlignLeft} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"right\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"right\" icon={AlignRight} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"center\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"center\" icon={AlignCenter} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"justify\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"justify\" icon={AlignJustify} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{imageConfig && buttonIsNotHidden(\"image\") && (\n\t\t\t\t\t\t\t<InsertImage {...imageConfig} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"video\") && <InsertVideo {...videoConfig} />}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"link\") && <InsertLink {...linkConfig} />}\n\t\t\t\t\t</Toolbar>\n\n\t\t\t\t\t<Editable\n\t\t\t\t\t\tclassName=\"editorContainer\"\n\t\t\t\t\t\trenderElement={renderElement}\n\t\t\t\t\t\trenderLeaf={renderLeaf}\n\t\t\t\t\t\tspellCheck\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tonFocus={() => setOnFocus(true)}\n\t\t\t\t\t\tonBlur={() => setOnFocus(false)}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tfor (const hotkey in hotKeys) {\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\t\t\t\tif (isHotkey(hotkey, event as any)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tconst mark = hotKeys[hotkey as keyof typeof hotKeys];\n\t\t\t\t\t\t\t\t\ttoggleMark(editor, mark);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{restatesCharacters < 0 && (\n\t\t\t\t\t\t<div className=\"restatesCharacters\">{restatesCharacters}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\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={inputValue.slice(0, maxLimit)}\n\t\t\t\t/>\n\n\t\t\t\t<input type=\"hidden\" name={`${name}Count`} value={charactersCount} />\n\t\t\t</Slate>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RichText };\n"],"mappings":"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"}