@ark-ui/react 4.7.0 → 4.8.0

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 (245) hide show
  1. package/dist/components/accordion/accordion.d.cts +6 -6
  2. package/dist/components/accordion/accordion.d.ts +6 -6
  3. package/dist/components/accordion/index.d.cts +2 -2
  4. package/dist/components/accordion/index.d.ts +2 -2
  5. package/dist/components/avatar/avatar.d.cts +4 -4
  6. package/dist/components/avatar/avatar.d.ts +4 -4
  7. package/dist/components/avatar/index.d.cts +6 -6
  8. package/dist/components/avatar/index.d.ts +6 -6
  9. package/dist/components/carousel/carousel.d.cts +1 -1
  10. package/dist/components/carousel/carousel.d.ts +1 -1
  11. package/dist/components/carousel/index.d.cts +3 -3
  12. package/dist/components/carousel/index.d.ts +3 -3
  13. package/dist/components/checkbox/checkbox.d.cts +7 -7
  14. package/dist/components/checkbox/checkbox.d.ts +7 -7
  15. package/dist/components/checkbox/index.d.cts +2 -2
  16. package/dist/components/checkbox/index.d.ts +2 -2
  17. package/dist/components/clipboard/clipboard.d.cts +8 -8
  18. package/dist/components/clipboard/clipboard.d.ts +8 -8
  19. package/dist/components/collapsible/collapsible.d.cts +4 -4
  20. package/dist/components/collapsible/collapsible.d.ts +4 -4
  21. package/dist/components/collapsible/index.d.cts +1 -1
  22. package/dist/components/collapsible/index.d.ts +1 -1
  23. package/dist/components/color-picker/index.d.cts +1 -1
  24. package/dist/components/color-picker/index.d.ts +1 -1
  25. package/dist/components/combobox/combobox.d.cts +15 -15
  26. package/dist/components/combobox/combobox.d.ts +15 -15
  27. package/dist/components/combobox/index.d.cts +5 -5
  28. package/dist/components/combobox/index.d.ts +5 -5
  29. package/dist/components/date-picker/index.d.cts +2 -2
  30. package/dist/components/date-picker/index.d.ts +2 -2
  31. package/dist/components/dialog/index.d.cts +3 -3
  32. package/dist/components/dialog/index.d.ts +3 -3
  33. package/dist/components/editable/editable.d.cts +10 -10
  34. package/dist/components/editable/editable.d.ts +10 -10
  35. package/dist/components/editable/index.d.cts +3 -3
  36. package/dist/components/editable/index.d.ts +3 -3
  37. package/dist/components/field/index.cjs +2 -2
  38. package/dist/components/field/index.d.cts +1 -1
  39. package/dist/components/field/index.d.ts +1 -1
  40. package/dist/components/field/index.js +1 -1
  41. package/dist/components/fieldset/fieldset.cjs +8 -8
  42. package/dist/components/fieldset/fieldset.d.cts +5 -5
  43. package/dist/components/fieldset/fieldset.d.ts +5 -5
  44. package/dist/components/fieldset/fieldset.js +4 -4
  45. package/dist/components/fieldset/use-fieldset.cjs +1 -1
  46. package/dist/components/fieldset/use-fieldset.js +1 -1
  47. package/dist/components/focus-trap/focus-trap.cjs +34 -0
  48. package/dist/components/focus-trap/focus-trap.d.cts +15 -0
  49. package/dist/components/focus-trap/focus-trap.d.ts +15 -0
  50. package/dist/components/focus-trap/focus-trap.js +30 -0
  51. package/dist/components/focus-trap/index.cjs +9 -0
  52. package/dist/components/focus-trap/index.d.cts +2 -0
  53. package/dist/components/focus-trap/index.d.ts +2 -0
  54. package/dist/components/focus-trap/index.js +1 -0
  55. package/dist/components/format/format.d.cts +2 -2
  56. package/dist/components/format/format.d.ts +2 -2
  57. package/dist/components/format/index.d.cts +2 -2
  58. package/dist/components/format/index.d.ts +2 -2
  59. package/dist/components/frame/index.d.cts +1 -1
  60. package/dist/components/frame/index.d.ts +1 -1
  61. package/dist/components/highlight/index.d.cts +1 -1
  62. package/dist/components/highlight/index.d.ts +1 -1
  63. package/dist/components/hover-card/hover-card.d.cts +7 -7
  64. package/dist/components/hover-card/hover-card.d.ts +7 -7
  65. package/dist/components/hover-card/index.d.cts +1 -1
  66. package/dist/components/hover-card/index.d.ts +1 -1
  67. package/dist/components/index.cjs +42 -4
  68. package/dist/components/index.d.cts +1 -0
  69. package/dist/components/index.d.ts +1 -0
  70. package/dist/components/index.js +23 -3
  71. package/dist/components/menu/index.d.cts +9 -9
  72. package/dist/components/menu/index.d.ts +9 -9
  73. package/dist/components/menu/menu.d.cts +19 -19
  74. package/dist/components/menu/menu.d.ts +19 -19
  75. package/dist/components/number-input/index.d.cts +1 -1
  76. package/dist/components/number-input/index.d.ts +1 -1
  77. package/dist/components/pagination/index.d.cts +1 -1
  78. package/dist/components/pagination/index.d.ts +1 -1
  79. package/dist/components/pagination/pagination.d.cts +7 -7
  80. package/dist/components/pagination/pagination.d.ts +7 -7
  81. package/dist/components/pin-input/index.d.cts +2 -2
  82. package/dist/components/pin-input/index.d.ts +2 -2
  83. package/dist/components/pin-input/pin-input.d.cts +6 -6
  84. package/dist/components/pin-input/pin-input.d.ts +6 -6
  85. package/dist/components/popover/index.d.cts +4 -4
  86. package/dist/components/popover/index.d.ts +4 -4
  87. package/dist/components/popover/popover.d.cts +12 -12
  88. package/dist/components/popover/popover.d.ts +12 -12
  89. package/dist/components/portal/index.d.cts +1 -1
  90. package/dist/components/portal/index.d.ts +1 -1
  91. package/dist/components/presence/index.d.cts +1 -1
  92. package/dist/components/presence/index.d.ts +1 -1
  93. package/dist/components/progress/index.d.cts +3 -3
  94. package/dist/components/progress/index.d.ts +3 -3
  95. package/dist/components/progress/progress.d.cts +10 -10
  96. package/dist/components/progress/progress.d.ts +10 -10
  97. package/dist/components/qr-code/index.d.cts +3 -3
  98. package/dist/components/qr-code/index.d.ts +3 -3
  99. package/dist/components/radio-group/index.d.cts +2 -2
  100. package/dist/components/radio-group/index.d.ts +2 -2
  101. package/dist/components/radio-group/radio-group.d.cts +8 -8
  102. package/dist/components/radio-group/radio-group.d.ts +8 -8
  103. package/dist/components/rating-group/index.d.cts +1 -1
  104. package/dist/components/rating-group/index.d.ts +1 -1
  105. package/dist/components/rating-group/rating-group.cjs +2 -2
  106. package/dist/components/rating-group/rating-group.d.cts +6 -6
  107. package/dist/components/rating-group/rating-group.d.ts +6 -6
  108. package/dist/components/rating-group/rating-group.js +1 -1
  109. package/dist/components/segment-group/index.d.cts +1 -1
  110. package/dist/components/segment-group/index.d.ts +1 -1
  111. package/dist/components/select/index.d.cts +6 -6
  112. package/dist/components/select/index.d.ts +6 -6
  113. package/dist/components/select/select.d.cts +17 -17
  114. package/dist/components/select/select.d.ts +17 -17
  115. package/dist/components/signature-pad/index.d.cts +1 -1
  116. package/dist/components/signature-pad/index.d.ts +1 -1
  117. package/dist/components/signature-pad/signature-pad.d.cts +8 -8
  118. package/dist/components/signature-pad/signature-pad.d.ts +8 -8
  119. package/dist/components/slider/index.d.cts +7 -7
  120. package/dist/components/slider/index.d.ts +7 -7
  121. package/dist/components/splitter/index.d.cts +2 -2
  122. package/dist/components/splitter/index.d.ts +2 -2
  123. package/dist/components/splitter/splitter.d.cts +4 -4
  124. package/dist/components/splitter/splitter.d.ts +4 -4
  125. package/dist/components/steps/steps.cjs +6 -6
  126. package/dist/components/steps/steps.d.cts +3 -3
  127. package/dist/components/steps/steps.d.ts +3 -3
  128. package/dist/components/steps/steps.js +3 -3
  129. package/dist/components/switch/index.d.cts +4 -4
  130. package/dist/components/switch/index.d.ts +4 -4
  131. package/dist/components/switch/switch.d.cts +6 -6
  132. package/dist/components/switch/switch.d.ts +6 -6
  133. package/dist/components/tabs/index.d.cts +6 -6
  134. package/dist/components/tabs/index.d.ts +6 -6
  135. package/dist/components/tabs/tabs.d.cts +6 -6
  136. package/dist/components/tabs/tabs.d.ts +6 -6
  137. package/dist/components/tags-input/index.d.cts +2 -2
  138. package/dist/components/tags-input/index.d.ts +2 -2
  139. package/dist/components/tags-input/tags-input.d.cts +12 -12
  140. package/dist/components/tags-input/tags-input.d.ts +12 -12
  141. package/dist/components/time-picker/index.d.cts +1 -1
  142. package/dist/components/time-picker/index.d.ts +1 -1
  143. package/dist/components/time-picker/time-picker.d.cts +1 -1
  144. package/dist/components/time-picker/time-picker.d.ts +1 -1
  145. package/dist/components/timer/timer.d.cts +1 -1
  146. package/dist/components/timer/timer.d.ts +1 -1
  147. package/dist/components/toast/index.d.cts +5 -5
  148. package/dist/components/toast/index.d.ts +5 -5
  149. package/dist/components/toggle/index.cjs +2 -2
  150. package/dist/components/toggle/index.d.cts +2 -2
  151. package/dist/components/toggle/index.d.ts +2 -2
  152. package/dist/components/toggle/index.js +2 -2
  153. package/dist/components/toggle/toggle.d.cts +1 -1
  154. package/dist/components/toggle/toggle.d.ts +1 -1
  155. package/dist/components/toggle-group/index.d.cts +1 -1
  156. package/dist/components/toggle-group/index.d.ts +1 -1
  157. package/dist/components/tooltip/index.d.cts +3 -3
  158. package/dist/components/tooltip/index.d.ts +3 -3
  159. package/dist/components/tooltip/tooltip.d.cts +7 -7
  160. package/dist/components/tooltip/tooltip.d.ts +7 -7
  161. package/dist/components/tour/index.cjs +45 -0
  162. package/dist/components/tour/index.d.cts +20 -0
  163. package/dist/components/tour/index.d.ts +20 -0
  164. package/dist/components/tour/index.js +20 -0
  165. package/dist/components/tour/tour-action-trigger.cjs +25 -0
  166. package/dist/components/tour/tour-action-trigger.d.cts +8 -0
  167. package/dist/components/tour/tour-action-trigger.d.ts +8 -0
  168. package/dist/components/tour/tour-action-trigger.js +21 -0
  169. package/dist/components/tour/tour-actions.cjs +10 -0
  170. package/dist/components/tour/tour-actions.d.cts +6 -0
  171. package/dist/components/tour/tour-actions.d.ts +6 -0
  172. package/dist/components/tour/tour-actions.js +6 -0
  173. package/dist/components/tour/tour-arrow-tip.cjs +19 -0
  174. package/dist/components/tour/tour-arrow-tip.d.cts +7 -0
  175. package/dist/components/tour/tour-arrow-tip.d.ts +7 -0
  176. package/dist/components/tour/tour-arrow-tip.js +15 -0
  177. package/dist/components/tour/tour-arrow.cjs +19 -0
  178. package/dist/components/tour/tour-arrow.d.cts +7 -0
  179. package/dist/components/tour/tour-arrow.d.ts +7 -0
  180. package/dist/components/tour/tour-arrow.js +15 -0
  181. package/dist/components/tour/tour-backdrop.cjs +30 -0
  182. package/dist/components/tour/tour-backdrop.d.cts +7 -0
  183. package/dist/components/tour/tour-backdrop.d.ts +7 -0
  184. package/dist/components/tour/tour-backdrop.js +26 -0
  185. package/dist/components/tour/tour-close-trigger.cjs +21 -0
  186. package/dist/components/tour/tour-close-trigger.d.cts +7 -0
  187. package/dist/components/tour/tour-close-trigger.d.ts +7 -0
  188. package/dist/components/tour/tour-close-trigger.js +17 -0
  189. package/dist/components/tour/tour-content.cjs +25 -0
  190. package/dist/components/tour/tour-content.d.cts +7 -0
  191. package/dist/components/tour/tour-content.d.ts +7 -0
  192. package/dist/components/tour/tour-content.js +21 -0
  193. package/dist/components/tour/tour-context.cjs +10 -0
  194. package/dist/components/tour/tour-context.d.cts +6 -0
  195. package/dist/components/tour/tour-context.d.ts +6 -0
  196. package/dist/components/tour/tour-context.js +6 -0
  197. package/dist/components/tour/tour-control.cjs +14 -0
  198. package/dist/components/tour/tour-control.d.cts +7 -0
  199. package/dist/components/tour/tour-control.d.ts +7 -0
  200. package/dist/components/tour/tour-control.js +10 -0
  201. package/dist/components/tour/tour-description.cjs +19 -0
  202. package/dist/components/tour/tour-description.d.cts +7 -0
  203. package/dist/components/tour/tour-description.d.ts +7 -0
  204. package/dist/components/tour/tour-description.js +15 -0
  205. package/dist/components/tour/tour-positioner.cjs +24 -0
  206. package/dist/components/tour/tour-positioner.d.cts +7 -0
  207. package/dist/components/tour/tour-positioner.d.ts +7 -0
  208. package/dist/components/tour/tour-positioner.js +20 -0
  209. package/dist/components/tour/tour-progress-text.cjs +19 -0
  210. package/dist/components/tour/tour-progress-text.d.cts +7 -0
  211. package/dist/components/tour/tour-progress-text.d.ts +7 -0
  212. package/dist/components/tour/tour-progress-text.js +15 -0
  213. package/dist/components/tour/tour-root.cjs +21 -0
  214. package/dist/components/tour/tour-root.d.cts +10 -0
  215. package/dist/components/tour/tour-root.d.ts +10 -0
  216. package/dist/components/tour/tour-root.js +17 -0
  217. package/dist/components/tour/tour-spotlight.cjs +31 -0
  218. package/dist/components/tour/tour-spotlight.d.cts +7 -0
  219. package/dist/components/tour/tour-spotlight.d.ts +7 -0
  220. package/dist/components/tour/tour-spotlight.js +27 -0
  221. package/dist/components/tour/tour-title.cjs +19 -0
  222. package/dist/components/tour/tour-title.d.cts +7 -0
  223. package/dist/components/tour/tour-title.d.ts +7 -0
  224. package/dist/components/tour/tour-title.js +15 -0
  225. package/dist/components/tour/tour.anatomy.cjs +10 -0
  226. package/dist/components/tour/tour.anatomy.d.cts +2 -0
  227. package/dist/components/tour/tour.anatomy.d.ts +2 -0
  228. package/dist/components/tour/tour.anatomy.js +6 -0
  229. package/dist/components/tour/tour.cjs +37 -0
  230. package/dist/components/tour/tour.d.cts +16 -0
  231. package/dist/components/tour/tour.d.ts +16 -0
  232. package/dist/components/tour/tour.js +15 -0
  233. package/dist/components/tour/use-tour-context.cjs +15 -0
  234. package/dist/components/tour/use-tour-context.d.cts +6 -0
  235. package/dist/components/tour/use-tour-context.d.ts +6 -0
  236. package/dist/components/tour/use-tour-context.js +10 -0
  237. package/dist/components/tour/use-tour.cjs +49 -0
  238. package/dist/components/tour/use-tour.d.cts +8 -0
  239. package/dist/components/tour/use-tour.d.ts +8 -0
  240. package/dist/components/tour/use-tour.js +26 -0
  241. package/dist/index.cjs +42 -4
  242. package/dist/index.js +23 -3
  243. package/dist/providers/environment/index.d.cts +2 -2
  244. package/dist/providers/environment/index.d.ts +2 -2
  245. package/package.json +53 -51
@@ -0,0 +1,16 @@
1
+ export type { Point, ProgressTextDetails, StatusChangeDetails, StepAction, StepActionMap, StepActionTriggerProps, StepBaseDetails, StepChangeDetails, StepDetails, StepEffectArgs, StepPlacement, StepStatus, StepType, WaitOptions, } from '@zag-js/tour';
2
+ export { TourActionTrigger as ActionTrigger, type TourActionTriggerBaseProps as ActionTriggerBaseProps, type TourActionTriggerProps as ActionTriggerProps, } from './tour-action-trigger';
3
+ export { TourActions as Actions, type TourActionsProps as ActionsProps } from './tour-actions';
4
+ export { TourArrow as Arrow, type TourArrowBaseProps as ArrowBaseProps, type TourArrowProps as ArrowProps, } from './tour-arrow';
5
+ export { TourArrowTip as ArrowTip, type TourArrowTipBaseProps as ArrowTipBaseProps, type TourArrowTipProps as ArrowTipProps, } from './tour-arrow-tip';
6
+ export { TourBackdrop as Backdrop, type TourBackdropBaseProps as BackdropBaseProps, type TourBackdropProps as BackdropProps, } from './tour-backdrop';
7
+ export { TourCloseTrigger as CloseTrigger, type TourCloseTriggerBaseProps as CloseTriggerBaseProps, type TourCloseTriggerProps as CloseTriggerProps, } from './tour-close-trigger';
8
+ export { TourContent as Content, type TourContentBaseProps as ContentBaseProps, type TourContentProps as ContentProps, } from './tour-content';
9
+ export { TourContext as Context, type TourContextProps as ContextProps } from './tour-context';
10
+ export { TourControl as Control, type TourControlBaseProps as ControlBaseProps, type TourControlProps as ControlProps, } from './tour-control';
11
+ export { TourDescription as Description, type TourDescriptionBaseProps as DescriptionBaseProps, type TourDescriptionProps as DescriptionProps, } from './tour-description';
12
+ export { TourPositioner as Positioner, type TourPositionerBaseProps as PositionerBaseProps, type TourPositionerProps as PositionerProps, } from './tour-positioner';
13
+ export { TourProgressText as ProgressText, type TourProgressTextBaseProps as ProgressTextBaseProps, type TourProgressTextProps as ProgressTextProps, } from './tour-progress-text';
14
+ export { TourRoot as Root, type TourRootBaseProps as RootBaseProps, type TourRootProps as RootProps, } from './tour-root';
15
+ export { TourSpotlight as Spotlight, type TourSpotlightBaseProps as SpotlightBaseProps, type TourSpotlightProps as SpotlightProps, } from './tour-spotlight';
16
+ export { TourTitle as Title, type TourTitleBaseProps as TitleBaseProps, type TourTitleProps as TitleProps, } from './tour-title';
@@ -0,0 +1,15 @@
1
+ export { TourActionTrigger as ActionTrigger } from './tour-action-trigger.js';
2
+ export { TourActions as Actions } from './tour-actions.js';
3
+ export { TourArrow as Arrow } from './tour-arrow.js';
4
+ export { TourArrowTip as ArrowTip } from './tour-arrow-tip.js';
5
+ export { TourBackdrop as Backdrop } from './tour-backdrop.js';
6
+ export { TourCloseTrigger as CloseTrigger } from './tour-close-trigger.js';
7
+ export { TourContent as Content } from './tour-content.js';
8
+ export { TourContext as Context } from './tour-context.js';
9
+ export { TourControl as Control } from './tour-control.js';
10
+ export { TourDescription as Description } from './tour-description.js';
11
+ export { TourPositioner as Positioner } from './tour-positioner.js';
12
+ export { TourProgressText as ProgressText } from './tour-progress-text.js';
13
+ export { TourRoot as Root } from './tour-root.js';
14
+ export { TourSpotlight as Spotlight } from './tour-spotlight.js';
15
+ export { TourTitle as Title } from './tour-title.js';
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const createContext = require('../../utils/create-context.cjs');
7
+
8
+ const [TourProvider, useTourContext] = createContext.createContext({
9
+ name: "TourContext",
10
+ hookName: "useTourContext",
11
+ providerName: "<TourProvider />"
12
+ });
13
+
14
+ exports.TourProvider = TourProvider;
15
+ exports.useTourContext = useTourContext;
@@ -0,0 +1,6 @@
1
+ import { PropTypes } from '@zag-js/react';
2
+ import { Provider } from 'react';
3
+ import type * as tour from '@zag-js/tour';
4
+ export interface UseTourContext extends tour.Api<PropTypes> {
5
+ }
6
+ export declare const TourProvider: Provider<UseTourContext>, useTourContext: () => UseTourContext;
@@ -0,0 +1,6 @@
1
+ import { PropTypes } from '@zag-js/react';
2
+ import { Provider } from 'react';
3
+ import type * as tour from '@zag-js/tour';
4
+ export interface UseTourContext extends tour.Api<PropTypes> {
5
+ }
6
+ export declare const TourProvider: Provider<UseTourContext>, useTourContext: () => UseTourContext;
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+ import { createContext } from '../../utils/create-context.js';
3
+
4
+ const [TourProvider, useTourContext] = createContext({
5
+ name: "TourContext",
6
+ hookName: "useTourContext",
7
+ providerName: "<TourProvider />"
8
+ });
9
+
10
+ export { TourProvider, useTourContext };
@@ -0,0 +1,49 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const react$1 = require('@zag-js/react');
7
+ const tour = require('@zag-js/tour');
8
+ const react = require('react');
9
+ const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
10
+ const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
11
+ const useEvent = require('../../utils/use-event.cjs');
12
+
13
+ function _interopNamespaceDefault(e) {
14
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
15
+ if (e) {
16
+ for (const k in e) {
17
+ if (k !== 'default') {
18
+ const d = Object.getOwnPropertyDescriptor(e, k);
19
+ Object.defineProperty(n, k, d.get ? d : {
20
+ enumerable: true,
21
+ get: () => e[k]
22
+ });
23
+ }
24
+ }
25
+ }
26
+ n.default = e;
27
+ return Object.freeze(n);
28
+ }
29
+
30
+ const tour__namespace = /*#__PURE__*/_interopNamespaceDefault(tour);
31
+
32
+ const useTour = (props = {}) => {
33
+ const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
34
+ const { dir } = useLocaleContext.useLocaleContext();
35
+ const initialContext = {
36
+ id: react.useId(),
37
+ dir,
38
+ getRootNode,
39
+ ...props
40
+ };
41
+ const context = {
42
+ ...initialContext,
43
+ onStatusChange: useEvent.useEvent(props.onStatusChange)
44
+ };
45
+ const [state, send] = react$1.useMachine(tour__namespace.machine(initialContext), { context });
46
+ return tour__namespace.connect(state, send, react$1.normalizeProps);
47
+ };
48
+
49
+ exports.useTour = useTour;
@@ -0,0 +1,8 @@
1
+ import { PropTypes } from '@zag-js/react';
2
+ import { Optional } from '../../types';
3
+ import * as tour from '@zag-js/tour';
4
+ export interface UseTourProps extends Optional<Omit<tour.Context, 'dir' | 'getRootNode'>, 'id'> {
5
+ }
6
+ export interface UseTourReturn extends tour.Api<PropTypes> {
7
+ }
8
+ export declare const useTour: (props?: UseTourProps) => UseTourReturn;
@@ -0,0 +1,8 @@
1
+ import { PropTypes } from '@zag-js/react';
2
+ import { Optional } from '../../types';
3
+ import * as tour from '@zag-js/tour';
4
+ export interface UseTourProps extends Optional<Omit<tour.Context, 'dir' | 'getRootNode'>, 'id'> {
5
+ }
6
+ export interface UseTourReturn extends tour.Api<PropTypes> {
7
+ }
8
+ export declare const useTour: (props?: UseTourProps) => UseTourReturn;
@@ -0,0 +1,26 @@
1
+ 'use client';
2
+ import { useMachine, normalizeProps } from '@zag-js/react';
3
+ import * as tour from '@zag-js/tour';
4
+ import { useId } from 'react';
5
+ import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
6
+ import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
7
+ import { useEvent } from '../../utils/use-event.js';
8
+
9
+ const useTour = (props = {}) => {
10
+ const { getRootNode } = useEnvironmentContext();
11
+ const { dir } = useLocaleContext();
12
+ const initialContext = {
13
+ id: useId(),
14
+ dir,
15
+ getRootNode,
16
+ ...props
17
+ };
18
+ const context = {
19
+ ...initialContext,
20
+ onStatusChange: useEvent(props.onStatusChange)
21
+ };
22
+ const [state, send] = useMachine(tour.machine(initialContext), { context });
23
+ return tour.connect(state, send, normalizeProps);
24
+ };
25
+
26
+ export { useTour };
package/dist/index.cjs CHANGED
@@ -191,11 +191,11 @@ const fieldErrorText = require('./components/field/field-error-text.cjs');
191
191
  const fieldHelperText = require('./components/field/field-helper-text.cjs');
192
192
  const fieldInput = require('./components/field/field-input.cjs');
193
193
  const fieldLabel = require('./components/field/field-label.cjs');
194
+ const fieldRequiredIndicator = require('./components/field/field-required-indicator.cjs');
194
195
  const fieldRoot = require('./components/field/field-root.cjs');
195
196
  const fieldRootProvider = require('./components/field/field-root-provider.cjs');
196
197
  const fieldSelect = require('./components/field/field-select.cjs');
197
198
  const fieldTextarea = require('./components/field/field-textarea.cjs');
198
- const fieldRequiredIndicator = require('./components/field/field-required-indicator.cjs');
199
199
  const field_anatomy = require('./components/field/field.anatomy.cjs');
200
200
  const useFieldContext = require('./components/field/use-field-context.cjs');
201
201
  const field = require('./components/field/field.cjs');
@@ -540,13 +540,13 @@ const toastTitle = require('./components/toast/toast-title.cjs');
540
540
  const toaster = require('./components/toast/toaster.cjs');
541
541
  const useToastContext = require('./components/toast/use-toast-context.cjs');
542
542
  const toast$1 = require('./components/toast/toast.cjs');
543
+ const toggle = require('./components/toggle/toggle.cjs');
543
544
  const toggleContext = require('./components/toggle/toggle-context.cjs');
544
545
  const toggleIndicator = require('./components/toggle/toggle-indicator.cjs');
545
546
  const toggleRoot = require('./components/toggle/toggle-root.cjs');
546
547
  const toggle_anatomy = require('./components/toggle/toggle.anatomy.cjs');
547
548
  const useToggle = require('./components/toggle/use-toggle.cjs');
548
549
  const useToggleContext = require('./components/toggle/use-toggle-context.cjs');
549
- const toggle = require('./components/toggle/toggle.cjs');
550
550
  const toggleGroupContext = require('./components/toggle-group/toggle-group-context.cjs');
551
551
  const toggleGroupItem = require('./components/toggle-group/toggle-group-item.cjs');
552
552
  const toggleGroupRoot = require('./components/toggle-group/toggle-group-root.cjs');
@@ -565,6 +565,25 @@ const tooltipTrigger = require('./components/tooltip/tooltip-trigger.cjs');
565
565
  const useTooltip = require('./components/tooltip/use-tooltip.cjs');
566
566
  const useTooltipContext = require('./components/tooltip/use-tooltip-context.cjs');
567
567
  const tooltip$1 = require('./components/tooltip/tooltip.cjs');
568
+ const tourActionTrigger = require('./components/tour/tour-action-trigger.cjs');
569
+ const tourActions = require('./components/tour/tour-actions.cjs');
570
+ const tourArrow = require('./components/tour/tour-arrow.cjs');
571
+ const tourArrowTip = require('./components/tour/tour-arrow-tip.cjs');
572
+ const tourBackdrop = require('./components/tour/tour-backdrop.cjs');
573
+ const tourCloseTrigger = require('./components/tour/tour-close-trigger.cjs');
574
+ const tourContent = require('./components/tour/tour-content.cjs');
575
+ const tourContext = require('./components/tour/tour-context.cjs');
576
+ const tourControl = require('./components/tour/tour-control.cjs');
577
+ const tourDescription = require('./components/tour/tour-description.cjs');
578
+ const tourPositioner = require('./components/tour/tour-positioner.cjs');
579
+ const tourProgressText = require('./components/tour/tour-progress-text.cjs');
580
+ const tourRoot = require('./components/tour/tour-root.cjs');
581
+ const tourSpotlight = require('./components/tour/tour-spotlight.cjs');
582
+ const tourTitle = require('./components/tour/tour-title.cjs');
583
+ const tour_anatomy = require('./components/tour/tour.anatomy.cjs');
584
+ const useTour = require('./components/tour/use-tour.cjs');
585
+ const useTourContext = require('./components/tour/use-tour-context.cjs');
586
+ const tour = require('./components/tour/tour.cjs');
568
587
  const treeViewBranch = require('./components/tree-view/tree-view-branch.cjs');
569
588
  const treeViewBranchContent = require('./components/tree-view/tree-view-branch-content.cjs');
570
589
  const treeViewBranchControl = require('./components/tree-view/tree-view-branch-control.cjs');
@@ -822,11 +841,11 @@ exports.FieldErrorText = fieldErrorText.FieldErrorText;
822
841
  exports.FieldHelperText = fieldHelperText.FieldHelperText;
823
842
  exports.FieldInput = fieldInput.FieldInput;
824
843
  exports.FieldLabel = fieldLabel.FieldLabel;
844
+ exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
825
845
  exports.FieldRoot = fieldRoot.FieldRoot;
826
846
  exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
827
847
  exports.FieldSelect = fieldSelect.FieldSelect;
828
848
  exports.FieldTextarea = fieldTextarea.FieldTextarea;
829
- exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
830
849
  exports.fieldAnatomy = field_anatomy.fieldAnatomy;
831
850
  exports.useFieldContext = useFieldContext.useFieldContext;
832
851
  exports.Field = field;
@@ -1175,13 +1194,13 @@ exports.ToastTitle = toastTitle.ToastTitle;
1175
1194
  exports.Toaster = toaster.Toaster;
1176
1195
  exports.useToastContext = useToastContext.useToastContext;
1177
1196
  exports.Toast = toast$1;
1197
+ exports.Toggle = toggle;
1178
1198
  exports.ToggleContext = toggleContext.ToggleContext;
1179
1199
  exports.ToggleIndicator = toggleIndicator.ToggleIndicator;
1180
1200
  exports.ToggleRoot = toggleRoot.ToggleRoot;
1181
1201
  exports.toggleAnatomy = toggle_anatomy.toggleAnatomy;
1182
1202
  exports.useToggle = useToggle.useToggle;
1183
1203
  exports.useToggleContext = useToggleContext.useToggleContext;
1184
- exports.Toggle = toggle;
1185
1204
  exports.ToggleGroupContext = toggleGroupContext.ToggleGroupContext;
1186
1205
  exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
1187
1206
  exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;
@@ -1200,6 +1219,25 @@ exports.TooltipTrigger = tooltipTrigger.TooltipTrigger;
1200
1219
  exports.useTooltip = useTooltip.useTooltip;
1201
1220
  exports.useTooltipContext = useTooltipContext.useTooltipContext;
1202
1221
  exports.Tooltip = tooltip$1;
1222
+ exports.TourActionTrigger = tourActionTrigger.TourActionTrigger;
1223
+ exports.TourActions = tourActions.TourActions;
1224
+ exports.TourArrow = tourArrow.TourArrow;
1225
+ exports.TourArrowTip = tourArrowTip.TourArrowTip;
1226
+ exports.TourBackdrop = tourBackdrop.TourBackdrop;
1227
+ exports.TourCloseTrigger = tourCloseTrigger.TourCloseTrigger;
1228
+ exports.TourContent = tourContent.TourContent;
1229
+ exports.TourContext = tourContext.TourContext;
1230
+ exports.TourControl = tourControl.TourControl;
1231
+ exports.TourDescription = tourDescription.TourDescription;
1232
+ exports.TourPositioner = tourPositioner.TourPositioner;
1233
+ exports.TourProgressText = tourProgressText.TourProgressText;
1234
+ exports.TourRoot = tourRoot.TourRoot;
1235
+ exports.TourSpotlight = tourSpotlight.TourSpotlight;
1236
+ exports.TourTitle = tourTitle.TourTitle;
1237
+ exports.tourAnatomy = tour_anatomy.tourAnatomy;
1238
+ exports.useTour = useTour.useTour;
1239
+ exports.useTourContext = useTourContext.useTourContext;
1240
+ exports.Tour = tour;
1203
1241
  exports.TreeViewBranch = treeViewBranch.TreeViewBranch;
1204
1242
  exports.TreeViewBranchContent = treeViewBranchContent.TreeViewBranchContent;
1205
1243
  exports.TreeViewBranchControl = treeViewBranchControl.TreeViewBranchControl;
package/dist/index.js CHANGED
@@ -198,11 +198,11 @@ export { FieldErrorText } from './components/field/field-error-text.js';
198
198
  export { FieldHelperText } from './components/field/field-helper-text.js';
199
199
  export { FieldInput } from './components/field/field-input.js';
200
200
  export { FieldLabel } from './components/field/field-label.js';
201
+ export { FieldRequiredIndicator } from './components/field/field-required-indicator.js';
201
202
  export { FieldRoot } from './components/field/field-root.js';
202
203
  export { FieldRootProvider } from './components/field/field-root-provider.js';
203
204
  export { FieldSelect } from './components/field/field-select.js';
204
205
  export { FieldTextarea } from './components/field/field-textarea.js';
205
- export { FieldRequiredIndicator } from './components/field/field-required-indicator.js';
206
206
  export { fieldAnatomy } from './components/field/field.anatomy.js';
207
207
  export { useFieldContext } from './components/field/use-field-context.js';
208
208
  import * as field from './components/field/field.js';
@@ -573,14 +573,14 @@ export { Toaster } from './components/toast/toaster.js';
573
573
  export { useToastContext } from './components/toast/use-toast-context.js';
574
574
  import * as toast from './components/toast/toast.js';
575
575
  export { toast as Toast };
576
+ import * as toggle from './components/toggle/toggle.js';
577
+ export { toggle as Toggle };
576
578
  export { ToggleContext } from './components/toggle/toggle-context.js';
577
579
  export { ToggleIndicator } from './components/toggle/toggle-indicator.js';
578
580
  export { ToggleRoot } from './components/toggle/toggle-root.js';
579
581
  export { toggleAnatomy } from './components/toggle/toggle.anatomy.js';
580
582
  export { useToggle } from './components/toggle/use-toggle.js';
581
583
  export { useToggleContext } from './components/toggle/use-toggle-context.js';
582
- import * as toggle from './components/toggle/toggle.js';
583
- export { toggle as Toggle };
584
584
  export { ToggleGroupContext } from './components/toggle-group/toggle-group-context.js';
585
585
  export { ToggleGroupItem } from './components/toggle-group/toggle-group-item.js';
586
586
  export { ToggleGroupRoot } from './components/toggle-group/toggle-group-root.js';
@@ -601,6 +601,26 @@ export { useTooltip } from './components/tooltip/use-tooltip.js';
601
601
  export { useTooltipContext } from './components/tooltip/use-tooltip-context.js';
602
602
  import * as tooltip from './components/tooltip/tooltip.js';
603
603
  export { tooltip as Tooltip };
604
+ export { TourActionTrigger } from './components/tour/tour-action-trigger.js';
605
+ export { TourActions } from './components/tour/tour-actions.js';
606
+ export { TourArrow } from './components/tour/tour-arrow.js';
607
+ export { TourArrowTip } from './components/tour/tour-arrow-tip.js';
608
+ export { TourBackdrop } from './components/tour/tour-backdrop.js';
609
+ export { TourCloseTrigger } from './components/tour/tour-close-trigger.js';
610
+ export { TourContent } from './components/tour/tour-content.js';
611
+ export { TourContext } from './components/tour/tour-context.js';
612
+ export { TourControl } from './components/tour/tour-control.js';
613
+ export { TourDescription } from './components/tour/tour-description.js';
614
+ export { TourPositioner } from './components/tour/tour-positioner.js';
615
+ export { TourProgressText } from './components/tour/tour-progress-text.js';
616
+ export { TourRoot } from './components/tour/tour-root.js';
617
+ export { TourSpotlight } from './components/tour/tour-spotlight.js';
618
+ export { TourTitle } from './components/tour/tour-title.js';
619
+ export { tourAnatomy } from './components/tour/tour.anatomy.js';
620
+ export { useTour } from './components/tour/use-tour.js';
621
+ export { useTourContext } from './components/tour/use-tour-context.js';
622
+ import * as tour from './components/tour/tour.js';
623
+ export { tour as Tour };
604
624
  export { TreeViewBranch } from './components/tree-view/tree-view-branch.js';
605
625
  export { TreeViewBranchContent } from './components/tree-view/tree-view-branch-content.js';
606
626
  export { TreeViewBranchControl } from './components/tree-view/tree-view-branch-control.js';
@@ -1,6 +1,6 @@
1
1
  export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
2
- export { useEnvironmentContext, type UseEnvironmentContext,
2
+ export { useEnvironmentContext,
3
3
  /**
4
4
  * @deprecated Use `UseEnvironmentContext` instead.
5
5
  */
6
- type UseEnvironmentContext as EnvironmentContext, type RootNode, } from './use-environment-context';
6
+ type UseEnvironmentContext as EnvironmentContext, type RootNode, type UseEnvironmentContext, } from './use-environment-context';
@@ -1,6 +1,6 @@
1
1
  export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider';
2
- export { useEnvironmentContext, type UseEnvironmentContext,
2
+ export { useEnvironmentContext,
3
3
  /**
4
4
  * @deprecated Use `UseEnvironmentContext` instead.
5
5
  */
6
- type UseEnvironmentContext as EnvironmentContext, type RootNode, } from './use-environment-context';
6
+ type UseEnvironmentContext as EnvironmentContext, type RootNode, type UseEnvironmentContext, } from './use-environment-context';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
- "version": "4.7.0",
3
+ "version": "4.8.0",
4
4
  "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
5
5
  "keywords": [
6
6
  "accordion",
@@ -161,55 +161,57 @@
161
161
  "sideEffects": false,
162
162
  "dependencies": {
163
163
  "@internationalized/date": "3.6.0",
164
- "@zag-js/accordion": "0.81.0",
165
- "@zag-js/anatomy": "0.81.0",
166
- "@zag-js/auto-resize": "0.81.0",
167
- "@zag-js/avatar": "0.81.0",
168
- "@zag-js/carousel": "0.81.0",
169
- "@zag-js/checkbox": "0.81.0",
170
- "@zag-js/clipboard": "0.81.0",
171
- "@zag-js/collapsible": "0.81.0",
172
- "@zag-js/collection": "0.81.0",
173
- "@zag-js/color-picker": "0.81.0",
174
- "@zag-js/color-utils": "0.81.0",
175
- "@zag-js/combobox": "0.81.0",
176
- "@zag-js/core": "0.81.0",
177
- "@zag-js/date-picker": "0.81.0",
178
- "@zag-js/date-utils": "0.81.0",
179
- "@zag-js/dialog": "0.81.0",
180
- "@zag-js/dom-query": "0.81.0",
181
- "@zag-js/editable": "0.81.0",
182
- "@zag-js/file-upload": "0.81.0",
183
- "@zag-js/file-utils": "0.81.0",
184
- "@zag-js/highlight-word": "0.81.0",
185
- "@zag-js/hover-card": "0.81.0",
186
- "@zag-js/i18n-utils": "0.81.0",
187
- "@zag-js/menu": "0.81.0",
188
- "@zag-js/number-input": "0.81.0",
189
- "@zag-js/pagination": "0.81.0",
190
- "@zag-js/pin-input": "0.81.0",
191
- "@zag-js/popover": "0.81.0",
192
- "@zag-js/presence": "0.81.0",
193
- "@zag-js/progress": "0.81.0",
194
- "@zag-js/qr-code": "0.81.0",
195
- "@zag-js/radio-group": "0.81.0",
196
- "@zag-js/rating-group": "0.81.0",
197
- "@zag-js/react": "0.81.0",
198
- "@zag-js/select": "0.81.0",
199
- "@zag-js/signature-pad": "0.81.0",
200
- "@zag-js/slider": "0.81.0",
201
- "@zag-js/splitter": "0.81.0",
202
- "@zag-js/steps": "0.81.0",
203
- "@zag-js/switch": "0.81.0",
204
- "@zag-js/tabs": "0.81.0",
205
- "@zag-js/tags-input": "0.81.0",
206
- "@zag-js/time-picker": "0.81.0",
207
- "@zag-js/timer": "0.81.0",
208
- "@zag-js/toast": "0.81.0",
209
- "@zag-js/toggle-group": "0.81.0",
210
- "@zag-js/tooltip": "0.81.0",
211
- "@zag-js/tree-view": "0.81.0",
212
- "@zag-js/types": "0.81.0"
164
+ "@zag-js/accordion": "0.81.1",
165
+ "@zag-js/anatomy": "0.81.1",
166
+ "@zag-js/auto-resize": "0.81.1",
167
+ "@zag-js/avatar": "0.81.1",
168
+ "@zag-js/carousel": "0.81.1",
169
+ "@zag-js/checkbox": "0.81.1",
170
+ "@zag-js/clipboard": "0.81.1",
171
+ "@zag-js/collapsible": "0.81.1",
172
+ "@zag-js/collection": "0.81.1",
173
+ "@zag-js/color-picker": "0.81.1",
174
+ "@zag-js/color-utils": "0.81.1",
175
+ "@zag-js/combobox": "0.81.1",
176
+ "@zag-js/core": "0.81.1",
177
+ "@zag-js/date-picker": "0.81.1",
178
+ "@zag-js/date-utils": "0.81.1",
179
+ "@zag-js/dialog": "0.81.1",
180
+ "@zag-js/dom-query": "0.81.1",
181
+ "@zag-js/editable": "0.81.1",
182
+ "@zag-js/file-upload": "0.81.1",
183
+ "@zag-js/file-utils": "0.81.1",
184
+ "@zag-js/focus-trap": "0.81.1",
185
+ "@zag-js/highlight-word": "0.81.1",
186
+ "@zag-js/hover-card": "0.81.1",
187
+ "@zag-js/i18n-utils": "0.81.1",
188
+ "@zag-js/menu": "0.81.1",
189
+ "@zag-js/number-input": "0.81.1",
190
+ "@zag-js/pagination": "0.81.1",
191
+ "@zag-js/pin-input": "0.81.1",
192
+ "@zag-js/popover": "0.81.1",
193
+ "@zag-js/presence": "0.81.1",
194
+ "@zag-js/progress": "0.81.1",
195
+ "@zag-js/qr-code": "0.81.1",
196
+ "@zag-js/radio-group": "0.81.1",
197
+ "@zag-js/rating-group": "0.81.1",
198
+ "@zag-js/react": "0.81.1",
199
+ "@zag-js/select": "0.81.1",
200
+ "@zag-js/signature-pad": "0.81.1",
201
+ "@zag-js/slider": "0.81.1",
202
+ "@zag-js/splitter": "0.81.1",
203
+ "@zag-js/steps": "0.81.1",
204
+ "@zag-js/switch": "0.81.1",
205
+ "@zag-js/tabs": "0.81.1",
206
+ "@zag-js/tags-input": "0.81.1",
207
+ "@zag-js/time-picker": "0.81.1",
208
+ "@zag-js/timer": "0.81.1",
209
+ "@zag-js/toast": "0.81.1",
210
+ "@zag-js/toggle-group": "0.81.1",
211
+ "@zag-js/tooltip": "0.81.1",
212
+ "@zag-js/tour": "0.81.1",
213
+ "@zag-js/tree-view": "0.81.1",
214
+ "@zag-js/types": "0.81.1"
213
215
  },
214
216
  "devDependencies": {
215
217
  "@biomejs/biome": "1.9.4",
@@ -226,7 +228,7 @@
226
228
  "@types/react": "19.0.2",
227
229
  "@types/react-dom": "19.0.2",
228
230
  "@vitejs/plugin-react": "4.3.4",
229
- "@zag-js/stringify-state": "0.81.0",
231
+ "@zag-js/stringify-state": "0.81.1",
230
232
  "clean-package": "2.2.0",
231
233
  "globby": "14.0.2",
232
234
  "jsdom": "25.0.1",