mainbase-ui 1.2.5 → 3.36.0

package/dist/esm/components/timeline/index.js

@@ -0,0 +1,3 @@
+export { TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineRootPropsProvider, TimelineSeparator, TimelineTitle, useTimelineStyles } from './timeline.js';
+import * as namespace from './namespace.js';
+export { namespace as Timeline };

package/dist/esm/components/timeline/namespace.js

@@ -0,0 +1 @@
+export { TimelineConnector as Connector, TimelineContent as Content, TimelineDescription as Description, TimelineIndicator as Indicator, TimelineItem as Item, TimelineRoot as Root, TimelineRootPropsProvider as RootPropsProvider, TimelineSeparator as Separator, TimelineTitle as Title } from './timeline.js';

package/dist/esm/components/timeline/timeline.js

@@ -0,0 +1,31 @@
+"use client";
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useTimelineStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "timeline" });
+const TimelineRoot = withProvider(
+  "div",
+  "root",
+  { defaultProps: { role: "list" } }
+);
+const TimelineRootPropsProvider = PropsProvider;
+const TimelineItem = withContext(
+  "div",
+  "item",
+  { defaultProps: { role: "listitem" } }
+);
+const TimelineSeparator = withContext("div", "separator");
+const TimelineIndicator = withContext("div", "indicator");
+const TimelineContent = withContext("div", "content");
+const TimelineTitle = withContext(
+  "div",
+  "title"
+);
+const TimelineDescription = withContext("div", "description");
+const TimelineConnector = withContext("div", "connector");
+
+export { TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineRootPropsProvider, TimelineSeparator, TimelineTitle, useTimelineStyles };

package/dist/esm/components/toast/index.js

@@ -0,0 +1,4 @@
+export { ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastIndicator, ToastRoot, ToastTitle, Toaster, useToastStyles } from './toast.js';
+import * as namespace from './namespace.js';
+export { namespace as Toast };
+export { createToaster } from '@ark-ui/react/toast';

package/dist/esm/components/toast/namespace.js

@@ -0,0 +1 @@
+export { ToastActionTrigger as ActionTrigger, ToastCloseTrigger as CloseTrigger, ToastDescription as Description, ToastIndicator as Indicator, ToastRoot as Root, ToastTitle as Title } from './toast.js';

package/dist/esm/components/toast/toast.js

@@ -0,0 +1,60 @@
+"use client";
+import { Toaster as Toaster$1, Toast, useToastContext } from '@ark-ui/react/toast';
+export { createToaster } from '@ark-ui/react/toast';
+import { forwardRef } from 'react';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+import { mainbase } from '../../styled-system/factory.js';
+import { CloseIcon, WarningIcon, CheckCircleIcon } from '../icons.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useToastStyles
+} = createSlotRecipeContext({ key: "toast" });
+const Toaster = mainbase(
+  Toaster$1,
+  {},
+  { forwardAsChild: true }
+);
+const ToastRoot = withProvider(
+  Toast.Root,
+  "root",
+  { forwardAsChild: true }
+);
+const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger", {
+  forwardAsChild: true,
+  defaultProps: {
+    children: /* @__PURE__ */ React.createElement(CloseIcon, null)
+  }
+});
+const ToastTitle = withContext(
+  Toast.Title,
+  "title",
+  { forwardAsChild: true }
+);
+const ToastDescription = withContext(Toast.Description, "description", { forwardAsChild: true });
+const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger", { forwardAsChild: true });
+const iconMap = {
+  warning: WarningIcon,
+  success: CheckCircleIcon,
+  error: WarningIcon
+};
+const ToastIndicator = forwardRef(
+  function ToastIndicator2(props, ref) {
+    const { unstyled, ...restProps } = props;
+    const api = useToastContext();
+    const styles = useToastStyles();
+    const Component = iconMap[api.type];
+    if (!Component) return null;
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ref,
+        ...restProps,
+        css: [!unstyled ? styles.indicator : void 0, props.css]
+      }
+    );
+  }
+);
+
+export { ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastIndicator, ToastRoot, ToastTitle, Toaster, useToastStyles };

package/dist/esm/components/toggle/index.js

@@ -0,0 +1,4 @@
+export { ToggleContext, ToggleIndicator, TogglePropsProvider, ToggleRoot, useToggleStyles } from './toggle.js';
+export { useToggle, useToggleContext } from '@ark-ui/react/toggle';
+import * as namespace from './namespace.js';
+export { namespace as Toggle };

package/dist/esm/components/toggle/namespace.js

@@ -0,0 +1 @@
+export { ToggleContext as Context, ToggleIndicator as Indicator, TogglePropsProvider as PropsProvider, ToggleRoot as Root } from './toggle.js';

package/dist/esm/components/toggle/toggle.js

@@ -0,0 +1,24 @@
+"use client";
+import { Toggle } from '@ark-ui/react/toggle';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useToggleStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "toggle" });
+const ToggleRootProvider = withProvider(Toggle.Root, "root", { forwardAsChild: true });
+const ToggleRoot = withProvider(
+  Toggle.Root,
+  "root",
+  { forwardAsChild: true }
+);
+const TogglePropsProvider = PropsProvider;
+const ToggleIndicator = withContext(Toggle.Indicator, "indicator", {
+  forwardAsChild: true,
+  defaultProps: { _empty: { display: "none" } }
+});
+const ToggleContext = Toggle.Context;
+
+export { ToggleContext, ToggleIndicator, TogglePropsProvider, ToggleRoot, ToggleRootProvider, useToggleStyles };

package/dist/esm/components/tooltip/index.js

@@ -0,0 +1,4 @@
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipPropsProvider, TooltipRoot, TooltipRootProvider, TooltipTrigger, useTooltipStyles } from './tooltip.js';
+import * as namespace from './namespace.js';
+export { namespace as Tooltip };
+export { useTooltip, useTooltipContext } from '@ark-ui/react/tooltip';

package/dist/esm/components/tooltip/namespace.js

@@ -0,0 +1 @@
+export { TooltipArrow as Arrow, TooltipArrowTip as ArrowTip, TooltipContent as Content, TooltipContext as Context, TooltipPositioner as Positioner, TooltipPropsProvider as PropsProvider, TooltipRoot as Root, TooltipRootProvider as RootProvider, TooltipTrigger as Trigger } from './tooltip.js';

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,33 @@
+"use client";
+import { Tooltip } from '@ark-ui/react/tooltip';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+
+const {
+  withRootProvider,
+  withContext,
+  useStyles: useTooltipStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "tooltip" });
+const TooltipRootProvider = withRootProvider(
+  Tooltip.RootProvider
+);
+const TooltipRoot = withRootProvider(Tooltip.Root, {
+  defaultProps: { lazyMount: true, unmountOnExit: true }
+});
+const TooltipPropsProvider = PropsProvider;
+const TooltipTrigger = withContext(Tooltip.Trigger, "trigger", { forwardAsChild: true });
+const TooltipPositioner = withContext(Tooltip.Positioner, "positioner", { forwardAsChild: true });
+const TooltipContent = withContext(
+  Tooltip.Content,
+  "content",
+  { forwardAsChild: true }
+);
+const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip", { forwardAsChild: true });
+const TooltipArrow = withContext(
+  Tooltip.Arrow,
+  "arrow",
+  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ React.createElement(TooltipArrowTip, null) } }
+);
+const TooltipContext = Tooltip.Context;
+
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipPropsProvider, TooltipRoot, TooltipRootProvider, TooltipTrigger, useTooltipStyles };

package/dist/esm/components/tree-view/index.js

@@ -0,0 +1,4 @@
+export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndentGuide, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewNodeCheckbox, TreeViewRoot, TreeViewRootProvider, TreeViewTree, useTreeViewStyles } from './tree-view.js';
+import * as namespace from './namespace.js';
+export { namespace as TreeView };
+export { TreeViewContext, TreeViewNodeCheckboxIndicator, TreeViewNodeContext, TreeViewNodeProvider, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/react/tree-view';

package/dist/esm/components/tree-view/namespace.js

@@ -0,0 +1,2 @@
+export { TreeViewBranch as Branch, TreeViewBranchContent as BranchContent, TreeViewBranchControl as BranchControl, TreeViewBranchIndentGuide as BranchIndentGuide, TreeViewBranchIndicator as BranchIndicator, TreeViewBranchText as BranchText, TreeViewBranchTrigger as BranchTrigger, TreeViewItem as Item, TreeViewItemIndicator as ItemIndicator, TreeViewItemText as ItemText, TreeViewLabel as Label, TreeViewNode as Node, TreeViewNodeCheckbox as NodeCheckbox, TreeViewRoot as Root, TreeViewRootProvider as RootProvider, TreeViewTree as Tree } from './tree-view.js';
+export { TreeViewContext as Context, TreeViewNodeCheckboxIndicator as NodeCheckboxIndicator, TreeViewNodeContext as NodeContext, TreeViewNodeProvider as NodeProvider } from '@ark-ui/react/tree-view';

package/dist/esm/components/tree-view/tree-view.js

@@ -0,0 +1,70 @@
+"use client";
+import { TreeView, useTreeViewContext } from '@ark-ui/react';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useTreeViewStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "treeView" });
+const TreeViewRootProvider = withProvider(TreeView.RootProvider, "root", { forwardAsChild: true });
+const TreeViewRoot = withProvider(
+  TreeView.Root,
+  "root",
+  { forwardAsChild: true }
+);
+const TreeViewPropsProvider = PropsProvider;
+const TreeViewBranch = withContext(
+  TreeView.Branch,
+  "branch",
+  { forwardAsChild: true }
+);
+const TreeViewBranchContent = withContext(TreeView.BranchContent, "branchContent", { forwardAsChild: true });
+const TreeViewBranchControl = withContext(TreeView.BranchControl, "branchControl", { forwardAsChild: true });
+const TreeViewBranchTrigger = withContext(TreeView.BranchTrigger, "branchTrigger", { forwardAsChild: true });
+const TreeViewBranchIndicator = withContext(TreeView.BranchIndicator, "branchIndicator", { forwardAsChild: true });
+const TreeViewBranchText = withContext(TreeView.BranchText, "branchText", { forwardAsChild: true });
+const TreeViewBranchIndentGuide = withContext(TreeView.BranchIndentGuide, "branchIndentGuide", { forwardAsChild: true });
+const TreeViewItem = withContext(
+  TreeView.Item,
+  "item",
+  { forwardAsChild: true }
+);
+const TreeViewItemIndicator = withContext(TreeView.ItemIndicator, "itemIndicator", { forwardAsChild: true });
+const TreeViewItemText = withContext(TreeView.ItemText, "itemText", { forwardAsChild: true });
+const TreeViewLabel = withContext(
+  TreeView.Label,
+  "label",
+  { forwardAsChild: true }
+);
+const TreeViewTree = withContext(
+  TreeView.Tree,
+  "tree",
+  { forwardAsChild: true }
+);
+const TreeViewNodeCheckbox = withContext(TreeView.NodeCheckbox, "nodeCheckbox", { forwardAsChild: true });
+function TreeViewNode(props) {
+  const { render, indentGuide, branchProps, branchContentProps } = props;
+  const tree = useTreeViewContext();
+  const renderNode = (node, indexPath) => /* @__PURE__ */ React.createElement(
+    TreeView.NodeProvider,
+    {
+      key: indexPath.join("."),
+      node,
+      indexPath
+    },
+    /* @__PURE__ */ React.createElement(TreeView.NodeContext, null, (nodeState) => {
+      if (nodeState.isBranch) {
+        return /* @__PURE__ */ React.createElement(TreeViewBranch, { ...branchProps }, render({ node, indexPath, nodeState }), /* @__PURE__ */ React.createElement(TreeViewBranchContent, { ...branchContentProps }, indentGuide, tree.collection.getNodeChildren(node).map(
+          (child, index) => renderNode(child, [...indexPath, index])
+        )));
+      } else {
+        return render({ node, indexPath, nodeState });
+      }
+    })
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index])));
+}
+
+export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndentGuide, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewNodeCheckbox, TreeViewPropsProvider, TreeViewRoot, TreeViewRootProvider, TreeViewTree, useTreeViewStyles };

package/dist/esm/components/visually-hidden/index.js

@@ -0,0 +1 @@
+export { VisuallyHidden, visuallyHiddenStyle } from './visually-hidden.js';

package/dist/esm/components/visually-hidden/visually-hidden.js

@@ -0,0 +1,20 @@
+"use client";
+import { mainbase } from '../../styled-system/factory.js';
+
+const visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0, 0, 0, 0)",
+  height: "1px",
+  width: "1px",
+  margin: "-1px",
+  padding: "0",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "absolute"
+};
+const VisuallyHidden = mainbase("span", {
+  base: visuallyHiddenStyle
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden, visuallyHiddenStyle };

package/dist/esm/components/wrap/index.js

@@ -0,0 +1 @@
+export { Wrap, WrapItem } from './wrap.js';

package/dist/esm/components/wrap/wrap.js

@@ -0,0 +1,47 @@
+"use client";
+import { forwardRef } from 'react';
+import { defineStyle } from '../../styled-system/config.js';
+import { mainbase } from '../../styled-system/factory.js';
+import { cx } from '../../utils/cx.js';
+import '../../utils/unit.js';
+
+const Wrap = forwardRef(
+  function Wrap2(props, ref) {
+    const { gap = "0.5rem", justify, direction, align, ...rest } = props;
+    return /* @__PURE__ */ React.createElement(
+      mainbase.div,
+      {
+        ref,
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: justify,
+        alignItems: align,
+        flexDirection: direction,
+        gap,
+        ...rest,
+        className: cx("mainbase-wrap", props.className)
+      }
+    );
+  }
+);
+Wrap.displayName = "Wrap";
+const itemStyle = defineStyle({
+  display: "flex",
+  alignItems: "flex-start"
+});
+const WrapItem = forwardRef(
+  function WrapItem2(props, ref) {
+    const { css, ...rest } = props;
+    return /* @__PURE__ */ React.createElement(
+      mainbase.div,
+      {
+        ref,
+        css: [itemStyle, css],
+        ...rest,
+        className: cx("mainbase-wrap__listitem", props.className)
+      }
+    );
+  }
+);
+
+export { Wrap, WrapItem };

package/dist/esm/create-context.js

@@ -0,0 +1,33 @@
+"use client";
+import { createContext as createContext$1, useContext } from 'react';
+
+function getErrorMessage(hook, provider) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+function createContext(options = {}) {
+  const {
+    name,
+    strict = true,
+    hookName = "useContext",
+    providerName = "Provider",
+    errorMessage,
+    defaultValue
+  } = options;
+  const Context = createContext$1(defaultValue);
+  Context.displayName = name;
+  function useContext$1() {
+    const context = useContext(Context);
+    if (!context && strict) {
+      const error = new Error(
+        errorMessage ?? getErrorMessage(hookName, providerName)
+      );
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext$1);
+      throw error;
+    }
+    return context;
+  }
+  return [Context.Provider, useContext$1, Context];
+}
+
+export { createContext };

package/dist/esm/hooks/index.js

@@ -0,0 +1,14 @@
+export { useBreakpoint, useBreakpointValue } from './use-breakpoint.js';
+export { useCallbackRef } from './use-callback-ref.js';
+export { useConst } from './use-const.js';
+export { useControllableProp, useControllableState } from './use-controllable-state.js';
+export { useDisclosure } from './use-disclosure.js';
+export { useElementRect } from './use-element-rect.js';
+export { useForceUpdate } from './use-force-update.js';
+export { useListCollection } from '@ark-ui/react/collection';
+export { useLiveRef } from './use-live-ref.js';
+export { useMediaQuery } from './use-media-query.js';
+export { createOverlay } from './use-overlay.js';
+export { usePrevious } from './use-previous.js';
+export { useSafeLayoutEffect } from './use-safe-layout-effect.js';
+export { useUpdateEffect } from './use-update-effect.js';

package/dist/esm/hooks/use-breakpoint.js

@@ -0,0 +1,44 @@
+"use client";
+import { useMainbaseContext } from '../styled-system/provider.js';
+import { useMediaQuery } from './use-media-query.js';
+
+function useBreakpoint(options = {}) {
+  options.fallback || (options.fallback = "base");
+  const sys = useMainbaseContext();
+  let fallbackPassed = false;
+  const allBreakpoints = [
+    { name: "base", min: "0px" },
+    ...sys.breakpoints.values.map((bp) => ({ name: bp.name, min: bp.min }))
+  ];
+  const breakpoints = allBreakpoints.map(({ min, name: breakpoint }) => {
+    const item = {
+      breakpoint,
+      query: `(min-width: ${min})`,
+      fallback: !fallbackPassed
+    };
+    if (breakpoint === options.fallback) {
+      fallbackPassed = true;
+    }
+    return item;
+  }).filter(
+    ({ breakpoint }) => !!options.breakpoints?.includes(breakpoint)
+  );
+  const fallback = breakpoints.map(({ fallback: fallback2 }) => fallback2);
+  const values = useMediaQuery(
+    breakpoints.map((bp) => bp.query),
+    { fallback, ssr: options.ssr }
+  );
+  const index = values.lastIndexOf(true);
+  return breakpoints[index]?.breakpoint ?? options.fallback;
+}
+function useBreakpointValue(value, opts) {
+  const sys = useMainbaseContext();
+  const normalized = sys.normalizeValue(value);
+  const breakpoint = useBreakpoint({
+    breakpoints: Object.keys(normalized),
+    ...opts
+  });
+  return normalized[breakpoint];
+}
+
+export { useBreakpoint, useBreakpointValue };

package/dist/esm/hooks/use-callback-ref.js

@@ -0,0 +1,14 @@
+"use client";
+import { useRef, useInsertionEffect, useCallback } from 'react';
+
+function useCallbackRef(callback, deps = []) {
+  const callbackRef = useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useInsertionEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useCallback((...args) => callbackRef.current?.(...args), deps);
+}
+
+export { useCallbackRef };

package/dist/esm/hooks/use-const.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRef } from 'react';
+
+function useConst(init) {
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = typeof init === "function" ? init() : init;
+  }
+  return ref.current;
+}
+
+export { useConst };

package/dist/esm/hooks/use-controllable-state.js

@@ -0,0 +1,39 @@
+"use client";
+import { useState, useMemo } from 'react';
+import { useCallbackRef } from './use-callback-ref.js';
+
+function useControllableProp(prop, state) {
+  const controlled = typeof prop !== "undefined";
+  const value = controlled ? prop : state;
+  return useMemo(() => [controlled, value], [controlled, value]);
+}
+function useControllableState(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next
+  } = props;
+  const onChangeProp = useCallbackRef(onChange);
+  const shouldUpdateProp = useCallbackRef(shouldUpdate);
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+  const controlled = valueProp !== void 0;
+  const value = controlled ? valueProp : uncontrolledState;
+  const setValue = useCallbackRef(
+    (next) => {
+      const setter = next;
+      const nextValue = typeof next === "function" ? setter(value) : next;
+      if (!shouldUpdateProp(value, nextValue)) {
+        return;
+      }
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
+      onChangeProp(nextValue);
+    },
+    [controlled, onChangeProp, value, shouldUpdateProp]
+  );
+  return [value, setValue];
+}
+
+export { useControllableProp, useControllableState };

package/dist/esm/hooks/use-disclosure.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useCallback } from 'react';
+import { useCallbackRef } from './use-callback-ref.js';
+
+function useDisclosure(props = {}) {
+  const handleOpen = useCallbackRef(props.onOpen);
+  const handleClose = useCallbackRef(props.onClose);
+  const [openState, setOpen] = useState(props.defaultOpen || false);
+  const open = props.open !== void 0 ? props.open : openState;
+  const controlled = props.open !== void 0;
+  const onClose = useCallback(() => {
+    if (!controlled) setOpen(false);
+    handleClose?.();
+  }, [controlled, handleClose]);
+  const onOpen = useCallback(() => {
+    if (!controlled) setOpen(true);
+    handleOpen?.();
+  }, [controlled, handleOpen]);
+  const onToggle = useCallback(() => {
+    if (open) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  }, [open, onOpen, onClose]);
+  return {
+    open,
+    onOpen,
+    onClose,
+    onToggle,
+    setOpen
+  };
+}
+
+export { useDisclosure };

package/dist/esm/hooks/use-element-rect.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEnvironmentContext } from '@ark-ui/react';
+import { useRef, useState, useEffect } from 'react';
+
+function useElementRect() {
+  const ref = useRef(null);
+  const [rect, setRect] = useState(null);
+  const env = useEnvironmentContext();
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const handleResize = () => {
+      setRect(node.getBoundingClientRect());
+    };
+    const win = env.getWindow();
+    if (!win) return;
+    const observer = new win.ResizeObserver(handleResize);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [env]);
+  return { ref, rect };
+}
+
+export { useElementRect };

package/dist/esm/hooks/use-force-update.js

@@ -0,0 +1,8 @@
+"use client";
+import { useReducer } from 'react';
+
+function useForceUpdate() {
+  return useReducer((x) => x + 1, 0)[1];
+}
+
+export { useForceUpdate };

package/dist/esm/hooks/use-list-collection.js

@@ -0,0 +1 @@
+export { useListCollection } from '@ark-ui/react/collection';

package/dist/esm/hooks/use-live-ref.js

@@ -0,0 +1,10 @@
+"use client";
+import { useRef } from 'react';
+
+function useLiveRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+export { useLiveRef };

package/dist/esm/hooks/use-media-query.js

@@ -0,0 +1,54 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { useCallbackRef } from './use-callback-ref.js';
+
+function listen(query, callback) {
+  try {
+    query.addEventListener("change", callback);
+    return () => query.removeEventListener("change", callback);
+  } catch (e) {
+    query.addListener(callback);
+    return () => query.removeListener(callback);
+  }
+}
+function useMediaQuery(query, options = {}) {
+  const { fallback: _fallback = [], ssr = true, getWindow } = options;
+  const getWin = useCallbackRef(getWindow);
+  const queries = Array.isArray(query) ? query : [query];
+  const fallback = _fallback?.filter((v) => v != null);
+  const [value, setValue] = useState(() => {
+    return queries.map((query2, index) => {
+      if (!ssr) {
+        const { media, matches } = (getWindow?.() ?? window).matchMedia(query2);
+        return { media, matches };
+      }
+      return { media: query2, matches: !!fallback[index] };
+    });
+  });
+  useEffect(() => {
+    const win = getWin() ?? window;
+    setValue((prev) => {
+      const current = queries.map((query2) => {
+        const { media, matches } = win.matchMedia(query2);
+        return { media, matches };
+      });
+      return prev.every(
+        (v, i) => v.matches === current[i].matches && v.media === current[i].media
+      ) ? prev : current;
+    });
+    const mql = queries.map((query2) => win.matchMedia(query2));
+    const handler = (evt) => {
+      setValue((prev) => {
+        return prev.slice().map((item) => {
+          if (item.media === evt.media) return { ...item, matches: evt.matches };
+          return item;
+        });
+      });
+    };
+    const cleanups = mql.map((v) => listen(v, handler));
+    return () => cleanups.forEach((fn) => fn());
+  }, [getWin]);
+  return value.map((item) => item.matches);
+}
+
+export { useMediaQuery };