@ark-ui/solid 3.11.0 → 3.12.1

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ var domQuery = require('@zag-js/dom-query');
 var anatomy = require('@zag-js/anatomy');
 var fileUpload$1 = require('@zag-js/file-upload');
 var i18nUtils = require('@zag-js/i18n-utils');
+var highlightWord = require('@zag-js/highlight-word');
 var hoverCard$1 = require('@zag-js/hover-card');
 var menu$1 = require('@zag-js/menu');
 var numberInput$1 = require('@zag-js/number-input');
@@ -33,17 +34,17 @@ var select$1 = require('@zag-js/select');
 var signaturePad$1 = require('@zag-js/signature-pad');
 var slider$1 = require('@zag-js/slider');
 var splitter$1 = require('@zag-js/splitter');
+var steps$1 = require('@zag-js/steps');
 var zagSwitch = require('@zag-js/switch');
 var tabs$1 = require('@zag-js/tabs');
 var tagsInput$1 = require('@zag-js/tags-input');
 var date = require('@internationalized/date');
 var timePicker$1 = require('@zag-js/time-picker');
+var timer$1 = require('@zag-js/timer');
 var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
 var tooltip$1 = require('@zag-js/tooltip');
 var treeView$1 = require('@zag-js/tree-view');
-var timer$1 = require('@zag-js/timer');
-var steps$1 = require('@zag-js/steps');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -89,16 +90,16 @@ var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select$1);
 var signaturePad__namespace = /*#__PURE__*/_interopNamespaceDefault(signaturePad$1);
 var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider$1);
 var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter$1);
+var steps__namespace = /*#__PURE__*/_interopNamespaceDefault(steps$1);
 var zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
 var tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs$1);
 var tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput$1);
 var timePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(timePicker$1);
+var timer__namespace = /*#__PURE__*/_interopNamespaceDefault(timer$1);
 var toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast$1);
 var toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup$1);
 var tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip$1);
 var treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView$1);
-var timer__namespace = /*#__PURE__*/_interopNamespaceDefault(timer$1);
-var steps__namespace = /*#__PURE__*/_interopNamespaceDefault(steps$1);
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -209,7 +210,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   })
 });
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$7 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
@@ -226,7 +227,7 @@ const EnvironmentProvider = props => {
           return !props.value;
         },
         get children() {
-          var _el$ = _tmpl$$6();
+          var _el$ = _tmpl$$7();
           web.use(setSpanRef, _el$);
           return _el$;
         }
@@ -2002,7 +2003,7 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$6 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
@@ -2013,7 +2014,7 @@ const DatePickerMonthSelect = props => {
           return api().getMonths();
         },
         children: month => (() => {
-          var _el$ = _tmpl$$5();
+          var _el$ = _tmpl$$6();
           web.insert(_el$, () => month.label);
           web.effect(() => _el$.value = month.value);
           return _el$;
@@ -2281,36 +2282,26 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
-      return web.createComponent(solidJs.For, {
+      return web.createComponent(solidJs.Index, {
         get each() {
-          return getYearsRange({
-            from: 1_000,
-            to: 4_000
-          });
+          return api().getYears();
         },
         children: year => (() => {
-          var _el$ = _tmpl$$4();
-          _el$.value = year;
-          web.insert(_el$, year);
+          var _el$ = _tmpl$$5();
+          web.insert(_el$, () => year().label);
+          web.effect(() => _el$.value = year().value);
           return _el$;
         })()
       });
     }
   }));
 };
-function getYearsRange(range) {
-  const years = [];
-  for (let year = range.from; year <= range.to; year += 1) {
-    years.push(year);
-  }
-  return years;
-}
 
 var datePicker = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2828,48 +2819,132 @@ var format = /*#__PURE__*/Object.freeze({
   Number: FormatNumber
 });
 
-const escapeRegexp = term => term.replace(/[|\\{}()[\]^$+*?.-]/g, char => `\\${char}`);
-const buildRegex = (queryProp, flags) => {
-  const query = queryProp.filter(Boolean).map(text => escapeRegexp(text));
-  return new RegExp(`(${query.join('|')})`, flags);
+const isRefFn = ref => typeof ref === 'function';
+function setRef(ref, value) {
+  if (isRefFn(ref)) {
+    ref(value);
+  }
+}
+function composeRefs(...refs) {
+  return node => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+
+const FrameContent = props => {
+  const {
+    onMount,
+    onUnmount,
+    children
+  } = props;
+  solidJs.createEffect(() => {
+    onMount?.();
+    solidJs.onCleanup(() => {
+      onUnmount?.();
+    });
+  });
+  return children;
 };
-const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? 'i' : ''}${matchAll ? 'g' : ''}`;
-const normalizeSpan = (spans, len) => {
-  const result = [];
-  const append = (start, end, match) => {
-    if (end - start > 0) result.push({
-      start,
-      end,
-      match
+
+var _tmpl$$4 = /*#__PURE__*/web.template(`<iframe>`);
+const resetStyle = '<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>';
+const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
+function getMountNode(frame) {
+  const doc = frame.contentWindow?.document;
+  if (!doc) return null;
+  return doc.body.querySelector('.frame-root') || doc.body;
+}
+const Frame = props => {
+  const [frameProps, localProps] = solidJs.splitProps(props, ['children', 'head', 'onMount', 'onUnmount', 'srcdoc']);
+  const srcdoc = solidJs.createMemo(() => frameProps.srcdoc ?? initialSrcDoc);
+  const [frameRef, setFrameRef] = solidJs.createSignal(null);
+  const [mountNode, setMountNode] = solidJs.createSignal(null);
+  solidJs.createEffect(() => {
+    const frame = frameRef();
+    if (!frame) return;
+    const doc = frame.contentWindow?.document;
+    if (!doc) return;
+    doc.open();
+    doc.write(srcdoc());
+    doc.close();
+    setMountNode(getMountNode(frame));
+  });
+  solidJs.createEffect(() => {
+    const frame = frameRef();
+    if (!frame || !frame.contentDocument) return;
+    const win = frame.contentWindow;
+    if (!win) return;
+    const node = getMountNode(frame);
+    if (!node) return;
+    const exec = () => {
+      const rootEl = frame.contentDocument?.documentElement;
+      if (!rootEl) return;
+      frame.style.setProperty('--width', `${node.scrollWidth}px`);
+      frame.style.setProperty('--height', `${node.scrollHeight}px`);
+    };
+    const resizeObserver = new win.ResizeObserver(exec);
+    exec();
+    if (frame.contentDocument) {
+      resizeObserver.observe(node);
+    }
+    solidJs.onCleanup(() => {
+      resizeObserver.disconnect();
     });
-  };
-  if (spans.length === 0) {
-    append(0, len, false);
-  } else {
-    let lastIndex = 0;
-    for (const chunk of spans) {
-      append(lastIndex, chunk.start, false);
-      append(chunk.start, chunk.end, true);
-      lastIndex = chunk.end;
-    }
-    append(lastIndex, len, false);
-  }
-  return result;
-};
-const highlightWords = props => {
-  const flags = getRegexFlags(props.ignoreCase, props.matchAll);
-  const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
-  const spans = [...props.text.matchAll(regex)].map(match => ({
-    start: match.index || 0,
-    end: (match.index || 0) + match[0].length
-  }));
-  return normalizeSpan(spans, props.text.length).map(chunk => ({
-    text: props.text.slice(chunk.start, chunk.end),
-    match: !!chunk.match
-  }));
+  });
+  return web.createComponent(EnvironmentProvider, {
+    value: () => frameRef()?.contentDocument ?? document,
+    get children() {
+      var _el$ = _tmpl$$4();
+      var _ref$ = composeRefs(setFrameRef, localProps.ref);
+      typeof _ref$ === "function" && web.use(_ref$, _el$);
+      web.spread(_el$, localProps, false, true);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return mountNode();
+        },
+        children: node => web.createComponent(web.Portal, {
+          get mount() {
+            return node();
+          },
+          get children() {
+            return web.createComponent(FrameContent, {
+              get onMount() {
+                return frameProps.onMount;
+              },
+              get onUnmount() {
+                return frameProps.onUnmount;
+              },
+              get children() {
+                return frameProps.children;
+              }
+            });
+          }
+        })
+      }), null);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return mountNode();
+        },
+        get children() {
+          return web.createComponent(web.Portal, {
+            get mount() {
+              return frameRef().contentDocument.head;
+            },
+            get children() {
+              return frameProps.head;
+            }
+          });
+        }
+      }), null);
+      return _el$;
+    }
+  });
 };
+
 const useHighlight = props => {
-  return solidJs.createMemo(() => highlightWords(props));
+  return solidJs.createMemo(() => highlightWord.highlightWord(props));
 };
 
 var _tmpl$$3 = /*#__PURE__*/web.template(`<mark>`);
@@ -5043,6 +5118,173 @@ var splitter = /*#__PURE__*/Object.freeze({
   RootProvider: SplitterRootProvider
 });
 
+const [StepsProvider, useStepsContext] = createContext({
+  hookName: 'useStepsContext',
+  providerName: '<StepsProvider />'
+});
+
+const StepsCompletedContent = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getContentProps({
+    index: steps().count
+  }), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsContent = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getContentProps(itemProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsContext = props => {
+  const context = useStepsContext();
+  return props.children(context);
+};
+
+const [StepsItemPropsProvider, useStepsItemPropsContext] = createContext({
+  hookName: 'useStepsItemPropsContext',
+  providerName: '<StepsItemPropsProvider />'
+});
+
+const StepsIndicator = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const [StepsItemProvider, useStepsItemContext] = createContext({
+  hookName: 'useStepsItemContext',
+  providerName: '<StepsItem />'
+});
+
+const StepsItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getItemProps(itemProps), localProps);
+  const itemState = solidJs.createMemo(() => steps().getItemState(itemProps));
+  return web.createComponent(StepsItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(StepsItemProvider, {
+        value: itemState,
+        get children() {
+          return web.createComponent(ark.li, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const StepsItemContext = props => {
+  return props.children(useStepsItemContext());
+};
+StepsItemContext.displayName = 'StepsItemContext';
+
+const StepsList = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getListProps(), props);
+  return web.createComponent(ark.ol, mergedProps);
+};
+
+const StepsNextTrigger = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getNextTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const StepsPrevTrigger = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getPrevTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const StepsProgress = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getProgressProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+function useSteps(props = {}) {
+  const environment = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    step: props.defaultStep,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(steps__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => steps__namespace.connect(state, send, solid.normalizeProps));
+}
+
+const StepsRoot = props => {
+  const [useStepsProps, localProps] = createSplitProps()(props, ['defaultStep', 'id', 'ids', 'count', 'linear', 'onStepChange', 'onStepComplete', 'orientation', 'step']);
+  const steps = useSteps(useStepsProps);
+  const mergedProps = solid.mergeProps(() => steps().getRootProps(), localProps);
+  return web.createComponent(StepsProvider, {
+    value: steps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const StepsRootProvider = props => {
+  const [{
+    value: steps
+  }, rootProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => steps().getRootProps(), rootProps);
+  return web.createComponent(StepsProvider, {
+    value: steps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return props.children;
+        }
+      }));
+    }
+  });
+};
+
+const StepsSeparator = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getSeparatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsTrigger = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getTriggerProps(itemProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+var steps = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  CompletedContent: StepsCompletedContent,
+  Content: StepsContent,
+  Context: StepsContext,
+  Indicator: StepsIndicator,
+  Item: StepsItem,
+  ItemContext: StepsItemContext,
+  List: StepsList,
+  NextTrigger: StepsNextTrigger,
+  PrevTrigger: StepsPrevTrigger,
+  Progress: StepsProgress,
+  Root: StepsRoot,
+  RootProvider: StepsRootProvider,
+  Separator: StepsSeparator,
+  Trigger: StepsTrigger
+});
+
 const [SwitchProvider, useSwitchContext] = createContext({
   hookName: 'useSwitchContext',
   providerName: '<SwitchProvider />'
@@ -5608,34 +5850,127 @@ var timePicker = /*#__PURE__*/Object.freeze({
   Trigger: TimePickerTrigger
 });
 
-const createToaster = props => {
-  const machine = toast__namespace.group.machine({
-    id: '1',
-    ...props
-  });
-  const api = toast__namespace.group.connect(machine, machine.send, solid.normalizeProps);
-  return {
-    ...api,
-    machine
-  };
-};
-
-const [ToastProvider, useToastContext] = createContext({
-  hookName: 'useToastContext',
-  providerName: '<ToastProvider />'
+const [TimerProvider, useTimerContext] = createContext({
+  hookName: 'useTimerContext',
+  providerName: '<TimerProvider />'
 });
 
-const ToastActionTrigger = props => {
-  const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().getActionTriggerProps(), props);
+const TimerActionTrigger = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getActionTriggerProps(props), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
-const ToastCloseTrigger = props => {
-  const toast = useToastContext();
-  const mergedProps = solid.mergeProps(() => toast().getCloseTriggerProps(), props);
-  return web.createComponent(ark.button, mergedProps);
-};
+const TimerArea = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getAreaProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TimerContext = props => props.children(useTimerContext());
+
+const TimerControl = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getControlProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TimerItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['type']);
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getItemProps(itemProps), localProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return timer().formattedTime[itemProps.type];
+    }
+  }));
+};
+
+const useTimer = props => {
+  const env = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    getRootNode: env().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(timer__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => timer__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const TimerRoot = props => {
+  const [useTimerProps, localProps] = createSplitProps()(props, ['id', 'ids', 'autoStart', 'interval', 'countdown', 'startMs', 'targetMs', 'onComplete', 'onTick']);
+  const timer = useTimer(useTimerProps);
+  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
+  return web.createComponent(TimerProvider, {
+    value: timer,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TimerRootProvider = props => {
+  const [{
+    value: timer
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
+  return web.createComponent(TimerProvider, {
+    value: timer,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TimerSeparator = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getSeparatorProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+var timer = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ActionTrigger: TimerActionTrigger,
+  Area: TimerArea,
+  Context: TimerContext,
+  Control: TimerControl,
+  Item: TimerItem,
+  Root: TimerRoot,
+  RootProvider: TimerRootProvider,
+  Separator: TimerSeparator
+});
+
+const createToaster = props => {
+  const machine = toast__namespace.group.machine({
+    id: '1',
+    ...props
+  });
+  const api = toast__namespace.group.connect(machine, machine.send, solid.normalizeProps);
+  return {
+    ...api,
+    machine
+  };
+};
+
+const [ToastProvider, useToastContext] = createContext({
+  hookName: 'useToastContext',
+  providerName: '<ToastProvider />'
+});
+
+const ToastActionTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().getActionTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const ToastCloseTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().getCloseTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
 
 const ToastContext = props => props.children(useToastContext());
 
@@ -6099,252 +6434,6 @@ var treeView = /*#__PURE__*/Object.freeze({
   Tree: TreeViewTree
 });
 
-const [TimerProvider, useTimerContext] = createContext({
-  hookName: 'useTimerContext',
-  providerName: '<TimerProvider />'
-});
-
-const TimerContext = props => props.children(useTimerContext());
-
-const TimerActionTrigger = props => {
-  const timer = useTimerContext();
-  const mergedProps = solid.mergeProps(() => timer().getActionTriggerProps(props), props);
-  return web.createComponent(ark.button, mergedProps);
-};
-
-const TimerItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['type']);
-  const timer = useTimerContext();
-  const mergedProps = solid.mergeProps(() => timer().getItemProps(itemProps), localProps);
-  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-    get children() {
-      return timer().formattedTime[itemProps.type];
-    }
-  }));
-};
-
-const TimerSeparator = props => {
-  const timer = useTimerContext();
-  const mergedProps = solid.mergeProps(() => timer().getSeparatorProps(), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const useTimer = props => {
-  const env = useEnvironmentContext();
-  const id = solidJs.createUniqueId();
-  const context = solidJs.createMemo(() => ({
-    id,
-    getRootNode: env().getRootNode,
-    ...props
-  }));
-  const [state, send] = solid.useMachine(timer__namespace.machine(context()), {
-    context
-  });
-  return solidJs.createMemo(() => timer__namespace.connect(state, send, solid.normalizeProps));
-};
-
-const TimerRoot = props => {
-  const [useTimerProps, localProps] = createSplitProps()(props, ['id', 'autoStart', 'interval', 'countdown', 'startMs', 'targetMs', 'onComplete', 'onTick']);
-  const timer = useTimer(useTimerProps);
-  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
-  return web.createComponent(TimerProvider, {
-    value: timer,
-    get children() {
-      return web.createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
-const TimerRootProvider = props => {
-  const [{
-    value: timer
-  }, localProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
-  return web.createComponent(TimerProvider, {
-    value: timer,
-    get children() {
-      return web.createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
-var timer = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ActionTrigger: TimerActionTrigger,
-  Context: TimerContext,
-  Item: TimerItem,
-  Root: TimerRoot,
-  RootProvider: TimerRootProvider,
-  Separator: TimerSeparator
-});
-
-const [StepsProvider, useStepsContext] = createContext({
-  hookName: 'useStepsContext',
-  providerName: '<StepsProvider />'
-});
-
-const StepsCompletedContent = props => {
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getContentProps({
-    index: steps().count
-  }), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const StepsContent = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['index']);
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getContentProps(itemProps), localProps);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const StepsContext = props => {
-  const context = useStepsContext();
-  return props.children(context);
-};
-
-const [StepsItemPropsProvider, useStepsItemPropsContext] = createContext({
-  hookName: 'useStepsItemPropsContext',
-  providerName: '<StepsItemPropsProvider />'
-});
-
-const StepsIndicator = props => {
-  const steps = useStepsContext();
-  const itemProps = useStepsItemPropsContext();
-  const mergedProps = solid.mergeProps(() => steps().getIndicatorProps(itemProps), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const [StepsItemProvider, useStepsItemContext] = createContext({
-  hookName: 'useStepsItemContext',
-  providerName: '<StepsItem />'
-});
-
-const StepsItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['index']);
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getItemProps(itemProps), localProps);
-  const itemState = solidJs.createMemo(() => steps().getItemState(itemProps));
-  return web.createComponent(StepsItemPropsProvider, {
-    value: itemProps,
-    get children() {
-      return web.createComponent(StepsItemProvider, {
-        value: itemState,
-        get children() {
-          return web.createComponent(ark.li, mergedProps);
-        }
-      });
-    }
-  });
-};
-
-const StepsItemContext = props => {
-  return props.children(useStepsItemContext());
-};
-StepsItemContext.displayName = 'StepsItemContext';
-
-const StepsList = props => {
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getListProps(), props);
-  return web.createComponent(ark.ol, mergedProps);
-};
-
-const StepsNextTrigger = props => {
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getNextTriggerProps(), props);
-  return web.createComponent(ark.button, mergedProps);
-};
-
-const StepsPrevTrigger = props => {
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getPrevTriggerProps(), props);
-  return web.createComponent(ark.button, mergedProps);
-};
-
-const StepsProgress = props => {
-  const steps = useStepsContext();
-  const mergedProps = solid.mergeProps(() => steps().getProgressProps(), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-function useSteps(props = {}) {
-  const environment = useEnvironmentContext();
-  const locale = useLocaleContext();
-  const id = solidJs.createUniqueId();
-  const context = solidJs.createMemo(() => ({
-    id,
-    dir: locale().dir,
-    getRootNode: environment().getRootNode,
-    step: props.defaultStep,
-    ...props
-  }));
-  const [state, send] = solid.useMachine(steps__namespace.machine(context()), {
-    context
-  });
-  return solidJs.createMemo(() => steps__namespace.connect(state, send, solid.normalizeProps));
-}
-
-const StepsRoot = props => {
-  const [useStepsProps, localProps] = createSplitProps()(props, ['defaultStep', 'id', 'ids', 'count', 'linear', 'onStepChange', 'onStepComplete', 'orientation', 'step']);
-  const steps = useSteps(useStepsProps);
-  const mergedProps = solid.mergeProps(() => steps().getRootProps(), localProps);
-  return web.createComponent(StepsProvider, {
-    value: steps,
-    get children() {
-      return web.createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
-const StepsRootProvider = props => {
-  const [{
-    value: steps
-  }, rootProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => steps().getRootProps(), rootProps);
-  return web.createComponent(StepsProvider, {
-    value: steps,
-    get children() {
-      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
-        get children() {
-          return props.children;
-        }
-      }));
-    }
-  });
-};
-
-const StepsSeparator = props => {
-  const steps = useStepsContext();
-  const itemProps = useStepsItemPropsContext();
-  const mergedProps = solid.mergeProps(() => steps().getSeparatorProps(itemProps), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
-const StepsTrigger = props => {
-  const steps = useStepsContext();
-  const itemProps = useStepsItemPropsContext();
-  const mergedProps = solid.mergeProps(() => steps().getTriggerProps(itemProps), props);
-  return web.createComponent(ark.button, mergedProps);
-};
-
-var steps = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  CompletedContent: StepsCompletedContent,
-  Content: StepsContent,
-  Context: StepsContext,
-  Indicator: StepsIndicator,
-  Item: StepsItem,
-  ItemContext: StepsItemContext,
-  List: StepsList,
-  NextTrigger: StepsNextTrigger,
-  PrevTrigger: StepsPrevTrigger,
-  Progress: StepsProgress,
-  Root: StepsRoot,
-  RootProvider: StepsRootProvider,
-  Separator: StepsSeparator,
-  Trigger: StepsTrigger
-});
-
 Object.defineProperty(exports, "collapsibleAnatomy", {
   enumerable: true,
   get: function () { return collapsible$1.anatomy; }
@@ -6433,6 +6522,10 @@ Object.defineProperty(exports, "splitterAnatomy", {
   enumerable: true,
   get: function () { return splitter$1.anatomy; }
 });
+Object.defineProperty(exports, "stepsAnatomy", {
+  enumerable: true,
+  get: function () { return steps$1.anatomy; }
+});
 Object.defineProperty(exports, "switchAnatomy", {
   enumerable: true,
   get: function () { return zagSwitch.anatomy; }
@@ -6461,10 +6554,6 @@ Object.defineProperty(exports, "treeViewAnatomy", {
   enumerable: true,
   get: function () { return treeView$1.anatomy; }
 });
-Object.defineProperty(exports, "stepsAnatomy", {
-  enumerable: true,
-  get: function () { return steps$1.anatomy; }
-});
 exports.Accordion = accordion;
 exports.AccordionContext = AccordionContext;
 exports.AccordionItem = AccordionItem;
@@ -6650,6 +6739,7 @@ exports.FileUploadTrigger = FileUploadTrigger;
 exports.Format = format;
 exports.FormatByte = FormatByte;
 exports.FormatNumber = FormatNumber;
+exports.Frame = Frame;
 exports.Highlight = Highlight;
 exports.HoverCard = hoverCard;
 exports.HoverCardArrow = HoverCardArrow;
@@ -6887,7 +6977,9 @@ exports.TimePickerSpacer = TimePickerSpacer;
 exports.TimePickerTrigger = TimePickerTrigger;
 exports.Timer = timer;
 exports.TimerActionTrigger = TimerActionTrigger;
+exports.TimerArea = TimerArea;
 exports.TimerContext = TimerContext;
+exports.TimerControl = TimerControl;
 exports.TimerItem = TimerItem;
 exports.TimerRoot = TimerRoot;
 exports.TimerRootProvider = TimerRootProvider;