@glob-ui/hooks 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,9 @@
-# Temporary Holding Version
+# @glob-ui/hooks
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Internal hooks used by GlobUI components.
+
+> **Internal API.** This package is used by the other GlobUI packages. Its exports can change in any release, so depend on the component packages instead.
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,111 @@
+import * as _floating_ui_react_dom from '@floating-ui/react-dom';
+import { Placement } from '@floating-ui/react-dom';
+export { Placement } from '@floating-ui/react-dom';
+import * as react from 'react';
+
+/**
+ * State that is controlled when `prop` is defined and internal otherwise.
+ * `onChange` fires only when the value actually changes.
+ */
+declare function useControllableState<T>(prop: T | undefined, defaultProp: T, onChange?: (value: T) => void): readonly [T, (next: T) => void];
+
+interface UseFloatingPanelOptions {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    placement?: Placement;
+    /** Gap between trigger and panel, in px. */
+    offset?: number;
+    /** Arrow element, positioned by the arrow middleware. */
+    arrow?: HTMLElement | null;
+    /** Constrain the panel to the space left in the viewport (max-height/max-width). */
+    fitViewport?: boolean;
+    /** Runs right after the panel is shown. Use it to move focus. */
+    onShow?: (panel: HTMLElement) => void;
+    /**
+     * When the browser closes the panel (light dismiss, Esc), return focus to the trigger
+     * if focus was inside the panel or lost. A click elsewhere keeps its own focus.
+     */
+    restoreFocus?: boolean;
+    /** Element that gets focus back, when it is not the trigger (e.g. the trigger is a wrapper). */
+    restoreFocusTo?: () => HTMLElement | null;
+    /** Make the panel at least as wide as the trigger (listboxes). */
+    matchTriggerWidth?: boolean;
+}
+/**
+ * Positions a `popover` element next to a trigger and keeps it in sync with `open`.
+ * The panel element must have a `popover` attribute ("auto" or "manual").
+ */
+declare function useFloatingPanel({ open, onOpenChange, placement, offset, arrow, fitViewport, onShow, restoreFocus, restoreFocusTo, matchTriggerWidth, }: UseFloatingPanelOptions): {
+    trigger: HTMLElement | null;
+    setTrigger: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+    panel: HTMLElement | null;
+    setPanel: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+    floatingStyles: React.CSSProperties;
+    isPositioned: boolean;
+    placement: Placement;
+    middlewareData: _floating_ui_react_dom.MiddlewareData;
+    triggerHandlers: {
+        onPointerDown: () => void;
+        onClick: () => void;
+    };
+};
+
+interface UseRovingFocusOptions {
+    /** Which arrows move focus. "both" accepts all four. */
+    orientation?: "horizontal" | "vertical" | "both";
+    /** Wrap from last to first and back. */
+    loop?: boolean;
+    /** Typing printable characters jumps to the next item whose text starts with them. */
+    typeahead?: boolean;
+    /** Items to move between. Disabled ones are excluded by the default selector. */
+    itemSelector?: string;
+    /** Runs after an item receives focus (e.g. to activate a tab). */
+    onNavigate?: (item: HTMLElement) => void;
+}
+/**
+ * Keyboard focus movement inside a composite widget (tablist, menu, accordion headers).
+ * Spread `rootProps` on the container. Only items whose closest `[data-roving-root]` is this
+ * container are used, so nested widgets do not mix.
+ */
+declare function useRovingFocus({ orientation, loop, typeahead, itemSelector, onNavigate, }?: UseRovingFocusOptions): {
+    rootProps: {
+        "data-roving-root": string;
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    };
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+interface UseListboxOptions<T> {
+    /** Base id; option ids are derived from it. */
+    id: string;
+    /** Options currently shown (already filtered), in display order. */
+    items: T[];
+    getKey: (item: T) => string;
+    /** Text matched by typeahead. */
+    getText: (item: T) => string;
+    isDisabled?: (item: T) => boolean;
+    open: boolean;
+}
+/**
+ * Active-option state for a listbox driven by `aria-activedescendant` (focus stays on the
+ * combobox or search input). Handles arrows, Home/End, PageUp/PageDown and typeahead, skips
+ * disabled options, and keeps the active option scrolled into view.
+ */
+declare function useListbox<T>({ id, items, getKey, getText, isDisabled, open }: UseListboxOptions<T>): {
+    activeKey: string | null;
+    activeItem: T | undefined;
+    setActiveKey: react.Dispatch<react.SetStateAction<string | null>>;
+    move: (to: "next" | "prev" | "first" | "last" | "pageDown" | "pageUp") => void;
+    typeahead: (char: string) => void;
+    navigate: (e: React.KeyboardEvent, { homeEnd, typeahead: allowTypeahead }?: {
+        homeEnd?: boolean | undefined;
+        typeahead?: boolean | undefined;
+    }) => boolean;
+    optionId: (key: string) => string;
+    /** Value for `aria-activedescendant` on the element that has focus. */
+    activeDescendant: string | undefined;
+};
+/** A single printable character without Ctrl/Meta/Alt (Space excluded). */
+declare function isPrintable(e: React.KeyboardEvent): boolean;
+
+export { type UseFloatingPanelOptions, type UseListboxOptions, type UseRovingFocusOptions, isPrintable, useControllableState, useFloatingPanel, useListbox, useRovingFocus };

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import * as _floating_ui_react_dom from '@floating-ui/react-dom';
+import { Placement } from '@floating-ui/react-dom';
+export { Placement } from '@floating-ui/react-dom';
+import * as react from 'react';
+
+/**
+ * State that is controlled when `prop` is defined and internal otherwise.
+ * `onChange` fires only when the value actually changes.
+ */
+declare function useControllableState<T>(prop: T | undefined, defaultProp: T, onChange?: (value: T) => void): readonly [T, (next: T) => void];
+
+interface UseFloatingPanelOptions {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    placement?: Placement;
+    /** Gap between trigger and panel, in px. */
+    offset?: number;
+    /** Arrow element, positioned by the arrow middleware. */
+    arrow?: HTMLElement | null;
+    /** Constrain the panel to the space left in the viewport (max-height/max-width). */
+    fitViewport?: boolean;
+    /** Runs right after the panel is shown. Use it to move focus. */
+    onShow?: (panel: HTMLElement) => void;
+    /**
+     * When the browser closes the panel (light dismiss, Esc), return focus to the trigger
+     * if focus was inside the panel or lost. A click elsewhere keeps its own focus.
+     */
+    restoreFocus?: boolean;
+    /** Element that gets focus back, when it is not the trigger (e.g. the trigger is a wrapper). */
+    restoreFocusTo?: () => HTMLElement | null;
+    /** Make the panel at least as wide as the trigger (listboxes). */
+    matchTriggerWidth?: boolean;
+}
+/**
+ * Positions a `popover` element next to a trigger and keeps it in sync with `open`.
+ * The panel element must have a `popover` attribute ("auto" or "manual").
+ */
+declare function useFloatingPanel({ open, onOpenChange, placement, offset, arrow, fitViewport, onShow, restoreFocus, restoreFocusTo, matchTriggerWidth, }: UseFloatingPanelOptions): {
+    trigger: HTMLElement | null;
+    setTrigger: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+    panel: HTMLElement | null;
+    setPanel: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+    floatingStyles: React.CSSProperties;
+    isPositioned: boolean;
+    placement: Placement;
+    middlewareData: _floating_ui_react_dom.MiddlewareData;
+    triggerHandlers: {
+        onPointerDown: () => void;
+        onClick: () => void;
+    };
+};
+
+interface UseRovingFocusOptions {
+    /** Which arrows move focus. "both" accepts all four. */
+    orientation?: "horizontal" | "vertical" | "both";
+    /** Wrap from last to first and back. */
+    loop?: boolean;
+    /** Typing printable characters jumps to the next item whose text starts with them. */
+    typeahead?: boolean;
+    /** Items to move between. Disabled ones are excluded by the default selector. */
+    itemSelector?: string;
+    /** Runs after an item receives focus (e.g. to activate a tab). */
+    onNavigate?: (item: HTMLElement) => void;
+}
+/**
+ * Keyboard focus movement inside a composite widget (tablist, menu, accordion headers).
+ * Spread `rootProps` on the container. Only items whose closest `[data-roving-root]` is this
+ * container are used, so nested widgets do not mix.
+ */
+declare function useRovingFocus({ orientation, loop, typeahead, itemSelector, onNavigate, }?: UseRovingFocusOptions): {
+    rootProps: {
+        "data-roving-root": string;
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    };
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+interface UseListboxOptions<T> {
+    /** Base id; option ids are derived from it. */
+    id: string;
+    /** Options currently shown (already filtered), in display order. */
+    items: T[];
+    getKey: (item: T) => string;
+    /** Text matched by typeahead. */
+    getText: (item: T) => string;
+    isDisabled?: (item: T) => boolean;
+    open: boolean;
+}
+/**
+ * Active-option state for a listbox driven by `aria-activedescendant` (focus stays on the
+ * combobox or search input). Handles arrows, Home/End, PageUp/PageDown and typeahead, skips
+ * disabled options, and keeps the active option scrolled into view.
+ */
+declare function useListbox<T>({ id, items, getKey, getText, isDisabled, open }: UseListboxOptions<T>): {
+    activeKey: string | null;
+    activeItem: T | undefined;
+    setActiveKey: react.Dispatch<react.SetStateAction<string | null>>;
+    move: (to: "next" | "prev" | "first" | "last" | "pageDown" | "pageUp") => void;
+    typeahead: (char: string) => void;
+    navigate: (e: React.KeyboardEvent, { homeEnd, typeahead: allowTypeahead }?: {
+        homeEnd?: boolean | undefined;
+        typeahead?: boolean | undefined;
+    }) => boolean;
+    optionId: (key: string) => string;
+    /** Value for `aria-activedescendant` on the element that has focus. */
+    activeDescendant: string | undefined;
+};
+/** A single printable character without Ctrl/Meta/Alt (Space excluded). */
+declare function isPrintable(e: React.KeyboardEvent): boolean;
+
+export { type UseFloatingPanelOptions, type UseListboxOptions, type UseRovingFocusOptions, isPrintable, useControllableState, useFloatingPanel, useListbox, useRovingFocus };

package/dist/index.js

@@ -0,0 +1,346 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  isPrintable: () => isPrintable,
+  useControllableState: () => useControllableState,
+  useFloatingPanel: () => useFloatingPanel,
+  useListbox: () => useListbox,
+  useRovingFocus: () => useRovingFocus
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-controllable-state.ts
+var import_react = require("react");
+function useControllableState(prop, defaultProp, onChange) {
+  const [internal, setInternal] = (0, import_react.useState)(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : internal;
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      if (next !== value) onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, value, onChange]
+  );
+  return [value, setValue];
+}
+
+// src/use-floating-panel.ts
+var import_react2 = require("react");
+var import_react_dom = require("@floating-ui/react-dom");
+function isPopoverOpen(el) {
+  try {
+    return el.matches(":popover-open");
+  } catch (e) {
+    return false;
+  }
+}
+function useFloatingPanel({
+  open,
+  onOpenChange,
+  placement = "bottom",
+  offset = 8,
+  arrow = null,
+  fitViewport = true,
+  onShow,
+  restoreFocus = true,
+  restoreFocusTo,
+  matchTriggerWidth = false
+}) {
+  const [trigger, setTrigger] = (0, import_react2.useState)(null);
+  const [panel, setPanel] = (0, import_react2.useState)(null);
+  const onShowRef = (0, import_react2.useRef)(onShow);
+  const onOpenChangeRef = (0, import_react2.useRef)(onOpenChange);
+  const restoreFocusToRef = (0, import_react2.useRef)(restoreFocusTo);
+  (0, import_react2.useEffect)(() => {
+    onShowRef.current = onShow;
+    onOpenChangeRef.current = onOpenChange;
+    restoreFocusToRef.current = restoreFocusTo;
+  });
+  const { floatingStyles, update, isPositioned, placement: finalPlacement, middlewareData } = (0, import_react_dom.useFloating)({
+    open,
+    placement,
+    // Panels live in the top layer, outside any overflow:hidden ancestor.
+    strategy: "fixed",
+    elements: { reference: trigger, floating: panel },
+    middleware: [
+      (0, import_react_dom.offset)(offset),
+      (0, import_react_dom.flip)({ padding: 8 }),
+      (0, import_react_dom.shift)({ padding: 8 }),
+      ...fitViewport ? [
+        (0, import_react_dom.size)({
+          padding: 8,
+          apply({ availableHeight, availableWidth, elements, rects }) {
+            Object.assign(elements.floating.style, __spreadValues({
+              maxHeight: `${Math.max(0, availableHeight)}px`,
+              maxWidth: `${Math.max(0, availableWidth)}px`
+            }, matchTriggerWidth ? { minWidth: `${rects.reference.width}px` } : {}));
+          }
+        })
+      ] : [],
+      ...arrow ? [(0, import_react_dom.arrow)({ element: arrow, padding: 6 })] : []
+    ]
+  });
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    if (!panel || typeof panel.showPopover !== "function") return;
+    if (!open) {
+      if (isPopoverOpen(panel)) panel.hidePopover();
+      return;
+    }
+    if (!isPopoverOpen(panel)) panel.showPopover();
+    (_a = onShowRef.current) == null ? void 0 : _a.call(onShowRef, panel);
+    return trigger ? (0, import_react_dom.autoUpdate)(trigger, panel, update) : void 0;
+  }, [open, panel, trigger, update]);
+  (0, import_react2.useEffect)(() => {
+    if (!panel) return;
+    const onToggle = (e) => {
+      var _a, _b, _c;
+      if (e.newState !== "closed") return;
+      onOpenChangeRef.current(false);
+      if (!restoreFocus) return;
+      const active = document.activeElement;
+      if (!active || active === document.body || panel.contains(active)) {
+        ;
+        (_c = (_b = (_a = restoreFocusToRef.current) == null ? void 0 : _a.call(restoreFocusToRef)) != null ? _b : trigger) == null ? void 0 : _c.focus();
+      }
+    };
+    panel.addEventListener("toggle", onToggle);
+    return () => panel.removeEventListener("toggle", onToggle);
+  }, [panel, trigger, restoreFocus]);
+  const openAtPointerDown = (0, import_react2.useRef)(null);
+  const triggerHandlers = {
+    onPointerDown: () => {
+      openAtPointerDown.current = open;
+    },
+    onClick: () => {
+      var _a;
+      const wasOpen = (_a = openAtPointerDown.current) != null ? _a : open;
+      openAtPointerDown.current = null;
+      onOpenChange(!wasOpen);
+    }
+  };
+  return {
+    trigger,
+    setTrigger,
+    panel,
+    setPanel,
+    // opacity (not visibility) until positioned: the panel must be focusable right after showPopover().
+    floatingStyles: isPositioned ? floatingStyles : __spreadProps(__spreadValues({}, floatingStyles), { opacity: 0 }),
+    isPositioned,
+    placement: finalPlacement,
+    middlewareData,
+    triggerHandlers
+  };
+}
+
+// src/use-roving-focus.ts
+var import_react3 = require("react");
+var DEFAULT_SELECTOR = '[data-roving-item]:not([disabled]):not([aria-disabled="true"])';
+var TYPEAHEAD_RESET_MS = 500;
+function useRovingFocus({
+  orientation = "vertical",
+  loop = true,
+  typeahead = false,
+  itemSelector = DEFAULT_SELECTOR,
+  onNavigate
+} = {}) {
+  const buffer = (0, import_react3.useRef)("");
+  const resetTimer = (0, import_react3.useRef)(void 0);
+  function getItems(root) {
+    return Array.from(root.querySelectorAll(itemSelector)).filter(
+      (item) => item.closest("[data-roving-root]") === root
+    );
+  }
+  function focusItem(item) {
+    if (!item) return;
+    item.focus();
+    onNavigate == null ? void 0 : onNavigate(item);
+  }
+  function onKeyDown(e) {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const root = e.currentTarget;
+    const items = getItems(root);
+    if (items.length === 0) return;
+    const index = items.indexOf(document.activeElement);
+    const prevKeys = orientation === "horizontal" ? ["ArrowLeft"] : orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+    const nextKeys = orientation === "horizontal" ? ["ArrowRight"] : orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"];
+    let target;
+    if (e.key === "Home") target = items[0];
+    else if (e.key === "End") target = items[items.length - 1];
+    else if (nextKeys.includes(e.key)) {
+      if (index === -1) target = items[0];
+      else if (index < items.length - 1) target = items[index + 1];
+      else if (loop) target = items[0];
+    } else if (prevKeys.includes(e.key)) {
+      if (index === -1) target = items[items.length - 1];
+      else if (index > 0) target = items[index - 1];
+      else if (loop) target = items[items.length - 1];
+    } else if (typeahead && e.key.length === 1 && e.key !== " ") {
+      target = findByTypeahead(items, index, e.key);
+      if (!target) return;
+    } else {
+      return;
+    }
+    e.preventDefault();
+    focusItem(target);
+  }
+  function findByTypeahead(items, index, key) {
+    clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => buffer.current = "", TYPEAHEAD_RESET_MS);
+    buffer.current += key.toLowerCase();
+    const search = buffer.current;
+    const isRepeat = search.length > 1 && search.split("").every((c) => c === search[0]);
+    const query = isRepeat ? search[0] : search;
+    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0);
+    const text = (item) => {
+      var _a, _b;
+      return ((_b = (_a = item.dataset.textValue) != null ? _a : item.textContent) != null ? _b : "").trim().toLowerCase();
+    };
+    for (let i = 0; i < items.length; i++) {
+      const item = items[(start + i) % items.length];
+      if (text(item).startsWith(query)) return item;
+    }
+    return void 0;
+  }
+  return {
+    rootProps: { "data-roving-root": "", onKeyDown },
+    onKeyDown
+  };
+}
+
+// src/use-listbox.ts
+var import_react4 = require("react");
+var TYPEAHEAD_RESET_MS2 = 500;
+var PAGE_SIZE = 10;
+function useListbox({ id, items, getKey, getText, isDisabled, open }) {
+  var _a;
+  const [activeKeyState, setActiveKey] = (0, import_react4.useState)(null);
+  const buffer = (0, import_react4.useRef)("");
+  const resetTimer = (0, import_react4.useRef)(void 0);
+  const enabled = items.filter((item) => !(isDisabled == null ? void 0 : isDisabled(item)));
+  const activeItem = open ? (_a = enabled.find((item) => getKey(item) === activeKeyState)) != null ? _a : enabled[0] : void 0;
+  const activeKey = activeItem === void 0 ? null : getKey(activeItem);
+  const optionId = (key) => `${id}-option-${encodeURIComponent(key)}`;
+  function move(to) {
+    if (enabled.length === 0) return;
+    const index = activeItem === void 0 ? -1 : enabled.indexOf(activeItem);
+    const last = enabled.length - 1;
+    const next = {
+      next: index < 0 ? 0 : Math.min(index + 1, last),
+      prev: index < 0 ? last : Math.max(index - 1, 0),
+      first: 0,
+      last,
+      pageDown: Math.min(Math.max(index, 0) + PAGE_SIZE, last),
+      pageUp: Math.max(index - PAGE_SIZE, 0)
+    }[to];
+    setActiveKey(getKey(enabled[next]));
+  }
+  function typeahead(char) {
+    clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => buffer.current = "", TYPEAHEAD_RESET_MS2);
+    buffer.current += char.toLowerCase();
+    const search = buffer.current;
+    const isRepeat = search.length > 1 && search.split("").every((c) => c === search[0]);
+    const query = isRepeat ? search[0] : search;
+    const index = activeItem === void 0 ? -1 : enabled.indexOf(activeItem);
+    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0);
+    for (let i = 0; i < enabled.length; i++) {
+      const item = enabled[(start + i) % enabled.length];
+      if (getText(item).toLowerCase().startsWith(query)) {
+        setActiveKey(getKey(item));
+        return;
+      }
+    }
+  }
+  function navigate(e, { homeEnd = true, typeahead: allowTypeahead = false } = {}) {
+    const keys = __spreadValues({
+      ArrowDown: "next",
+      ArrowUp: "prev",
+      PageDown: "pageDown",
+      PageUp: "pageUp"
+    }, homeEnd ? { Home: "first", End: "last" } : {});
+    const target = keys[e.key];
+    if (target && !e.altKey) {
+      e.preventDefault();
+      move(target);
+      return true;
+    }
+    if (allowTypeahead && isPrintable(e)) {
+      e.preventDefault();
+      typeahead(e.key);
+      return true;
+    }
+    return false;
+  }
+  (0, import_react4.useEffect)(() => {
+    if (!open || activeKey === null) return;
+    const option = document.getElementById(optionId(activeKey));
+    const list = option == null ? void 0 : option.closest('[role="listbox"]');
+    if (!option || !list) return;
+    const top = option.offsetTop;
+    const bottom = top + option.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [open, activeKey, id]);
+  return {
+    activeKey,
+    activeItem,
+    setActiveKey,
+    move,
+    typeahead,
+    navigate,
+    optionId,
+    /** Value for `aria-activedescendant` on the element that has focus. */
+    activeDescendant: activeKey === null ? void 0 : optionId(activeKey)
+  };
+}
+function isPrintable(e) {
+  return e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isPrintable,
+  useControllableState,
+  useFloatingPanel,
+  useListbox,
+  useRovingFocus
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/use-controllable-state.ts","../src/use-floating-panel.ts","../src/use-roving-focus.ts","../src/use-listbox.ts"],"sourcesContent":["export { useControllableState } from \"./use-controllable-state\"\nexport { useFloatingPanel } from \"./use-floating-panel\"\nexport type { UseFloatingPanelOptions, Placement } from \"./use-floating-panel\"\nexport { useRovingFocus } from \"./use-roving-focus\"\nexport type { UseRovingFocusOptions } from \"./use-roving-focus\"\nexport { useListbox, isPrintable } from \"./use-listbox\"\nexport type { UseListboxOptions } from \"./use-listbox\"\n","import { useCallback, useState } from \"react\"\n\n/**\n * State that is controlled when `prop` is defined and internal otherwise.\n * `onChange` fires only when the value actually changes.\n */\nexport function useControllableState<T>(\n  prop: T | undefined,\n  defaultProp: T,\n  onChange?: (value: T) => void\n): readonly [T, (next: T) => void] {\n  const [internal, setInternal] = useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : internal\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) setInternal(next)\n      if (next !== value) onChange?.(next)\n    },\n    [isControlled, value, onChange]\n  )\n  return [value, setValue] as const\n}\n","import { useEffect, useRef, useState } from \"react\"\nimport {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n  type Placement,\n} from \"@floating-ui/react-dom\"\n\nfunction isPopoverOpen(el: HTMLElement) {\n  try {\n    return el.matches(\":popover-open\")\n  } catch {\n    return false\n  }\n}\n\nexport interface UseFloatingPanelOptions {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  placement?: Placement\n  /** Gap between trigger and panel, in px. */\n  offset?: number\n  /** Arrow element, positioned by the arrow middleware. */\n  arrow?: HTMLElement | null\n  /** Constrain the panel to the space left in the viewport (max-height/max-width). */\n  fitViewport?: boolean\n  /** Runs right after the panel is shown. Use it to move focus. */\n  onShow?: (panel: HTMLElement) => void\n  /**\n   * When the browser closes the panel (light dismiss, Esc), return focus to the trigger\n   * if focus was inside the panel or lost. A click elsewhere keeps its own focus.\n   */\n  restoreFocus?: boolean\n  /** Element that gets focus back, when it is not the trigger (e.g. the trigger is a wrapper). */\n  restoreFocusTo?: () => HTMLElement | null\n  /** Make the panel at least as wide as the trigger (listboxes). */\n  matchTriggerWidth?: boolean\n}\n\n/**\n * Positions a `popover` element next to a trigger and keeps it in sync with `open`.\n * The panel element must have a `popover` attribute (\"auto\" or \"manual\").\n */\nexport function useFloatingPanel({\n  open,\n  onOpenChange,\n  placement = \"bottom\",\n  offset = 8,\n  arrow = null,\n  fitViewport = true,\n  onShow,\n  restoreFocus = true,\n  restoreFocusTo,\n  matchTriggerWidth = false,\n}: UseFloatingPanelOptions) {\n  const [trigger, setTrigger] = useState<HTMLElement | null>(null)\n  const [panel, setPanel] = useState<HTMLElement | null>(null)\n\n  // Latest callbacks without re-running the effects.\n  const onShowRef = useRef(onShow)\n  const onOpenChangeRef = useRef(onOpenChange)\n  const restoreFocusToRef = useRef(restoreFocusTo)\n  useEffect(() => {\n    onShowRef.current = onShow\n    onOpenChangeRef.current = onOpenChange\n    restoreFocusToRef.current = restoreFocusTo\n  })\n\n  const { floatingStyles, update, isPositioned, placement: finalPlacement, middlewareData } = useFloating({\n    open,\n    placement,\n    // Panels live in the top layer, outside any overflow:hidden ancestor.\n    strategy: \"fixed\",\n    elements: { reference: trigger, floating: panel },\n    middleware: [\n      offsetMiddleware(offset),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      ...(fitViewport\n        ? [\n            size({\n              padding: 8,\n              apply({ availableHeight, availableWidth, elements, rects }) {\n                Object.assign(elements.floating.style, {\n                  maxHeight: `${Math.max(0, availableHeight)}px`,\n                  maxWidth: `${Math.max(0, availableWidth)}px`,\n                  ...(matchTriggerWidth ? { minWidth: `${rects.reference.width}px` } : {}),\n                })\n              },\n            }),\n          ]\n        : []),\n      ...(arrow ? [arrowMiddleware({ element: arrow, padding: 6 })] : []),\n    ],\n  })\n\n  // Show/hide the native popover; track the trigger position only while open.\n  useEffect(() => {\n    if (!panel || typeof panel.showPopover !== \"function\") return\n    if (!open) {\n      if (isPopoverOpen(panel)) panel.hidePopover()\n      return\n    }\n    if (!isPopoverOpen(panel)) panel.showPopover()\n    onShowRef.current?.(panel)\n    return trigger ? autoUpdate(trigger, panel, update) : undefined\n  }, [open, panel, trigger, update])\n\n  // Mirror browser-initiated closes (light dismiss, Esc) into state.\n  useEffect(() => {\n    if (!panel) return\n    const onToggle = (e: Event) => {\n      if ((e as ToggleEvent).newState !== \"closed\") return\n      onOpenChangeRef.current(false)\n      if (!restoreFocus) return\n      const active = document.activeElement\n      if (!active || active === document.body || panel.contains(active)) {\n        ;(restoreFocusToRef.current?.() ?? trigger)?.focus()\n      }\n    }\n    panel.addEventListener(\"toggle\", onToggle)\n    return () => panel.removeEventListener(\"toggle\", onToggle)\n  }, [panel, trigger, restoreFocus])\n\n  // Light dismiss closes the panel on pointerup, before the trigger's click runs. Remember the\n  // state at pointerdown so clicking the trigger closes the panel instead of reopening it.\n  const openAtPointerDown = useRef<boolean | null>(null)\n  const triggerHandlers = {\n    onPointerDown: () => {\n      openAtPointerDown.current = open\n    },\n    onClick: () => {\n      const wasOpen = openAtPointerDown.current ?? open\n      openAtPointerDown.current = null\n      onOpenChange(!wasOpen)\n    },\n  }\n\n  return {\n    trigger,\n    setTrigger,\n    panel,\n    setPanel,\n    // opacity (not visibility) until positioned: the panel must be focusable right after showPopover().\n    floatingStyles: (isPositioned ? floatingStyles : { ...floatingStyles, opacity: 0 }) as React.CSSProperties,\n    isPositioned,\n    placement: finalPlacement,\n    middlewareData,\n    triggerHandlers,\n  }\n}\n\nexport type { Placement }\n","import { useRef } from \"react\"\n\nexport interface UseRovingFocusOptions {\n  /** Which arrows move focus. \"both\" accepts all four. */\n  orientation?: \"horizontal\" | \"vertical\" | \"both\"\n  /** Wrap from last to first and back. */\n  loop?: boolean\n  /** Typing printable characters jumps to the next item whose text starts with them. */\n  typeahead?: boolean\n  /** Items to move between. Disabled ones are excluded by the default selector. */\n  itemSelector?: string\n  /** Runs after an item receives focus (e.g. to activate a tab). */\n  onNavigate?: (item: HTMLElement) => void\n}\n\nconst DEFAULT_SELECTOR = '[data-roving-item]:not([disabled]):not([aria-disabled=\"true\"])'\nconst TYPEAHEAD_RESET_MS = 500\n\n/**\n * Keyboard focus movement inside a composite widget (tablist, menu, accordion headers).\n * Spread `rootProps` on the container. Only items whose closest `[data-roving-root]` is this\n * container are used, so nested widgets do not mix.\n */\nexport function useRovingFocus({\n  orientation = \"vertical\",\n  loop = true,\n  typeahead = false,\n  itemSelector = DEFAULT_SELECTOR,\n  onNavigate,\n}: UseRovingFocusOptions = {}) {\n  const buffer = useRef(\"\")\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  function getItems(root: HTMLElement) {\n    return Array.from(root.querySelectorAll<HTMLElement>(itemSelector)).filter(\n      (item) => item.closest(\"[data-roving-root]\") === root\n    )\n  }\n\n  function focusItem(item: HTMLElement | undefined) {\n    if (!item) return\n    item.focus()\n    onNavigate?.(item)\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return\n    const root = e.currentTarget\n    const items = getItems(root)\n    if (items.length === 0) return\n    const index = items.indexOf(document.activeElement as HTMLElement)\n\n    const prevKeys = orientation === \"horizontal\" ? [\"ArrowLeft\"] : orientation === \"vertical\" ? [\"ArrowUp\"] : [\"ArrowLeft\", \"ArrowUp\"]\n    const nextKeys = orientation === \"horizontal\" ? [\"ArrowRight\"] : orientation === \"vertical\" ? [\"ArrowDown\"] : [\"ArrowRight\", \"ArrowDown\"]\n\n    let target: HTMLElement | undefined\n    if (e.key === \"Home\") target = items[0]\n    else if (e.key === \"End\") target = items[items.length - 1]\n    else if (nextKeys.includes(e.key)) {\n      if (index === -1) target = items[0]\n      else if (index < items.length - 1) target = items[index + 1]\n      else if (loop) target = items[0]\n    } else if (prevKeys.includes(e.key)) {\n      if (index === -1) target = items[items.length - 1]\n      else if (index > 0) target = items[index - 1]\n      else if (loop) target = items[items.length - 1]\n    } else if (typeahead && e.key.length === 1 && e.key !== \" \") {\n      target = findByTypeahead(items, index, e.key)\n      if (!target) return\n    } else {\n      return\n    }\n\n    e.preventDefault()\n    focusItem(target)\n  }\n\n  function findByTypeahead(items: HTMLElement[], index: number, key: string) {\n    clearTimeout(resetTimer.current)\n    resetTimer.current = setTimeout(() => (buffer.current = \"\"), TYPEAHEAD_RESET_MS)\n    buffer.current += key.toLowerCase()\n\n    const search = buffer.current\n    // Repeating one letter cycles through items starting with it.\n    const isRepeat = search.length > 1 && search.split(\"\").every((c) => c === search[0])\n    const query = isRepeat ? search[0] : search\n    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0)\n    const text = (item: HTMLElement) => (item.dataset.textValue ?? item.textContent ?? \"\").trim().toLowerCase()\n\n    for (let i = 0; i < items.length; i++) {\n      const item = items[(start + i) % items.length]\n      if (text(item).startsWith(query)) return item\n    }\n    return undefined\n  }\n\n  return {\n    rootProps: { \"data-roving-root\": \"\", onKeyDown },\n    onKeyDown,\n  }\n}\n","import { useEffect, useRef, useState } from \"react\"\n\nexport interface UseListboxOptions<T> {\n  /** Base id; option ids are derived from it. */\n  id: string\n  /** Options currently shown (already filtered), in display order. */\n  items: T[]\n  getKey: (item: T) => string\n  /** Text matched by typeahead. */\n  getText: (item: T) => string\n  isDisabled?: (item: T) => boolean\n  open: boolean\n}\n\nconst TYPEAHEAD_RESET_MS = 500\nconst PAGE_SIZE = 10\n\n/**\n * Active-option state for a listbox driven by `aria-activedescendant` (focus stays on the\n * combobox or search input). Handles arrows, Home/End, PageUp/PageDown and typeahead, skips\n * disabled options, and keeps the active option scrolled into view.\n */\nexport function useListbox<T>({ id, items, getKey, getText, isDisabled, open }: UseListboxOptions<T>) {\n  const [activeKeyState, setActiveKey] = useState<string | null>(null)\n  const buffer = useRef(\"\")\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  const enabled = items.filter((item) => !isDisabled?.(item))\n  // If the stored key is filtered out (or unset), the first enabled option is active.\n  const activeItem = open ? (enabled.find((item) => getKey(item) === activeKeyState) ?? enabled[0]) : undefined\n  const activeKey = activeItem === undefined ? null : getKey(activeItem)\n  const optionId = (key: string) => `${id}-option-${encodeURIComponent(key)}`\n\n  function move(to: \"next\" | \"prev\" | \"first\" | \"last\" | \"pageDown\" | \"pageUp\") {\n    if (enabled.length === 0) return\n    const index = activeItem === undefined ? -1 : enabled.indexOf(activeItem)\n    const last = enabled.length - 1\n    const next = {\n      next: index < 0 ? 0 : Math.min(index + 1, last),\n      prev: index < 0 ? last : Math.max(index - 1, 0),\n      first: 0,\n      last,\n      pageDown: Math.min(Math.max(index, 0) + PAGE_SIZE, last),\n      pageUp: Math.max(index - PAGE_SIZE, 0),\n    }[to]\n    setActiveKey(getKey(enabled[next]))\n  }\n\n  /** Jumps to the next option starting with the typed text. Repeating one letter cycles. */\n  function typeahead(char: string) {\n    clearTimeout(resetTimer.current)\n    resetTimer.current = setTimeout(() => (buffer.current = \"\"), TYPEAHEAD_RESET_MS)\n    buffer.current += char.toLowerCase()\n\n    const search = buffer.current\n    const isRepeat = search.length > 1 && search.split(\"\").every((c) => c === search[0])\n    const query = isRepeat ? search[0] : search\n    const index = activeItem === undefined ? -1 : enabled.indexOf(activeItem)\n    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0)\n    for (let i = 0; i < enabled.length; i++) {\n      const item = enabled[(start + i) % enabled.length]\n      if (getText(item).toLowerCase().startsWith(query)) {\n        setActiveKey(getKey(item))\n        return\n      }\n    }\n  }\n\n  /**\n   * Handles navigation keys. Returns true when the key was used (and default prevented).\n   * Pass `homeEnd: false` in text inputs, where Home/End move the caret.\n   */\n  function navigate(e: React.KeyboardEvent, { homeEnd = true, typeahead: allowTypeahead = false } = {}) {\n    const keys: Record<string, Parameters<typeof move>[0]> = {\n      ArrowDown: \"next\",\n      ArrowUp: \"prev\",\n      PageDown: \"pageDown\",\n      PageUp: \"pageUp\",\n      ...(homeEnd ? { Home: \"first\", End: \"last\" } : {}),\n    }\n    const target = keys[e.key]\n    if (target && !e.altKey) {\n      e.preventDefault()\n      move(target)\n      return true\n    }\n    if (allowTypeahead && isPrintable(e)) {\n      e.preventDefault()\n      typeahead(e.key)\n      return true\n    }\n    return false\n  }\n\n  // Scroll the list itself (not the page) so the active option is visible.\n  useEffect(() => {\n    if (!open || activeKey === null) return\n    const option = document.getElementById(optionId(activeKey))\n    const list = option?.closest<HTMLElement>('[role=\"listbox\"]')\n    if (!option || !list) return\n    const top = option.offsetTop\n    const bottom = top + option.offsetHeight\n    if (top < list.scrollTop) list.scrollTop = top\n    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight\n    // optionId only depends on id.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeKey, id])\n\n  return {\n    activeKey,\n    activeItem,\n    setActiveKey,\n    move,\n    typeahead,\n    navigate,\n    optionId,\n    /** Value for `aria-activedescendant` on the element that has focus. */\n    activeDescendant: activeKey === null ? undefined : optionId(activeKey),\n  }\n}\n\n/** A single printable character without Ctrl/Meta/Alt (Space excluded). */\nexport function isPrintable(e: React.KeyboardEvent) {\n  return e.key.length === 1 && e.key !== \" \" && !e.ctrlKey && !e.metaKey && !e.altKey\n}\n"],"mappings":"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","names":["import_react","offsetMiddleware","arrowMiddleware","import_react","import_react","TYPEAHEAD_RESET_MS"]}

package/dist/index.mjs

@@ -0,0 +1,326 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/use-controllable-state.ts
+import { useCallback, useState } from "react";
+function useControllableState(prop, defaultProp, onChange) {
+  const [internal, setInternal] = useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      if (next !== value) onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, value, onChange]
+  );
+  return [value, setValue];
+}
+
+// src/use-floating-panel.ts
+import { useEffect, useRef, useState as useState2 } from "react";
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip,
+  offset as offsetMiddleware,
+  shift,
+  size,
+  useFloating
+} from "@floating-ui/react-dom";
+function isPopoverOpen(el) {
+  try {
+    return el.matches(":popover-open");
+  } catch (e) {
+    return false;
+  }
+}
+function useFloatingPanel({
+  open,
+  onOpenChange,
+  placement = "bottom",
+  offset = 8,
+  arrow = null,
+  fitViewport = true,
+  onShow,
+  restoreFocus = true,
+  restoreFocusTo,
+  matchTriggerWidth = false
+}) {
+  const [trigger, setTrigger] = useState2(null);
+  const [panel, setPanel] = useState2(null);
+  const onShowRef = useRef(onShow);
+  const onOpenChangeRef = useRef(onOpenChange);
+  const restoreFocusToRef = useRef(restoreFocusTo);
+  useEffect(() => {
+    onShowRef.current = onShow;
+    onOpenChangeRef.current = onOpenChange;
+    restoreFocusToRef.current = restoreFocusTo;
+  });
+  const { floatingStyles, update, isPositioned, placement: finalPlacement, middlewareData } = useFloating({
+    open,
+    placement,
+    // Panels live in the top layer, outside any overflow:hidden ancestor.
+    strategy: "fixed",
+    elements: { reference: trigger, floating: panel },
+    middleware: [
+      offsetMiddleware(offset),
+      flip({ padding: 8 }),
+      shift({ padding: 8 }),
+      ...fitViewport ? [
+        size({
+          padding: 8,
+          apply({ availableHeight, availableWidth, elements, rects }) {
+            Object.assign(elements.floating.style, __spreadValues({
+              maxHeight: `${Math.max(0, availableHeight)}px`,
+              maxWidth: `${Math.max(0, availableWidth)}px`
+            }, matchTriggerWidth ? { minWidth: `${rects.reference.width}px` } : {}));
+          }
+        })
+      ] : [],
+      ...arrow ? [arrowMiddleware({ element: arrow, padding: 6 })] : []
+    ]
+  });
+  useEffect(() => {
+    var _a;
+    if (!panel || typeof panel.showPopover !== "function") return;
+    if (!open) {
+      if (isPopoverOpen(panel)) panel.hidePopover();
+      return;
+    }
+    if (!isPopoverOpen(panel)) panel.showPopover();
+    (_a = onShowRef.current) == null ? void 0 : _a.call(onShowRef, panel);
+    return trigger ? autoUpdate(trigger, panel, update) : void 0;
+  }, [open, panel, trigger, update]);
+  useEffect(() => {
+    if (!panel) return;
+    const onToggle = (e) => {
+      var _a, _b, _c;
+      if (e.newState !== "closed") return;
+      onOpenChangeRef.current(false);
+      if (!restoreFocus) return;
+      const active = document.activeElement;
+      if (!active || active === document.body || panel.contains(active)) {
+        ;
+        (_c = (_b = (_a = restoreFocusToRef.current) == null ? void 0 : _a.call(restoreFocusToRef)) != null ? _b : trigger) == null ? void 0 : _c.focus();
+      }
+    };
+    panel.addEventListener("toggle", onToggle);
+    return () => panel.removeEventListener("toggle", onToggle);
+  }, [panel, trigger, restoreFocus]);
+  const openAtPointerDown = useRef(null);
+  const triggerHandlers = {
+    onPointerDown: () => {
+      openAtPointerDown.current = open;
+    },
+    onClick: () => {
+      var _a;
+      const wasOpen = (_a = openAtPointerDown.current) != null ? _a : open;
+      openAtPointerDown.current = null;
+      onOpenChange(!wasOpen);
+    }
+  };
+  return {
+    trigger,
+    setTrigger,
+    panel,
+    setPanel,
+    // opacity (not visibility) until positioned: the panel must be focusable right after showPopover().
+    floatingStyles: isPositioned ? floatingStyles : __spreadProps(__spreadValues({}, floatingStyles), { opacity: 0 }),
+    isPositioned,
+    placement: finalPlacement,
+    middlewareData,
+    triggerHandlers
+  };
+}
+
+// src/use-roving-focus.ts
+import { useRef as useRef2 } from "react";
+var DEFAULT_SELECTOR = '[data-roving-item]:not([disabled]):not([aria-disabled="true"])';
+var TYPEAHEAD_RESET_MS = 500;
+function useRovingFocus({
+  orientation = "vertical",
+  loop = true,
+  typeahead = false,
+  itemSelector = DEFAULT_SELECTOR,
+  onNavigate
+} = {}) {
+  const buffer = useRef2("");
+  const resetTimer = useRef2(void 0);
+  function getItems(root) {
+    return Array.from(root.querySelectorAll(itemSelector)).filter(
+      (item) => item.closest("[data-roving-root]") === root
+    );
+  }
+  function focusItem(item) {
+    if (!item) return;
+    item.focus();
+    onNavigate == null ? void 0 : onNavigate(item);
+  }
+  function onKeyDown(e) {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const root = e.currentTarget;
+    const items = getItems(root);
+    if (items.length === 0) return;
+    const index = items.indexOf(document.activeElement);
+    const prevKeys = orientation === "horizontal" ? ["ArrowLeft"] : orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+    const nextKeys = orientation === "horizontal" ? ["ArrowRight"] : orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"];
+    let target;
+    if (e.key === "Home") target = items[0];
+    else if (e.key === "End") target = items[items.length - 1];
+    else if (nextKeys.includes(e.key)) {
+      if (index === -1) target = items[0];
+      else if (index < items.length - 1) target = items[index + 1];
+      else if (loop) target = items[0];
+    } else if (prevKeys.includes(e.key)) {
+      if (index === -1) target = items[items.length - 1];
+      else if (index > 0) target = items[index - 1];
+      else if (loop) target = items[items.length - 1];
+    } else if (typeahead && e.key.length === 1 && e.key !== " ") {
+      target = findByTypeahead(items, index, e.key);
+      if (!target) return;
+    } else {
+      return;
+    }
+    e.preventDefault();
+    focusItem(target);
+  }
+  function findByTypeahead(items, index, key) {
+    clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => buffer.current = "", TYPEAHEAD_RESET_MS);
+    buffer.current += key.toLowerCase();
+    const search = buffer.current;
+    const isRepeat = search.length > 1 && search.split("").every((c) => c === search[0]);
+    const query = isRepeat ? search[0] : search;
+    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0);
+    const text = (item) => {
+      var _a, _b;
+      return ((_b = (_a = item.dataset.textValue) != null ? _a : item.textContent) != null ? _b : "").trim().toLowerCase();
+    };
+    for (let i = 0; i < items.length; i++) {
+      const item = items[(start + i) % items.length];
+      if (text(item).startsWith(query)) return item;
+    }
+    return void 0;
+  }
+  return {
+    rootProps: { "data-roving-root": "", onKeyDown },
+    onKeyDown
+  };
+}
+
+// src/use-listbox.ts
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+var TYPEAHEAD_RESET_MS2 = 500;
+var PAGE_SIZE = 10;
+function useListbox({ id, items, getKey, getText, isDisabled, open }) {
+  var _a;
+  const [activeKeyState, setActiveKey] = useState3(null);
+  const buffer = useRef3("");
+  const resetTimer = useRef3(void 0);
+  const enabled = items.filter((item) => !(isDisabled == null ? void 0 : isDisabled(item)));
+  const activeItem = open ? (_a = enabled.find((item) => getKey(item) === activeKeyState)) != null ? _a : enabled[0] : void 0;
+  const activeKey = activeItem === void 0 ? null : getKey(activeItem);
+  const optionId = (key) => `${id}-option-${encodeURIComponent(key)}`;
+  function move(to) {
+    if (enabled.length === 0) return;
+    const index = activeItem === void 0 ? -1 : enabled.indexOf(activeItem);
+    const last = enabled.length - 1;
+    const next = {
+      next: index < 0 ? 0 : Math.min(index + 1, last),
+      prev: index < 0 ? last : Math.max(index - 1, 0),
+      first: 0,
+      last,
+      pageDown: Math.min(Math.max(index, 0) + PAGE_SIZE, last),
+      pageUp: Math.max(index - PAGE_SIZE, 0)
+    }[to];
+    setActiveKey(getKey(enabled[next]));
+  }
+  function typeahead(char) {
+    clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => buffer.current = "", TYPEAHEAD_RESET_MS2);
+    buffer.current += char.toLowerCase();
+    const search = buffer.current;
+    const isRepeat = search.length > 1 && search.split("").every((c) => c === search[0]);
+    const query = isRepeat ? search[0] : search;
+    const index = activeItem === void 0 ? -1 : enabled.indexOf(activeItem);
+    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0);
+    for (let i = 0; i < enabled.length; i++) {
+      const item = enabled[(start + i) % enabled.length];
+      if (getText(item).toLowerCase().startsWith(query)) {
+        setActiveKey(getKey(item));
+        return;
+      }
+    }
+  }
+  function navigate(e, { homeEnd = true, typeahead: allowTypeahead = false } = {}) {
+    const keys = __spreadValues({
+      ArrowDown: "next",
+      ArrowUp: "prev",
+      PageDown: "pageDown",
+      PageUp: "pageUp"
+    }, homeEnd ? { Home: "first", End: "last" } : {});
+    const target = keys[e.key];
+    if (target && !e.altKey) {
+      e.preventDefault();
+      move(target);
+      return true;
+    }
+    if (allowTypeahead && isPrintable(e)) {
+      e.preventDefault();
+      typeahead(e.key);
+      return true;
+    }
+    return false;
+  }
+  useEffect2(() => {
+    if (!open || activeKey === null) return;
+    const option = document.getElementById(optionId(activeKey));
+    const list = option == null ? void 0 : option.closest('[role="listbox"]');
+    if (!option || !list) return;
+    const top = option.offsetTop;
+    const bottom = top + option.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [open, activeKey, id]);
+  return {
+    activeKey,
+    activeItem,
+    setActiveKey,
+    move,
+    typeahead,
+    navigate,
+    optionId,
+    /** Value for `aria-activedescendant` on the element that has focus. */
+    activeDescendant: activeKey === null ? void 0 : optionId(activeKey)
+  };
+}
+function isPrintable(e) {
+  return e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+}
+export {
+  isPrintable,
+  useControllableState,
+  useFloatingPanel,
+  useListbox,
+  useRovingFocus
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-controllable-state.ts","../src/use-floating-panel.ts","../src/use-roving-focus.ts","../src/use-listbox.ts"],"sourcesContent":["import { useCallback, useState } from \"react\"\n\n/**\n * State that is controlled when `prop` is defined and internal otherwise.\n * `onChange` fires only when the value actually changes.\n */\nexport function useControllableState<T>(\n  prop: T | undefined,\n  defaultProp: T,\n  onChange?: (value: T) => void\n): readonly [T, (next: T) => void] {\n  const [internal, setInternal] = useState(defaultProp)\n  const isControlled = prop !== undefined\n  const value = isControlled ? prop : internal\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) setInternal(next)\n      if (next !== value) onChange?.(next)\n    },\n    [isControlled, value, onChange]\n  )\n  return [value, setValue] as const\n}\n","import { useEffect, useRef, useState } from \"react\"\nimport {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useFloating,\n  type Placement,\n} from \"@floating-ui/react-dom\"\n\nfunction isPopoverOpen(el: HTMLElement) {\n  try {\n    return el.matches(\":popover-open\")\n  } catch {\n    return false\n  }\n}\n\nexport interface UseFloatingPanelOptions {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  placement?: Placement\n  /** Gap between trigger and panel, in px. */\n  offset?: number\n  /** Arrow element, positioned by the arrow middleware. */\n  arrow?: HTMLElement | null\n  /** Constrain the panel to the space left in the viewport (max-height/max-width). */\n  fitViewport?: boolean\n  /** Runs right after the panel is shown. Use it to move focus. */\n  onShow?: (panel: HTMLElement) => void\n  /**\n   * When the browser closes the panel (light dismiss, Esc), return focus to the trigger\n   * if focus was inside the panel or lost. A click elsewhere keeps its own focus.\n   */\n  restoreFocus?: boolean\n  /** Element that gets focus back, when it is not the trigger (e.g. the trigger is a wrapper). */\n  restoreFocusTo?: () => HTMLElement | null\n  /** Make the panel at least as wide as the trigger (listboxes). */\n  matchTriggerWidth?: boolean\n}\n\n/**\n * Positions a `popover` element next to a trigger and keeps it in sync with `open`.\n * The panel element must have a `popover` attribute (\"auto\" or \"manual\").\n */\nexport function useFloatingPanel({\n  open,\n  onOpenChange,\n  placement = \"bottom\",\n  offset = 8,\n  arrow = null,\n  fitViewport = true,\n  onShow,\n  restoreFocus = true,\n  restoreFocusTo,\n  matchTriggerWidth = false,\n}: UseFloatingPanelOptions) {\n  const [trigger, setTrigger] = useState<HTMLElement | null>(null)\n  const [panel, setPanel] = useState<HTMLElement | null>(null)\n\n  // Latest callbacks without re-running the effects.\n  const onShowRef = useRef(onShow)\n  const onOpenChangeRef = useRef(onOpenChange)\n  const restoreFocusToRef = useRef(restoreFocusTo)\n  useEffect(() => {\n    onShowRef.current = onShow\n    onOpenChangeRef.current = onOpenChange\n    restoreFocusToRef.current = restoreFocusTo\n  })\n\n  const { floatingStyles, update, isPositioned, placement: finalPlacement, middlewareData } = useFloating({\n    open,\n    placement,\n    // Panels live in the top layer, outside any overflow:hidden ancestor.\n    strategy: \"fixed\",\n    elements: { reference: trigger, floating: panel },\n    middleware: [\n      offsetMiddleware(offset),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      ...(fitViewport\n        ? [\n            size({\n              padding: 8,\n              apply({ availableHeight, availableWidth, elements, rects }) {\n                Object.assign(elements.floating.style, {\n                  maxHeight: `${Math.max(0, availableHeight)}px`,\n                  maxWidth: `${Math.max(0, availableWidth)}px`,\n                  ...(matchTriggerWidth ? { minWidth: `${rects.reference.width}px` } : {}),\n                })\n              },\n            }),\n          ]\n        : []),\n      ...(arrow ? [arrowMiddleware({ element: arrow, padding: 6 })] : []),\n    ],\n  })\n\n  // Show/hide the native popover; track the trigger position only while open.\n  useEffect(() => {\n    if (!panel || typeof panel.showPopover !== \"function\") return\n    if (!open) {\n      if (isPopoverOpen(panel)) panel.hidePopover()\n      return\n    }\n    if (!isPopoverOpen(panel)) panel.showPopover()\n    onShowRef.current?.(panel)\n    return trigger ? autoUpdate(trigger, panel, update) : undefined\n  }, [open, panel, trigger, update])\n\n  // Mirror browser-initiated closes (light dismiss, Esc) into state.\n  useEffect(() => {\n    if (!panel) return\n    const onToggle = (e: Event) => {\n      if ((e as ToggleEvent).newState !== \"closed\") return\n      onOpenChangeRef.current(false)\n      if (!restoreFocus) return\n      const active = document.activeElement\n      if (!active || active === document.body || panel.contains(active)) {\n        ;(restoreFocusToRef.current?.() ?? trigger)?.focus()\n      }\n    }\n    panel.addEventListener(\"toggle\", onToggle)\n    return () => panel.removeEventListener(\"toggle\", onToggle)\n  }, [panel, trigger, restoreFocus])\n\n  // Light dismiss closes the panel on pointerup, before the trigger's click runs. Remember the\n  // state at pointerdown so clicking the trigger closes the panel instead of reopening it.\n  const openAtPointerDown = useRef<boolean | null>(null)\n  const triggerHandlers = {\n    onPointerDown: () => {\n      openAtPointerDown.current = open\n    },\n    onClick: () => {\n      const wasOpen = openAtPointerDown.current ?? open\n      openAtPointerDown.current = null\n      onOpenChange(!wasOpen)\n    },\n  }\n\n  return {\n    trigger,\n    setTrigger,\n    panel,\n    setPanel,\n    // opacity (not visibility) until positioned: the panel must be focusable right after showPopover().\n    floatingStyles: (isPositioned ? floatingStyles : { ...floatingStyles, opacity: 0 }) as React.CSSProperties,\n    isPositioned,\n    placement: finalPlacement,\n    middlewareData,\n    triggerHandlers,\n  }\n}\n\nexport type { Placement }\n","import { useRef } from \"react\"\n\nexport interface UseRovingFocusOptions {\n  /** Which arrows move focus. \"both\" accepts all four. */\n  orientation?: \"horizontal\" | \"vertical\" | \"both\"\n  /** Wrap from last to first and back. */\n  loop?: boolean\n  /** Typing printable characters jumps to the next item whose text starts with them. */\n  typeahead?: boolean\n  /** Items to move between. Disabled ones are excluded by the default selector. */\n  itemSelector?: string\n  /** Runs after an item receives focus (e.g. to activate a tab). */\n  onNavigate?: (item: HTMLElement) => void\n}\n\nconst DEFAULT_SELECTOR = '[data-roving-item]:not([disabled]):not([aria-disabled=\"true\"])'\nconst TYPEAHEAD_RESET_MS = 500\n\n/**\n * Keyboard focus movement inside a composite widget (tablist, menu, accordion headers).\n * Spread `rootProps` on the container. Only items whose closest `[data-roving-root]` is this\n * container are used, so nested widgets do not mix.\n */\nexport function useRovingFocus({\n  orientation = \"vertical\",\n  loop = true,\n  typeahead = false,\n  itemSelector = DEFAULT_SELECTOR,\n  onNavigate,\n}: UseRovingFocusOptions = {}) {\n  const buffer = useRef(\"\")\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  function getItems(root: HTMLElement) {\n    return Array.from(root.querySelectorAll<HTMLElement>(itemSelector)).filter(\n      (item) => item.closest(\"[data-roving-root]\") === root\n    )\n  }\n\n  function focusItem(item: HTMLElement | undefined) {\n    if (!item) return\n    item.focus()\n    onNavigate?.(item)\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return\n    const root = e.currentTarget\n    const items = getItems(root)\n    if (items.length === 0) return\n    const index = items.indexOf(document.activeElement as HTMLElement)\n\n    const prevKeys = orientation === \"horizontal\" ? [\"ArrowLeft\"] : orientation === \"vertical\" ? [\"ArrowUp\"] : [\"ArrowLeft\", \"ArrowUp\"]\n    const nextKeys = orientation === \"horizontal\" ? [\"ArrowRight\"] : orientation === \"vertical\" ? [\"ArrowDown\"] : [\"ArrowRight\", \"ArrowDown\"]\n\n    let target: HTMLElement | undefined\n    if (e.key === \"Home\") target = items[0]\n    else if (e.key === \"End\") target = items[items.length - 1]\n    else if (nextKeys.includes(e.key)) {\n      if (index === -1) target = items[0]\n      else if (index < items.length - 1) target = items[index + 1]\n      else if (loop) target = items[0]\n    } else if (prevKeys.includes(e.key)) {\n      if (index === -1) target = items[items.length - 1]\n      else if (index > 0) target = items[index - 1]\n      else if (loop) target = items[items.length - 1]\n    } else if (typeahead && e.key.length === 1 && e.key !== \" \") {\n      target = findByTypeahead(items, index, e.key)\n      if (!target) return\n    } else {\n      return\n    }\n\n    e.preventDefault()\n    focusItem(target)\n  }\n\n  function findByTypeahead(items: HTMLElement[], index: number, key: string) {\n    clearTimeout(resetTimer.current)\n    resetTimer.current = setTimeout(() => (buffer.current = \"\"), TYPEAHEAD_RESET_MS)\n    buffer.current += key.toLowerCase()\n\n    const search = buffer.current\n    // Repeating one letter cycles through items starting with it.\n    const isRepeat = search.length > 1 && search.split(\"\").every((c) => c === search[0])\n    const query = isRepeat ? search[0] : search\n    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0)\n    const text = (item: HTMLElement) => (item.dataset.textValue ?? item.textContent ?? \"\").trim().toLowerCase()\n\n    for (let i = 0; i < items.length; i++) {\n      const item = items[(start + i) % items.length]\n      if (text(item).startsWith(query)) return item\n    }\n    return undefined\n  }\n\n  return {\n    rootProps: { \"data-roving-root\": \"\", onKeyDown },\n    onKeyDown,\n  }\n}\n","import { useEffect, useRef, useState } from \"react\"\n\nexport interface UseListboxOptions<T> {\n  /** Base id; option ids are derived from it. */\n  id: string\n  /** Options currently shown (already filtered), in display order. */\n  items: T[]\n  getKey: (item: T) => string\n  /** Text matched by typeahead. */\n  getText: (item: T) => string\n  isDisabled?: (item: T) => boolean\n  open: boolean\n}\n\nconst TYPEAHEAD_RESET_MS = 500\nconst PAGE_SIZE = 10\n\n/**\n * Active-option state for a listbox driven by `aria-activedescendant` (focus stays on the\n * combobox or search input). Handles arrows, Home/End, PageUp/PageDown and typeahead, skips\n * disabled options, and keeps the active option scrolled into view.\n */\nexport function useListbox<T>({ id, items, getKey, getText, isDisabled, open }: UseListboxOptions<T>) {\n  const [activeKeyState, setActiveKey] = useState<string | null>(null)\n  const buffer = useRef(\"\")\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  const enabled = items.filter((item) => !isDisabled?.(item))\n  // If the stored key is filtered out (or unset), the first enabled option is active.\n  const activeItem = open ? (enabled.find((item) => getKey(item) === activeKeyState) ?? enabled[0]) : undefined\n  const activeKey = activeItem === undefined ? null : getKey(activeItem)\n  const optionId = (key: string) => `${id}-option-${encodeURIComponent(key)}`\n\n  function move(to: \"next\" | \"prev\" | \"first\" | \"last\" | \"pageDown\" | \"pageUp\") {\n    if (enabled.length === 0) return\n    const index = activeItem === undefined ? -1 : enabled.indexOf(activeItem)\n    const last = enabled.length - 1\n    const next = {\n      next: index < 0 ? 0 : Math.min(index + 1, last),\n      prev: index < 0 ? last : Math.max(index - 1, 0),\n      first: 0,\n      last,\n      pageDown: Math.min(Math.max(index, 0) + PAGE_SIZE, last),\n      pageUp: Math.max(index - PAGE_SIZE, 0),\n    }[to]\n    setActiveKey(getKey(enabled[next]))\n  }\n\n  /** Jumps to the next option starting with the typed text. Repeating one letter cycles. */\n  function typeahead(char: string) {\n    clearTimeout(resetTimer.current)\n    resetTimer.current = setTimeout(() => (buffer.current = \"\"), TYPEAHEAD_RESET_MS)\n    buffer.current += char.toLowerCase()\n\n    const search = buffer.current\n    const isRepeat = search.length > 1 && search.split(\"\").every((c) => c === search[0])\n    const query = isRepeat ? search[0] : search\n    const index = activeItem === undefined ? -1 : enabled.indexOf(activeItem)\n    const start = isRepeat || search.length === 1 ? index + 1 : Math.max(index, 0)\n    for (let i = 0; i < enabled.length; i++) {\n      const item = enabled[(start + i) % enabled.length]\n      if (getText(item).toLowerCase().startsWith(query)) {\n        setActiveKey(getKey(item))\n        return\n      }\n    }\n  }\n\n  /**\n   * Handles navigation keys. Returns true when the key was used (and default prevented).\n   * Pass `homeEnd: false` in text inputs, where Home/End move the caret.\n   */\n  function navigate(e: React.KeyboardEvent, { homeEnd = true, typeahead: allowTypeahead = false } = {}) {\n    const keys: Record<string, Parameters<typeof move>[0]> = {\n      ArrowDown: \"next\",\n      ArrowUp: \"prev\",\n      PageDown: \"pageDown\",\n      PageUp: \"pageUp\",\n      ...(homeEnd ? { Home: \"first\", End: \"last\" } : {}),\n    }\n    const target = keys[e.key]\n    if (target && !e.altKey) {\n      e.preventDefault()\n      move(target)\n      return true\n    }\n    if (allowTypeahead && isPrintable(e)) {\n      e.preventDefault()\n      typeahead(e.key)\n      return true\n    }\n    return false\n  }\n\n  // Scroll the list itself (not the page) so the active option is visible.\n  useEffect(() => {\n    if (!open || activeKey === null) return\n    const option = document.getElementById(optionId(activeKey))\n    const list = option?.closest<HTMLElement>('[role=\"listbox\"]')\n    if (!option || !list) return\n    const top = option.offsetTop\n    const bottom = top + option.offsetHeight\n    if (top < list.scrollTop) list.scrollTop = top\n    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight\n    // optionId only depends on id.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeKey, id])\n\n  return {\n    activeKey,\n    activeItem,\n    setActiveKey,\n    move,\n    typeahead,\n    navigate,\n    optionId,\n    /** Value for `aria-activedescendant` on the element that has focus. */\n    activeDescendant: activeKey === null ? undefined : optionId(activeKey),\n  }\n}\n\n/** A single printable character without Ctrl/Meta/Alt (Space excluded). */\nexport function isPrintable(e: React.KeyboardEvent) {\n  return e.key.length === 1 && e.key !== \" \" && !e.ctrlKey && !e.metaKey && !e.altKey\n}\n"],"mappings":"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","names":["useState","useState","useRef","useEffect","useRef","useState","TYPEAHEAD_RESET_MS","useState","useRef","useEffect"]}

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@glob-ui/hooks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.9"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "Internal hooks used by GlobUI components.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "hooks"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/hooks"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }