@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,65 +1,21 @@
1
1
  import { toastContext } from "../providers/toastProvider";
2
2
  import { useContext } from "react";
3
3
  /**
4
- * Custom hook to access toast functionality from ToastProvider context
4
+ * useToast reads `ToastProvider` context to display toast notifications.
5
5
  *
6
- * @returns Object containing toast methods and state
7
- * @returns {function} showToast - Function to display toast notifications
6
+ * @returns Context containing `showToast(options)`.
8
7
  *
9
- * @throws {Error} Throws an error if used outside of ToastProvider
8
+ * @throws If called outside a `ToastProvider`.
10
9
  *
11
10
  * @example
12
- * Basic usage:
13
11
  * ```tsx
14
- * function MyComponent() {
15
- * const { showToast } = useToast();
12
+ * const { showToast } = useToast();
16
13
  *
17
- * const handleSuccess = () => {
18
- * showToast({
19
- * message: 'Operation completed successfully!',
20
- * type: 'success'
21
- * });
22
- * };
14
+ * // After a successful save
15
+ * showToast({ message: "Changes saved!", type: "success" });
23
16
  *
24
- * const handleError = () => {
25
- * showToast({
26
- * message: 'Something went wrong!',
27
- * type: 'danger'
28
- * });
29
- * };
30
- *
31
- * return (
32
- * <div>
33
- * <button onClick={handleSuccess}>Success Toast</button>
34
- * <button onClick={handleError}>Error Toast</button>
35
- * </div>
36
- * );
37
- * }
38
- * ```
39
- *
40
- * @example
41
- * Using in async operations:
42
- * ```tsx
43
- * function FormComponent() {
44
- * const { showToast } = useToast();
45
- *
46
- * const handleSubmit = async (data) => {
47
- * try {
48
- * await submitForm(data);
49
- * showToast({
50
- * message: 'Form submitted successfully!',
51
- * type: 'success'
52
- * });
53
- * } catch (error) {
54
- * showToast({
55
- * message: 'Failed to submit form',
56
- * type: 'danger'
57
- * });
58
- * }
59
- * };
60
- *
61
- * return <form onSubmit={handleSubmit}>...</form>;
62
- * }
17
+ * // After a failed request
18
+ * showToast({ message: "Failed to save changes.", type: "danger" });
63
19
  * ```
64
20
  */
65
21
  function useToast() {
@@ -11,94 +11,28 @@ type DrawerProviderProps = {
11
11
  };
12
12
  declare const drawerContext: import("react").Context<DrawerContextProps<any>>;
13
13
  /**
14
- * DrawerProvider component - provides drawer context for managing multiple drawers state and data
14
+ * DrawerProvider context provider that manages open/close state and data for named drawers.
15
15
  *
16
- * @param props - DrawerProvider component properties
17
- * @param props.children - React elements that will have access to the drawer context
18
- * @param props.enableDrawerAutomation - Optional flag to enable drawer automation features
16
+ * Wrap your app (or a subtree) with this once. Any component in the tree can then call
17
+ * `useDrawer(key)` to open, close, or read data for a specific drawer.
19
18
  *
20
- * @returns DrawerProvider JSX element that wraps children with drawer context
19
+ * @param props.children - Components that will have access to drawer context.
20
+ *
21
+ * @returns DrawerProvider JSX element.
21
22
  *
22
23
  * @example
23
24
  * ```tsx
24
- * // Basic drawer provider setup
25
- * function App() {
26
- * return (
27
- * <DrawerProvider>
28
- * <NavigationDrawer />
29
- * <FilterDrawer />
30
- * <SettingsDrawer />
31
- * <MainContent />
32
- * </DrawerProvider>
33
- * );
34
- * }
35
- *
36
- * // Drawer provider with automation enabled
37
- * function AppWithAutomation() {
38
- * return (
39
- * <DrawerProvider enableDrawerAutomation={true}>
40
- * <Dashboard />
41
- * <SidePanel />
42
- * <NotificationDrawer />
43
- * </DrawerProvider>
44
- * );
45
- * }
46
- *
47
- * // Using with multiple drawers
48
- * function MultiDrawerApp() {
49
- * return (
50
- * <DrawerProvider>
51
- * <Header />
52
- * <NavigationDrawer key="navigation" />
53
- * <FilterDrawer key="filters" />
54
- * <CartDrawer key="shopping-cart" />
55
- * <MainContent />
56
- * </DrawerProvider>
57
- * );
58
- * }
59
- *
60
- * // Component using drawer context
61
- * function DrawerController() {
62
- * const { openDrawer, closeDrawer } = useDrawer();
63
- *
64
- * const handleOpenNavigation = () => {
65
- * openDrawer('navigation', { section: 'main-menu' });
66
- * };
67
- *
68
- * const handleOpenFilters = () => {
69
- * openDrawer('filters', { category: 'electronics', priceRange: [0, 1000] });
70
- * };
71
- *
72
- * return (
73
- * <div>
74
- * <button onClick={handleOpenNavigation}>
75
- * Open Navigation
76
- * </button>
77
- * <button onClick={handleOpenFilters}>
78
- * Open Filters
79
- * </button>
80
- * </div>
81
- * );
82
- * }
83
- *
84
- * // Drawer component consuming context
85
- * function NavigationDrawer() {
86
- * const { drawerIsOpen, drawerData, closeDrawer } = useDrawer('navigation');
25
+ * // In your root layout
26
+ * <DrawerProvider>
27
+ * <App />
28
+ * </DrawerProvider>
87
29
  *
88
- * if (!drawerIsOpen) return null;
30
+ * // Opening a drawer from anywhere in the tree
31
+ * const { openDrawer } = useDrawer();
32
+ * openDrawer('filters', { category: 'electronics' });
89
33
  *
90
- * return (
91
- * <Drawer position="left" onClose={() => closeDrawer('navigation')}>
92
- * <h2>Navigation</h2>
93
- * <p>Current section: {drawerData?.section}</p>
94
- * <nav>
95
- * <a href="/home">Home</a>
96
- * <a href="/products">Products</a>
97
- * <a href="/about">About</a>
98
- * </nav>
99
- * </Drawer>
100
- * );
101
- * }
34
+ * // Consuming in the drawer component
35
+ * const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{ category: string }>('filters');
102
36
  * ```
103
37
  */
104
38
  declare function DrawerProvider(args: DrawerProviderProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"drawerProvider.d.ts","sourceRoot":"","sources":["../../src/providers/drawerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,kBAAkB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAOF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,aAAa,kDAA0C,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CAiChD;AAED,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,CAAC"}
1
+ {"version":3,"file":"drawerProvider.d.ts","sourceRoot":"","sources":["../../src/providers/drawerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,kBAAkB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAOF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,aAAa,kDAA0C,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CAiChD;AAED,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,CAAC"}
@@ -2,94 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createContext, useState } from "react";
3
3
  const drawerContext = createContext({});
4
4
  /**
5
- * DrawerProvider component - provides drawer context for managing multiple drawers state and data
5
+ * DrawerProvider context provider that manages open/close state and data for named drawers.
6
6
  *
7
- * @param props - DrawerProvider component properties
8
- * @param props.children - React elements that will have access to the drawer context
9
- * @param props.enableDrawerAutomation - Optional flag to enable drawer automation features
7
+ * Wrap your app (or a subtree) with this once. Any component in the tree can then call
8
+ * `useDrawer(key)` to open, close, or read data for a specific drawer.
10
9
  *
11
- * @returns DrawerProvider JSX element that wraps children with drawer context
10
+ * @param props.children - Components that will have access to drawer context.
11
+ *
12
+ * @returns DrawerProvider JSX element.
12
13
  *
13
14
  * @example
14
15
  * ```tsx
15
- * // Basic drawer provider setup
16
- * function App() {
17
- * return (
18
- * <DrawerProvider>
19
- * <NavigationDrawer />
20
- * <FilterDrawer />
21
- * <SettingsDrawer />
22
- * <MainContent />
23
- * </DrawerProvider>
24
- * );
25
- * }
26
- *
27
- * // Drawer provider with automation enabled
28
- * function AppWithAutomation() {
29
- * return (
30
- * <DrawerProvider enableDrawerAutomation={true}>
31
- * <Dashboard />
32
- * <SidePanel />
33
- * <NotificationDrawer />
34
- * </DrawerProvider>
35
- * );
36
- * }
37
- *
38
- * // Using with multiple drawers
39
- * function MultiDrawerApp() {
40
- * return (
41
- * <DrawerProvider>
42
- * <Header />
43
- * <NavigationDrawer key="navigation" />
44
- * <FilterDrawer key="filters" />
45
- * <CartDrawer key="shopping-cart" />
46
- * <MainContent />
47
- * </DrawerProvider>
48
- * );
49
- * }
50
- *
51
- * // Component using drawer context
52
- * function DrawerController() {
53
- * const { openDrawer, closeDrawer } = useDrawer();
54
- *
55
- * const handleOpenNavigation = () => {
56
- * openDrawer('navigation', { section: 'main-menu' });
57
- * };
58
- *
59
- * const handleOpenFilters = () => {
60
- * openDrawer('filters', { category: 'electronics', priceRange: [0, 1000] });
61
- * };
62
- *
63
- * return (
64
- * <div>
65
- * <button onClick={handleOpenNavigation}>
66
- * Open Navigation
67
- * </button>
68
- * <button onClick={handleOpenFilters}>
69
- * Open Filters
70
- * </button>
71
- * </div>
72
- * );
73
- * }
74
- *
75
- * // Drawer component consuming context
76
- * function NavigationDrawer() {
77
- * const { drawerIsOpen, drawerData, closeDrawer } = useDrawer('navigation');
16
+ * // In your root layout
17
+ * <DrawerProvider>
18
+ * <App />
19
+ * </DrawerProvider>
78
20
  *
79
- * if (!drawerIsOpen) return null;
21
+ * // Opening a drawer from anywhere in the tree
22
+ * const { openDrawer } = useDrawer();
23
+ * openDrawer('filters', { category: 'electronics' });
80
24
  *
81
- * return (
82
- * <Drawer position="left" onClose={() => closeDrawer('navigation')}>
83
- * <h2>Navigation</h2>
84
- * <p>Current section: {drawerData?.section}</p>
85
- * <nav>
86
- * <a href="/home">Home</a>
87
- * <a href="/products">Products</a>
88
- * <a href="/about">About</a>
89
- * </nav>
90
- * </Drawer>
91
- * );
92
- * }
25
+ * // Consuming in the drawer component
26
+ * const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{ category: string }>('filters');
93
27
  * ```
94
28
  */
95
29
  function DrawerProvider(args) {
@@ -11,64 +11,28 @@ type FormProviderProps = {
11
11
  };
12
12
  declare const formContext: import("react").Context<FormContextProps>;
13
13
  /**
14
- * FormProvider component - provides form context including field errors to child components
14
+ * FormProvider distributes field-level validation errors to all form input components in its subtree.
15
15
  *
16
- * @param props - FormProvider component properties
17
- * @param props.children - React elements that will have access to the form context
18
- * @param props.fieldErrors - Object containing validation errors indexed by field name
19
- * @param props.form - Optional form element to wrap the children with
16
+ * All inputs (`Input`, `Select`, `Checkbox`, etc.) read `fieldErrors[name]` automatically,
17
+ * so you don't need to pass errors manually to each field. Use the `form` prop to also wrap
18
+ * children in a `<form>` element (e.g. for Remix `<Form />`).
20
19
  *
21
- * @returns FormProvider JSX element that wraps children with form context
20
+ * @param props.children - Form fields and other components.
21
+ * @param props.fieldErrors - Map of field name → error message (e.g. from Zod / server validation).
22
+ * @param props.form - Optional `<form>` element to wrap children in (cloned with `children`).
23
+ *
24
+ * @returns FormProvider JSX element.
22
25
  *
23
26
  * @example
24
27
  * ```tsx
25
- * // Basic form provider with field errors
26
- * function App() {
27
- * const errors = {
28
- * email: "Invalid email format",
29
- * password: "Password is required"
30
- * };
31
- *
32
- * return (
33
- * <FormProvider fieldErrors={errors}>
34
- * <Input name="email" label="Email" />
35
- * <Input name="password" label="Password" type="password" />
36
- * </FormProvider>
37
- * );
38
- * }
39
- *
40
- * // Form provider with custom form element
41
- * function FormWithValidation() {
42
- * const [errors, setErrors] = useState({});
43
- *
44
- * const handleSubmit = (e) => {
45
- * e.preventDefault();
46
- * // validation logic
47
- * };
48
- *
49
- * return (
50
- * <FormProvider
51
- * fieldErrors={errors}
52
- * form={<form onSubmit={handleSubmit} />}
53
- * >
54
- * <Input name="username" label="Username" />
55
- * <Button type="submit">Submit</Button>
56
- * </FormProvider>
57
- * );
58
- * }
59
- *
60
- * // Using with useForm hook
61
- * function FormField() {
62
- * const { fieldErrors } = useForm();
63
- *
64
- * return (
65
- * <Input
66
- * name="email"
67
- * label="Email"
68
- * errorMessage={fieldErrors?.email}
69
- * />
70
- * );
71
- * }
28
+ * // With Remix action errors
29
+ * const actionData = useActionData<typeof action>();
30
+ *
31
+ * <FormProvider fieldErrors={actionData?.fieldErrors}>
32
+ * <Input name="email" label="Email" />
33
+ * <Input name="password" label="Password" type="password" />
34
+ * <Button type="submit">Login</Button>
35
+ * </FormProvider>
72
36
  * ```
73
37
  */
74
38
  declare function FormProvider(props: FormProviderProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"formProvider.d.ts","sourceRoot":"","sources":["../../src/providers/formProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE/E,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAc7C;AAED,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"formProvider.d.ts","sourceRoot":"","sources":["../../src/providers/formProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE/E,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAc7C;AAED,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC"}
@@ -2,64 +2,28 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { createContext, cloneElement } from "react";
3
3
  const formContext = createContext({});
4
4
  /**
5
- * FormProvider component - provides form context including field errors to child components
5
+ * FormProvider distributes field-level validation errors to all form input components in its subtree.
6
6
  *
7
- * @param props - FormProvider component properties
8
- * @param props.children - React elements that will have access to the form context
9
- * @param props.fieldErrors - Object containing validation errors indexed by field name
10
- * @param props.form - Optional form element to wrap the children with
7
+ * All inputs (`Input`, `Select`, `Checkbox`, etc.) read `fieldErrors[name]` automatically,
8
+ * so you don't need to pass errors manually to each field. Use the `form` prop to also wrap
9
+ * children in a `<form>` element (e.g. for Remix `<Form />`).
11
10
  *
12
- * @returns FormProvider JSX element that wraps children with form context
11
+ * @param props.children - Form fields and other components.
12
+ * @param props.fieldErrors - Map of field name → error message (e.g. from Zod / server validation).
13
+ * @param props.form - Optional `<form>` element to wrap children in (cloned with `children`).
14
+ *
15
+ * @returns FormProvider JSX element.
13
16
  *
14
17
  * @example
15
18
  * ```tsx
16
- * // Basic form provider with field errors
17
- * function App() {
18
- * const errors = {
19
- * email: "Invalid email format",
20
- * password: "Password is required"
21
- * };
22
- *
23
- * return (
24
- * <FormProvider fieldErrors={errors}>
25
- * <Input name="email" label="Email" />
26
- * <Input name="password" label="Password" type="password" />
27
- * </FormProvider>
28
- * );
29
- * }
30
- *
31
- * // Form provider with custom form element
32
- * function FormWithValidation() {
33
- * const [errors, setErrors] = useState({});
34
- *
35
- * const handleSubmit = (e) => {
36
- * e.preventDefault();
37
- * // validation logic
38
- * };
39
- *
40
- * return (
41
- * <FormProvider
42
- * fieldErrors={errors}
43
- * form={<form onSubmit={handleSubmit} />}
44
- * >
45
- * <Input name="username" label="Username" />
46
- * <Button type="submit">Submit</Button>
47
- * </FormProvider>
48
- * );
49
- * }
50
- *
51
- * // Using with useForm hook
52
- * function FormField() {
53
- * const { fieldErrors } = useForm();
54
- *
55
- * return (
56
- * <Input
57
- * name="email"
58
- * label="Email"
59
- * errorMessage={fieldErrors?.email}
60
- * />
61
- * );
62
- * }
19
+ * // With Remix action errors
20
+ * const actionData = useActionData<typeof action>();
21
+ *
22
+ * <FormProvider fieldErrors={actionData?.fieldErrors}>
23
+ * <Input name="email" label="Email" />
24
+ * <Input name="password" label="Password" type="password" />
25
+ * <Button type="submit">Login</Button>
26
+ * </FormProvider>
63
27
  * ```
64
28
  */
65
29
  function FormProvider(props) {
@@ -12,90 +12,29 @@ type ModalProviderProps = {
12
12
  };
13
13
  declare const modalContext: import("react").Context<ModalContextProps<any>>;
14
14
  /**
15
- * ModalProvider component - provides modal context for managing multiple modals state and data
15
+ * ModalProvider context provider that manages open/close state and data for named modals.
16
16
  *
17
- * @param props - ModalProvider component properties
18
- * @param props.children - React elements that will have access to the modal context
19
- * @param props.enableModalAutomation - Optional flag to enable modal automation features
17
+ * Wrap your app (or a subtree) with this once. Any component in the tree can then call
18
+ * `useModal(key)` to open, close, or read data for a specific modal. `closeAll()` is also
19
+ * available (used by `useAutomation` to close all modals after a successful form action).
20
20
  *
21
- * @returns ModalProvider JSX element that wraps children with modal context
21
+ * @param props.children - Components that will have access to modal context.
22
+ *
23
+ * @returns ModalProvider JSX element.
22
24
  *
23
25
  * @example
24
26
  * ```tsx
25
- * // Basic modal provider setup
26
- * function App() {
27
- * return (
28
- * <ModalProvider>
29
- * <UserModal />
30
- * <ConfirmModal />
31
- * <ImagePreviewModal />
32
- * <MainContent />
33
- * </ModalProvider>
34
- * );
35
- * }
36
- *
37
- * // Modal provider with automation enabled
38
- * function AppWithAutomation() {
39
- * return (
40
- * <ModalProvider enableModalAutomation={true}>
41
- * <Dashboard />
42
- * <SettingsModal />
43
- * <NotificationModal />
44
- * </ModalProvider>
45
- * );
46
- * }
47
- *
48
- * // Using with multiple modals
49
- * function MultiModalApp() {
50
- * return (
51
- * <ModalProvider>
52
- * <Header />
53
- * <Modal key="user-profile" />
54
- * <Modal key="edit-settings" />
55
- * <Modal key="confirm-delete" />
56
- * <MainContent />
57
- * </ModalProvider>
58
- * );
59
- * }
60
- *
61
- * // Component using modal context
62
- * function ModalTrigger() {
63
- * const { openModal, closeAll } = useModal();
64
- *
65
- * const handleOpenUserModal = () => {
66
- * openModal('user-details', { userId: 123, mode: 'edit' });
67
- * };
68
- *
69
- * const handleCloseAllModals = () => {
70
- * closeAll();
71
- * };
72
- *
73
- * return (
74
- * <div>
75
- * <button onClick={handleOpenUserModal}>
76
- * Open User Modal
77
- * </button>
78
- * <button onClick={handleCloseAllModals}>
79
- * Close All Modals
80
- * </button>
81
- * </div>
82
- * );
83
- * }
84
- *
85
- * // Modal component consuming context
86
- * function UserDetailsModal() {
87
- * const { modalIsOpen, modalData, closeModal } = useModal('user-details');
27
+ * // In your root layout
28
+ * <ModalProvider>
29
+ * <App />
30
+ * </ModalProvider>
88
31
  *
89
- * if (!modalIsOpen) return null;
32
+ * // Opening a modal from anywhere in the tree
33
+ * const { openModal } = useModal();
34
+ * openModal('confirm-delete', { id: user.id });
90
35
  *
91
- * return (
92
- * <Modal onClose={() => closeModal('user-details')}>
93
- * <h2>User Details</h2>
94
- * <p>User ID: {modalData?.userId}</p>
95
- * <p>Mode: {modalData?.mode}</p>
96
- * </Modal>
97
- * );
98
- * }
36
+ * // Consuming in the modal component
37
+ * const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>('confirm-delete');
99
38
  * ```
100
39
  */
101
40
  declare function ModalProvider(args: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC;AAOF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AAEH,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,2CAqC9C;AAED,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC;AAOF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,2CAqC9C;AAED,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,CAAC"}