fancy-ui-react 0.2.0

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { TABS_KEY } from "./types.js";
+/* empty css         */
+const Tabs = forwardRef(
+  ({
+    value: valueProp,
+    onValueChange,
+    orientation = "horizontal",
+    activation = "automatic",
+    variant = "underline",
+    children,
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const rootRef = useRef(null);
+    const setRootRef = useComposedRefs(forwardedRef, rootRef);
+    const uid = useFancyId();
+    const playCue = useSoundCue(sound);
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+    const isControlled = valueProp !== void 0;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    function isSelected(itemValue) {
+      return value === itemValue;
+    }
+    function select(itemValue) {
+      const changed = value !== itemValue;
+      if (!isControlled) setUncontrolledValue(itemValue);
+      if (changed) playCue("select");
+      onValueChange?.(itemValue);
+    }
+    const [registeredOrder, setRegisteredOrder] = useState([]);
+    const [focusedValueState, setFocusedValueState] = useState(null);
+    const register = useCallback((itemValue) => {
+      setRegisteredOrder((order) => order.includes(itemValue) ? order : [...order, itemValue]);
+    }, []);
+    const unregister = useCallback((itemValue) => {
+      setRegisteredOrder((order) => {
+        const index = order.indexOf(itemValue);
+        if (index === -1) return order;
+        const next = order.slice();
+        next.splice(index, 1);
+        return next;
+      });
+    }, []);
+    const focus = useCallback((itemValue) => {
+      setFocusedValueState(itemValue);
+    }, []);
+    const orderedEnabledButtons = useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return [];
+      return Array.from(
+        root.querySelectorAll("[data-ft-tabs-trigger]:not(:disabled)")
+      );
+    }, []);
+    function goTo(button) {
+      const nextValue = button.dataset.value;
+      if (nextValue === void 0) return;
+      setFocusedValueState(nextValue);
+      button.focus();
+      if (activation === "automatic") select(nextValue);
+    }
+    function move(from, delta) {
+      const buttons = orderedEnabledButtons();
+      if (buttons.length === 0) return;
+      const fromIndex = buttons.findIndex((el) => el.dataset.value === from);
+      const base = fromIndex === -1 ? 0 : fromIndex;
+      const nextIndex = ((base + delta) % buttons.length + buttons.length) % buttons.length;
+      goTo(buttons[nextIndex]);
+    }
+    function moveToEdge(edge) {
+      const buttons = orderedEnabledButtons();
+      if (buttons.length === 0) return;
+      goTo(edge === "first" ? buttons[0] : buttons[buttons.length - 1]);
+    }
+    const focusElement = useCallback(
+      (itemValue) => {
+        const button = orderedEnabledButtons().find((el) => el.dataset.value === itemValue);
+        if (!button) return;
+        setFocusedValueState(itemValue);
+        button.focus();
+      },
+      [orderedEnabledButtons]
+    );
+    let focusedValue = null;
+    if (focusedValueState !== null && registeredOrder.includes(focusedValueState)) {
+      focusedValue = focusedValueState;
+    } else if (registeredOrder.length > 0) {
+      focusedValue = registeredOrder.find((v) => v === value) ?? registeredOrder[0];
+    }
+    const context = {
+      value,
+      orientation,
+      activation,
+      variant,
+      isSelected,
+      select,
+      register,
+      unregister,
+      focusedValue,
+      focus,
+      move,
+      moveToEdge,
+      focusElement,
+      triggerId(itemValue) {
+        return `${uid}-trigger-${itemValue}`;
+      },
+      panelId(itemValue) {
+        return `${uid}-panel-${itemValue}`;
+      }
+    };
+    return /* @__PURE__ */ jsx(TABS_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ref: setRootRef, className: cn("ft-tabs", className), "data-orientation": orientation, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+export {
+  Tabs
+};

package/dist/components/tabs/TabsContent.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface TabsContentProps {
+    /** Which `TabsTrigger` shows this panel. */
+    value: string;
+    /**
+     * Keeps this panel mounted in the DOM (with the `hidden` attribute)
+     * even while inactive, instead of the default of unmounting it
+     * entirely. Needed for content — an iframe, a video, a form with
+     * uncommitted input — that must not remount every time the user tabs
+     * away and back.
+     */
+    forceMount?: boolean;
+    /** The panel's content. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * One tab's panel. Rendered only while its trigger is selected, unless
+ * `forceMount` keeps it in the DOM behind the `hidden` attribute.
+ *
+ * The element arrives through the ref channel rather than a `ref` prop, per
+ * PORTING.md — the Svelte source declares `ref = $bindable(null)`. Rest props
+ * are not spread, for the same reason as on the root.
+ */
+export declare const TabsContent: import("react").ForwardRefExoticComponent<TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/TabsContent.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { runTransition } from "../../internals/motion/animate.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { TABS_KEY } from "./types.js";
+const panelFade = preset("fade");
+const TabsContent = forwardRef(
+  ({ value, forceMount = false, children, className }, forwardedRef) => {
+    const context = useContext(TABS_KEY);
+    const isSelected = context?.isSelected(value) ?? false;
+    const rendered = isSelected || forceMount;
+    const innerRef = useRef(null);
+    const setRef = useComposedRefs(forwardedRef, innerRef);
+    const prevRenderedRef = useRef(rendered);
+    useIsomorphicLayoutEffect(() => {
+      const wasRendered = prevRenderedRef.current;
+      prevRenderedRef.current = rendered;
+      if (wasRendered || !rendered) return;
+      const el = innerRef.current;
+      if (!el) return;
+      let run;
+      run = runTransition(
+        el,
+        panelFade(el, { duration: prefersReducedMotion() ? 0 : DURATIONS.fast }, {
+          direction: "in"
+        }),
+        1,
+        void 0,
+        () => {
+          run?.abort();
+          run = void 0;
+        }
+      );
+      return () => {
+        run?.abort();
+        run = void 0;
+      };
+    }, [rendered]);
+    if (!rendered) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        id: context?.panelId(value),
+        role: "tabpanel",
+        "aria-labelledby": context?.triggerId(value),
+        tabIndex: 0,
+        hidden: !isSelected,
+        className: cn("ft-tabs-content", className),
+        children
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+export {
+  TabsContent
+};

package/dist/components/tabs/TabsList.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface TabsListProps {
+    /** The `TabsTrigger`s. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * The rail of triggers, plus the single sliding indicator that paints the
+ * selection.
+ *
+ * The element arrives through the ref channel rather than a `ref` prop, per
+ * PORTING.md — the Svelte source declares `ref = $bindable(null)`. Rest props
+ * are not spread, for the same reason as on the root.
+ */
+export declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/TabsList.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+import { TABS_KEY } from "./types.js";
+/* empty css              */
+const WILL_CHANGE_RELEASE = DURATIONS.fast + 50;
+const TabsList = forwardRef(
+  ({ children, className }, forwardedRef) => {
+    const context = useContext(TABS_KEY);
+    const orientation = context?.orientation ?? "horizontal";
+    const variant = context?.variant ?? "underline";
+    const classes = cn(
+      "ft-tabs-list inline-flex",
+      orientation === "vertical" ? "flex-col" : "flex-row",
+      variant === "underline" ? cn("border-border", orientation === "vertical" ? "border-r" : "border-b") : "ft-tabs-list-segmented bg-background border-border w-fit border",
+      className
+    );
+    const listRef = useRef(null);
+    const setListRef = useComposedRefs(forwardedRef, listRef);
+    const indicatorRef = useRef(null);
+    const willChangeTimerRef = useRef(void 0);
+    const placedOnceRef = useRef(false);
+    const lastValueRef = useRef(void 0);
+    const lastOrientationRef = useRef(void 0);
+    const lastVariantRef = useRef(void 0);
+    function activeTrigger() {
+      return listRef.current?.querySelector(
+        '[data-ft-tabs-trigger][aria-selected="true"]'
+      ) ?? null;
+    }
+    function releaseWillChange() {
+      clearTimeout(willChangeTimerRef.current);
+      willChangeTimerRef.current = void 0;
+      const el = indicatorRef.current;
+      if (el) el.style.willChange = "";
+    }
+    const place = useEventCallback((animate) => {
+      const el = indicatorRef.current;
+      if (!el) return;
+      const active = activeTrigger();
+      if (!active) {
+        el.style.opacity = "0";
+        return;
+      }
+      const vertical = orientation === "vertical";
+      const off = vertical ? active.offsetTop : active.offsetLeft;
+      const size = vertical ? active.offsetHeight : active.offsetWidth;
+      if (size === 0) {
+        el.style.opacity = "0";
+        return;
+      }
+      el.style.opacity = "1";
+      const transform = variant === "segmented" ? `translate(${active.offsetLeft}px, ${active.offsetTop}px) scale(${active.offsetWidth}, ${active.offsetHeight})` : vertical ? `translateY(${off}px) scaleY(${size})` : `translateX(${off}px) scaleX(${size})`;
+      if (variant === "segmented") {
+        el.style.setProperty("--ft-tabs-indicator-sx", String(active.offsetWidth));
+        el.style.setProperty("--ft-tabs-indicator-sy", String(active.offsetHeight));
+      }
+      if (el.style.transform === transform) return;
+      if (animate && !el.style.transform) animate = false;
+      if (animate) {
+        el.style.willChange = "transform";
+        el.style.transform = transform;
+        clearTimeout(willChangeTimerRef.current);
+        willChangeTimerRef.current = setTimeout(releaseWillChange, WILL_CHANGE_RELEASE);
+        return;
+      }
+      releaseWillChange();
+      const previous = el.style.transition;
+      el.style.transition = "none";
+      el.style.transform = transform;
+      void el.offsetWidth;
+      el.style.transition = previous;
+    });
+    useIsomorphicLayoutEffect(() => {
+      const list = listRef.current;
+      if (!list) return;
+      const observer = new ResizeObserver(() => place(false));
+      observer.observe(list);
+      function observeTriggers(el) {
+        for (const trigger of el.querySelectorAll("[data-ft-tabs-trigger]")) {
+          observer.observe(trigger);
+        }
+      }
+      observeTriggers(list);
+      const mutations = new MutationObserver(() => {
+        observeTriggers(list);
+        place(false);
+      });
+      mutations.observe(list, { childList: true, subtree: true, characterData: true });
+      return () => {
+        observer.disconnect();
+        mutations.disconnect();
+        releaseWillChange();
+      };
+    }, [place]);
+    const value = context?.value ?? "";
+    const focusedValue = context?.focusedValue ?? null;
+    useIsomorphicLayoutEffect(() => {
+      const first = !placedOnceRef.current;
+      const geometryChanged = orientation !== lastOrientationRef.current || variant !== lastVariantRef.current;
+      const selectionMoved = value !== lastValueRef.current;
+      placedOnceRef.current = true;
+      lastValueRef.current = value;
+      lastOrientationRef.current = orientation;
+      lastVariantRef.current = variant;
+      place(selectionMoved && !first && !geometryChanged && !prefersReducedMotion());
+    }, [value, focusedValue, orientation, variant, place]);
+    return (
+      /*
+       * role="tablist" needs no accessible name of its own per the WAI-ARIA
+       * Tabs pattern unless a page has more than one — a consumer with
+       * several tab groups on screen at once can still add one through
+       * `className` plus their own `aria-label` via a wrapping element, or by
+       * giving each Tabs root a distinct heading before it.
+       */
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setListRef,
+          role: "tablist",
+          "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+          "data-orientation": orientation,
+          "data-variant": variant,
+          className: classes,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: indicatorRef,
+                className: "ft-tabs-indicator",
+                "aria-hidden": "true",
+                "data-variant": variant,
+                "data-orientation": orientation
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+export {
+  TabsList
+};

package/dist/components/tabs/TabsTrigger.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface TabsTriggerProps {
+    /** This trigger's value — which `TabsContent` it activates. */
+    value: string;
+    /** Disables just this trigger. A disabled trigger is skipped by the arrows and Home/End. */
+    disabled?: boolean;
+    /** The trigger's content, typically the tab's label. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * One tab in a `TabsList`.
+ *
+ * The element arrives through the ref channel rather than a `ref` prop, per
+ * PORTING.md — the Svelte source declares `ref = $bindable(null)`. Rest props
+ * are not spread, for the same reason as on the root.
+ */
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tabs/TabsTrigger.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { TABS_KEY } from "./types.js";
+/* empty css                 */
+const TabsTrigger = forwardRef(
+  ({ value, disabled = false, children, className }, forwardedRef) => {
+    const context = useContext(TABS_KEY);
+    const innerRef = useRef(null);
+    const setRef = useComposedRefs(forwardedRef, innerRef);
+    const isDisabled = disabled;
+    const isSelected = context?.isSelected(value) ?? false;
+    const variant = context?.variant ?? "underline";
+    const orientation = context?.orientation ?? "horizontal";
+    const tabIndexAttr = context ? context.focusedValue === value ? 0 : -1 : void 0;
+    const classes = cn(
+      "ft-tabs-trigger inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap px-[14px] font-medium transition-colors",
+      "focus-visible:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      variant === "segmented" ? cn(
+        "rounded-md py-[6px] text-[12px]",
+        isSelected ? "text-accent-foreground" : "text-muted-foreground hover:text-foreground"
+      ) : cn(
+        "py-2 text-[13px]",
+        isSelected ? "ft-tabs-trigger-selected text-foreground" : "text-muted-foreground hover:text-foreground"
+      ),
+      className
+    );
+    const hasDomFocusRef = useRef(false);
+    const wasDisabledRef = useRef(false);
+    const reclaimPendingRef = useRef(false);
+    useIsomorphicLayoutEffect(() => {
+      const nowDisabled = isDisabled;
+      const justDisabled = nowDisabled && !wasDisabledRef.current;
+      wasDisabledRef.current = nowDisabled;
+      if (!justDisabled) return;
+      const node = innerRef.current;
+      reclaimPendingRef.current = hasDomFocusRef.current || node !== null && document.activeElement === node;
+      hasDomFocusRef.current = false;
+    }, [isDisabled]);
+    const register = context?.register;
+    const unregister = context?.unregister;
+    useEffect(() => {
+      if (!register || !unregister || isDisabled) return;
+      const registeredValue = value;
+      register(registeredValue);
+      return () => unregister(registeredValue);
+    }, [register, unregister, isDisabled, value]);
+    const focusedValue = context?.focusedValue ?? null;
+    const focusElement = context?.focusElement;
+    useEffect(() => {
+      if (!reclaimPendingRef.current || !isDisabled || !focusElement) return;
+      if (focusedValue === value) return;
+      reclaimPendingRef.current = false;
+      if (focusedValue === null) return;
+      focusElement(focusedValue);
+    }, [isDisabled, focusedValue, focusElement, value]);
+    function handleClick() {
+      if (isDisabled) return;
+      context?.select(value);
+      context?.focus(value);
+      innerRef.current?.focus();
+    }
+    function handleFocus() {
+      hasDomFocusRef.current = true;
+      if (isDisabled) return;
+      context?.focus(value);
+    }
+    function handleBlur(event) {
+      if (event.currentTarget.disabled) return;
+      hasDomFocusRef.current = false;
+    }
+    function handleKeydown(event) {
+      if (!context || isDisabled) return;
+      const horizontal = context.orientation === "horizontal";
+      switch (event.key) {
+        case "ArrowRight":
+          if (!horizontal) return;
+          event.preventDefault();
+          context.move(value, 1);
+          break;
+        case "ArrowLeft":
+          if (!horizontal) return;
+          event.preventDefault();
+          context.move(value, -1);
+          break;
+        case "ArrowDown":
+          if (horizontal) return;
+          event.preventDefault();
+          context.move(value, 1);
+          break;
+        case "ArrowUp":
+          if (horizontal) return;
+          event.preventDefault();
+          context.move(value, -1);
+          break;
+        case "Home":
+          event.preventDefault();
+          context.moveToEdge("first");
+          break;
+        case "End":
+          event.preventDefault();
+          context.moveToEdge("last");
+          break;
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: setRef,
+        type: "button",
+        role: "tab",
+        "data-ft-tabs-trigger": "",
+        "data-value": value,
+        "data-orientation": orientation,
+        "data-variant": variant,
+        id: context?.triggerId(value),
+        className: classes,
+        disabled: isDisabled,
+        "aria-selected": isSelected,
+        "aria-controls": context?.panelId(value),
+        tabIndex: tabIndexAttr,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeydown,
+        children
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+export {
+  TabsTrigger
+};

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

@@ -0,0 +1,10 @@
+export { Tabs } from "./Tabs.js";
+export type { TabsProps } from "./Tabs.js";
+export { TabsList } from "./TabsList.js";
+export type { TabsListProps } from "./TabsList.js";
+export { TabsTrigger } from "./TabsTrigger.js";
+export type { TabsTriggerProps } from "./TabsTrigger.js";
+export { TabsContent } from "./TabsContent.js";
+export type { TabsContentProps } from "./TabsContent.js";
+export { TABS_KEY } from "./types.js";
+export type { TabsContext } from "./types.js";

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

@@ -0,0 +1,94 @@
+/**
+ * The contract between the tabs root and its list/trigger/content pieces.
+ *
+ * `Tabs` owns the active value and the roving-focus position; `TabsTrigger`
+ * and `TabsContent` read both through context instead of a prop and a
+ * callback threaded down by hand for each of them.
+ *
+ * The arrow-key sequence is never read off `register`/`unregister` order:
+ * the root re-queries the live DOM at the moment a key is pressed, so
+ * triggers that mount out of order, or that get reordered by a keyed list
+ * after mounting, still step through in the order they actually appear on
+ * screen. Registration order is used only as the pre-interaction fallback
+ * for which trigger starts out tabbable — the same split `ToggleGroup` uses,
+ * for the same reason.
+ */
+/** What the root publishes. `TabsTrigger`/`TabsContent` read it; only the root writes it. */
+export interface TabsContext {
+    /** The active tab's value. */
+    readonly value: string;
+    /** The tablist's stacking axis and which arrow-key pair moves it. */
+    readonly orientation: "horizontal" | "vertical";
+    /** Whether arrowing to a trigger selects it immediately, or only moves focus. */
+    readonly activation: "automatic" | "manual";
+    /** Visual treatment, published so both `TabsList` and `TabsTrigger` render in step. */
+    readonly variant: "underline" | "segmented";
+    /** Whether `itemValue` is the active tab. */
+    isSelected(itemValue: string): boolean;
+    /** Makes `itemValue` the active tab and fires the root's `onValueChange`. */
+    select(itemValue: string): void;
+    /**
+     * Joins the roving-focus order. A trigger skips this entirely while disabled.
+     *
+     * Identity-stable for the life of the root: it is called from a trigger's own
+     * effect and therefore appears in that effect's dependency list. This is the
+     * React counterpart of the `untrack` the Svelte source wraps the body in —
+     * there, an effect that reads the registry it just mutated alternates between
+     * register and unregister until the scheduler gives up; here, a context member
+     * whose identity changed on every root render would re-run the same effect on
+     * every root render, unregistering and re-registering forever. The state
+     * updater is also a no-op returning the *same* array when nothing changes, so
+     * a duplicate register never schedules a render.
+     */
+    register(itemValue: string): void;
+    /** Leaves the roving-focus order. Identity-stable, for the same reason as `register`. */
+    unregister(itemValue: string): void;
+    /** The value that currently carries `tabindex="0"`, or `null` before anything has registered. */
+    readonly focusedValue: string | null;
+    /** Marks `itemValue` as the roving-focus position, without moving DOM focus. */
+    focus(itemValue: string): void;
+    /**
+     * Moves the roving-focus position `delta` steps from `from` in DOM order,
+     * skipping disabled triggers and wrapping at both ends, and moves DOM
+     * focus along with it. With `activation="automatic"` this also selects
+     * the trigger it lands on.
+     */
+    move(from: string, delta: number): void;
+    /**
+     * Moves the roving-focus position, and DOM focus, to the first or last
+     * enabled trigger in DOM order. With `activation="automatic"` this also
+     * selects it.
+     */
+    moveToEdge(edge: "first" | "last"): void;
+    /**
+     * Moves real DOM focus to `itemValue`'s trigger, if it is currently
+     * registered and enabled, and updates the roving-focus position to
+     * match. Distinct from `focus()`, which only updates the roving-focus
+     * position without touching DOM focus: this exists for the one case
+     * where DOM focus itself has to follow, because the element that held
+     * it just left the roving order — typically because it just became
+     * disabled out from under a keyboard user.
+     *
+     * Identity-stable, for the same reason as `register`: a trigger reads it
+     * from an effect's dependency list.
+     */
+    focusElement(itemValue: string): void;
+    /** The id a `TabsTrigger` for `itemValue` renders, and the matching `TabsContent`'s `aria-labelledby` target. */
+    triggerId(itemValue: string): string;
+    /** The id a `TabsContent` for `itemValue` renders, and the matching `TabsTrigger`'s `aria-controls` target. */
+    panelId(itemValue: string): string;
+}
+/**
+ * The context a list/trigger/panel reads to find its surrounding root. The
+ * Svelte source publishes it under a `Symbol` context key; React's own context
+ * object plays that role here, so the exported name is kept and the value is a
+ * `React.Context` rather than a symbol:
+ *
+ * ```tsx
+ * const tabs = useContext(TABS_KEY);
+ * ```
+ *
+ * Read it as optional — a piece rendered outside a `Tabs` root gets
+ * `undefined` rather than throwing.
+ */
+export declare const TABS_KEY: import("react").Context<TabsContext | undefined>;

package/dist/components/tabs/types.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+const TABS_KEY = createContext(void 0);
+TABS_KEY.displayName = "TabsContext";
+export {
+  TABS_KEY
+};