@intentface/ui 0.0.0 → 0.7.0

package/dist/steps/steps.d.ts

@@ -0,0 +1,90 @@
+import { type ComponentProps } from "react";
+import { Collapsible } from "../internal/collapsible.js";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+export type StepsRootProps = PrimitiveProps<"div">;
+/**
+ * The timeline container. Ships the disclosure and status plumbing and no row
+ * content: what a tool call or a reasoning step looks like is yours.
+ * Renders a `<div>` element.
+ */
+export declare const StepsRoot: {
+    ({ className, render, style, ...elementProps }: StepsRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export type StepStatus = string;
+export type StepsItemProps = ComponentProps<typeof Collapsible> & {
+    status?: StepStatus;
+};
+/**
+ * One node of the tree, and the unit that nests: an item's panel may hold
+ * further items, so a timeline goes as deep as the run did. Publishes its
+ * `status` to the icon and label through context.
+ * Renders a `<div>` element.
+ */
+export declare const StepsItem: {
+    ({ status, defaultOpen, ...props }: StepsItemProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type StepsTriggerProps = ComponentProps<typeof Collapsible.Trigger>;
+/**
+ * The row that expands an item. A real button, so the tree is plain sequential
+ * tab order rather than a composite widget with its own keyboard model.
+ * Renders a `<button>` element.
+ */
+export declare const StepsTrigger: {
+    (props: StepsTriggerProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type StepsPanelProps = ComponentProps<typeof Collapsible.Panel>;
+/**
+ * The collapsible body. Publishes its measured height while a transition runs
+ * and releases it once settled open, so an open panel grows with content that
+ * arrives inside it.
+ * Renders a `<div>` element.
+ */
+export declare const StepsPanel: {
+    (props: StepsPanelProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type StepsIconProps = PrimitiveProps<"span", {
+    status: StepStatus;
+}> & {
+    status?: StepStatus;
+};
+/**
+ * The row's status glyph, `aria-hidden` because colour and shape announce
+ * nothing. Resolves `status` from its own prop, then the enclosing item.
+ * Renders a `<span>` element.
+ */
+export declare const StepsIcon: {
+    ({ status, className, render, style, ...elementProps }: StepsIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export type StepsLabelProps = PrimitiveProps<"span", {
+    status: StepStatus;
+}> & {
+    status?: StepStatus;
+};
+/**
+ * The row's text. Resolves `status` the same way the icon does, so one
+ * attribute drives both.
+ * Renders a `<span>` element.
+ */
+export declare const StepsLabel: {
+    ({ status, className, render, style, ...elementProps }: StepsLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export type StepsStatusProps = PrimitiveProps<"span", {
+    status: StepStatus;
+}> & {
+    status?: StepStatus;
+};
+/**
+ * The only part that speaks the status. Renders a visually hidden span saying
+ * the resolved status string; pass `children` to localise the wording.
+ * Renders a `<span>` element.
+ */
+export declare const StepsStatus: {
+    ({ status, children, className, render, style, ...elementProps }: StepsStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};

package/dist/steps/steps.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Headless steps timeline — a recursive disclosure tree. Every node is the
+// same part (Item = a Collapsible; Trigger/Panel scope to the nearest Item by
+// nesting), so timelines nest arbitrarily: a panel can contain further items.
+// State surfaces as data attributes only: data-status per item, data-open /
+// data-closed from the disclosure, and data-nested on items that sit inside
+// another item (for rail/connector styling; sibling facts are CSS's job via
+// :last-child / :only-child). Icons, connectors, markdown, and all classes
+// belong to the styled layer; tool derivation belongs to the app layer.
+import { createContext, use } from "react";
+import { Collapsible } from "../internal/collapsible.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+// Visually-hidden-but-announced (screen-reader-only) default for Steps.Status.
+const visuallyHiddenStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: "hidden",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+/**
+ * The timeline container. Ships the disclosure and status plumbing and no row
+ * content: what a tool call or a reasoning step looks like is yours.
+ * Renders a `<div>` element.
+ */
+export const StepsRoot = ({ className, render, style, ...elementProps }) => useRenderElement("div", { className, render, style }, { props: [{ "data-steps": "" }, elementProps] });
+StepsRoot.displayName = "Steps";
+// ---------------------------------------------------------------------------
+// Item — one disclosure node. Presence-nested: items inside another item
+// carry data-nested.
+// ---------------------------------------------------------------------------
+// True inside any Item, so deeper items can surface data-nested.
+const NestedContext = createContext(false);
+// Status inherited by Icon / Label from the nearest Item.
+const StepStatusContext = createContext(null);
+const useStepStatus = (status) => {
+    const inherited = use(StepStatusContext);
+    return status ?? inherited ?? "complete";
+};
+/**
+ * One node of the tree, and the unit that nests: an item's panel may hold
+ * further items, so a timeline goes as deep as the run did. Publishes its
+ * `status` to the icon and label through context.
+ * Renders a `<div>` element.
+ */
+export const StepsItem = ({ status = "complete", defaultOpen, ...props }) => {
+    const isNested = use(NestedContext);
+    return (_jsx(NestedContext, { value: true, children: _jsx(StepStatusContext, { value: status, children: _jsx(Collapsible, { defaultOpen: defaultOpen ?? status === "active", "aria-current": status === "active" ? "step" : undefined, "data-steps-item": "", "data-status": status, "data-nested": isNested || undefined, ...props }) }) }));
+};
+StepsItem.displayName = "StepsItem";
+/**
+ * The row that expands an item. A real button, so the tree is plain sequential
+ * tab order rather than a composite widget with its own keyboard model.
+ * Renders a `<button>` element.
+ */
+export const StepsTrigger = (props) => (_jsx(Collapsible.Trigger, { "data-steps-trigger": "", ...props }));
+StepsTrigger.displayName = "StepsTrigger";
+/**
+ * The collapsible body. Publishes its measured height while a transition runs
+ * and releases it once settled open, so an open panel grows with content that
+ * arrives inside it.
+ * Renders a `<div>` element.
+ */
+export const StepsPanel = (props) => (_jsx(Collapsible.Panel, { "data-steps-panel": "", ...props }));
+StepsPanel.displayName = "StepsPanel";
+/**
+ * The row's status glyph, `aria-hidden` because colour and shape announce
+ * nothing. Resolves `status` from its own prop, then the enclosing item.
+ * Renders a `<span>` element.
+ */
+export const StepsIcon = ({ status, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [{ "data-steps-icon": "", "aria-hidden": true }, elementProps],
+    });
+};
+StepsIcon.displayName = "StepsIcon";
+/**
+ * The row's text. Resolves `status` the same way the icon does, so one
+ * attribute drives both.
+ * Renders a `<span>` element.
+ */
+export const StepsLabel = ({ status, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [{ "data-steps-label": "" }, elementProps],
+    });
+};
+StepsLabel.displayName = "StepsLabel";
+/**
+ * The only part that speaks the status. Renders a visually hidden span saying
+ * the resolved status string; pass `children` to localise the wording.
+ * Renders a `<span>` element.
+ */
+export const StepsStatus = ({ status, children, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [
+            {
+                "data-steps-status": "",
+                style: visuallyHiddenStyle,
+                children: children ?? resolvedStatus,
+            },
+            elementProps,
+        ],
+    });
+};
+StepsStatus.displayName = "StepsStatus";

package/dist/tabs/anchored.d.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import type { AnchorAlign, AnchorSide } from "../internal/render/positioning.js";
+import { type TransitionStatus } from "../internal/render/transition.js";
+/**
+ * The floating half of the surface.
+ *
+ * Wrapping `Tabs.Viewport` in these three parts is the entire difference
+ * between a panel that sits in the layout and one that floats above the open
+ * tab. Nothing else changes — same Root, same List, same Panels, same ARIA —
+ * because the panels portal into the viewport wherever it happens to be:
+ *
+ *   List + Viewport                                in the layout
+ *   List + Portal > Positioner > Popup > Viewport  anchored to the open tab
+ *
+ * One positioner serves the whole collection, anchored to whichever tab is
+ * open. A positioner per tab would mean one `autoUpdate` loop each — a
+ * ResizeObserver and an IntersectionObserver apiece, still running while
+ * closed — and nothing to morph between when the selection moves.
+ *
+ * Non-modal throughout: no backdrop, no scroll lock, no focus trap, and no
+ * dismissal on outside press. A chat dock is something you work *behind*.
+ */
+export type TabsSide = AnchorSide;
+export type TabsAlign = AnchorAlign;
+export type TabsPositionerState = {
+    side: TabsSide;
+    align: TabsAlign;
+    open: boolean;
+};
+export type TabsPortalProps = {
+    children?: ReactNode;
+    /** Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /**
+     * Keep the surface in the DOM while nothing is open. Costs a live
+     * positioning loop, so reach for it only when something inside must survive
+     * being closed.
+     */
+    keepMounted?: boolean;
+};
+export declare const TabsPortal: ({ children, container, keepMounted }: TabsPortalProps) => import("react").JSX.Element | null;
+export type TabsPositionerProps = PrimitiveProps<"div", TabsPositionerState> & {
+    side?: TabsSide;
+    align?: TabsAlign;
+    sideOffset?: number;
+    /** Kept clear of the viewport edges by this much. */
+    collisionPadding?: number;
+    children?: ReactNode;
+};
+export declare const TabsPositioner: ({ side, align, sideOffset, collisionPadding, className, render, style, ...elementProps }: TabsPositionerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TabsPopupState = {
+    open: boolean;
+    /** Drives `data-starting-style` / `data-ending-style` for the surface itself. */
+    transitionStatus: TransitionStatus;
+};
+export type TabsPopupProps = PrimitiveProps<"div", TabsPopupState>;
+/** The surface itself: yours to style and animate. */
+export declare const TabsPopup: ({ className, render, style, ...elementProps }: TabsPopupProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/tabs/anchored.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useMemo, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../internal/iso-layout-effect.js";
+import { Portal } from "../internal/portal.js";
+import { useAnchorPositioning } from "../internal/render/positioning.js";
+import { useAnimationsFinished, useTransitionStatus, } from "../internal/render/transition.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { openStateMapping, transitionStatusMapping } from "../internal/state-mappings.js";
+import { useTabsContextStore, useTabsStore } from "./store.js";
+const selectValue = (tabs) => tabs.value;
+const SurfaceTransitionContext = createContext(null);
+export const TabsPortal = ({ children, container, keepMounted = false }) => {
+    const store = useTabsContextStore();
+    const open = useTabsStore(store, selectValue) !== null;
+    // Kept mounted through the exit, so the surface can animate away instead of
+    // blinking out. Popup reports when that has finished.
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+    const transition = useMemo(() => ({ transitionStatus, open, onExitFinished: () => setMounted(false) }), [transitionStatus, open, setMounted]);
+    if (!mounted && !keepMounted)
+        return null;
+    return (_jsx(Portal, { container: container, children: _jsx(SurfaceTransitionContext, { value: transition, children: children }) }));
+};
+export const TabsPositioner = ({ side = "top", align = "center", sideOffset = 8, collisionPadding = 8, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const value = useTabsStore(store, selectValue);
+    const open = value !== null;
+    const positionerRef = useRef(null);
+    // The open tab is the anchor — its whole item where there is one, falling
+    // back to the button itself. Read on demand rather than subscribed to, so a
+    // tab mounted in the same commit has registered by the time this runs.
+    const getAnchor = useCallback(() => (value === null ? null : (store.anchors.get(value) ?? store.elements.get(value) ?? null)), [store, value]);
+    /*
+     * The resolved placement, which is what flip and shift may have changed it
+     * to — so a popup that flipped can style itself as the side it ended up on.
+     * `null` until the anchor has been measured, a frame later; the hook itself
+     * withholds paint until that lands.
+     */
+    const [placement, setPlacement] = useState(null);
+    // Fires on every reposition, including scrolls that change nothing, so only
+    // a real change is allowed through to state.
+    const onPositioned = useCallback((next) => {
+        setPlacement((current) => current && current.side === next.side && current.align === next.align ? current : next);
+    }, []);
+    useAnchorPositioning(getAnchor, positionerRef, {
+        enabled: open,
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        onPositioned,
+    });
+    return useRenderElement("div", { className, render, style }, {
+        state: { side: placement?.side ?? side, align: placement?.align ?? align, open },
+        stateAttributesMapping: {
+            ...openStateMapping,
+            // data-side / data-align are written imperatively by useAnchorPositioning, so keep the
+            // state copy out of the DOM rather than fighting it for the same attributes.
+            side: () => null,
+            align: () => null,
+        },
+        ref: positionerRef,
+        props: [
+            {
+                "data-tabs-positioner": "",
+                // Positioning belongs to this element and styling to the popup inside
+                // it, so the thing being animated is never the thing being moved.
+                role: "presentation",
+                // Absolute from the first render, so it never spends a frame as a
+                // layout participant in whatever it is portaled into. left/top/
+                // visibility stay imperative — a React-managed value that *changed*
+                // would be cleared out from under the hook; this one never does.
+                style: { position: "absolute" },
+            },
+            elementProps,
+        ],
+    });
+};
+/** The surface itself: yours to style and animate. */
+export const TabsPopup = ({ className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const open = useTabsStore(store, selectValue) !== null;
+    const transition = use(SurfaceTransitionContext);
+    const popupRef = useRef(null);
+    const runWhenAnimationsFinish = useAnimationsFinished(popupRef);
+    useIsomorphicLayoutEffect(() => {
+        if (!transition || transition.open)
+            return;
+        const controller = new AbortController();
+        runWhenAnimationsFinish(transition.onExitFinished, controller.signal);
+        return () => controller.abort();
+    }, [transition, runWhenAnimationsFinish]);
+    return useRenderElement("div", { className, render, style }, {
+        state: { open, transitionStatus: transition?.transitionStatus },
+        stateAttributesMapping: { ...openStateMapping, ...transitionStatusMapping },
+        ref: [popupRef, store.popupRef],
+        props: [
+            {
+                "data-tabs-popup": "",
+                onPointerEnter: store.hover.enterPopup,
+                onPointerLeave: store.hover.leavePopup,
+                // A press or focus inside means it is in use, so the mouse leaving no longer closes it.
+                onPointerDown: store.hover.claim,
+                onFocus: store.hover.claim,
+            },
+            elementProps,
+        ],
+    });
+};

package/dist/tabs/hover.d.ts

@@ -0,0 +1,33 @@
+import type { PointerEvent } from "react";
+import type { TabsRootChangeEventReason, TabsStore } from "./store.js";
+/** A tab the mouse is over, with its own timing. */
+export type TabsHoverTarget = {
+    value: string;
+    openDelay: number;
+    closeDelay: number;
+};
+type HoverStore = Pick<TabsStore, "getSnapshot" | "selectWithDetails" | "popupRef">;
+/**
+ * Hover for the whole strip, decided in one place. Every `openOnHover` tab and
+ * the popup report to it, so moving between tabs hands the popup over instead
+ * of closing it and opening it again.
+ */
+export declare const createTabsHover: (store: HoverStore) => {
+    /** Lets leaving one hover tab for another hand over. Returns the unregister. */
+    register: (tab: Element) => () => void;
+    /** Drops anything pending, for when the strip unmounts. */
+    release: () => void;
+    owns: (value: string) => boolean;
+    /** A change landed: hover owns it only if hover made it. */
+    changed: (value: string | null, reason: TabsRootChangeEventReason) => void;
+    enterTab: (next: TabsHoverTarget, event: PointerEvent) => void;
+    /** Moving restarts the wait, so the tab opens once the mouse comes to rest. */
+    moveOnTab: (event: PointerEvent) => void;
+    leaveTab: (event: PointerEvent) => void;
+    enterPopup: (event: PointerEvent) => void;
+    leavePopup: (event: PointerEvent) => void;
+    /** A press on the tab, or a press or focus inside the popup: it is in use now. */
+    claim: () => void;
+};
+export type TabsHover = ReturnType<typeof createTabsHover>;
+export {};

package/dist/tabs/hover.js

@@ -0,0 +1,169 @@
+"use client";
+import { flushSync } from "react-dom";
+import { createChangeEventDetails } from "../internal/change-event-details.js";
+import { createSafePolygon } from "../internal/safe-polygon.js";
+const isMouse = (event) => event.pointerType === "mouse";
+const isInside = (elements, target) => {
+    if (!(target instanceof Node))
+        return false;
+    for (const element of elements)
+        if (element.contains(target))
+            return true;
+    return false;
+};
+/** The popup's side of the tab, read off where both actually are. */
+const sideOf = (tab, popup) => {
+    if (popup.top >= tab.bottom)
+        return "bottom";
+    if (popup.bottom <= tab.top)
+        return "top";
+    return popup.left >= tab.right ? "right" : "left";
+};
+/**
+ * Hover for the whole strip, decided in one place. Every `openOnHover` tab and
+ * the popup report to it, so moving between tabs hands the popup over instead
+ * of closing it and opening it again.
+ */
+export const createTabsHover = (store) => {
+    const tabs = new Set();
+    /** The tab hover opened, until anything else changes the selection or a press claims it. */
+    let owner = null;
+    let target = null;
+    let openTimer;
+    let closeTimer;
+    let stopCone = () => { };
+    /** No pending open or close, and no cone. */
+    const release = () => {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        openTimer = undefined;
+        stopCone();
+    };
+    /** The popup is open or still fading out, so the next tab takes it over at once. */
+    const onScreen = () => {
+        const popup = store.popupRef.current;
+        return (popup !== null &&
+            (!popup.hasAttribute("data-closed") || popup.hasAttribute("data-ending-style")));
+    };
+    /** Redrawn at once, so a controlled parent is current before the mouse moves again. */
+    const change = (value, event, tab) => flushSync(() => store.selectWithDetails(value, createChangeEventDetails("trigger-hover", event, tab)));
+    const open = (value, event, tab) => {
+        const { value: current } = store.getSnapshot();
+        // Hover never takes over a tab someone opened on purpose.
+        if (current === value || (current !== null && owner === null))
+            return;
+        change(value, event, tab);
+    };
+    const close = (event) => {
+        release();
+        if (owner !== null)
+            change(null, event);
+    };
+    const closeAfterDelay = (event) => {
+        clearTimeout(closeTimer);
+        const delay = target?.closeDelay ?? 0;
+        if (delay > 0)
+            closeTimer = setTimeout(() => close(event), delay);
+        else
+            close(event);
+    };
+    const openAfterRest = (event, tab) => {
+        if (!target)
+            return;
+        const { value, openDelay } = target;
+        clearTimeout(openTimer);
+        openTimer = setTimeout(() => {
+            openTimer = undefined;
+            open(value, event, tab);
+        }, openDelay);
+    };
+    /** Keeps the popup open while the mouse travels from the tab towards it. */
+    const armCone = (tab, event) => {
+        stopCone();
+        const popup = store.popupRef.current;
+        if (!popup)
+            return close(event);
+        const cone = createSafePolygon({
+            x: event.clientX,
+            y: event.clientY,
+            side: sideOf(tab.getBoundingClientRect(), popup.getBoundingClientRect()),
+            reference: tab,
+            floating: popup,
+            onClose: () => closeAfterDelay(event),
+        });
+        document.addEventListener("mousemove", cone.onMouseMove);
+        stopCone = () => {
+            cone.stop();
+            document.removeEventListener("mousemove", cone.onMouseMove);
+            stopCone = () => { };
+        };
+    };
+    return {
+        /** Lets leaving one hover tab for another hand over. Returns the unregister. */
+        register: (tab) => {
+            tabs.add(tab);
+            return () => {
+                tabs.delete(tab);
+                release();
+            };
+        },
+        /** Drops anything pending, for when the strip unmounts. */
+        release,
+        owns: (value) => owner === value,
+        /** A change landed: hover owns it only if hover made it. */
+        changed: (value, reason) => {
+            owner = reason === "trigger-hover" ? value : null;
+            if (reason !== "trigger-hover")
+                release();
+        },
+        enterTab: (next, event) => {
+            if (!isMouse(event))
+                return;
+            release();
+            target = next;
+            if (store.getSnapshot().value === next.value)
+                return;
+            // Already open, or still fading out: switch at once rather than waiting to rest.
+            if (owner !== null || onScreen()) {
+                return open(next.value, event.nativeEvent, event.currentTarget);
+            }
+            openAfterRest(event.nativeEvent, event.currentTarget);
+        },
+        /** Moving restarts the wait, so the tab opens once the mouse comes to rest. */
+        moveOnTab: (event) => {
+            if (!isMouse(event) || openTimer === undefined)
+                return;
+            openAfterRest(event.nativeEvent, event.currentTarget);
+        },
+        leaveTab: (event) => {
+            if (!isMouse(event))
+                return;
+            release();
+            if (owner === null)
+                return;
+            // Onto another hover tab, whose arrival hands over, or straight into the popup.
+            if (isInside(tabs, event.relatedTarget))
+                return;
+            const popup = store.popupRef.current;
+            if (popup && isInside([popup], event.relatedTarget))
+                return;
+            armCone(event.currentTarget, event.nativeEvent);
+        },
+        enterPopup: (event) => {
+            if (!isMouse(event))
+                return;
+            stopCone();
+            clearTimeout(closeTimer);
+        },
+        leavePopup: (event) => {
+            if (!isMouse(event) || owner === null || isInside(tabs, event.relatedTarget))
+                return;
+            closeAfterDelay(event.nativeEvent);
+        },
+        /** A press on the tab, or a press or focus inside the popup: it is in use now. */
+        claim: () => {
+            release();
+            owner = null;
+        },
+    };
+};

package/dist/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export type { TabsAlign, TabsPopupProps, TabsPopupState, TabsPortalProps, TabsPositionerProps, TabsPositionerState, TabsSide, } from "./anchored.js";
+export * as Tabs from "./index.parts.js";
+export type { TabsDirection, TabsRootChangeEventDetails, TabsRootChangeEventReason, TabsSelectOnClose, TabsState, TabsStore, } from "./store.js";
+export { useTabs, useTabsStore } from "./store.js";
+export type { TabsActionProps, TabsCloseProps, TabsIconProps, TabsListProps, TabsOrientation, TabsPartState, TabsRootProps, TabsTriggerProps, TabsTriggerState, TabsViewportProps, TabsViewportState, } from "./tabs.js";

package/dist/tabs/index.js

@@ -0,0 +1,4 @@
+// Public surface of @intentface/ui/tabs: the `Tabs` namespace plus the store. No "use client" directive here — see
+// index.parts.ts.
+export * as Tabs from "./index.parts.js";
+export { useTabs, useTabsStore } from "./store.js";

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

@@ -0,0 +1,4 @@
+export { TabsPopup as Popup, TabsPortal as Portal, TabsPositioner as Positioner, } from "./anchored.js";
+/** Create a standalone store handle: `<Tabs.Root store={…}>` plus `useTabsStore(store, selector)` for reading it from outside the tree. */
+export { createTabsStore as createStore } from "./store.js";
+export { TabsAction as Action, TabsClose as Close, TabsIcon as Icon, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger, TabsViewport as Viewport, } from "./tabs.js";

package/dist/tabs/index.parts.js

@@ -0,0 +1,8 @@
+// Part names for the `Tabs` namespace. Deliberately carries no "use client"
+// directive: this module and index.ts must stay server-resolvable so a React
+// Server Component can reach Tabs.Root and its siblings through them. Each
+// part module carries the directive itself.
+export { TabsPopup as Popup, TabsPortal as Portal, TabsPositioner as Positioner, } from "./anchored.js";
+/** Create a standalone store handle: `<Tabs.Root store={…}>` plus `useTabsStore(store, selector)` for reading it from outside the tree. */
+export { createTabsStore as createStore } from "./store.js";
+export { TabsAction as Action, TabsClose as Close, TabsIcon as Icon, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger, TabsViewport as Viewport, } from "./tabs.js";