@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145

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 (207) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/components/alert/alertContainer/index.d.ts +27 -43
  3. package/dist/components/alert/alertContainer/index.d.ts.map +1 -1
  4. package/dist/components/alert/alertContainer/index.js +20 -40
  5. package/dist/components/alert/alertContent/index.d.ts +11 -36
  6. package/dist/components/alert/alertContent/index.d.ts.map +1 -1
  7. package/dist/components/alert/alertContent/index.js +11 -31
  8. package/dist/components/alert/alertDescription/index.d.ts +10 -38
  9. package/dist/components/alert/alertDescription/index.d.ts.map +1 -1
  10. package/dist/components/alert/alertDescription/index.js +10 -33
  11. package/dist/components/alert/alertIcon/index.d.ts +14 -38
  12. package/dist/components/alert/alertIcon/index.d.ts.map +1 -1
  13. package/dist/components/alert/alertIcon/index.js +14 -32
  14. package/dist/components/alert/alertTitle/index.d.ts +12 -35
  15. package/dist/components/alert/alertTitle/index.d.ts.map +1 -1
  16. package/dist/components/alert/alertTitle/index.js +12 -27
  17. package/dist/components/audioPlayer/index.d.ts +24 -32
  18. package/dist/components/audioPlayer/index.d.ts.map +1 -1
  19. package/dist/components/audioPlayer/index.js +15 -18
  20. package/dist/components/audioUpload/index.d.ts +37 -48
  21. package/dist/components/audioUpload/index.d.ts.map +1 -1
  22. package/dist/components/audioUpload/index.js +23 -48
  23. package/dist/components/badge/index.d.ts +31 -22
  24. package/dist/components/badge/index.d.ts.map +1 -1
  25. package/dist/components/badge/index.js +14 -22
  26. package/dist/components/button/index.d.ts +38 -28
  27. package/dist/components/button/index.d.ts.map +1 -1
  28. package/dist/components/button/index.js +18 -28
  29. package/dist/components/cardTab/cardTabButton/index.d.ts +14 -52
  30. package/dist/components/cardTab/cardTabButton/index.d.ts.map +1 -1
  31. package/dist/components/cardTab/cardTabButton/index.js +12 -52
  32. package/dist/components/cardTab/cardTabContainer/index.d.ts +16 -58
  33. package/dist/components/cardTab/cardTabContainer/index.d.ts.map +1 -1
  34. package/dist/components/cardTab/cardTabContainer/index.js +12 -58
  35. package/dist/components/checkbox/index.d.ts +38 -37
  36. package/dist/components/checkbox/index.d.ts.map +1 -1
  37. package/dist/components/checkbox/index.js +21 -37
  38. package/dist/components/clientOnly.d.ts +13 -66
  39. package/dist/components/clientOnly.d.ts.map +1 -1
  40. package/dist/components/clientOnly.js +11 -66
  41. package/dist/components/currencyInput/index.d.ts +67 -50
  42. package/dist/components/currencyInput/index.d.ts.map +1 -1
  43. package/dist/components/currencyInput/index.js +28 -50
  44. package/dist/components/divider/index.d.ts +12 -25
  45. package/dist/components/divider/index.d.ts.map +1 -1
  46. package/dist/components/divider/index.js +8 -25
  47. package/dist/components/drawer/drawerContainer/index.d.ts +16 -50
  48. package/dist/components/drawer/drawerContainer/index.d.ts.map +1 -1
  49. package/dist/components/drawer/drawerContainer/index.js +13 -50
  50. package/dist/components/drawer/drawerHeader/index.d.ts +9 -33
  51. package/dist/components/drawer/drawerHeader/index.d.ts.map +1 -1
  52. package/dist/components/drawer/drawerHeader/index.js +8 -33
  53. package/dist/components/facebookPixel/index.d.ts +47 -0
  54. package/dist/components/facebookPixel/index.d.ts.map +1 -1
  55. package/dist/components/facebookPixel/index.js +35 -0
  56. package/dist/components/fieldError/index.d.ts +4 -11
  57. package/dist/components/fieldError/index.d.ts.map +1 -1
  58. package/dist/components/fieldError/index.js +4 -11
  59. package/dist/components/fieldLabel/index.d.ts +6 -21
  60. package/dist/components/fieldLabel/index.d.ts.map +1 -1
  61. package/dist/components/fieldLabel/index.js +5 -21
  62. package/dist/components/fieldWrapper/index.d.ts +12 -22
  63. package/dist/components/fieldWrapper/index.d.ts.map +1 -1
  64. package/dist/components/fieldWrapper/index.js +7 -22
  65. package/dist/components/fileUpload/index.d.ts +36 -61
  66. package/dist/components/fileUpload/index.d.ts.map +1 -1
  67. package/dist/components/fileUpload/index.js +23 -61
  68. package/dist/components/googleAnalytics/index.d.ts +11 -7
  69. package/dist/components/googleAnalytics/index.d.ts.map +1 -1
  70. package/dist/components/googleAnalytics/index.js +9 -7
  71. package/dist/components/googleTagManager/index.d.ts +27 -21
  72. package/dist/components/googleTagManager/index.d.ts.map +1 -1
  73. package/dist/components/googleTagManager/index.js +20 -21
  74. package/dist/components/iconButton/index.d.ts +31 -15
  75. package/dist/components/iconButton/index.d.ts.map +1 -1
  76. package/dist/components/iconButton/index.js +12 -15
  77. package/dist/components/imageUpload/index.d.ts +47 -75
  78. package/dist/components/imageUpload/index.d.ts.map +1 -1
  79. package/dist/components/imageUpload/index.js +27 -75
  80. package/dist/components/input/index.d.ts +51 -44
  81. package/dist/components/input/index.d.ts.map +1 -1
  82. package/dist/components/input/index.js +24 -44
  83. package/dist/components/mapView/index.d.ts +44 -0
  84. package/dist/components/mapView/index.d.ts.map +1 -1
  85. package/dist/components/mapView/index.js +35 -0
  86. package/dist/components/maskedInput/index.d.ts +66 -51
  87. package/dist/components/maskedInput/index.d.ts.map +1 -1
  88. package/dist/components/maskedInput/index.js +28 -51
  89. package/dist/components/modal/modalContainer/index.d.ts +17 -57
  90. package/dist/components/modal/modalContainer/index.d.ts.map +1 -1
  91. package/dist/components/modal/modalContainer/index.js +15 -57
  92. package/dist/components/modal/modalFooter/index.d.ts +17 -50
  93. package/dist/components/modal/modalFooter/index.d.ts.map +1 -1
  94. package/dist/components/modal/modalFooter/index.js +10 -50
  95. package/dist/components/modal/modalHeader/index.d.ts +13 -47
  96. package/dist/components/modal/modalHeader/index.d.ts.map +1 -1
  97. package/dist/components/modal/modalHeader/index.js +12 -47
  98. package/dist/components/multiSelect/index.d.ts +67 -62
  99. package/dist/components/multiSelect/index.d.ts.map +1 -1
  100. package/dist/components/multiSelect/index.js +28 -62
  101. package/dist/components/pagination/index.d.ts +18 -9
  102. package/dist/components/pagination/index.d.ts.map +1 -1
  103. package/dist/components/pagination/index.js +18 -9
  104. package/dist/components/phoneInput/index.d.ts +65 -30
  105. package/dist/components/phoneInput/index.d.ts.map +1 -1
  106. package/dist/components/phoneInput/index.js +36 -31
  107. package/dist/components/popover/index.d.ts +34 -114
  108. package/dist/components/popover/index.d.ts.map +1 -1
  109. package/dist/components/popover/index.js +25 -114
  110. package/dist/components/radio/radioBox/index.d.ts +17 -65
  111. package/dist/components/radio/radioBox/index.d.ts.map +1 -1
  112. package/dist/components/radio/radioBox/index.js +14 -65
  113. package/dist/components/radio/radioGroup/index.d.ts +36 -67
  114. package/dist/components/radio/radioGroup/index.d.ts.map +1 -1
  115. package/dist/components/radio/radioGroup/index.js +25 -67
  116. package/dist/components/richText/index.d.ts +33 -47
  117. package/dist/components/richText/index.d.ts.map +1 -1
  118. package/dist/components/richText/index.js +30 -44
  119. package/dist/components/searchPlaces.d.ts +52 -50
  120. package/dist/components/searchPlaces.d.ts.map +1 -1
  121. package/dist/components/searchPlaces.js +23 -30
  122. package/dist/components/select/index.d.ts +68 -63
  123. package/dist/components/select/index.d.ts.map +1 -1
  124. package/dist/components/select/index.js +29 -63
  125. package/dist/components/slider/index.d.ts +20 -34
  126. package/dist/components/slider/index.d.ts.map +1 -1
  127. package/dist/components/slider/index.js +15 -33
  128. package/dist/components/switch/index.d.ts +42 -58
  129. package/dist/components/switch/index.d.ts.map +1 -1
  130. package/dist/components/switch/index.js +24 -58
  131. package/dist/components/tab/tabButton/index.d.ts +14 -52
  132. package/dist/components/tab/tabButton/index.d.ts.map +1 -1
  133. package/dist/components/tab/tabButton/index.js +12 -52
  134. package/dist/components/tab/tabContainer/index.d.ts +16 -58
  135. package/dist/components/tab/tabContainer/index.d.ts.map +1 -1
  136. package/dist/components/tab/tabContainer/index.js +12 -58
  137. package/dist/components/table/tableBody/index.d.ts +13 -47
  138. package/dist/components/table/tableBody/index.d.ts.map +1 -1
  139. package/dist/components/table/tableBody/index.js +12 -47
  140. package/dist/components/table/tableCaption/index.d.ts +6 -46
  141. package/dist/components/table/tableCaption/index.d.ts.map +1 -1
  142. package/dist/components/table/tableCaption/index.js +6 -46
  143. package/dist/components/table/tableContainer/index.d.ts +12 -41
  144. package/dist/components/table/tableContainer/index.d.ts.map +1 -1
  145. package/dist/components/table/tableContainer/index.js +12 -41
  146. package/dist/components/table/tableFooter/index.d.ts +5 -29
  147. package/dist/components/table/tableFooter/index.d.ts.map +1 -1
  148. package/dist/components/table/tableFooter/index.js +5 -29
  149. package/dist/components/table/tableHeader/index.d.ts +4 -25
  150. package/dist/components/table/tableHeader/index.d.ts.map +1 -1
  151. package/dist/components/table/tableHeader/index.js +4 -25
  152. package/dist/components/textarea/index.d.ts +32 -64
  153. package/dist/components/textarea/index.d.ts.map +1 -1
  154. package/dist/components/textarea/index.js +16 -64
  155. package/dist/components/tooltip/index.d.ts +27 -55
  156. package/dist/components/tooltip/index.d.ts.map +1 -1
  157. package/dist/components/tooltip/index.js +16 -55
  158. package/dist/hooks/useAutomation.d.ts +18 -26
  159. package/dist/hooks/useAutomation.d.ts.map +1 -1
  160. package/dist/hooks/useAutomation.js +18 -26
  161. package/dist/hooks/useDrawer.d.ts +19 -64
  162. package/dist/hooks/useDrawer.d.ts.map +1 -1
  163. package/dist/hooks/useForm.d.ts +12 -29
  164. package/dist/hooks/useForm.d.ts.map +1 -1
  165. package/dist/hooks/useForm.js +12 -29
  166. package/dist/hooks/useHydrated.d.ts +8 -63
  167. package/dist/hooks/useHydrated.d.ts.map +1 -1
  168. package/dist/hooks/useHydrated.js +8 -63
  169. package/dist/hooks/useModal.d.ts +19 -59
  170. package/dist/hooks/useModal.d.ts.map +1 -1
  171. package/dist/hooks/useScopedParams.d.ts +17 -69
  172. package/dist/hooks/useScopedParams.d.ts.map +1 -1
  173. package/dist/hooks/useScopedParams.js +17 -69
  174. package/dist/hooks/useScrollLock.d.ts +11 -27
  175. package/dist/hooks/useScrollLock.d.ts.map +1 -1
  176. package/dist/hooks/useScrollLock.js +11 -33
  177. package/dist/hooks/useSearchAutomation.d.ts +16 -34
  178. package/dist/hooks/useSearchAutomation.d.ts.map +1 -1
  179. package/dist/hooks/useSearchAutomation.js +16 -34
  180. package/dist/hooks/useSlider.d.ts +5 -19
  181. package/dist/hooks/useSlider.d.ts.map +1 -1
  182. package/dist/hooks/useSlider.js +5 -19
  183. package/dist/hooks/useToast.d.ts +8 -52
  184. package/dist/hooks/useToast.d.ts.map +1 -1
  185. package/dist/hooks/useToast.js +8 -52
  186. package/dist/providers/drawerProvider.d.ts +15 -81
  187. package/dist/providers/drawerProvider.d.ts.map +1 -1
  188. package/dist/providers/drawerProvider.js +15 -81
  189. package/dist/providers/formProvider.d.ts +17 -53
  190. package/dist/providers/formProvider.d.ts.map +1 -1
  191. package/dist/providers/formProvider.js +17 -53
  192. package/dist/providers/modalProvider.d.ts +16 -77
  193. package/dist/providers/modalProvider.d.ts.map +1 -1
  194. package/dist/providers/modalProvider.js +16 -77
  195. package/dist/providers/placesProvider.d.ts +16 -11
  196. package/dist/providers/placesProvider.d.ts.map +1 -1
  197. package/dist/providers/placesProvider.js +16 -11
  198. package/dist/providers/toastProvider.d.ts +10 -21
  199. package/dist/providers/toastProvider.d.ts.map +1 -1
  200. package/dist/providers/toastProvider.js +10 -21
  201. package/dist/services/toHtml.d.ts +11 -10
  202. package/dist/services/toHtml.d.ts.map +1 -1
  203. package/dist/services/toHtml.js +11 -10
  204. package/dist/services/toRichTextValue.d.ts +11 -17
  205. package/dist/services/toRichTextValue.d.ts.map +1 -1
  206. package/dist/services/toRichTextValue.js +11 -17
  207. package/package.json +1 -1
@@ -1,84 +1,32 @@
1
1
  type ParamsType = Record<string, string | number | boolean | undefined>;
2
2
  /**
3
- * Utility function to manage URL search parameters with optional scoping.
4
- * Provides functionality to get parameters and generate updated search strings
5
- * while maintaining existing parameters.
3
+ * useScopedParams reads and writes URL search parameters with an optional namespace prefix.
6
4
  *
7
- * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
8
- * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
5
+ * When `scope` is provided, every key is namespaced as `scope:key`, so multiple features
6
+ * can share the same URL without collisions (e.g. `filters:status` and `table:page`).
9
7
  *
10
- * @returns Object containing parameter management functions:
11
- * @returns getParam - Function to get a parameter value by key (considers scope if provided)
12
- * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
8
+ * @param searchString - Current URL search string (e.g. `location.search`).
9
+ * @param scope - Namespace prefix. Default: `""` (no prefix).
13
10
  *
14
- * @example
15
- * ```tsx
16
- * // Basic usage without scope
17
- * const searchString = "page=1&filter=active";
18
- * const { getParam, getScopedSearch } = useScopedParams(searchString);
19
- *
20
- * // Get a parameter value
21
- * const page = getParam('page'); // Returns "1"
22
- * const filter = getParam('filter'); // Returns "active"
23
- *
24
- * // Generate search string with new/updated parameters
25
- * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
26
- * // Result: "?page=2&filter=active&sort=name"
27
- * ```
11
+ * @returns
12
+ * - `getParam(key)` — returns the (scoped) param value, or `null` if absent.
13
+ * - `getScopedSearch(params)` merges `params` into the existing search string and returns the result.
14
+ * Pass `undefined` as a value to delete that param.
28
15
  *
29
16
  * @example
30
17
  * ```tsx
31
- * // Usage with scope
32
- * const searchString = "filters:status=active&filters:category=tech&page=1";
33
- * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
34
- *
35
- * // Get a scoped parameter value
36
- * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
37
- * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
38
- *
39
- * // Generate search string with scoped parameters
40
- * const newSearch = getScopedSearch({
41
- * status: 'inactive',
42
- * category: 'sports',
43
- * price: 100,
44
- * discount: undefined // This will remove 'filters:discount' from URL if it exists
45
- * });
46
- * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
18
+ * // Without scope — plain key/value params
19
+ * const { getParam, getScopedSearch } = useScopedParams(location.search);
20
+ * getParam('page'); // "1"
21
+ * getScopedSearch({ page: 2, sort: 'name' }); // "?page=2&sort=name"
47
22
  * ```
48
23
  *
49
24
  * @example
50
25
  * ```tsx
51
- * // Real-world usage with React Router
52
- * import { useLocation, useNavigate } from 'react-router-dom';
53
- *
54
- * function ProductFilter() {
55
- * const location = useLocation();
56
- * const navigate = useNavigate();
57
- * const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
58
- *
59
- * const handleFilterChange = (newFilters: Record<string, any>) => {
60
- * const searchString = getScopedSearch(newFilters);
61
- * navigate({ search: searchString });
62
- * };
63
- *
64
- * const currentCategory = getParam('category');
65
- * const currentPrice = getParam('price');
66
- *
67
- * return (
68
- * <div>
69
- * <p>Current category: {currentCategory || 'All'}</p>
70
- * <p>Current price filter: {currentPrice || 'None'}</p>
71
- *
72
- * <button onClick={() => handleFilterChange({ category: 'electronics' })}>
73
- * Electronics
74
- * </button>
75
- *
76
- * <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
77
- * Clear Filters
78
- * </button>
79
- * </div>
80
- * );
81
- * }
26
+ * // With scope all keys prefixed as "filters:key"
27
+ * const { getParam, getScopedSearch } = useScopedParams(location.search, 'filters');
28
+ * getParam('status'); // reads "filters:status"
29
+ * getScopedSearch({ status: 'active', category: undefined }); // removes "filters:category"
82
30
  * ```
83
31
  */
84
32
  declare function useScopedParams(searchString: string, scope?: string): {
@@ -1 +1 @@
1
- {"version":3,"file":"useScopedParams.d.ts","sourceRoot":"","sources":["../../src/hooks/useScopedParams.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,iBAAS,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW;oBAe7C,MAAM;8BACI,UAAU;EAOvC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"useScopedParams.d.ts","sourceRoot":"","sources":["../../src/hooks/useScopedParams.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,iBAAS,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW;oBAe7C,MAAM;8BACI,UAAU;EAOvC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
@@ -1,83 +1,31 @@
1
1
  /**
2
- * Utility function to manage URL search parameters with optional scoping.
3
- * Provides functionality to get parameters and generate updated search strings
4
- * while maintaining existing parameters.
2
+ * useScopedParams reads and writes URL search parameters with an optional namespace prefix.
5
3
  *
6
- * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
7
- * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
4
+ * When `scope` is provided, every key is namespaced as `scope:key`, so multiple features
5
+ * can share the same URL without collisions (e.g. `filters:status` and `table:page`).
8
6
  *
9
- * @returns Object containing parameter management functions:
10
- * @returns getParam - Function to get a parameter value by key (considers scope if provided)
11
- * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
7
+ * @param searchString - Current URL search string (e.g. `location.search`).
8
+ * @param scope - Namespace prefix. Default: `""` (no prefix).
12
9
  *
13
- * @example
14
- * ```tsx
15
- * // Basic usage without scope
16
- * const searchString = "page=1&filter=active";
17
- * const { getParam, getScopedSearch } = useScopedParams(searchString);
18
- *
19
- * // Get a parameter value
20
- * const page = getParam('page'); // Returns "1"
21
- * const filter = getParam('filter'); // Returns "active"
22
- *
23
- * // Generate search string with new/updated parameters
24
- * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
25
- * // Result: "?page=2&filter=active&sort=name"
26
- * ```
10
+ * @returns
11
+ * - `getParam(key)` — returns the (scoped) param value, or `null` if absent.
12
+ * - `getScopedSearch(params)` merges `params` into the existing search string and returns the result.
13
+ * Pass `undefined` as a value to delete that param.
27
14
  *
28
15
  * @example
29
16
  * ```tsx
30
- * // Usage with scope
31
- * const searchString = "filters:status=active&filters:category=tech&page=1";
32
- * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
33
- *
34
- * // Get a scoped parameter value
35
- * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
36
- * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
37
- *
38
- * // Generate search string with scoped parameters
39
- * const newSearch = getScopedSearch({
40
- * status: 'inactive',
41
- * category: 'sports',
42
- * price: 100,
43
- * discount: undefined // This will remove 'filters:discount' from URL if it exists
44
- * });
45
- * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
17
+ * // Without scope — plain key/value params
18
+ * const { getParam, getScopedSearch } = useScopedParams(location.search);
19
+ * getParam('page'); // "1"
20
+ * getScopedSearch({ page: 2, sort: 'name' }); // "?page=2&sort=name"
46
21
  * ```
47
22
  *
48
23
  * @example
49
24
  * ```tsx
50
- * // Real-world usage with React Router
51
- * import { useLocation, useNavigate } from 'react-router-dom';
52
- *
53
- * function ProductFilter() {
54
- * const location = useLocation();
55
- * const navigate = useNavigate();
56
- * const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
57
- *
58
- * const handleFilterChange = (newFilters: Record<string, any>) => {
59
- * const searchString = getScopedSearch(newFilters);
60
- * navigate({ search: searchString });
61
- * };
62
- *
63
- * const currentCategory = getParam('category');
64
- * const currentPrice = getParam('price');
65
- *
66
- * return (
67
- * <div>
68
- * <p>Current category: {currentCategory || 'All'}</p>
69
- * <p>Current price filter: {currentPrice || 'None'}</p>
70
- *
71
- * <button onClick={() => handleFilterChange({ category: 'electronics' })}>
72
- * Electronics
73
- * </button>
74
- *
75
- * <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
76
- * Clear Filters
77
- * </button>
78
- * </div>
79
- * );
80
- * }
25
+ * // With scope all keys prefixed as "filters:key"
26
+ * const { getParam, getScopedSearch } = useScopedParams(location.search, 'filters');
27
+ * getParam('status'); // reads "filters:status"
28
+ * getScopedSearch({ status: 'active', category: undefined }); // removes "filters:category"
81
29
  * ```
82
30
  */
83
31
  function useScopedParams(searchString, scope = "") {
@@ -1,36 +1,20 @@
1
1
  /**
2
- * useScrollLock hook - manages body scroll blocking for overlays
2
+ * useScrollLock locks `document.body` scroll while an overlay is open.
3
3
  *
4
- * @param isLocked - Whether the body scroll should be locked
4
+ * Compensates for the scrollbar width by adding equivalent `paddingRight`,
5
+ * preventing layout shift when the scrollbar disappears.
6
+ * Restores the original `overflow` and `paddingRight` when `isLocked` becomes `false`.
5
7
  *
6
- * @example
7
- * ```tsx
8
- * // Basic usage
9
- * const [isModalOpen, setIsModalOpen] = useState(false);
10
- * useScrollLock(isModalOpen);
8
+ * Used internally by `Modal` and `Drawer` — you usually don't need this directly
9
+ * unless building a custom overlay.
11
10
  *
12
- * // In a modal component
13
- * function Modal({ isVisible }) {
14
- * useScrollLock(isVisible);
15
- *
16
- * return isVisible ? (
17
- * <div className="modal">
18
- * <div className="modal-content">
19
- * Modal content
20
- * </div>
21
- * </div>
22
- * ) : null;
23
- * }
11
+ * @param isLocked - When `true`, body scroll is disabled.
24
12
  *
25
- * // In a drawer component
26
- * function Drawer({ isOpen }) {
13
+ * @example
14
+ * ```tsx
15
+ * function CustomOverlay({ isOpen }) {
27
16
  * useScrollLock(isOpen);
28
- *
29
- * return (
30
- * <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
31
- * Drawer content
32
- * </aside>
33
- * );
17
+ * return isOpen ? <div className="overlay">...</div> : null;
34
18
  * }
35
19
  * ```
36
20
  */
@@ -1 +1 @@
1
- {"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,iBAAS,aAAa,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAyB9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iBAAS,aAAa,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAyB9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -1,48 +1,26 @@
1
1
  import { useEffect } from "react";
2
- /**
3
- * Calculates the width of the scrollbar
4
- * @returns The scrollbar width in pixels
5
- */
6
2
  function getScrollbarWidth() {
7
- // Check if we're in a browser environment
8
3
  if (typeof window === "undefined")
9
4
  return 0;
10
- // Calculate the difference between window width and document width
11
5
  return window.innerWidth - document.documentElement.clientWidth;
12
6
  }
13
7
  /**
14
- * useScrollLock hook - manages body scroll blocking for overlays
8
+ * useScrollLock locks `document.body` scroll while an overlay is open.
15
9
  *
16
- * @param isLocked - Whether the body scroll should be locked
10
+ * Compensates for the scrollbar width by adding equivalent `paddingRight`,
11
+ * preventing layout shift when the scrollbar disappears.
12
+ * Restores the original `overflow` and `paddingRight` when `isLocked` becomes `false`.
17
13
  *
18
- * @example
19
- * ```tsx
20
- * // Basic usage
21
- * const [isModalOpen, setIsModalOpen] = useState(false);
22
- * useScrollLock(isModalOpen);
14
+ * Used internally by `Modal` and `Drawer` — you usually don't need this directly
15
+ * unless building a custom overlay.
23
16
  *
24
- * // In a modal component
25
- * function Modal({ isVisible }) {
26
- * useScrollLock(isVisible);
17
+ * @param isLocked - When `true`, body scroll is disabled.
27
18
  *
28
- * return isVisible ? (
29
- * <div className="modal">
30
- * <div className="modal-content">
31
- * Modal content
32
- * </div>
33
- * </div>
34
- * ) : null;
35
- * }
36
- *
37
- * // In a drawer component
38
- * function Drawer({ isOpen }) {
19
+ * @example
20
+ * ```tsx
21
+ * function CustomOverlay({ isOpen }) {
39
22
  * useScrollLock(isOpen);
40
- *
41
- * return (
42
- * <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
43
- * Drawer content
44
- * </aside>
45
- * );
23
+ * return isOpen ? <div className="overlay">...</div> : null;
46
24
  * }
47
25
  * ```
48
26
  */
@@ -1,48 +1,30 @@
1
1
  /**
2
- * Hook for automating actions based on form response data.
2
+ * useSearchAutomation URL-driven version of `useAutomation`. Reads automation params from a
3
+ * URL search string and executes the same side-effects (close modals, toast) on every change.
3
4
  *
4
- * This hook automates the closing of modals and the display of toast notifications
5
- * based on the properties provided in the form response data object.
5
+ * Reads the following params (optionally prefixed by `scope:`):
6
+ * - `closeModal=true` closes all open modals.
7
+ * - `message` — text for the toast notification.
8
+ * - `type` — `"success"` or `"danger"` toast style.
9
+ * - `name` — response identifier matched against `successResponses`/`badResponses` lists.
6
10
  *
7
- * @param {string} searchString - Raw search parameters string containing automation data
8
- * properties (e.g., "closeModal=true&message=Success!&type=success"). This string is typically obtained from the URL's search parameters.
9
- * @param {string} [scope=""] - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
11
+ * @param searchString - Raw URL search string (e.g. `location.search`).
12
+ * @param scope - Optional prefix for all params. Default: `""` (no prefix).
10
13
  *
11
14
  * @example
12
15
  * ```tsx
13
- * // Complete usage with success notification
14
- * const responseData = "closeModal=true&message=Operation%20completed%20successfully!&type=success";
15
- * useSearchAutomation(responseData);
16
+ * // Remix / Next.js Server Action that redirects with search params
17
+ * // redirect("?closeModal=true&message=Saved!&type=success")
18
+ * const [searchParams] = useSearchParams();
19
+ * useSearchAutomation(searchParams.toString());
16
20
  * ```
17
21
  *
18
22
  * @example
19
23
  * ```tsx
20
- * // Close modal only
21
- * const responseData = "closeModal=true";
22
- * useSearchAutomation(responseData);
24
+ * // Scoped params — avoids collisions when multiple features share the URL
25
+ * // redirect("?filters:closeModal=true&filters:message=Applied!&filters:type=success")
26
+ * useSearchAutomation(location.search, "filters");
23
27
  * ```
24
- *
25
- * @example
26
- * ```tsx
27
- * // Display error notification
28
- * const responseData = "message=Error%20processing%20request&type=danger";
29
- * useSearchAutomation(responseData);
30
- * ```
31
- *
32
- * @example
33
- * ```tsx
34
- * // Using scope for parameters
35
- * const responseData = "filters:closeModal=true&filters:message=Filtered%20successfully!&filters:type=success";
36
- * useSearchAutomation(responseData, 'filters');
37
- * ```
38
- *
39
- * @remarks
40
- * - The `closeModal` parameter should be set to "true" to trigger modal closing.
41
- * - The `message` parameter contains the text to be displayed in the toast notification.
42
- * - The `type` parameter determines the style of the toast and can be either "success" or "danger".
43
- * - If the `name` parameter matches any entry in the `badResponses` template, a danger toast will be shown regardless of the `type` parameter.
44
- * - If the `name` parameter matches any entry in the `successResponses` template, a success toast will be shown regardless of the `type` parameter.
45
- * - This hook relies on URL search parameters, so it is typically used in conjunction with React Router or similar routing libraries that manage URL state.
46
28
  */
47
29
  declare function useSearchAutomation(searchString: string, scope?: string): void;
48
30
  export { useSearchAutomation };
@@ -1 +1 @@
1
- {"version":3,"file":"useSearchAutomation.d.ts","sourceRoot":"","sources":["../../src/hooks/useSearchAutomation.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,iBAAS,mBAAmB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW,QAkCpE;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
1
+ {"version":3,"file":"useSearchAutomation.d.ts","sourceRoot":"","sources":["../../src/hooks/useSearchAutomation.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,iBAAS,mBAAmB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW,QAkCpE;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
@@ -5,50 +5,32 @@ import { badResponses } from "../templates/badResponses";
5
5
  import { successResponses } from "../templates/successResponses";
6
6
  import { useScopedParams } from "./useScopedParams";
7
7
  /**
8
- * Hook for automating actions based on form response data.
8
+ * useSearchAutomation URL-driven version of `useAutomation`. Reads automation params from a
9
+ * URL search string and executes the same side-effects (close modals, toast) on every change.
9
10
  *
10
- * This hook automates the closing of modals and the display of toast notifications
11
- * based on the properties provided in the form response data object.
11
+ * Reads the following params (optionally prefixed by `scope:`):
12
+ * - `closeModal=true` closes all open modals.
13
+ * - `message` — text for the toast notification.
14
+ * - `type` — `"success"` or `"danger"` toast style.
15
+ * - `name` — response identifier matched against `successResponses`/`badResponses` lists.
12
16
  *
13
- * @param {string} searchString - Raw search parameters string containing automation data
14
- * properties (e.g., "closeModal=true&message=Success!&type=success"). This string is typically obtained from the URL's search parameters.
15
- * @param {string} [scope=""] - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
17
+ * @param searchString - Raw URL search string (e.g. `location.search`).
18
+ * @param scope - Optional prefix for all params. Default: `""` (no prefix).
16
19
  *
17
20
  * @example
18
21
  * ```tsx
19
- * // Complete usage with success notification
20
- * const responseData = "closeModal=true&message=Operation%20completed%20successfully!&type=success";
21
- * useSearchAutomation(responseData);
22
+ * // Remix / Next.js Server Action that redirects with search params
23
+ * // redirect("?closeModal=true&message=Saved!&type=success")
24
+ * const [searchParams] = useSearchParams();
25
+ * useSearchAutomation(searchParams.toString());
22
26
  * ```
23
27
  *
24
28
  * @example
25
29
  * ```tsx
26
- * // Close modal only
27
- * const responseData = "closeModal=true";
28
- * useSearchAutomation(responseData);
30
+ * // Scoped params — avoids collisions when multiple features share the URL
31
+ * // redirect("?filters:closeModal=true&filters:message=Applied!&filters:type=success")
32
+ * useSearchAutomation(location.search, "filters");
29
33
  * ```
30
- *
31
- * @example
32
- * ```tsx
33
- * // Display error notification
34
- * const responseData = "message=Error%20processing%20request&type=danger";
35
- * useSearchAutomation(responseData);
36
- * ```
37
- *
38
- * @example
39
- * ```tsx
40
- * // Using scope for parameters
41
- * const responseData = "filters:closeModal=true&filters:message=Filtered%20successfully!&filters:type=success";
42
- * useSearchAutomation(responseData, 'filters');
43
- * ```
44
- *
45
- * @remarks
46
- * - The `closeModal` parameter should be set to "true" to trigger modal closing.
47
- * - The `message` parameter contains the text to be displayed in the toast notification.
48
- * - The `type` parameter determines the style of the toast and can be either "success" or "danger".
49
- * - If the `name` parameter matches any entry in the `badResponses` template, a danger toast will be shown regardless of the `type` parameter.
50
- * - If the `name` parameter matches any entry in the `successResponses` template, a success toast will be shown regardless of the `type` parameter.
51
- * - This hook relies on URL search parameters, so it is typically used in conjunction with React Router or similar routing libraries that manage URL state.
52
34
  */
53
35
  function useSearchAutomation(searchString, scope = "") {
54
36
  const { closeAll } = useModal();
@@ -1,29 +1,15 @@
1
1
  type UseSliderReturnProps = [number, (number: number) => void];
2
2
  /**
3
- * useSlider hook - manages slider value state with boundary validation
3
+ * useSlider state manager for the `Slider` component. Clamps values to `[0, 100]`.
4
4
  *
5
- * @param defaultValue - Initial value for the slider (0-100). Default: 0
5
+ * @param defaultValue - Initial percentage value (0100). Default: 0
6
6
  *
7
- * @returns Array containing current slider value and setter function
8
- * - [0]: Current slider value (number between 0-100)
9
- * - [1]: Function to update slider value with boundary validation
7
+ * @returns `[value, setValue]` current percentage and a setter that clamps at the boundaries.
10
8
  *
11
9
  * @example
12
10
  * ```tsx
13
- * // Basic usage
14
- * const [value, setValue] = useSlider();
15
- *
16
- * // With default value
17
- * const [value, setValue] = useSlider(50);
18
- *
19
- * // Usage in component
20
- * function SliderComponent() {
21
- * const [sliderValue, changeSliderValue] = useSlider(25);
22
- *
23
- * return (
24
- * <Slider value={sliderValue} onChange={changeSliderValue} />
25
- * );
26
- * }
11
+ * const [volume, setVolume] = useSlider(50);
12
+ * return <Slider value={volume} onChange={setVolume} />;
27
13
  * ```
28
14
  */
29
15
  declare function useSlider(defaultValue?: number): UseSliderReturnProps;
@@ -1 +1 @@
1
- {"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAiB9D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;AAE/D;;;;;;;;;;;;GAYG;AAEH,iBAAS,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAiB9D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -1,29 +1,15 @@
1
1
  import { useState } from "react";
2
2
  /**
3
- * useSlider hook - manages slider value state with boundary validation
3
+ * useSlider state manager for the `Slider` component. Clamps values to `[0, 100]`.
4
4
  *
5
- * @param defaultValue - Initial value for the slider (0-100). Default: 0
5
+ * @param defaultValue - Initial percentage value (0100). Default: 0
6
6
  *
7
- * @returns Array containing current slider value and setter function
8
- * - [0]: Current slider value (number between 0-100)
9
- * - [1]: Function to update slider value with boundary validation
7
+ * @returns `[value, setValue]` current percentage and a setter that clamps at the boundaries.
10
8
  *
11
9
  * @example
12
10
  * ```tsx
13
- * // Basic usage
14
- * const [value, setValue] = useSlider();
15
- *
16
- * // With default value
17
- * const [value, setValue] = useSlider(50);
18
- *
19
- * // Usage in component
20
- * function SliderComponent() {
21
- * const [sliderValue, changeSliderValue] = useSlider(25);
22
- *
23
- * return (
24
- * <Slider value={sliderValue} onChange={changeSliderValue} />
25
- * );
26
- * }
11
+ * const [volume, setVolume] = useSlider(50);
12
+ * return <Slider value={volume} onChange={setVolume} />;
27
13
  * ```
28
14
  */
29
15
  function useSlider(defaultValue) {
@@ -1,63 +1,19 @@
1
1
  /**
2
- * Custom hook to access toast functionality from ToastProvider context
2
+ * useToast reads `ToastProvider` context to display toast notifications.
3
3
  *
4
- * @returns Object containing toast methods and state
5
- * @returns {function} showToast - Function to display toast notifications
4
+ * @returns Context containing `showToast(options)`.
6
5
  *
7
- * @throws {Error} Throws an error if used outside of ToastProvider
6
+ * @throws If called outside a `ToastProvider`.
8
7
  *
9
8
  * @example
10
- * Basic usage:
11
9
  * ```tsx
12
- * function MyComponent() {
13
- * const { showToast } = useToast();
10
+ * const { showToast } = useToast();
14
11
  *
15
- * const handleSuccess = () => {
16
- * showToast({
17
- * message: 'Operation completed successfully!',
18
- * type: 'success'
19
- * });
20
- * };
12
+ * // After a successful save
13
+ * showToast({ message: "Changes saved!", type: "success" });
21
14
  *
22
- * const handleError = () => {
23
- * showToast({
24
- * message: 'Something went wrong!',
25
- * type: 'danger'
26
- * });
27
- * };
28
- *
29
- * return (
30
- * <div>
31
- * <button onClick={handleSuccess}>Success Toast</button>
32
- * <button onClick={handleError}>Error Toast</button>
33
- * </div>
34
- * );
35
- * }
36
- * ```
37
- *
38
- * @example
39
- * Using in async operations:
40
- * ```tsx
41
- * function FormComponent() {
42
- * const { showToast } = useToast();
43
- *
44
- * const handleSubmit = async (data) => {
45
- * try {
46
- * await submitForm(data);
47
- * showToast({
48
- * message: 'Form submitted successfully!',
49
- * type: 'success'
50
- * });
51
- * } catch (error) {
52
- * showToast({
53
- * message: 'Failed to submit form',
54
- * type: 'danger'
55
- * });
56
- * }
57
- * };
58
- *
59
- * return <form onSubmit={handleSubmit}>...</form>;
60
- * }
15
+ * // After a failed request
16
+ * showToast({ message: "Failed to save changes.", type: "danger" });
61
17
  * ```
62
18
  */
63
19
  declare function useToast(): {
@@ -1 +1 @@
1
- {"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,QAAQ;;;;;EAQhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AAEH,iBAAS,QAAQ;;;;;EAQhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}