@arun-dev/headless 4.5.1 → 4.6.0

package/dist/tabs/index.cjs

@@ -0,0 +1,389 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/tabs/index.ts
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => index_parts_exports
+});
+module.exports = __toCommonJS(tabs_exports);
+
+// src/tabs/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  List: () => TabsList,
+  Panel: () => TabsPanel,
+  Root: () => TabsRoot,
+  Tab: () => TabsTab
+});
+
+// src/tabs/TabsRoot.tsx
+var import_react4 = require("react");
+
+// src/core/useControlled.ts
+var import_react = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/useRender.ts
+var import_react2 = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react2.isValidElement)(render)) {
+    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react2.createElement)(defaultTagName, merged);
+}
+
+// src/tabs/TabsRootContext.ts
+var import_react3 = require("react");
+var TabsRootContext = (0, import_react3.createContext)(null);
+function useTabsRootContext(part) {
+  const context = (0, import_react3.useContext)(TabsRootContext);
+  if (context === null) {
+    throw new Error(`<Tabs.${part}> must be rendered inside <Tabs.Root>.`);
+  }
+  return context;
+}
+
+// src/tabs/tabsDataAttributes.ts
+function orientationDataAttributes(orientation) {
+  return { "data-orientation": orientation };
+}
+function selectedDataAttributes(selected, disabled = false) {
+  return {
+    "data-selected": selected ? "" : void 0,
+    "data-unselected": selected ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/tabs/TabsRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function idPart(value) {
+  return value.replace(/\s+/g, "_");
+}
+function documentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function TabsRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Tabs.Root",
+    state: "value"
+  });
+  const setValue = (0, import_react4.useCallback)(
+    (next) => {
+      if (next === value) return;
+      setValueState(next);
+      onValueChange?.(next);
+    },
+    [value, setValueState, onValueChange]
+  );
+  const [tabs, setTabs] = (0, import_react4.useState)([]);
+  const register = (0, import_react4.useCallback)((entry) => {
+    setTabs(
+      (current) => [...current.filter((t) => t.value !== entry.value), entry].sort(documentOrder)
+    );
+    return () => setTabs((current) => current.filter((t) => t !== entry));
+  }, []);
+  const enabledTabs = (0, import_react4.useMemo)(() => tabs.filter((t) => !t.disabled), [tabs]);
+  const tabStopValue = tabs.length === 0 ? value : (enabledTabs.find((t) => t.value === value) ?? enabledTabs[0])?.value;
+  const baseId = (0, import_react4.useId)();
+  const context = (0, import_react4.useMemo)(
+    () => ({
+      value,
+      setValue,
+      orientation,
+      activationMode,
+      enabledTabs,
+      tabStopValue,
+      register,
+      tabId: (v) => `${baseId}-tab-${idPart(v)}`,
+      panelId: (v) => `${baseId}-panel-${idPart(v)}`
+    }),
+    [value, setValue, orientation, activationMode, enabledTabs, tabStopValue, register, baseId]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { ...orientationDataAttributes(orientation), className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsRootContext.Provider, { value: context, children: element });
+}
+
+// src/tabs/TabsList.tsx
+var import_react5 = require("react");
+
+// src/core/rovingFocus.ts
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/tabs/TabsList.tsx
+function TabsList({ className, children, render, ...rest }) {
+  const { orientation, enabledTabs } = useTabsRootContext("List");
+  const elementRef = (0, import_react5.useRef)(null);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "tablist",
+      // Horizontal is the ARIA default for a tablist, so it is only stated when vertical.
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      ...orientationDataAttributes(orientation),
+      className,
+      children,
+      ref: elementRef,
+      onKeyDown(event) {
+        const current = enabledTabs.findIndex((t) => t.ref.current === event.target);
+        if (current < 0) return;
+        const list = elementRef.current;
+        const rtl = list ? getComputedStyle(list).direction === "rtl" : false;
+        const next = rovingIndex(event.key, {
+          count: enabledTabs.length,
+          current,
+          orientation,
+          rtl
+        });
+        if (next === null) return;
+        event.preventDefault();
+        enabledTabs[next]?.ref.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/tabs/TabsTab.tsx
+var import_react6 = require("react");
+function TabsTab({
+  value,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const {
+    value: selectedValue,
+    setValue,
+    activationMode,
+    tabStopValue,
+    register,
+    tabId,
+    panelId
+  } = useTabsRootContext("Tab");
+  const elementRef = (0, import_react6.useRef)(null);
+  const selected = value === selectedValue;
+  (0, import_react6.useLayoutEffect)(
+    () => register({ value, disabled, ref: elementRef }),
+    [register, value, disabled]
+  );
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      role: "tab",
+      id: tabId(value),
+      "aria-selected": selected,
+      "aria-controls": panelId(value),
+      tabIndex: value === tabStopValue ? 0 : -1,
+      // The platform keeps a disabled button out of focus and activation.
+      disabled: disabled || void 0,
+      ...selectedDataAttributes(selected, disabled),
+      className,
+      children,
+      ref: elementRef,
+      onClick() {
+        if (!disabled) setValue(value);
+      },
+      onFocus() {
+        if (activationMode === "automatic" && !disabled) setValue(value);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/tabs/TabsPanel.tsx
+function TabsPanel({ value, className, children, render, ...rest }) {
+  const { value: selectedValue, tabId, panelId } = useTabsRootContext("Panel");
+  const selected = value === selectedValue;
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "tabpanel",
+      id: panelId(value),
+      "aria-labelledby": tabId(value),
+      tabIndex: 0,
+      hidden: !selected || void 0,
+      ...selectedDataAttributes(selected),
+      className,
+      children
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs
+});

package/dist/tabs/index.d.cts

@@ -0,0 +1,116 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+type TabsActivationMode = 'automatic' | 'manual';
+/** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */
+type TabsState = {
+    value: string | undefined;
+    orientation: Orientation;
+};
+
+type TabsRootOwnProps = {
+    /**
+     * Controlled selection: the `value` of the selected Tab. Provide `onValueChange` alongside.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for Switch.
+     */
+    value?: string;
+    /** Initial selection when uncontrolled. Read once, at mount. Without one, none is selected. */
+    defaultValue?: string;
+    /** Called with the Tab's `value` whenever the selection changes. */
+    onValueChange?: (value: string) => void;
+    /** The axis the tabs run along, and so which arrow keys move between them. */
+    orientation?: Orientation;
+    /**
+     * `automatic` selects a tab as soon as it has focus; `manual` waits for Enter, Space or a
+     * click. Manual suits panels that are slow to show.
+     */
+    activationMode?: TabsActivationMode;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsRootProps = TabsRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsRootOwnProps | 'defaultValue' | 'onChange'>;
+/**
+ * Tabs, by the WAI-ARIA pattern: a tablist of tabs, one panel each, one selected.
+ *
+ * There is no native element to lean on (decision 7), so the behaviour is built here: the
+ * selection, arrow-key focus with a single Tab stop (roving tabindex, `core/rovingFocus`),
+ * and the ids that wire each tab to its panel.
+ *
+ * Each Tab registers its own `value` and `disabled` from its props; the Root never reads
+ * them back from the DOM (decision 10). Elements are kept only to move focus to.
+ */
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
+
+type TabsListOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsListProps = TabsListOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsListOwnProps>;
+/**
+ * The tablist. Holds the keyboard: arrows along the orientation, wrapping at the ends,
+ * Home and End — moving focus among the enabled tabs only. Whether focusing a tab also
+ * selects it is the Tab's to decide, by `activationMode`.
+ *
+ * Name it with `aria-label` or `aria-labelledby` when the page has more than one.
+ */
+declare function TabsList({ className, children, render, ...rest }: TabsListProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type TabsTabOwnProps = {
+    /** Identifies this tab, and the Panel with the same `value`. */
+    value: string;
+    /** Skipped by the arrow keys and cannot be selected. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsTabProps = TabsTabOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof TabsTabOwnProps | 'value'>;
+/**
+ * One tab. A native `<button>`, so Enter, Space and a click select it with no key handling
+ * here. Only the tab holding the group's Tab stop has `tabIndex={0}` — roving tabindex — so
+ * Tab enters the list at the selected tab and leaves it after one press.
+ *
+ * With `activationMode="automatic"` (the default) focus selects: the arrow keys change the
+ * panel as they move. With `"manual"` they only move focus.
+ */
+declare function TabsTab({ value, disabled, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type TabsPanelOwnProps = {
+    /** The `value` of the Tab this panel belongs to. */
+    value: string;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsPanelProps = TabsPanelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsPanelOwnProps>;
+/**
+ * The content for one tab, labelled by it. Hidden with the `hidden` attribute while its tab
+ * is not selected, and stays mounted, so what is inside keeps its state between visits.
+ *
+ * `tabIndex={0}`, as the pattern recommends, so a panel with nothing focusable inside is
+ * still reached by Tab after the tablist.
+ */
+declare function TabsPanel({ value, className, children, render, ...rest }: TabsPanelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab };
+}
+
+export { index_parts as Tabs, type TabsActivationMode, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsState, type TabsTabProps };

package/dist/tabs/index.d.ts

@@ -0,0 +1,116 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+type TabsActivationMode = 'automatic' | 'manual';
+/** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */
+type TabsState = {
+    value: string | undefined;
+    orientation: Orientation;
+};
+
+type TabsRootOwnProps = {
+    /**
+     * Controlled selection: the `value` of the selected Tab. Provide `onValueChange` alongside.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for Switch.
+     */
+    value?: string;
+    /** Initial selection when uncontrolled. Read once, at mount. Without one, none is selected. */
+    defaultValue?: string;
+    /** Called with the Tab's `value` whenever the selection changes. */
+    onValueChange?: (value: string) => void;
+    /** The axis the tabs run along, and so which arrow keys move between them. */
+    orientation?: Orientation;
+    /**
+     * `automatic` selects a tab as soon as it has focus; `manual` waits for Enter, Space or a
+     * click. Manual suits panels that are slow to show.
+     */
+    activationMode?: TabsActivationMode;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsRootProps = TabsRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsRootOwnProps | 'defaultValue' | 'onChange'>;
+/**
+ * Tabs, by the WAI-ARIA pattern: a tablist of tabs, one panel each, one selected.
+ *
+ * There is no native element to lean on (decision 7), so the behaviour is built here: the
+ * selection, arrow-key focus with a single Tab stop (roving tabindex, `core/rovingFocus`),
+ * and the ids that wire each tab to its panel.
+ *
+ * Each Tab registers its own `value` and `disabled` from its props; the Root never reads
+ * them back from the DOM (decision 10). Elements are kept only to move focus to.
+ */
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, orientation, activationMode, className, children, render, ...rest }: TabsRootProps): react.JSX.Element;
+
+type TabsListOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsListProps = TabsListOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsListOwnProps>;
+/**
+ * The tablist. Holds the keyboard: arrows along the orientation, wrapping at the ends,
+ * Home and End — moving focus among the enabled tabs only. Whether focusing a tab also
+ * selects it is the Tab's to decide, by `activationMode`.
+ *
+ * Name it with `aria-label` or `aria-labelledby` when the page has more than one.
+ */
+declare function TabsList({ className, children, render, ...rest }: TabsListProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type TabsTabOwnProps = {
+    /** Identifies this tab, and the Panel with the same `value`. */
+    value: string;
+    /** Skipped by the arrow keys and cannot be selected. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsTabProps = TabsTabOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof TabsTabOwnProps | 'value'>;
+/**
+ * One tab. A native `<button>`, so Enter, Space and a click select it with no key handling
+ * here. Only the tab holding the group's Tab stop has `tabIndex={0}` — roving tabindex — so
+ * Tab enters the list at the selected tab and leaves it after one press.
+ *
+ * With `activationMode="automatic"` (the default) focus selects: the arrow keys change the
+ * panel as they move. With `"manual"` they only move focus.
+ */
+declare function TabsTab({ value, disabled, className, children, render, ...rest }: TabsTabProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type TabsPanelOwnProps = {
+    /** The `value` of the Tab this panel belongs to. */
+    value: string;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type TabsPanelProps = TabsPanelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof TabsPanelOwnProps>;
+/**
+ * The content for one tab, labelled by it. Hidden with the `hidden` attribute while its tab
+ * is not selected, and stays mounted, so what is inside keeps its state between visits.
+ *
+ * `tabIndex={0}`, as the pattern recommends, so a panel with nothing focusable inside is
+ * still reached by Tab after the tablist.
+ */
+declare function TabsPanel({ value, className, children, render, ...rest }: TabsPanelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab };
+}
+
+export { index_parts as Tabs, type TabsActivationMode, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsState, type TabsTabProps };

package/dist/tabs/index.js

@@ -0,0 +1,248 @@
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/tabs/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  List: () => TabsList,
+  Panel: () => TabsPanel,
+  Root: () => TabsRoot,
+  Tab: () => TabsTab
+});
+
+// src/tabs/TabsRoot.tsx
+import { useCallback, useId, useMemo, useState } from "react";
+
+// src/tabs/TabsRootContext.ts
+import { createContext, useContext } from "react";
+var TabsRootContext = createContext(null);
+function useTabsRootContext(part) {
+  const context = useContext(TabsRootContext);
+  if (context === null) {
+    throw new Error(`<Tabs.${part}> must be rendered inside <Tabs.Root>.`);
+  }
+  return context;
+}
+
+// src/tabs/tabsDataAttributes.ts
+function orientationDataAttributes(orientation) {
+  return { "data-orientation": orientation };
+}
+function selectedDataAttributes(selected, disabled = false) {
+  return {
+    "data-selected": selected ? "" : void 0,
+    "data-unselected": selected ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/tabs/TabsRoot.tsx
+import { jsx } from "react/jsx-runtime";
+function idPart(value) {
+  return value.replace(/\s+/g, "_");
+}
+function documentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function TabsRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Tabs.Root",
+    state: "value"
+  });
+  const setValue = useCallback(
+    (next) => {
+      if (next === value) return;
+      setValueState(next);
+      onValueChange?.(next);
+    },
+    [value, setValueState, onValueChange]
+  );
+  const [tabs, setTabs] = useState([]);
+  const register = useCallback((entry) => {
+    setTabs(
+      (current) => [...current.filter((t) => t.value !== entry.value), entry].sort(documentOrder)
+    );
+    return () => setTabs((current) => current.filter((t) => t !== entry));
+  }, []);
+  const enabledTabs = useMemo(() => tabs.filter((t) => !t.disabled), [tabs]);
+  const tabStopValue = tabs.length === 0 ? value : (enabledTabs.find((t) => t.value === value) ?? enabledTabs[0])?.value;
+  const baseId = useId();
+  const context = useMemo(
+    () => ({
+      value,
+      setValue,
+      orientation,
+      activationMode,
+      enabledTabs,
+      tabStopValue,
+      register,
+      tabId: (v) => `${baseId}-tab-${idPart(v)}`,
+      panelId: (v) => `${baseId}-panel-${idPart(v)}`
+    }),
+    [value, setValue, orientation, activationMode, enabledTabs, tabStopValue, register, baseId]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { ...orientationDataAttributes(orientation), className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(TabsRootContext.Provider, { value: context, children: element });
+}
+
+// src/tabs/TabsList.tsx
+import { useRef } from "react";
+
+// src/core/rovingFocus.ts
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/tabs/TabsList.tsx
+function TabsList({ className, children, render, ...rest }) {
+  const { orientation, enabledTabs } = useTabsRootContext("List");
+  const elementRef = useRef(null);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "tablist",
+      // Horizontal is the ARIA default for a tablist, so it is only stated when vertical.
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      ...orientationDataAttributes(orientation),
+      className,
+      children,
+      ref: elementRef,
+      onKeyDown(event) {
+        const current = enabledTabs.findIndex((t) => t.ref.current === event.target);
+        if (current < 0) return;
+        const list = elementRef.current;
+        const rtl = list ? getComputedStyle(list).direction === "rtl" : false;
+        const next = rovingIndex(event.key, {
+          count: enabledTabs.length,
+          current,
+          orientation,
+          rtl
+        });
+        if (next === null) return;
+        event.preventDefault();
+        enabledTabs[next]?.ref.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/tabs/TabsTab.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+function TabsTab({
+  value,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const {
+    value: selectedValue,
+    setValue,
+    activationMode,
+    tabStopValue,
+    register,
+    tabId,
+    panelId
+  } = useTabsRootContext("Tab");
+  const elementRef = useRef2(null);
+  const selected = value === selectedValue;
+  useLayoutEffect(
+    () => register({ value, disabled, ref: elementRef }),
+    [register, value, disabled]
+  );
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      role: "tab",
+      id: tabId(value),
+      "aria-selected": selected,
+      "aria-controls": panelId(value),
+      tabIndex: value === tabStopValue ? 0 : -1,
+      // The platform keeps a disabled button out of focus and activation.
+      disabled: disabled || void 0,
+      ...selectedDataAttributes(selected, disabled),
+      className,
+      children,
+      ref: elementRef,
+      onClick() {
+        if (!disabled) setValue(value);
+      },
+      onFocus() {
+        if (activationMode === "automatic" && !disabled) setValue(value);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/tabs/TabsPanel.tsx
+function TabsPanel({ value, className, children, render, ...rest }) {
+  const { value: selectedValue, tabId, panelId } = useTabsRootContext("Panel");
+  const selected = value === selectedValue;
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "tabpanel",
+      id: panelId(value),
+      "aria-labelledby": tabId(value),
+      tabIndex: 0,
+      hidden: !selected || void 0,
+      ...selectedDataAttributes(selected),
+      className,
+      children
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as Tabs
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",
@@ -94,6 +94,16 @@
         "default": "./dist/switch/index.cjs"
       }
     },
+    "./tabs": {
+      "import": {
+        "types": "./dist/tabs/index.d.ts",
+        "default": "./dist/tabs/index.js"
+      },
+      "require": {
+        "types": "./dist/tabs/index.d.cts",
+        "default": "./dist/tabs/index.cjs"
+      }
+    },
     "./tooltip": {
       "import": {
         "types": "./dist/tooltip/index.d.ts",