@ark-ui/react 3.11.0 → 3.12.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 (41) hide show
  1. package/dist/components/frame/frame-content.cjs +28 -0
  2. package/dist/components/frame/frame-content.d.cts +8 -0
  3. package/dist/components/frame/frame-content.d.ts +8 -0
  4. package/dist/components/frame/frame-content.js +24 -0
  5. package/dist/components/frame/frame.cjs +72 -0
  6. package/dist/components/frame/frame.d.cts +13 -0
  7. package/dist/components/frame/frame.d.ts +13 -0
  8. package/dist/components/frame/frame.js +68 -0
  9. package/dist/components/frame/index.cjs +9 -0
  10. package/dist/components/frame/index.d.cts +2 -0
  11. package/dist/components/frame/index.d.ts +2 -0
  12. package/dist/components/frame/index.js +1 -0
  13. package/dist/components/highlight/use-highlight.cjs +2 -38
  14. package/dist/components/highlight/use-highlight.d.cts +3 -28
  15. package/dist/components/highlight/use-highlight.d.ts +3 -28
  16. package/dist/components/highlight/use-highlight.js +2 -38
  17. package/dist/components/index.cjs +10 -4
  18. package/dist/components/index.d.cts +1 -0
  19. package/dist/components/index.d.ts +1 -0
  20. package/dist/components/index.js +5 -2
  21. package/dist/components/timer/index.cjs +8 -4
  22. package/dist/components/timer/index.d.cts +7 -5
  23. package/dist/components/timer/index.d.ts +7 -5
  24. package/dist/components/timer/index.js +4 -2
  25. package/dist/components/timer/timer-area.cjs +19 -0
  26. package/dist/components/timer/timer-area.d.cts +7 -0
  27. package/dist/components/timer/timer-area.d.ts +7 -0
  28. package/dist/components/timer/timer-area.js +15 -0
  29. package/dist/components/timer/timer-control.cjs +19 -0
  30. package/dist/components/timer/timer-control.d.cts +7 -0
  31. package/dist/components/timer/timer-control.d.ts +7 -0
  32. package/dist/components/timer/timer-control.js +15 -0
  33. package/dist/components/timer/timer-root.cjs +1 -0
  34. package/dist/components/timer/timer-root.js +1 -0
  35. package/dist/components/timer/timer.cjs +8 -4
  36. package/dist/components/timer/timer.d.cts +6 -4
  37. package/dist/components/timer/timer.d.ts +6 -4
  38. package/dist/components/timer/timer.js +4 -2
  39. package/dist/index.cjs +10 -4
  40. package/dist/index.js +5 -2
  41. package/package.json +60 -58
package/dist/components/frame/frame-content.cjs ADDED
@@ -0,0 +1,28 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const react = require('react');
7
+
8
+ const FrameContent = (props) => {
9
+ const { onMount, onUnmount, children } = props;
10
+ const mountedRef = react.useRef(false);
11
+ const calledRef = react.useRef(false);
12
+ react.useEffect(() => {
13
+ if (!mountedRef.current && !calledRef.current) {
14
+ onMount?.();
15
+ mountedRef.current = true;
16
+ calledRef.current = true;
17
+ }
18
+ return () => {
19
+ if (mountedRef.current) {
20
+ onUnmount?.();
21
+ mountedRef.current = false;
22
+ }
23
+ };
24
+ }, []);
25
+ return children;
26
+ };
27
+
28
+ exports.FrameContent = FrameContent;
package/dist/components/frame/frame-content.d.cts ADDED
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+ interface FrameContentProps {
3
+ onMount?(): void;
4
+ onUnmount?(): void;
5
+ children?: React.ReactNode;
6
+ }
7
+ export declare const FrameContent: (props: FrameContentProps) => ReactNode;
8
+ export {};
package/dist/components/frame/frame-content.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+ interface FrameContentProps {
3
+ onMount?(): void;
4
+ onUnmount?(): void;
5
+ children?: React.ReactNode;
6
+ }
7
+ export declare const FrameContent: (props: FrameContentProps) => ReactNode;
8
+ export {};
package/dist/components/frame/frame-content.js ADDED
@@ -0,0 +1,24 @@
1
+ 'use client';
2
+ import { useRef, useEffect } from 'react';
3
+
4
+ const FrameContent = (props) => {
5
+ const { onMount, onUnmount, children } = props;
6
+ const mountedRef = useRef(false);
7
+ const calledRef = useRef(false);
8
+ useEffect(() => {
9
+ if (!mountedRef.current && !calledRef.current) {
10
+ onMount?.();
11
+ mountedRef.current = true;
12
+ calledRef.current = true;
13
+ }
14
+ return () => {
15
+ if (mountedRef.current) {
16
+ onUnmount?.();
17
+ mountedRef.current = false;
18
+ }
19
+ };
20
+ }, []);
21
+ return children;
22
+ };
23
+
24
+ export { FrameContent };
package/dist/components/frame/frame.cjs ADDED
@@ -0,0 +1,72 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const jsxRuntime = require('react/jsx-runtime');
6
+ const react = require('react');
7
+ const reactDom = require('react-dom');
8
+ const environmentProvider = require('../../providers/environment/environment-provider.cjs');
9
+ const composeRefs = require('../../utils/compose-refs.cjs');
10
+ const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
11
+ const frameContent = require('./frame-content.cjs');
12
+
13
+ const resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
14
+ const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
15
+ function getMountNode(frame) {
16
+ const doc = frame.contentWindow?.document;
17
+ if (!doc) return null;
18
+ const mountNode = doc.body.querySelector(".frame-root") || doc.body;
19
+ return mountNode;
20
+ }
21
+ const Frame = react.forwardRef((props, ref) => {
22
+ const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
23
+ const [frameRef, setFrameRef] = react.useState(null);
24
+ const [mountNode, setMountNode] = react.useState(null);
25
+ useSafeLayoutEffect.useSafeLayoutEffect(() => {
26
+ if (!frameRef) return;
27
+ const doc = frameRef.contentWindow?.document;
28
+ if (!doc) return;
29
+ doc.open();
30
+ doc.write(srcDoc);
31
+ doc.close();
32
+ setMountNode(getMountNode(frameRef));
33
+ }, [frameRef, srcDoc]);
34
+ react.useEffect(() => {
35
+ if (!frameRef || !frameRef.contentDocument) return;
36
+ const win = frameRef.contentWindow;
37
+ if (!win) return;
38
+ const mountNode2 = getMountNode(frameRef);
39
+ if (!mountNode2) return;
40
+ const exec = () => {
41
+ const rootEl = frameRef.contentDocument?.documentElement;
42
+ if (!rootEl) return;
43
+ frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
44
+ frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
45
+ };
46
+ const resizeObserver = new win.ResizeObserver(exec);
47
+ exec();
48
+ if (frameRef.contentDocument) {
49
+ resizeObserver.observe(mountNode2);
50
+ }
51
+ return () => {
52
+ resizeObserver.disconnect();
53
+ };
54
+ }, [frameRef]);
55
+ return /* @__PURE__ */ jsxRuntime.jsx(environmentProvider.EnvironmentProvider, { value: () => frameRef?.contentDocument ?? document, children: /* @__PURE__ */ jsxRuntime.jsxs(
56
+ "iframe",
57
+ {
58
+ title: `frame:${react.useId()}`,
59
+ ref: composeRefs.composeRefs(ref, setFrameRef),
60
+ ...rest,
61
+ children: [
62
+ mountNode ? reactDom.createPortal(
63
+ /* @__PURE__ */ jsxRuntime.jsx(frameContent.FrameContent, { onMount, onUnmount, children }),
64
+ mountNode
65
+ ) : null,
66
+ head && frameRef ? reactDom.createPortal(head, frameRef.contentDocument.head) : null
67
+ ]
68
+ }
69
+ ) });
70
+ });
71
+
72
+ exports.Frame = Frame;
package/dist/components/frame/frame.d.cts ADDED
@@ -0,0 +1,13 @@
1
+ import { Assign } from '../../types';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface FrameBaseProps {
4
+ /** Additional content to be inserted into the frame's <head> */
5
+ head?: React.ReactNode;
6
+ /** Callback function to be executed when the frame is mounted */
7
+ onMount?: () => void;
8
+ /** Callback function to be executed when the frame is unmounted */
9
+ onUnmount?: () => void;
10
+ }
11
+ export interface FrameProps extends Assign<React.IframeHTMLAttributes<HTMLIFrameElement>, FrameBaseProps> {
12
+ }
13
+ export declare const Frame: ForwardRefExoticComponent<FrameProps & RefAttributes<HTMLIFrameElement>>;
package/dist/components/frame/frame.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { Assign } from '../../types';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface FrameBaseProps {
4
+ /** Additional content to be inserted into the frame's <head> */
5
+ head?: React.ReactNode;
6
+ /** Callback function to be executed when the frame is mounted */
7
+ onMount?: () => void;
8
+ /** Callback function to be executed when the frame is unmounted */
9
+ onUnmount?: () => void;
10
+ }
11
+ export interface FrameProps extends Assign<React.IframeHTMLAttributes<HTMLIFrameElement>, FrameBaseProps> {
12
+ }
13
+ export declare const Frame: ForwardRefExoticComponent<FrameProps & RefAttributes<HTMLIFrameElement>>;
package/dist/components/frame/frame.js ADDED
@@ -0,0 +1,68 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { forwardRef, useState, useEffect, useId } from 'react';
3
+ import { createPortal } from 'react-dom';
4
+ import { EnvironmentProvider } from '../../providers/environment/environment-provider.js';
5
+ import { composeRefs } from '../../utils/compose-refs.js';
6
+ import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
7
+ import { FrameContent } from './frame-content.js';
8
+
9
+ const resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
10
+ const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
11
+ function getMountNode(frame) {
12
+ const doc = frame.contentWindow?.document;
13
+ if (!doc) return null;
14
+ const mountNode = doc.body.querySelector(".frame-root") || doc.body;
15
+ return mountNode;
16
+ }
17
+ const Frame = forwardRef((props, ref) => {
18
+ const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
19
+ const [frameRef, setFrameRef] = useState(null);
20
+ const [mountNode, setMountNode] = useState(null);
21
+ useSafeLayoutEffect(() => {
22
+ if (!frameRef) return;
23
+ const doc = frameRef.contentWindow?.document;
24
+ if (!doc) return;
25
+ doc.open();
26
+ doc.write(srcDoc);
27
+ doc.close();
28
+ setMountNode(getMountNode(frameRef));
29
+ }, [frameRef, srcDoc]);
30
+ useEffect(() => {
31
+ if (!frameRef || !frameRef.contentDocument) return;
32
+ const win = frameRef.contentWindow;
33
+ if (!win) return;
34
+ const mountNode2 = getMountNode(frameRef);
35
+ if (!mountNode2) return;
36
+ const exec = () => {
37
+ const rootEl = frameRef.contentDocument?.documentElement;
38
+ if (!rootEl) return;
39
+ frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
40
+ frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
41
+ };
42
+ const resizeObserver = new win.ResizeObserver(exec);
43
+ exec();
44
+ if (frameRef.contentDocument) {
45
+ resizeObserver.observe(mountNode2);
46
+ }
47
+ return () => {
48
+ resizeObserver.disconnect();
49
+ };
50
+ }, [frameRef]);
51
+ return /* @__PURE__ */ jsx(EnvironmentProvider, { value: () => frameRef?.contentDocument ?? document, children: /* @__PURE__ */ jsxs(
52
+ "iframe",
53
+ {
54
+ title: `frame:${useId()}`,
55
+ ref: composeRefs(ref, setFrameRef),
56
+ ...rest,
57
+ children: [
58
+ mountNode ? createPortal(
59
+ /* @__PURE__ */ jsx(FrameContent, { onMount, onUnmount, children }),
60
+ mountNode
61
+ ) : null,
62
+ head && frameRef ? createPortal(head, frameRef.contentDocument.head) : null
63
+ ]
64
+ }
65
+ ) });
66
+ });
67
+
68
+ export { Frame };
package/dist/components/frame/index.cjs ADDED
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const frame = require('./frame.cjs');
6
+
7
+
8
+
9
+ exports.Frame = frame.Frame;
package/dist/components/frame/index.d.cts ADDED
@@ -0,0 +1,2 @@
1
+ export { Frame } from './frame';
2
+ export type { FrameProps, FrameBaseProps } from './frame';
package/dist/components/frame/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Frame } from './frame';
2
+ export type { FrameProps, FrameBaseProps } from './frame';
package/dist/components/frame/index.js ADDED
@@ -0,0 +1 @@
1
+ export { Frame } from './frame.js';
package/dist/components/highlight/use-highlight.cjs CHANGED
@@ -3,47 +3,11 @@
3
3
 
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
+ const highlightWord = require('@zag-js/highlight-word');
6
7
  const react = require('react');
7
8
 
8
- const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
9
- const buildRegex = (queryProp, flags) => {
10
- const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
11
- return new RegExp(`(${query.join("|")})`, flags);
12
- };
13
- const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
14
- const normalizeSpan = (spans, len) => {
15
- const result = [];
16
- const append = (start, end, match) => {
17
- if (end - start > 0) result.push({ start, end, match });
18
- };
19
- if (spans.length === 0) {
20
- append(0, len, false);
21
- } else {
22
- let lastIndex = 0;
23
- for (const chunk of spans) {
24
- append(lastIndex, chunk.start, false);
25
- append(chunk.start, chunk.end, true);
26
- lastIndex = chunk.end;
27
- }
28
- append(lastIndex, len, false);
29
- }
30
- return result;
31
- };
32
- const highlightWords = (props) => {
33
- const flags = getRegexFlags(props.ignoreCase, props.matchAll);
34
- const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
35
- const spans = [...props.text.matchAll(regex)].map((match) => ({
36
- start: match.index || 0,
37
- end: (match.index || 0) + match[0].length
38
- }));
39
- return normalizeSpan(spans, props.text.length).map((chunk) => ({
40
- text: props.text.slice(chunk.start, chunk.end),
41
- match: !!chunk.match
42
- }));
43
- };
44
9
  const useHighlight = (props) => {
45
- const { text, query } = props;
46
- return react.useMemo(() => highlightWords({ text, query }), [text, query]);
10
+ return react.useMemo(() => highlightWord.highlightWord(props), [props]);
47
11
  };
48
12
 
49
13
  exports.useHighlight = useHighlight;
package/dist/components/highlight/use-highlight.d.cts CHANGED
@@ -1,30 +1,5 @@
1
- export interface RegexOptions {
2
- /**
3
- * Whether to ignore case while matching
4
- */
5
- ignoreCase?: boolean;
6
- /**
7
- * Whether to match multiple instances of the query
8
- */
9
- matchAll?: boolean;
10
- }
11
- export interface UseHighlightProps extends RegexOptions {
12
- /**
13
- * The text to highlight
14
- */
15
- text: string;
16
- /**
17
- * The query to highlight in the text
18
- */
19
- query: string | string[];
20
- }
21
- export interface HighlightChunk {
22
- text: string;
23
- match: boolean;
24
- }
25
- export interface HighlightSpan {
26
- start: number;
27
- end: number;
28
- match?: boolean;
1
+ import { HighlightChunk, HighlightWordProps } from '@zag-js/highlight-word';
2
+ export interface UseHighlightProps extends HighlightWordProps {
29
3
  }
30
4
  export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];
5
+ export type { HighlightChunk };
package/dist/components/highlight/use-highlight.d.ts CHANGED
@@ -1,30 +1,5 @@
1
- export interface RegexOptions {
2
- /**
3
- * Whether to ignore case while matching
4
- */
5
- ignoreCase?: boolean;
6
- /**
7
- * Whether to match multiple instances of the query
8
- */
9
- matchAll?: boolean;
10
- }
11
- export interface UseHighlightProps extends RegexOptions {
12
- /**
13
- * The text to highlight
14
- */
15
- text: string;
16
- /**
17
- * The query to highlight in the text
18
- */
19
- query: string | string[];
20
- }
21
- export interface HighlightChunk {
22
- text: string;
23
- match: boolean;
24
- }
25
- export interface HighlightSpan {
26
- start: number;
27
- end: number;
28
- match?: boolean;
1
+ import { HighlightChunk, HighlightWordProps } from '@zag-js/highlight-word';
2
+ export interface UseHighlightProps extends HighlightWordProps {
29
3
  }
30
4
  export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];
5
+ export type { HighlightChunk };
package/dist/components/highlight/use-highlight.js CHANGED
@@ -1,45 +1,9 @@
1
1
  'use client';
2
+ import { highlightWord } from '@zag-js/highlight-word';
2
3
  import { useMemo } from 'react';
3
4
 
4
- const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
5
- const buildRegex = (queryProp, flags) => {
6
- const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
7
- return new RegExp(`(${query.join("|")})`, flags);
8
- };
9
- const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
10
- const normalizeSpan = (spans, len) => {
11
- const result = [];
12
- const append = (start, end, match) => {
13
- if (end - start > 0) result.push({ start, end, match });
14
- };
15
- if (spans.length === 0) {
16
- append(0, len, false);
17
- } else {
18
- let lastIndex = 0;
19
- for (const chunk of spans) {
20
- append(lastIndex, chunk.start, false);
21
- append(chunk.start, chunk.end, true);
22
- lastIndex = chunk.end;
23
- }
24
- append(lastIndex, len, false);
25
- }
26
- return result;
27
- };
28
- const highlightWords = (props) => {
29
- const flags = getRegexFlags(props.ignoreCase, props.matchAll);
30
- const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
31
- const spans = [...props.text.matchAll(regex)].map((match) => ({
32
- start: match.index || 0,
33
- end: (match.index || 0) + match[0].length
34
- }));
35
- return normalizeSpan(spans, props.text.length).map((chunk) => ({
36
- text: props.text.slice(chunk.start, chunk.end),
37
- match: !!chunk.match
38
- }));
39
- };
40
5
  const useHighlight = (props) => {
41
- const { text, query } = props;
42
- return useMemo(() => highlightWords({ text, query }), [text, query]);
6
+ return useMemo(() => highlightWord(props), [props]);
43
7
  };
44
8
 
45
9
  export { useHighlight };
package/dist/components/index.cjs CHANGED
@@ -223,6 +223,7 @@ const fileUpload$1 = require('./file-upload/file-upload.cjs');
223
223
  const formatByte = require('./format/format-byte.cjs');
224
224
  const formatNumber = require('./format/format-number.cjs');
225
225
  const format = require('./format/format.cjs');
226
+ const frame = require('./frame/frame.cjs');
226
227
  const highlight = require('./highlight/highlight.cjs');
227
228
  const useHighlight = require('./highlight/use-highlight.cjs');
228
229
  const hoverCardArrow = require('./hover-card/hover-card-arrow.cjs');
@@ -509,12 +510,14 @@ const timePickerTrigger = require('./time-picker/time-picker-trigger.cjs');
509
510
  const useTimePicker = require('./time-picker/use-time-picker.cjs');
510
511
  const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
511
512
  const timePicker = require('./time-picker/time-picker.cjs');
512
- const timerContext = require('./timer/timer-context.cjs');
513
513
  const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
514
+ const timerArea = require('./timer/timer-area.cjs');
515
+ const timerContext = require('./timer/timer-context.cjs');
516
+ const timerControl = require('./timer/timer-control.cjs');
514
517
  const timerItem = require('./timer/timer-item.cjs');
515
- const timerSeparator = require('./timer/timer-separator.cjs');
516
518
  const timerRoot = require('./timer/timer-root.cjs');
517
519
  const timerRootProvider = require('./timer/timer-root-provider.cjs');
520
+ const timerSeparator = require('./timer/timer-separator.cjs');
518
521
  const useTimer = require('./timer/use-timer.cjs');
519
522
  const useTimerContext = require('./timer/use-timer-context.cjs');
520
523
  const timer = require('./timer/timer.cjs');
@@ -820,6 +823,7 @@ exports.FileUpload = fileUpload$1;
820
823
  exports.FormatByte = formatByte.FormatByte;
821
824
  exports.FormatNumber = formatNumber.FormatNumber;
822
825
  exports.Format = format;
826
+ exports.Frame = frame.Frame;
823
827
  exports.Highlight = highlight.Highlight;
824
828
  exports.useHighlight = useHighlight.useHighlight;
825
829
  exports.HoverCardArrow = hoverCardArrow.HoverCardArrow;
@@ -1107,12 +1111,14 @@ exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
1107
1111
  exports.useTimePicker = useTimePicker.useTimePicker;
1108
1112
  exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
1109
1113
  exports.TimePicker = timePicker;
1110
- exports.TimerContext = timerContext.TimerContext;
1111
1114
  exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
1115
+ exports.TimerArea = timerArea.TimerArea;
1116
+ exports.TimerContext = timerContext.TimerContext;
1117
+ exports.TimerControl = timerControl.TimerControl;
1112
1118
  exports.TimerItem = timerItem.TimerItem;
1113
- exports.TimerSeparator = timerSeparator.TimerSeparator;
1114
1119
  exports.TimerRoot = timerRoot.TimerRoot;
1115
1120
  exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
1121
+ exports.TimerSeparator = timerSeparator.TimerSeparator;
1116
1122
  exports.useTimer = useTimer.useTimer;
1117
1123
  exports.useTimerContext = useTimerContext.useTimerContext;
1118
1124
  exports.Timer = timer;
package/dist/components/index.d.cts CHANGED
@@ -14,6 +14,7 @@ export * from './field';
14
14
  export * from './fieldset';
15
15
  export * from './file-upload';
16
16
  export * from './format';
17
+ export * from './frame';
17
18
  export * from './highlight';
18
19
  export * from './hover-card';
19
20
  export * from './menu';
package/dist/components/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export * from './field';
14
14
  export * from './fieldset';
15
15
  export * from './file-upload';
16
16
  export * from './format';
17
+ export * from './frame';
17
18
  export * from './highlight';
18
19
  export * from './hover-card';
19
20
  export * from './menu';
package/dist/components/index.js CHANGED
@@ -234,6 +234,7 @@ export { FormatByte } from './format/format-byte.js';
234
234
  export { FormatNumber } from './format/format-number.js';
235
235
  import * as format from './format/format.js';
236
236
  export { format as Format };
237
+ export { Frame } from './frame/frame.js';
237
238
  export { Highlight } from './highlight/highlight.js';
238
239
  export { useHighlight } from './highlight/use-highlight.js';
239
240
  export { HoverCardArrow } from './hover-card/hover-card-arrow.js';
@@ -540,12 +541,14 @@ export { useTimePicker } from './time-picker/use-time-picker.js';
540
541
  export { useTimePickerContext } from './time-picker/use-time-picker-context.js';
541
542
  import * as timePicker from './time-picker/time-picker.js';
542
543
  export { timePicker as TimePicker };
543
- export { TimerContext } from './timer/timer-context.js';
544
544
  export { TimerActionTrigger } from './timer/timer-action-trigger.js';
545
+ export { TimerArea } from './timer/timer-area.js';
546
+ export { TimerContext } from './timer/timer-context.js';
547
+ export { TimerControl } from './timer/timer-control.js';
545
548
  export { TimerItem } from './timer/timer-item.js';
546
- export { TimerSeparator } from './timer/timer-separator.js';
547
549
  export { TimerRoot } from './timer/timer-root.js';
548
550
  export { TimerRootProvider } from './timer/timer-root-provider.js';
551
+ export { TimerSeparator } from './timer/timer-separator.js';
549
552
  export { useTimer } from './timer/use-timer.js';
550
553
  export { useTimerContext } from './timer/use-timer-context.js';
551
554
  import * as timer from './timer/timer.js';
package/dist/components/timer/index.cjs CHANGED
@@ -2,24 +2,28 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const timerContext = require('./timer-context.cjs');
6
5
  const timerActionTrigger = require('./timer-action-trigger.cjs');
6
+ const timerArea = require('./timer-area.cjs');
7
+ const timerContext = require('./timer-context.cjs');
8
+ const timerControl = require('./timer-control.cjs');
7
9
  const timerItem = require('./timer-item.cjs');
8
- const timerSeparator = require('./timer-separator.cjs');
9
10
  const timerRoot = require('./timer-root.cjs');
10
11
  const timerRootProvider = require('./timer-root-provider.cjs');
12
+ const timerSeparator = require('./timer-separator.cjs');
11
13
  const useTimer = require('./use-timer.cjs');
12
14
  const useTimerContext = require('./use-timer-context.cjs');
13
15
  const timer = require('./timer.cjs');
14
16
 
15
17
 
16
18
 
17
- exports.TimerContext = timerContext.TimerContext;
18
19
  exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
20
+ exports.TimerArea = timerArea.TimerArea;
21
+ exports.TimerContext = timerContext.TimerContext;
22
+ exports.TimerControl = timerControl.TimerControl;
19
23
  exports.TimerItem = timerItem.TimerItem;
20
- exports.TimerSeparator = timerSeparator.TimerSeparator;
21
24
  exports.TimerRoot = timerRoot.TimerRoot;
22
25
  exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
26
+ exports.TimerSeparator = timerSeparator.TimerSeparator;
23
27
  exports.useTimer = useTimer.useTimer;
24
28
  exports.useTimerContext = useTimerContext.useTimerContext;
25
29
  exports.Timer = timer;
package/dist/components/timer/index.d.cts CHANGED
@@ -1,9 +1,11 @@
1
- export { TimerContext, type TimerContextProps, } from './timer-context';
2
1
  export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
3
- export { TimerItem, type TimerItemProps, type TimerItemBaseProps, } from './timer-item';
4
- export { TimerSeparator, type TimerSeparatorProps, type TimerSeparatorBaseProps, } from './timer-separator';
5
- export { TimerRoot, type TimerRootProps, type TimerRootBaseProps, } from './timer-root';
6
- export { TimerRootProvider, type TimerRootProviderProps, type TimerRootProviderBaseProps, } from './timer-root-provider';
2
+ export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
3
+ export { TimerContext, type TimerContextProps } from './timer-context';
4
+ export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
5
+ export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
6
+ export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
7
+ export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
8
+ export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';
7
9
  export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
8
10
  export { useTimerContext, type UseTimerContext } from './use-timer-context';
9
11
  export * as Timer from './timer';
package/dist/components/timer/index.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- export { TimerContext, type TimerContextProps, } from './timer-context';
2
1
  export { TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from './timer-action-trigger';
3
- export { TimerItem, type TimerItemProps, type TimerItemBaseProps, } from './timer-item';
4
- export { TimerSeparator, type TimerSeparatorProps, type TimerSeparatorBaseProps, } from './timer-separator';
5
- export { TimerRoot, type TimerRootProps, type TimerRootBaseProps, } from './timer-root';
6
- export { TimerRootProvider, type TimerRootProviderProps, type TimerRootProviderBaseProps, } from './timer-root-provider';
2
+ export { TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from './timer-area';
3
+ export { TimerContext, type TimerContextProps } from './timer-context';
4
+ export { TimerControl, type TimerControlBaseProps, type TimerControlProps } from './timer-control';
5
+ export { TimerItem, type TimerItemBaseProps, type TimerItemProps } from './timer-item';
6
+ export { TimerRoot, type TimerRootBaseProps, type TimerRootProps } from './timer-root';
7
+ export { TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from './timer-root-provider';
8
+ export { TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from './timer-separator';
7
9
  export { useTimer, type UseTimerProps, type UseTimerReturn } from './use-timer';
8
10
  export { useTimerContext, type UseTimerContext } from './use-timer-context';
9
11
  export * as Timer from './timer';
package/dist/components/timer/index.js CHANGED
@@ -1,9 +1,11 @@
1
- export { TimerContext } from './timer-context.js';
2
1
  export { TimerActionTrigger } from './timer-action-trigger.js';
2
+ export { TimerArea } from './timer-area.js';
3
+ export { TimerContext } from './timer-context.js';
4
+ export { TimerControl } from './timer-control.js';
3
5
  export { TimerItem } from './timer-item.js';
4
- export { TimerSeparator } from './timer-separator.js';
5
6
  export { TimerRoot } from './timer-root.js';
6
7
  export { TimerRootProvider } from './timer-root-provider.js';
8
+ export { TimerSeparator } from './timer-separator.js';
7
9
  export { useTimer } from './use-timer.js';
8
10
  export { useTimerContext } from './use-timer-context.js';
9
11
  import * as timer from './timer.js';
package/dist/components/timer/timer-area.cjs ADDED
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const jsxRuntime = require('react/jsx-runtime');
7
+ const react$1 = require('@zag-js/react');
8
+ const react = require('react');
9
+ const factory = require('../factory.cjs');
10
+ const useTimerContext = require('./use-timer-context.cjs');
11
+
12
+ const TimerArea = react.forwardRef((props, ref) => {
13
+ const timer = useTimerContext.useTimerContext();
14
+ const mergedProps = react$1.mergeProps(timer.getAreaProps(), props);
15
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
16
+ });
17
+ TimerArea.displayName = "TimerArea";
18
+
19
+ exports.TimerArea = TimerArea;
package/dist/components/timer/timer-area.d.cts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface TimerAreaBaseProps extends PolymorphicProps {
4
+ }
5
+ export interface TimerAreaProps extends HTMLProps<'div'>, TimerAreaBaseProps {
6
+ }
7
+ export declare const TimerArea: ForwardRefExoticComponent<TimerAreaProps & RefAttributes<HTMLDivElement>>;
package/dist/components/timer/timer-area.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface TimerAreaBaseProps extends PolymorphicProps {
4
+ }
5
+ export interface TimerAreaProps extends HTMLProps<'div'>, TimerAreaBaseProps {
6
+ }
7
+ export declare const TimerArea: ForwardRefExoticComponent<TimerAreaProps & RefAttributes<HTMLDivElement>>;
package/dist/components/timer/timer-area.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { mergeProps } from '@zag-js/react';
4
+ import { forwardRef } from 'react';
5
+ import { ark } from '../factory.js';
6
+ import { useTimerContext } from './use-timer-context.js';
7
+
8
+ const TimerArea = forwardRef((props, ref) => {
9
+ const timer = useTimerContext();
10
+ const mergedProps = mergeProps(timer.getAreaProps(), props);
11
+ return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
12
+ });
13
+ TimerArea.displayName = "TimerArea";
14
+
15
+ export { TimerArea };
package/dist/components/timer/timer-control.cjs ADDED
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const jsxRuntime = require('react/jsx-runtime');
7
+ const react$1 = require('@zag-js/react');
8
+ const react = require('react');
9
+ const factory = require('../factory.cjs');
10
+ const useTimerContext = require('./use-timer-context.cjs');
11
+
12
+ const TimerControl = react.forwardRef((props, ref) => {
13
+ const timer = useTimerContext.useTimerContext();
14
+ const mergedProps = react$1.mergeProps(timer.getControlProps(), props);
15
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
16
+ });
17
+ TimerControl.displayName = "TimerControl";
18
+
19
+ exports.TimerControl = TimerControl;
package/dist/components/timer/timer-control.d.cts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface TimerControlBaseProps extends PolymorphicProps {
4
+ }
5
+ export interface TimerControlProps extends HTMLProps<'div'>, TimerControlBaseProps {
6
+ }
7
+ export declare const TimerControl: ForwardRefExoticComponent<TimerControlProps & RefAttributes<HTMLDivElement>>;
package/dist/components/timer/timer-control.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface TimerControlBaseProps extends PolymorphicProps {
4
+ }
5
+ export interface TimerControlProps extends HTMLProps<'div'>, TimerControlBaseProps {
6
+ }
7
+ export declare const TimerControl: ForwardRefExoticComponent<TimerControlProps & RefAttributes<HTMLDivElement>>;
package/dist/components/timer/timer-control.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { mergeProps } from '@zag-js/react';
4
+ import { forwardRef } from 'react';
5
+ import { ark } from '../factory.js';
6
+ import { useTimerContext } from './use-timer-context.js';
7
+
8
+ const TimerControl = forwardRef((props, ref) => {
9
+ const timer = useTimerContext();
10
+ const mergedProps = mergeProps(timer.getControlProps(), props);
11
+ return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
12
+ });
13
+ TimerControl.displayName = "TimerControl";
14
+
15
+ export { TimerControl };
package/dist/components/timer/timer-root.cjs CHANGED
@@ -14,6 +14,7 @@ const useTimerContext = require('./use-timer-context.cjs');
14
14
  const TimerRoot = react.forwardRef((props, ref) => {
15
15
  const [useTimerProps, localProps] = createSplitProps.createSplitProps()(props, [
16
16
  "id",
17
+ "ids",
17
18
  "autoStart",
18
19
  "interval",
19
20
  "countdown",
package/dist/components/timer/timer-root.js CHANGED
@@ -10,6 +10,7 @@ import { TimerProvider } from './use-timer-context.js';
10
10
  const TimerRoot = forwardRef((props, ref) => {
11
11
  const [useTimerProps, localProps] = createSplitProps()(props, [
12
12
  "id",
13
+ "ids",
13
14
  "autoStart",
14
15
  "interval",
15
16
  "countdown",
package/dist/components/timer/timer.cjs CHANGED
@@ -2,18 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const timerContext = require('./timer-context.cjs');
6
5
  const timerActionTrigger = require('./timer-action-trigger.cjs');
6
+ const timerArea = require('./timer-area.cjs');
7
+ const timerContext = require('./timer-context.cjs');
8
+ const timerControl = require('./timer-control.cjs');
7
9
  const timerItem = require('./timer-item.cjs');
8
- const timerSeparator = require('./timer-separator.cjs');
9
10
  const timerRoot = require('./timer-root.cjs');
10
11
  const timerRootProvider = require('./timer-root-provider.cjs');
12
+ const timerSeparator = require('./timer-separator.cjs');
11
13
 
12
14
 
13
15
 
14
- exports.Context = timerContext.TimerContext;
15
16
  exports.ActionTrigger = timerActionTrigger.TimerActionTrigger;
17
+ exports.Area = timerArea.TimerArea;
18
+ exports.Context = timerContext.TimerContext;
19
+ exports.Control = timerControl.TimerControl;
16
20
  exports.Item = timerItem.TimerItem;
17
- exports.Separator = timerSeparator.TimerSeparator;
18
21
  exports.Root = timerRoot.TimerRoot;
19
22
  exports.RootProvider = timerRootProvider.TimerRootProvider;
23
+ exports.Separator = timerSeparator.TimerSeparator;
package/dist/components/timer/timer.d.cts CHANGED
@@ -1,6 +1,8 @@
1
- export { TimerContext as Context, type TimerContextProps as ContextProps, } from './timer-context';
2
1
  export { TimerActionTrigger as ActionTrigger, type TimerActionTriggerBaseProps as ActionTriggerBaseProps, type TimerActionTriggerProps as ActionTriggerProps, } from './timer-action-trigger';
3
- export { TimerItem as Item, type TimerItemProps as ItemProps, type TimerItemBaseProps as ItemBaseProps, } from './timer-item';
4
- export { TimerSeparator as Separator, type TimerSeparatorProps as SeparatorProps, type TimerSeparatorBaseProps as SeparatorBaseProps, } from './timer-separator';
5
- export { TimerRoot as Root, type TimerRootProps as RootProps, type TimerRootBaseProps as RootBaseProps, } from './timer-root';
2
+ export { TimerArea as Area, type TimerAreaBaseProps as AreaBaseProps, type TimerAreaProps as AreaProps, } from './timer-area';
3
+ export { TimerContext as Context, type TimerContextProps as ContextProps, } from './timer-context';
4
+ export { TimerControl as Control, type TimerControlBaseProps as ControlBaseProps, type TimerControlProps as ControlProps, } from './timer-control';
5
+ export { TimerItem as Item, type TimerItemBaseProps as ItemBaseProps, type TimerItemProps as ItemProps, } from './timer-item';
6
+ export { TimerRoot as Root, type TimerRootBaseProps as RootBaseProps, type TimerRootProps as RootProps, } from './timer-root';
6
7
  export { TimerRootProvider as RootProvider, type TimerRootProviderProps as RootProviderBaseProps, type TimerRootProviderBaseProps as RootProviderProps, } from './timer-root-provider';
8
+ export { TimerSeparator as Separator, type TimerSeparatorBaseProps as SeparatorBaseProps, type TimerSeparatorProps as SeparatorProps, } from './timer-separator';
package/dist/components/timer/timer.d.ts CHANGED
@@ -1,6 +1,8 @@
1
- export { TimerContext as Context, type TimerContextProps as ContextProps, } from './timer-context';
2
1
  export { TimerActionTrigger as ActionTrigger, type TimerActionTriggerBaseProps as ActionTriggerBaseProps, type TimerActionTriggerProps as ActionTriggerProps, } from './timer-action-trigger';
3
- export { TimerItem as Item, type TimerItemProps as ItemProps, type TimerItemBaseProps as ItemBaseProps, } from './timer-item';
4
- export { TimerSeparator as Separator, type TimerSeparatorProps as SeparatorProps, type TimerSeparatorBaseProps as SeparatorBaseProps, } from './timer-separator';
5
- export { TimerRoot as Root, type TimerRootProps as RootProps, type TimerRootBaseProps as RootBaseProps, } from './timer-root';
2
+ export { TimerArea as Area, type TimerAreaBaseProps as AreaBaseProps, type TimerAreaProps as AreaProps, } from './timer-area';
3
+ export { TimerContext as Context, type TimerContextProps as ContextProps, } from './timer-context';
4
+ export { TimerControl as Control, type TimerControlBaseProps as ControlBaseProps, type TimerControlProps as ControlProps, } from './timer-control';
5
+ export { TimerItem as Item, type TimerItemBaseProps as ItemBaseProps, type TimerItemProps as ItemProps, } from './timer-item';
6
+ export { TimerRoot as Root, type TimerRootBaseProps as RootBaseProps, type TimerRootProps as RootProps, } from './timer-root';
6
7
  export { TimerRootProvider as RootProvider, type TimerRootProviderProps as RootProviderBaseProps, type TimerRootProviderBaseProps as RootProviderProps, } from './timer-root-provider';
8
+ export { TimerSeparator as Separator, type TimerSeparatorBaseProps as SeparatorBaseProps, type TimerSeparatorProps as SeparatorProps, } from './timer-separator';
package/dist/components/timer/timer.js CHANGED
@@ -1,6 +1,8 @@
1
- export { TimerContext as Context } from './timer-context.js';
2
1
  export { TimerActionTrigger as ActionTrigger } from './timer-action-trigger.js';
2
+ export { TimerArea as Area } from './timer-area.js';
3
+ export { TimerContext as Context } from './timer-context.js';
4
+ export { TimerControl as Control } from './timer-control.js';
3
5
  export { TimerItem as Item } from './timer-item.js';
4
- export { TimerSeparator as Separator } from './timer-separator.js';
5
6
  export { TimerRoot as Root } from './timer-root.js';
6
7
  export { TimerRootProvider as RootProvider } from './timer-root-provider.js';
8
+ export { TimerSeparator as Separator } from './timer-separator.js';
package/dist/index.cjs CHANGED
@@ -223,6 +223,7 @@ const fileUpload$1 = require('./components/file-upload/file-upload.cjs');
223
223
  const formatByte = require('./components/format/format-byte.cjs');
224
224
  const formatNumber = require('./components/format/format-number.cjs');
225
225
  const format = require('./components/format/format.cjs');
226
+ const frame = require('./components/frame/frame.cjs');
226
227
  const highlight = require('./components/highlight/highlight.cjs');
227
228
  const useHighlight = require('./components/highlight/use-highlight.cjs');
228
229
  const hoverCardArrow = require('./components/hover-card/hover-card-arrow.cjs');
@@ -509,12 +510,14 @@ const timePickerTrigger = require('./components/time-picker/time-picker-trigger.
509
510
  const useTimePicker = require('./components/time-picker/use-time-picker.cjs');
510
511
  const useTimePickerContext = require('./components/time-picker/use-time-picker-context.cjs');
511
512
  const timePicker = require('./components/time-picker/time-picker.cjs');
512
- const timerContext = require('./components/timer/timer-context.cjs');
513
513
  const timerActionTrigger = require('./components/timer/timer-action-trigger.cjs');
514
+ const timerArea = require('./components/timer/timer-area.cjs');
515
+ const timerContext = require('./components/timer/timer-context.cjs');
516
+ const timerControl = require('./components/timer/timer-control.cjs');
514
517
  const timerItem = require('./components/timer/timer-item.cjs');
515
- const timerSeparator = require('./components/timer/timer-separator.cjs');
516
518
  const timerRoot = require('./components/timer/timer-root.cjs');
517
519
  const timerRootProvider = require('./components/timer/timer-root-provider.cjs');
520
+ const timerSeparator = require('./components/timer/timer-separator.cjs');
518
521
  const useTimer = require('./components/timer/use-timer.cjs');
519
522
  const useTimerContext = require('./components/timer/use-timer-context.cjs');
520
523
  const timer = require('./components/timer/timer.cjs');
@@ -824,6 +827,7 @@ exports.FileUpload = fileUpload$1;
824
827
  exports.FormatByte = formatByte.FormatByte;
825
828
  exports.FormatNumber = formatNumber.FormatNumber;
826
829
  exports.Format = format;
830
+ exports.Frame = frame.Frame;
827
831
  exports.Highlight = highlight.Highlight;
828
832
  exports.useHighlight = useHighlight.useHighlight;
829
833
  exports.HoverCardArrow = hoverCardArrow.HoverCardArrow;
@@ -1111,12 +1115,14 @@ exports.TimePickerTrigger = timePickerTrigger.TimePickerTrigger;
1111
1115
  exports.useTimePicker = useTimePicker.useTimePicker;
1112
1116
  exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
1113
1117
  exports.TimePicker = timePicker;
1114
- exports.TimerContext = timerContext.TimerContext;
1115
1118
  exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
1119
+ exports.TimerArea = timerArea.TimerArea;
1120
+ exports.TimerContext = timerContext.TimerContext;
1121
+ exports.TimerControl = timerControl.TimerControl;
1116
1122
  exports.TimerItem = timerItem.TimerItem;
1117
- exports.TimerSeparator = timerSeparator.TimerSeparator;
1118
1123
  exports.TimerRoot = timerRoot.TimerRoot;
1119
1124
  exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
1125
+ exports.TimerSeparator = timerSeparator.TimerSeparator;
1120
1126
  exports.useTimer = useTimer.useTimer;
1121
1127
  exports.useTimerContext = useTimerContext.useTimerContext;
1122
1128
  exports.Timer = timer;
package/dist/index.js CHANGED
@@ -234,6 +234,7 @@ export { FormatByte } from './components/format/format-byte.js';
234
234
  export { FormatNumber } from './components/format/format-number.js';
235
235
  import * as format from './components/format/format.js';
236
236
  export { format as Format };
237
+ export { Frame } from './components/frame/frame.js';
237
238
  export { Highlight } from './components/highlight/highlight.js';
238
239
  export { useHighlight } from './components/highlight/use-highlight.js';
239
240
  export { HoverCardArrow } from './components/hover-card/hover-card-arrow.js';
@@ -540,12 +541,14 @@ export { useTimePicker } from './components/time-picker/use-time-picker.js';
540
541
  export { useTimePickerContext } from './components/time-picker/use-time-picker-context.js';
541
542
  import * as timePicker from './components/time-picker/time-picker.js';
542
543
  export { timePicker as TimePicker };
543
- export { TimerContext } from './components/timer/timer-context.js';
544
544
  export { TimerActionTrigger } from './components/timer/timer-action-trigger.js';
545
+ export { TimerArea } from './components/timer/timer-area.js';
546
+ export { TimerContext } from './components/timer/timer-context.js';
547
+ export { TimerControl } from './components/timer/timer-control.js';
545
548
  export { TimerItem } from './components/timer/timer-item.js';
546
- export { TimerSeparator } from './components/timer/timer-separator.js';
547
549
  export { TimerRoot } from './components/timer/timer-root.js';
548
550
  export { TimerRootProvider } from './components/timer/timer-root-provider.js';
551
+ export { TimerSeparator } from './components/timer/timer-separator.js';
549
552
  export { useTimer } from './components/timer/use-timer.js';
550
553
  export { useTimerContext } from './components/timer/use-timer-context.js';
551
554
  import * as timer from './components/timer/timer.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
- "version": "3.11.0",
3
+ "version": "3.12.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",
@@ -17,6 +17,7 @@
17
17
  "field",
18
18
  "fieldset",
19
19
  "file upload",
20
+ "frame",
20
21
  "hover card",
21
22
  "menu",
22
23
  "number input",
@@ -131,60 +132,61 @@
131
132
  "sideEffects": false,
132
133
  "dependencies": {
133
134
  "@internationalized/date": "3.5.5",
134
- "@zag-js/accordion": "0.66.1",
135
- "@zag-js/anatomy": "0.66.1",
136
- "@zag-js/avatar": "0.66.1",
137
- "@zag-js/carousel": "0.66.1",
138
- "@zag-js/checkbox": "0.66.1",
139
- "@zag-js/clipboard": "0.66.1",
140
- "@zag-js/collapsible": "0.66.1",
141
- "@zag-js/color-picker": "0.66.1",
142
- "@zag-js/color-utils": "0.66.1",
143
- "@zag-js/combobox": "0.66.1",
144
- "@zag-js/core": "0.66.1",
145
- "@zag-js/date-picker": "0.66.1",
146
- "@zag-js/date-utils": "0.66.1",
147
- "@zag-js/dialog": "0.66.1",
148
- "@zag-js/dom-query": "0.66.1",
149
- "@zag-js/editable": "0.66.1",
150
- "@zag-js/file-upload": "0.66.1",
151
- "@zag-js/file-utils": "0.66.1",
152
- "@zag-js/hover-card": "0.66.1",
153
- "@zag-js/i18n-utils": "0.66.1",
154
- "@zag-js/menu": "0.66.1",
155
- "@zag-js/number-input": "0.66.1",
156
- "@zag-js/pagination": "0.66.1",
157
- "@zag-js/pin-input": "0.66.1",
158
- "@zag-js/popover": "0.66.1",
159
- "@zag-js/presence": "0.66.1",
160
- "@zag-js/progress": "0.66.1",
161
- "@zag-js/qr-code": "0.66.1",
162
- "@zag-js/radio-group": "0.66.1",
163
- "@zag-js/rating-group": "0.66.1",
164
- "@zag-js/react": "0.66.1",
165
- "@zag-js/select": "0.66.1",
166
- "@zag-js/signature-pad": "0.66.1",
167
- "@zag-js/slider": "0.66.1",
168
- "@zag-js/splitter": "0.66.1",
169
- "@zag-js/steps": "0.66.1",
170
- "@zag-js/switch": "0.66.1",
171
- "@zag-js/tabs": "0.66.1",
172
- "@zag-js/tags-input": "0.66.1",
173
- "@zag-js/time-picker": "0.66.1",
174
- "@zag-js/timer": "0.66.1",
175
- "@zag-js/toast": "0.66.1",
176
- "@zag-js/toggle-group": "0.66.1",
177
- "@zag-js/tooltip": "0.66.1",
178
- "@zag-js/tree-view": "0.66.1",
179
- "@zag-js/types": "0.66.1"
135
+ "@zag-js/accordion": "0.68.0",
136
+ "@zag-js/anatomy": "0.68.0",
137
+ "@zag-js/avatar": "0.68.0",
138
+ "@zag-js/carousel": "0.68.0",
139
+ "@zag-js/checkbox": "0.68.0",
140
+ "@zag-js/clipboard": "0.68.0",
141
+ "@zag-js/collapsible": "0.68.0",
142
+ "@zag-js/color-picker": "0.68.0",
143
+ "@zag-js/color-utils": "0.68.0",
144
+ "@zag-js/combobox": "0.68.0",
145
+ "@zag-js/core": "0.68.0",
146
+ "@zag-js/date-picker": "0.68.0",
147
+ "@zag-js/date-utils": "0.68.0",
148
+ "@zag-js/dialog": "0.68.0",
149
+ "@zag-js/dom-query": "0.68.0",
150
+ "@zag-js/editable": "0.68.0",
151
+ "@zag-js/file-upload": "0.68.0",
152
+ "@zag-js/file-utils": "0.68.0",
153
+ "@zag-js/highlight-word": "0.68.0",
154
+ "@zag-js/hover-card": "0.68.0",
155
+ "@zag-js/i18n-utils": "0.68.0",
156
+ "@zag-js/menu": "0.68.0",
157
+ "@zag-js/number-input": "0.68.0",
158
+ "@zag-js/pagination": "0.68.0",
159
+ "@zag-js/pin-input": "0.68.0",
160
+ "@zag-js/popover": "0.68.0",
161
+ "@zag-js/presence": "0.68.0",
162
+ "@zag-js/progress": "0.68.0",
163
+ "@zag-js/qr-code": "0.68.0",
164
+ "@zag-js/radio-group": "0.68.0",
165
+ "@zag-js/rating-group": "0.68.0",
166
+ "@zag-js/react": "0.68.0",
167
+ "@zag-js/select": "0.68.0",
168
+ "@zag-js/signature-pad": "0.68.0",
169
+ "@zag-js/slider": "0.68.0",
170
+ "@zag-js/splitter": "0.68.0",
171
+ "@zag-js/steps": "0.68.0",
172
+ "@zag-js/switch": "0.68.0",
173
+ "@zag-js/tabs": "0.68.0",
174
+ "@zag-js/tags-input": "0.68.0",
175
+ "@zag-js/time-picker": "0.68.0",
176
+ "@zag-js/timer": "0.68.0",
177
+ "@zag-js/toast": "0.68.0",
178
+ "@zag-js/toggle-group": "0.68.0",
179
+ "@zag-js/tooltip": "0.68.0",
180
+ "@zag-js/tree-view": "0.68.0",
181
+ "@zag-js/types": "0.68.0"
180
182
  },
181
183
  "devDependencies": {
182
- "@biomejs/biome": "1.8.3",
184
+ "@biomejs/biome": "1.9.0",
183
185
  "@release-it/keep-a-changelog": "5.0.0",
184
- "@storybook/addon-a11y": "8.2.9",
185
- "@storybook/addon-essentials": "8.2.9",
186
- "@storybook/react-vite": "8.2.9",
187
- "@storybook/react": "8.2.9",
186
+ "@storybook/addon-a11y": "8.3.0",
187
+ "@storybook/addon-essentials": "8.3.0",
188
+ "@storybook/react-vite": "8.3.0",
189
+ "@storybook/react": "8.3.0",
188
190
  "@testing-library/dom": "10.4.0",
189
191
  "@testing-library/jest-dom": "6.5.0",
190
192
  "@testing-library/react": "16.0.1",
@@ -193,21 +195,21 @@
193
195
  "@types/react": "18.3.5",
194
196
  "@types/react-dom": "18.3.0",
195
197
  "@vitejs/plugin-react": "4.3.1",
196
- "@zag-js/stringify-state": "0.66.1",
198
+ "@zag-js/stringify-state": "0.68.0",
197
199
  "globby": "14.0.2",
198
200
  "jsdom": "25.0.0",
199
- "lucide-react": "0.439.0",
201
+ "lucide-react": "0.441.0",
200
202
  "react": "18.3.1",
201
203
  "react-dom": "18.3.1",
202
204
  "react-frame-component": "5.2.7",
203
205
  "react-hook-form": "7.53.0",
204
206
  "release-it": "17.6.0",
205
207
  "resize-observer-polyfill": "1.5.1",
206
- "storybook": "8.2.9",
207
- "typescript": "5.5.4",
208
- "vite": "5.4.3",
208
+ "storybook": "8.3.0",
209
+ "typescript": "5.6.2",
210
+ "vite": "5.4.5",
209
211
  "vite-plugin-dts": "4.2.1",
210
- "vitest": "2.0.5",
212
+ "vitest": "2.1.1",
211
213
  "vitest-axe": "1.0.0-pre.3"
212
214
  },
213
215
  "peerDependencies": {