@commercetools/nimbus 3.2.0 → 3.3.0

package/dist/components/toggle-button.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-BAIsUjKm.cjs.js");exports.ToggleButton=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-szYkDbB4.cjs.js");exports.ToggleButton=e.t;

package/dist/components/toggle-button.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/toggle-button-D8K1JATa.esm.js";
+import { t as e } from "../chunks/toggle-button-DnjpkkaG.esm.js";
 export { e as ToggleButton };

package/dist/components/toolbar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toolbar-DIHORWTk.cjs.js");exports.Toolbar=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toolbar-CDuqJw86.cjs.js");exports.Toolbar=e.t;

package/dist/components/toolbar.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/toolbar-CSwGqSf8.esm.js";
+import { t as e } from "../chunks/toolbar-BTl4PMN6.esm.js";
 export { e as Toolbar };

package/dist/components/tooltip/components/tooltip.root.d.ts

@@ -6,7 +6,7 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
  * A contextual popup that displays a description for an element.
  *
  */
-export declare function TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): React.JSX.Element;
+export declare function TooltipRoot({ delay, closeDelay, isDisabled, ...props }: TooltipTriggerComponentProps): React.JSX.Element;
 export declare namespace TooltipRoot {
     var displayName: string;
 }

package/dist/components/tooltip/tooltip.d.ts

@@ -24,6 +24,7 @@ export declare const Tooltip: {
      *
      * The root component that provides state management and positioning logic.
      * Wraps the trigger element and tooltip content, handling hover and focus interactions.
+     * Pass `isDisabled` to suppress the tooltip without removing the trigger from the tree.
      *
      * @example
      * ```tsx

package/dist/components/tooltip.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tooltip-BRcJaG5T.cjs.js"),t=require("../chunks/make-element-focusable-C9gMsJ9U.cjs.js");exports.MakeElementFocusable=t.t,exports.Tooltip=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tooltip-BeOLEOf6.cjs.js"),t=require("../chunks/make-element-focusable-BuHQPO7h.cjs.js");exports.MakeElementFocusable=t.t,exports.Tooltip=e.t;

package/dist/components/tooltip.es.js

@@ -1,3 +1,3 @@
-import { t as e } from "../chunks/tooltip-CIrPCE0d.esm.js";
-import { t } from "../chunks/make-element-focusable-7aEYoh_8.esm.js";
+import { t as e } from "../chunks/tooltip-BuWKSmHt.esm.js";
+import { t } from "../chunks/make-element-focusable-OSQcKuJr.esm.js";
 export { t as MakeElementFocusable, e as Tooltip };

package/dist/components/tree/components/index.d.ts

@@ -0,0 +1,5 @@
+export { TreeRoot } from './tree.root.js';
+export { TreeItem } from './tree.item.js';
+export { TreeItemContent } from './tree.item-content.js';
+export { TreeIndicator } from './tree.indicator.js';
+export { TreeSubTree } from './tree.sub-tree.js';

package/dist/components/tree/components/tree.indicator.d.ts

@@ -0,0 +1,15 @@
+import { TreeIndicatorProps } from '../tree.types.js';
+/**
+ * Tree.Indicator
+ *
+ * The expand/collapse chevron button. React Aria wires it to the row's
+ * expansion state via the `chevron` slot, and provides a localized accessible
+ * name. The recipe hides it for leaf items and rotates it when expanded.
+ * Renders a default chevron icon that can be overridden via `children`.
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeIndicator: {
+    ({ children, ref, ...props }: TreeIndicatorProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.item-content.d.ts

@@ -0,0 +1,16 @@
+import { TreeItemContentProps } from '../tree.types.js';
+/**
+ * Tree.ItemContent
+ *
+ * The content row of a tree item. Lays out, in leading order, an optional drag
+ * handle (rendered automatically when the tree allows dragging), an optional
+ * selection checkbox (rendered automatically in multiple-selection mode), the
+ * expand/collapse indicator, and the item's label. Indentation by nesting level
+ * is applied here.
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeItemContent: {
+    ({ children, ref, ...props }: TreeItemContentProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.item.d.ts

@@ -0,0 +1,14 @@
+import { TreeItemProps } from '../tree.types.js';
+/**
+ * Tree.Item
+ *
+ * A single node in the tree (`role="row"`). Contains a `Tree.ItemContent`
+ * and, optionally, nested `Tree.Item` elements (or a React Aria `Collection`
+ * for dynamic children).
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeItem: {
+    <T extends object>({ children, textValue, ref, ...props }: TreeItemProps<T>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.root.d.ts

@@ -0,0 +1,14 @@
+import { TreeRootProps } from '../tree.types.js';
+/**
+ * Tree.Root
+ *
+ * The root container for the tree. Wraps React Aria's `Tree`, providing the
+ * recipe context, keyboard navigation, expand/collapse, type-ahead, selection
+ * and opt-in drag-and-drop (via the `dragAndDropHooks` prop).
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeRoot: {
+    <T extends object>(props: TreeRootProps<T>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.sub-tree.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TreeSubTreeProps } from '../tree.types.js';
+/**
+ * Tree.SubTree
+ *
+ * Renders an item's nested children. Supports both static composition (nested
+ * `Tree.Item` elements as `children`) and dynamic collections (an `items` array
+ * plus a render function). Internally wraps React Aria's `Collection` so
+ * consumers never import it from `react-aria-components` directly.
+ *
+ * Renders nothing when `items` is an empty iterable, so callers don't need a
+ * `children?.length` guard.
+ */
+export declare function TreeSubTree<T extends object>({ items, children, }: TreeSubTreeProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare namespace TreeSubTree {
+    var displayName: string;
+}

package/dist/components/tree/hooks/use-tree.d.ts

@@ -0,0 +1,65 @@
+import { Key } from 'react-aria-components';
+import { TreeOptions, TreeData } from 'react-stately';
+import { TreeRootProps } from '../tree.types.js';
+/**
+ * Tree.Root configuration that `useTree` accepts and echoes back so the whole
+ * result can be spread onto `Tree.Root`.
+ */
+type ForwardableRootProps<T extends object> = Pick<TreeRootProps<T>, "selectionMode" | "disabledKeys" | "defaultExpandedKeys" | "expandedKeys" | "onExpandedChange" | "defaultSelectedKeys" | "selectedKeys" | "onSelectionChange">;
+/** Imperative tree-data operations exposed on the `useTree` result. */
+type TreeController<T extends object> = Pick<TreeData<T>, "getItem" | "insert" | "insertBefore" | "insertAfter" | "append" | "prepend" | "remove" | "move" | "moveBefore" | "moveAfter" | "update">;
+/** Options for opting into drag-and-drop on a tree. */
+export type UseTreeDragAndDropOptions = {
+    /**
+     * Build the drag data for the dragged keys. Defaults to a `text/plain`
+     * representation of each key.
+     */
+    getItems?: (keys: Set<Key>) => Array<Record<string, string>>;
+    /** Drag types accepted from external sources. */
+    acceptedDragTypes?: Array<string | symbol>;
+};
+/**
+ * Options for {@link useTree}. Combines React Stately's tree-data options with
+ * the `Tree.Root` configuration you want forwarded and opt-in drag-and-drop.
+ */
+export type UseTreeOptions<T extends object> = TreeOptions<T> & ForwardableRootProps<T> & {
+    /**
+     * Enable drag-and-drop. `true` wires sensible reorder + re-parent handlers;
+     * pass an object to customize the drag data or accepted external types.
+     */
+    dragAndDrop?: boolean | UseTreeDragAndDropOptions;
+};
+/**
+ * The value returned by {@link useTree}. Spread it onto `Tree.Root` to wire up
+ * items, drag-and-drop, and selection/expansion config; the imperative
+ * controller methods are available on the same object for programmatic edits.
+ */
+export type UseTreeResult<T extends object> = ForwardableRootProps<T> & TreeController<T> & {
+    /** The current root nodes — pass to `Tree.Root`'s `items`. */
+    items: TreeData<T>["items"];
+    /** Drag-and-drop hooks for `Tree.Root` (present only when enabled). */
+    dragAndDropHooks?: TreeRootProps<T>["dragAndDropHooks"];
+};
+/**
+ * `useTree` — the single entry point for a data-driven, optionally draggable
+ * Nimbus tree. It owns the hierarchical state (via React Stately's
+ * `useTreeData`) and, when enabled, drag-and-drop (reorder between siblings and
+ * re-parent by dropping onto a group). The result is designed to be spread
+ * straight onto `Tree.Root`, so consumers never import from
+ * `react-aria-components` or `react-stately` themselves.
+ *
+ * @example
+ * ```tsx
+ * const tree = useTree({
+ *   initialItems: data,
+ *   getKey: (item) => item.id,
+ *   getChildren: (item) => item.children ?? [],
+ *   selectionMode: "multiple",
+ *   dragAndDrop: true,
+ * });
+ *
+ * return <Tree.Root aria-label="Files" {...tree}>{renderItem}</Tree.Root>;
+ * ```
+ */
+export declare function useTree<T extends object>(options: UseTreeOptions<T>): UseTreeResult<T>;
+export {};

package/dist/components/tree/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tree.js';
+export * from './tree.types.js';
+export * from './hooks/use-tree.js';
+export type { Key, Selection } from 'react-aria-components';

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,138 @@
+import { TreeRoot, TreeItem, TreeItemContent, TreeIndicator, TreeSubTree } from './components/index.js';
+/**
+ * # Tree
+ *
+ * A hierarchical list for navigating nested data such as file trees and
+ * navigation structures. Wraps React Aria's `Tree` for keyboard navigation,
+ * expand/collapse, selection, type-ahead and opt-in drag-and-drop, with
+ * WCAG 2.1 AA semantics. React Aria renders the tree as an ARIA `treegrid`
+ * (`role="treegrid"` → `row` → `gridcell`, with `aria-level`/`aria-expanded`/
+ * `aria-selected`) — its screen-reader-tested pattern for interactive trees.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/navigation/tree}
+ *
+ * @example
+ * ```tsx
+ * <Tree.Root aria-label="Files" selectionMode="multiple">
+ *   <Tree.Item id="documents" textValue="Documents">
+ *     <Tree.ItemContent>
+ *       <Tree.Indicator />
+ *       Documents
+ *     </Tree.ItemContent>
+ *     <Tree.Item id="report" textValue="Weekly Report">
+ *       <Tree.ItemContent>
+ *         <Tree.Indicator />
+ *         Weekly Report
+ *       </Tree.ItemContent>
+ *     </Tree.Item>
+ *   </Tree.Item>
+ * </Tree.Root>
+ * ```
+ */
+export declare const Tree: {
+    /**
+     * # Tree.Root
+     *
+     * The root container for the tree. Provides the recipe context, keyboard
+     * navigation, selection and opt-in drag-and-drop. Always the first part.
+     *
+     * @example
+     * ```tsx
+     * <Tree.Root aria-label="Files" selectionMode="single">
+     *   <Tree.Item id="a" textValue="Item A">
+     *     <Tree.ItemContent>
+     *       <Tree.Indicator />
+     *       Item A
+     *     </Tree.ItemContent>
+     *   </Tree.Item>
+     * </Tree.Root>
+     * ```
+     */
+    Root: {
+        <T extends object>(props: import('./tree.types.js').TreeRootProps<T>): import("react").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Tree.Item
+     *
+     * A single node in the tree. Contains a `Tree.ItemContent` and, optionally,
+     * nested `Tree.Item` elements (or a React Aria `Collection` for dynamic
+     * children).
+     *
+     * @example
+     * ```tsx
+     * <Tree.Item id="folder" textValue="Folder">
+     *   <Tree.ItemContent>
+     *     <Tree.Indicator />
+     *     Folder
+     *   </Tree.ItemContent>
+     *   <Tree.Item id="child" textValue="Child">
+     *     <Tree.ItemContent>Child</Tree.ItemContent>
+     *   </Tree.Item>
+     * </Tree.Item>
+     * ```
+     */
+    Item: {
+        <T extends object>({ children, textValue, ref, ...props }: import('./tree.types.js').TreeItemProps<T>): import("react").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Tree.ItemContent
+     *
+     * The content row of a tree item. Lays out the expand/collapse indicator, an
+     * optional selection checkbox (in multiple-selection mode) and the label, and
+     * applies level-based indentation.
+     *
+     * @example
+     * ```tsx
+     * <Tree.ItemContent>
+     *   <Tree.Indicator />
+     *   Documents
+     * </Tree.ItemContent>
+     * ```
+     */
+    ItemContent: {
+        ({ children, ref, ...props }: import('./tree.types.js').TreeItemContentProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Tree.Indicator
+     *
+     * The expand/collapse chevron. Visible only for items with children and
+     * rotated when expanded. Renders a default chevron icon, override-able via
+     * children.
+     *
+     * @example
+     * ```tsx
+     * <Tree.ItemContent>
+     *   <Tree.Indicator />
+     *   Folder
+     * </Tree.ItemContent>
+     * ```
+     */
+    Indicator: {
+        ({ children, ref, ...props }: import('./tree.types.js').TreeIndicatorProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Tree.SubTree
+     *
+     * Renders an item's nested children. Use static `Tree.Item` children, or pass
+     * an `items` array with a render function for dynamic collections — it wraps
+     * React Aria's `Collection` internally so you never import it directly.
+     * Renders nothing when `items` is empty.
+     *
+     * @example
+     * ```tsx
+     * <Tree.Item id="documents" textValue="Documents">
+     *   <Tree.ItemContent>
+     *     <Tree.Indicator />
+     *     Documents
+     *   </Tree.ItemContent>
+     *   <Tree.SubTree items={node.children}>{renderItem}</Tree.SubTree>
+     * </Tree.Item>
+     * ```
+     */
+    SubTree: typeof TreeSubTree;
+};
+export { TreeRoot as _TreeRoot, TreeItem as _TreeItem, TreeItemContent as _TreeItemContent, TreeIndicator as _TreeIndicator, TreeSubTree as _TreeSubTree, };

package/dist/components/tree/tree.recipe.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Recipe configuration for the Tree component.
+ * Defines the styling variants and base styles using Chakra UI's slot recipe
+ * system. Styling is token-based and derived from existing Nimbus list /
+ * accordion patterns (no Figma specs exist yet).
+ */
+export declare const treeSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item" | "itemContent", {
+    size: {
+        md: {
+            root: {
+                "--tree-row-min-height": "sizes.1000";
+                "--tree-control-size": "sizes.600";
+                "--tree-indicator-size": "sizes.500";
+                "--tree-row-padding-y": "spacing.200";
+            };
+            item: {
+                fontSize: "400";
+                lineHeight: "500";
+            };
+        };
+        sm: {
+            root: {
+                "--tree-row-min-height": "sizes.800";
+                "--tree-control-size": "sizes.500";
+                "--tree-indicator-size": "sizes.400";
+                "--tree-row-padding-y": "spacing.100";
+            };
+            item: {
+                fontSize: "350";
+                lineHeight: "400";
+            };
+        };
+    };
+}>;

package/dist/components/tree/tree.slots.d.ts

@@ -0,0 +1,19 @@
+import { SlotComponent } from '../../type-utils/index.js';
+import { TreeRootSlotProps, TreeItemSlotProps, TreeItemContentSlotProps, TreeIndicatorSlotProps } from './tree.types.js';
+/**
+ * Root slot — provides the recipe context for all descendant slots.
+ */
+export declare const TreeRootSlot: SlotComponent<HTMLDivElement, TreeRootSlotProps>;
+/**
+ * Item slot — the focusable tree row (`role="row"`).
+ */
+export declare const TreeItemSlot: SlotComponent<HTMLDivElement, TreeItemSlotProps>;
+/**
+ * Item content slot — the row's content container (indicator, optional
+ * selection checkbox, and label). Applies level-based indentation.
+ */
+export declare const TreeItemContentSlot: SlotComponent<HTMLDivElement, TreeItemContentSlotProps>;
+/**
+ * Indicator slot — the expand/collapse chevron button.
+ */
+export declare const TreeIndicatorSlot: SlotComponent<HTMLButtonElement, TreeIndicatorSlotProps>;

package/dist/components/tree/tree.types.d.ts

@@ -0,0 +1,118 @@
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react/styled-system';
+import { ReactNode, Ref } from 'react';
+import { TreeProps as RaTreeProps, TreeItemProps as RaTreeItemProps, ButtonProps as RaButtonProps } from 'react-aria-components';
+import { OmitInternalProps } from '../../type-utils/index.js';
+type TreeRecipeProps = {
+    /**
+     * Size of the tree, affecting row height, font size, chevron size and
+     * indentation step.
+     * @default "md"
+     */
+    size?: SlotRecipeProps<"nimbusTree">["size"];
+};
+export type TreeRootSlotProps = HTMLChakraProps<"div", TreeRecipeProps>;
+export type TreeItemSlotProps = HTMLChakraProps<"div">;
+export type TreeItemContentSlotProps = HTMLChakraProps<"div">;
+export type TreeIndicatorSlotProps = HTMLChakraProps<"button">;
+/**
+ * Props for the `Tree.Root` component.
+ *
+ * Wraps React Aria's `Tree`, providing keyboard navigation, expand/collapse,
+ * selection, type-ahead and opt-in drag-and-drop. Supports both static
+ * composition (nested `Tree.Item` children) and dynamic collections (`items`
+ * plus a recursive render function).
+ *
+ * @template T - The item object type when using dynamic collections.
+ */
+export type TreeRootProps<T extends object = object> = Omit<RaTreeProps<T>, "className" | "style"> & OmitInternalProps<TreeRootSlotProps, "children" | "slot"> & {
+    /**
+     * The tree's contents — either nested `Tree.Item` elements (static) or a
+     * render function when using the `items` prop (dynamic).
+     */
+    children?: RaTreeProps<T>["children"];
+    /**
+     * Ref to the root tree element.
+     */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for the `Tree.Item` component.
+ *
+ * Represents a single node in the tree. May contain a `Tree.ItemContent` and,
+ * optionally, nested `Tree.Item` elements (or a React Aria `Collection` for
+ * dynamic children).
+ *
+ * @template T - The item object type when using dynamic collections.
+ */
+export type TreeItemProps<T extends object = object> = Omit<RaTreeItemProps<T>, "className" | "style" | "textValue"> & OmitInternalProps<TreeItemSlotProps, "children" | "slot" | "id"> & {
+    /**
+     * A string representation of the item's contents, used for type-ahead.
+     * Required: React Aria needs it to support type-ahead navigation, since the
+     * row's children are arbitrary elements rather than plain text.
+     */
+    textValue: string;
+    /**
+     * The item's content (`Tree.ItemContent`) and any nested `Tree.Item`s.
+     */
+    children?: ReactNode;
+    /**
+     * Ref to the tree item (row) element.
+     */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for the `Tree.ItemContent` component.
+ *
+ * The content row of a tree item. Lays out the expand/collapse indicator,
+ * an optional selection checkbox (rendered automatically in multiple-selection
+ * mode), and the item's label. Applies level-based indentation.
+ */
+export type TreeItemContentProps = OmitInternalProps<TreeItemContentSlotProps, "slot"> & {
+    /**
+     * The content of the row, typically a `Tree.Indicator` followed by a label.
+     */
+    children?: ReactNode;
+    /**
+     * Ref to the content container element.
+     */
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * Props for the `Tree.Indicator` component.
+ *
+ * The expand/collapse chevron button. Visible only for items that have child
+ * items, and rotated when the item is expanded. Renders a default chevron icon
+ * that can be overridden via `children`.
+ */
+export type TreeIndicatorProps = Omit<RaButtonProps, "className" | "style" | "slot"> & OmitInternalProps<TreeIndicatorSlotProps, "children"> & {
+    /**
+     * Custom indicator content. Defaults to a chevron icon.
+     */
+    children?: ReactNode;
+    /**
+     * Ref to the indicator button element.
+     */
+    ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * Props for the `Tree.SubTree` component.
+ *
+ * Renders an item's nested children. Wraps React Aria's `Collection` so
+ * consumers don't import it directly. Use static `Tree.Item` children, or pass
+ * an `items` array with a render function for dynamic collections.
+ *
+ * @template T - The item object type when using dynamic collections.
+ */
+export type TreeSubTreeProps<T extends object = object> = {
+    /**
+     * The nested data to render. When provided, `children` must be a render
+     * function that returns a `Tree.Item` for each item.
+     */
+    items?: Iterable<T>;
+    /**
+     * Either nested `Tree.Item` elements (static) or a render function mapping
+     * each item to a `Tree.Item` (dynamic, used with `items`).
+     */
+    children?: ReactNode | ((item: T) => ReactNode);
+};
+export {};

package/dist/components/tree.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/use-tree-CrwSJhB8.cjs.js");exports.Tree=e.n,exports._TreeIndicator=e.i,exports._TreeItem=e.o,exports._TreeItemContent=e.a,exports._TreeRoot=e.s,exports._TreeSubTree=e.r,exports.useTree=e.t;

package/dist/components/tree.es.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../chunks/use-tree-wsHR3c7J.esm.js";
+export { n as Tree, t as _TreeIndicator, r as _TreeItem, e as _TreeItemContent, a as _TreeRoot, i as _TreeSubTree, o as useTree };

package/dist/components/visually-hidden.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/visually-hidden-BtBohnIk.cjs.js");exports.VisuallyHidden=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/visually-hidden-CnOICq5t.cjs.js");exports.VisuallyHidden=e.t;

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

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/visually-hidden-B_WKNGZW.esm.js";
+import { t as e } from "../chunks/visually-hidden-C0SJSQ9z.esm.js";
 export { e as VisuallyHidden };

package/dist/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './use-color-mode-value/index.js';
 export * from './use-localized-string-formatter/index.js';
 export * from './use-drag-and-drop/index.js';
 export * from './use-focus-input-on-field-click/index.js';
+export * from './use-sliding-indicator/index.js';

package/dist/hooks/use-sliding-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { useSlidingIndicator } from './use-sliding-indicator.ts';
+export type { SlidingIndicatorOptions, SlidingIndicatorGeometry, SlidingIndicatorRects, } from './use-sliding-indicator.ts';

package/dist/hooks/use-sliding-indicator/use-sliding-indicator.d.ts

@@ -0,0 +1,80 @@
+import { RefObject } from 'react';
+/**
+ * Bounding rectangles passed to {@link SlidingIndicatorOptions.getGeometry}.
+ */
+export interface SlidingIndicatorRects {
+    /** Bounding rect of the positioned container the indicator lives in. */
+    container: DOMRect;
+    /** Bounding rect of the currently active item. */
+    active: DOMRect;
+}
+/**
+ * Geometry the indicator should adopt, in pixels, relative to the container's
+ * top-left. `width` / `height` are optional — omit one to leave it controlled
+ * by CSS (e.g. a fixed-thickness bar).
+ */
+export interface SlidingIndicatorGeometry {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+export interface SlidingIndicatorOptions {
+    /**
+     * Whether the indicator is active. When `false` the hook is a complete no-op:
+     * it does not measure, observe, or mutate the indicator.
+     */
+    enabled: boolean;
+    /**
+     * Ref to the indicator element. Its positioned parent
+     * (`indicator.parentElement`) is used as the measurement container, so the
+     * indicator must be `position: absolute` inside a positioned ancestor.
+     */
+    indicatorRef: RefObject<HTMLElement | null>;
+    /** CSS selector (queried within the container) for the active item. */
+    activeSelector: string;
+    /**
+     * Attribute names whose mutation anywhere in the container should trigger a
+     * re-measure (e.g. `["aria-selected"]` or `["aria-current"]`).
+     */
+    watchAttributes: string[];
+    /**
+     * CSS selector for the items to observe for size changes (in addition to the
+     * container). Defaults to {@link activeSelector}'s tag-agnostic siblings via
+     * the container only when omitted.
+     */
+    itemSelector?: string;
+    /** Maps the container + active rects to the indicator's geometry. */
+    getGeometry: (rects: SlidingIndicatorRects) => SlidingIndicatorGeometry;
+    /**
+     * Extra dependencies that should tear down and re-run the effect (e.g. a
+     * changed orientation or variant that alters `getGeometry`).
+     */
+    deps?: unknown[];
+}
+/**
+ * Positions an absolutely-placed "indicator" element over the active item inside
+ * a container and keeps it in sync.
+ *
+ * The hook is DOM-driven: it measures with `getBoundingClientRect` inside
+ * `useLayoutEffect` (so the indicator is placed before paint — no first-frame
+ * flash), re-measures when the active item changes (`MutationObserver` on
+ * {@link SlidingIndicatorOptions.watchAttributes}) and when the layout changes
+ * (`ResizeObserver`), and hides the indicator (opacity 0) when there is no
+ * active item. The caller owns the indicator's appearance and transition; this
+ * hook only writes `opacity`, `width`/`height` (per `getGeometry`), and
+ * `transform`. The very first placement is applied with the transition
+ * momentarily suppressed so the indicator snaps to the active item instead of
+ * sliding in from the container corner on initial render.
+ *
+ * Note: scroll is **not** tracked. Geometry is computed in container
+ * coordinates, so if the container is itself scrollable the indicator only
+ * re-aligns on the next selection change or resize, not on scroll. Today's
+ * callers (`Tabs`/`TabNav`) don't scroll their item strip, so this is a
+ * non-issue; a future scrollable caller would need to observe scroll itself.
+ *
+ * Used to drive the animated active-highlight on `Tabs` and `TabNav`, where
+ * `getGeometry` encodes whether the indicator is an edge bar (bottom or inner
+ * side) or a filled highlight.
+ */
+export declare function useSlidingIndicator({ enabled, indicatorRef, activeSelector, watchAttributes, itemSelector, getGeometry, deps, }: SlidingIndicatorOptions): void;