@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2

package/navigation/file-tabs/FileTabs.d.ts

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useRender } from '@base-ui/react/use-render';
+import { type PrimaryScale, type RadixScale } from '../../utils/scales';
+export declare const fileTabs: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Where the header sits on its host: see `FileTabsProps['frame']`. */
+export type FileTabsFrame = 'top' | 'joined' | 'none';
+/** One tab: a document in the package. */
+export type FileTab = {
+    /** The tab's value, unique within `tabs`. A code block passes the file name. */
+    id: string;
+    /** The label: the document's short title (a file name in a code block). UI face at the caption size, not caps; mono with `mono`. */
+    name: string;
+    /**
+     * Deep-link slug. The tab renders as `<a href="#slug">` (`nativeButton={false}`).
+     * A plain click selects the tab and `preventDefault()`s the anchor, so the page
+     * doesn't jump and the hash isn't written. A modifier click (Ctrl, Cmd, Alt or
+     * Shift) opens the link and leaves the selection alone.
+     */
+    slug?: string;
+};
+/** Props for FileTabs: Base UI Tabs Root props (without its value props and `orientation`) plus the documents, the header's frame, controls, status and label face, and the color axes. */
+export type FileTabsProps = Omit<BaseTabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'orientation'> & {
+    tabs: readonly FileTab[];
+    /** Controlled: the selected tab's `id`. `undefined`, or an id not in `tabs`, selects the first tab. */
+    value?: string;
+    /** Uncontrolled initial `id`. Default: the first tab. */
+    defaultValue?: string;
+    /**
+     * Called on user selection only. Not called for a modifier activation, which
+     * `eventDetails.cancel()`s. The modifiers are read from `eventDetails.event`
+     * (Base UI 1.8), so this covers the keyboard as well as the pointer.
+     */
+    onValueChange?: (id: string) => void;
+    /** Disables every tab: `--role-muted` label plus a `line-dotted-fine` underline, no opacity. Default `false`. */
+    disabled?: boolean;
+    /**
+     * Labels in mono (`type-data`, §3.11) instead of the UI face: for file
+     * names, e.g. code. Mono labels are left to right (`dir="ltr"`) on any
+     * page, since file names are, while the tabs and header still mirror in
+     * RTL. Code Block and Demo set it. Default `false`.
+     */
+    mono?: boolean;
+    /**
+     * Where the header sits. Its host is the bordered box it opens: a
+     * `--border-size-1` edge, no padding, a `--primary1` face and no clip,
+     * such as Code Block's frame, or the Root itself given a frame class.
+     * `'top'`: at the top of the host, whose top corners take
+     * `--radius-2-25` (a host with another radius sets `--file-tabs-host-radius`
+     * on the Root). The tab strip runs out over the host's side edges by
+     * their width, so an end tab's edge is the host's edge, its paper-tab
+     * corner leaving that line below the host's corner; the side edges are
+     * drawn again over the header from below the host's corner radius, so
+     * scrolled tabs and the ends of the strip's native scrollbar pass under
+     * them; a `FileTabsControl` hangs outside.
+     * `'joined'`: the same, in a part of the host below another (Demo's
+     * code); the header draws the `--role-rule` that joins the part above,
+     * and the side edges run from it. `'none'`: no host frame (tabs over
+     * their panel on the page); the strip stays inside the header, the end
+     * tabs show their own edges, and a `FileTabsControl` hangs past the
+     * header's own end. Default `'top'`.
+     */
+    frame?: FileTabsFrame;
+    /**
+     * Controls at the header's end: a `FileTabsControl` (a Menu's ⋮ trigger)
+     * or a few small icon Buttons.
+     * - A `FileTabsControl` always hangs just outside the host's inline-end
+     *   edge (past the header's own end with `frame="none"`) with zero layout
+     *   width, whatever the tab count, so the tabs keep the whole header. Its
+     *   hit area, `--fgd-size-hit`, extends outward into the gutter, never
+     *   over the tabs. **The host must leave `--fgd-size-file-tabs-control`
+     *   (24 px) free past its edge, unclipped** (or inside an
+     *   `overflow-clip-margin`); where the page ends sooner, clip it sideways
+     *   (`overflow-x: clip`) so the rest of the hit area can't scroll it.
+     *   With no document (`tabs` empty) there is no header row at all: the ⋮
+     *   hangs from the host's top-end corner.
+     * - Small icon Buttons (`variant="text"` icon-only `sm` Buttons) sit in
+     *   the header, quiet at rest: their edge is drawn only while pointed at
+     *   or focused. They sit beside the one document's label, which truncates
+     *   to leave them room (the header never wraps); with several documents,
+     *   in a `--fgd-size-hit` cell at the header's end with a `--role-rule`
+     *   start edge, where the tabs end. The row is end-aligned: a control
+     *   that joins after the first paint goes before the others (earlier in
+     *   `controls`), so the ones already painted don't move.
+     * Hidden in print.
+     */
+    controls?: React.ReactNode;
+    /**
+     * The busy "-ing…" label while something the header started is under way
+     * ("Switching to JS…", "Formatting…") [D84], laid over the header's end
+     * beside the controls: mono, `--role-muted`, on the `--primary1` face with
+     * a `--role-rule` start edge, so it never moves or narrows the tabs. Its
+     * element is a `role="status"` live region, rendered whenever `status`
+     * isn't `undefined`: pass `''` while idle, so it stays mounted and its
+     * changes are announced. Not for confirmations such as a copy: those are
+     * toasts (§10.17). Hidden in print.
+     */
+    status?: React.ReactNode;
+    /** Primary scale: labels, rules, the tabs' faces (the recessed --primary3, the front --primary1), focus ring. Never defaulted [D133]. */
+    primary?: PrimaryScale;
+    /** Secondary scale: the hover underline (`--role-accent`). Never defaulted. */
+    secondary?: RadixScale;
+};
+/**
+ * The root of a set of file tabs: it holds the selection and the header's
+ * `frame`, `controls`, `status` and `mono`, and wraps both the header
+ * (`FileTabsList`) and `FileTabsPanel`. Tabs with a `slug` are deep links:
+ * a plain click selects the document, a modifier click opens the link and
+ * leaves the selection.
+ */
+export declare function FileTabs(props: FileTabsProps): React.JSX.Element;
+/** Props for FileTabsList: Base UI Tabs List props; the tabs, controls and status come from the Root. */
+export type FileTabsListProps = Omit<BaseTabs.List.Props, 'children'> & {
+    /** The tablist's accessible name. Default `"Documents"` (Code Block passes `"Files"`). */
+    'aria-label'?: string;
+};
+/**
+ * The header: one fixed 56 px row with its `--role-rule`, the folder tabs
+ * across its full width under 12 px of room, standing on the rule, and the
+ * Root's `status` and `controls` at its end. The labels take the UI face
+ * (mono with `mono`); the selected tab takes its panel's face and opens
+ * into it, the others recessed behind it with its neighbours tucked
+ * under it. When they overflow, their row scrolls sideways with its native
+ * scrollbar, which hangs just below the header (or overlays the strip's
+ * foot, where scrollbars overlay), so the tabs never lift off the rule.
+ * With one tab it shows that name as a label (no tablist), truncated with
+ * an ellipsis where the controls need its room; with none, the controls
+ * and status (a `FileTabsControl` alone hangs, with no header row), or
+ * nothing. Its own props (`aria-label`, `className` …) go to the tablist,
+ * or to the one document's label.
+ */
+export declare function FileTabsList(props: FileTabsListProps): React.JSX.Element | null;
+/** Props for FileTabsControl: button props plus `render`. Name it with `aria-label`. */
+export type FileTabsControlProps = Omit<useRender.ComponentProps<'button'>, 'className'> & {
+    className?: string;
+};
+/**
+ * One header control for the Root's `controls`: a `<button>` holding an
+ * icon (an `Icon` with `weight="interactive"` takes its hover weight here;
+ * the ⋮ is `more_vert` at the tag tier, `size="tag"`, 20 px).
+ * It always hangs outside the host's inline-end edge: an ear `--size-px-4`
+ * wide from the host's edge line, from the host's top edge to the header
+ * rule's foot, with its `--fgd-size-hit` hit area past that edge and none
+ * over the tabs; the host leaves `--fgd-size-file-tabs-control` free there.
+ * Hovered or focused, the ear shows at once, drawn in `--primary12` on the
+ * `--role-soft-hover` fill (at the top of a rounded host, wrapping the
+ * host's top-end corner, so the outline runs unbroken round both); while its popup is open (`aria-expanded="true"`;
+ * a tooltip's `data-popup-open` changes nothing), on the `--primary1` face.
+ * As a Menu's trigger:
+ * `<Menu.Trigger render={<FileTabsControl />} aria-label="More actions">`.
+ * Or as a lone action, where it is the only one (Code Block's nameless
+ * snippet hangs its copy, `content_copy` at the tag tier): name it with
+ * `aria-label`, pair it with a Tooltip, and give it an `onClick`.
+ */
+export declare function FileTabsControl(props: FileTabsControlProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FileTabsPanel: Base UI Tabs Panel props; its value is the selected tab's. */
+export type FileTabsPanelProps = Omit<BaseTabs.Panel.Props, 'value'>;
+/**
+ * The panel for the selected tab: `role="tabpanel"`, labelled by the selected
+ * tab, which `aria-controls` it. Its element stays the same across selections,
+ * so the content inside is never remounted; empty hidden panels stand in for
+ * the other tabs, so every tab's `aria-controls` resolves. With fewer than
+ * two tabs it renders a plain `div` (there is no tablist to pair with).
+ */
+export declare function FileTabsPanel(props: FileTabsPanelProps): React.JSX.Element;
+//# sourceMappingURL=FileTabs.d.ts.map

package/navigation/file-tabs/FileTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTabs.d.ts","sourceRoot":"","sources":["../../src/navigation/file-tabs/FileTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAIrD,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AA4D3B,eAAO,MAAM,QAAQ;;;8EAMnB,CAAA;AAgBF,uEAAuE;AACvE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAErD,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG;IACpB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAA;IACV,oIAAoI;IACpI,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,2LAA2L;AAC3L,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,QAAQ,CAAC,IAAI,CAAC,KAAK,EACnB,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAC3D,GAAG;IACF,IAAI,EAAE,SAAS,OAAO,EAAE,CAAA;IACxB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yIAAyI;IACzI,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB,CAAA;AAwCD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAsD5C;AAED,yGAAyG;AACzG,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IACtE,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAID;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,4BAoEpD;AAyCD,wFAAwF;AACxF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG;IACzF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAU1D;AAED,0FAA0F;AAC1F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AASpE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAiCtD"}

package/navigation/file-tabs/FileTabs.js

@@ -0,0 +1,253 @@
+'use client';
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './file-tabs.module.css';
+/*
+ * File tabs: paper-style folder tabs over a package of static documents
+ * kept together (a grant packet, a lease, a year of minutes), each tab a
+ * standalone document sharing one panel, with optional controls and a busy
+ * status at the header's end. Tabs (§9.5) switch views or sections of one
+ * thing; these take any number of documents, can be deep links, and label
+ * them in the UI face (`mono` for file names). Code Block and Demo render
+ * their headers through it for code files, with `mono`. It is
+ * presentational and needs no docs engine.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: file-tabs.module.css; CVA functions `fileTabs` (the Root) and
+ *   `fileTabsHeader` (the header FileTabsList renders, internal).
+ * - Axes: `primary`, `secondary` → scales module classes (Root); `frame`
+ *   (`top` | `joined` | `none`) → frameTop, frameJoined, frameNone (header).
+ * - Compound variants: none.
+ * - Defaults: frame `top`; color axes are never defaulted [D133].
+ * - Color fallback: inherits the scope.
+ * - States: at rest a tab is recessed paper, --primary3 in a --role-rule
+ *   edge, standing on the header's rule; the selected tab (`data-active`)
+ *   → the front sheet: its panel's own face (the host's --primary1; the
+ *   ground with `frame="none"`) in the same edge with --radius-2-75 top
+ *   radii (the paper-tab radius, as the first and last tabs' outer
+ *   corners), open at its foot into the panel with no rule between, a
+ *   --primary12 label at --font-weight-7 (weight and the joined edge carry
+ *   the state, not color alone), its neighbours tucked under it; `:active`
+ *   on it → the radii grow (motion OK only); `:hover` on the others → the
+ *   bare-text underline (--role-accent at --border-size-2, offset
+ *   --size-px-1) [D181]; `:active` on the others → a --border-size-2
+ *   --primary12 line under the label; `:focus-visible` → the ring inside
+ *   the hit area; `data-disabled` → --role-muted label and a
+ *   `line-dotted-fine` underline, the selected tab keeping its face and
+ *   shape [D16, D85]. The header: one fixed 56 px row that never wraps (a
+ *   lone label truncates); `data-tablist` (two or more documents) → the
+ *   bar leaves the flow and the tablist becomes the tabs' native scroll
+ *   row (and small controls' cell takes a --role-rule start edge);
+ *   `data-labelless` (no document) with a FileTabsControl → no header row.
+ *   A FileTabsControl in `controls` → the header's end always hangs outside
+ *   the host's inline-end edge (CSS `:has()`, nothing measured).
+ *   FileTabsControl: `:hover` / `:focus-visible` → at once, the ear drawn
+ *   in --primary12 on the --role-soft-hover fill [D181];
+ *   `aria-expanded="true"` (its menu open; never its tooltip's
+ *   `data-popup-open`) → the ear on the --primary1 face; disabled →
+ *   --role-muted. Small icon Buttons in `controls` (`text` icon-only) →
+ *   quiet at rest; `:hover` / `:focus-visible` → at once, their circle
+ *   drawn in --primary12 at --border-size-1 on the --role-soft-hover fill.
+ * - Parts: base, header, bar (the row inside it, which draws the host's
+ *   side edges), lead (the tabs or the one document's label), list (the
+ *   tabs' native scroll row), tab, label, edge / edgeLine (the disabled
+ *   underline), single (the lone document's label), side (the header's end),
+ *   status, controls (their cell), control (FileTabsControl), panel.
+ * - Scope: none.
+ * - Container: none; the tabs scroll sideways in their native scroll row
+ *   when they overflow. The host leaves --fgd-size-file-tabs-control free
+ *   past its inline-end edge, unclipped, for the hanging ⋮.
+ */
+export const fileTabs = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The header's CVA function (FileTabsList): where it sits on its host. */
+const fileTabsHeader = cva(styles.header, {
+    variants: {
+        frame: {
+            top: styles.frameTop,
+            joined: styles.frameJoined,
+            none: styles.frameNone,
+        },
+    },
+    defaultVariants: {
+        frame: 'top',
+    },
+});
+const FileTabsContext = React.createContext(null);
+FileTabsContext.displayName = 'FileTabsContext';
+function useFileTabsContext(part) {
+    const context = React.useContext(FileTabsContext);
+    if (context === null) {
+        throw new Error(`${part} must be placed inside FileTabs.`);
+    }
+    return context;
+}
+/** The modifiers that make an anchor open elsewhere (new tab, window or split) instead of selecting. */
+function hasModifier(event) {
+    if (typeof event !== 'object' || event === null)
+        return false;
+    const keys = event;
+    return Boolean(keys.ctrlKey || keys.metaKey || keys.altKey || keys.shiftKey);
+}
+/**
+ * A link tab's click: a plain click only selects, so the page doesn't jump
+ * and the hash isn't written; a modifier click keeps the browser's own
+ * handling (the selection change is canceled in the Root).
+ */
+function handleLinkClick(event) {
+    if (!hasModifier(event))
+        event.preventDefault();
+}
+/**
+ * The root of a set of file tabs: it holds the selection and the header's
+ * `frame`, `controls`, `status` and `mono`, and wraps both the header
+ * (`FileTabsList`) and `FileTabsPanel`. Tabs with a `slug` are deep links:
+ * a plain click selects the document, a modifier click opens the link and
+ * leaves the selection.
+ */
+export function FileTabs(props) {
+    const { tabs, value, defaultValue, onValueChange, disabled = false, mono = false, frame = 'top', controls, status, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const requested = value !== undefined ? value : uncontrolled;
+    const selected = tabs.some((tab) => tab.id === requested) ? requested : tabs[0]?.id;
+    const handleValueChange = (next, details) => {
+        // Only user activations; Base UI's automatic fallbacks never reach a controlled root.
+        if (details.reason !== 'none')
+            return;
+        const tab = tabs.find((candidate) => candidate.id === next);
+        if (tab === undefined)
+            return;
+        // A modifier activation of a link (click, Enter or Space) opens the link instead.
+        if (tab.slug && hasModifier(details.event)) {
+            details.cancel();
+            return;
+        }
+        setUncontrolled(tab.id);
+        onValueChange?.(tab.id);
+    };
+    const context = React.useMemo(() => ({ tabs, selected, disabled, mono, frame, controls, status }), [tabs, selected, disabled, mono, frame, controls, status]);
+    return (React.createElement(FileTabsContext.Provider, { value: context },
+        React.createElement(BaseTabs.Root, { ...rest, ...scope, value: selected ?? null, onValueChange: handleValueChange, className: resolveClassName(className, (extra) => fileTabs({ primary, secondary, className: extra })) })));
+}
+const staticListState = { orientation: 'horizontal', tabActivationDirection: 'none' };
+/**
+ * The header: one fixed 56 px row with its `--role-rule`, the folder tabs
+ * across its full width under 12 px of room, standing on the rule, and the
+ * Root's `status` and `controls` at its end. The labels take the UI face
+ * (mono with `mono`); the selected tab takes its panel's face and opens
+ * into it, the others recessed behind it with its neighbours tucked
+ * under it. When they overflow, their row scrolls sideways with its native
+ * scrollbar, which hangs just below the header (or overlays the strip's
+ * foot, where scrollbars overlay), so the tabs never lift off the rule.
+ * With one tab it shows that name as a label (no tablist), truncated with
+ * an ellipsis where the controls need its room; with none, the controls
+ * and status (a `FileTabsControl` alone hangs, with no header row), or
+ * nothing. Its own props (`aria-label`, `className` …) go to the tablist,
+ * or to the one document's label.
+ */
+export function FileTabsList(props) {
+    const { 'aria-label': ariaLabel = 'Documents', className, style, ...rest } = props;
+    const { tabs, disabled, mono, frame, controls, status } = useFileTabsContext('FileTabsList');
+    const hasControls = controls != null && typeof controls !== 'boolean';
+    const hasStatus = status !== undefined;
+    const tablist = tabs.length > 1;
+    if (tabs.length === 0 && !hasControls && !hasStatus)
+        return null;
+    let lead = null;
+    if (tabs.length === 1) {
+        const labelClass = typeof className === 'function' ? className(staticListState) : className;
+        const labelStyle = typeof style === 'function' ? style(staticListState) : style;
+        lead = (React.createElement("span", { className: cx(styles.single, mono ? styles.singleMono : styles.singleUi, labelClass), style: labelStyle, dir: mono ? 'ltr' : undefined }, tabs[0].name));
+    }
+    else if (tablist) {
+        // The tablist is the tabs' native scroll row (the header's
+        // `data-tablist` styles it): Base UI scrolls it to bring each tab into
+        // view as arrow keys move focus.
+        lead = (React.createElement(BaseTabs.List, { ...rest, "aria-label": ariaLabel, style: style, className: resolveClassName(className, (extra) => cx(styles.list, extra)) }, tabs.map((tab) => (React.createElement(FileTabsTab, { key: tab.id, tab: tab, disabled: disabled, mono: mono })))));
+    }
+    return (React.createElement("div", { className: fileTabsHeader({ frame }), "data-tablist": tablist ? '' : undefined, "data-labelless": tabs.length === 0 ? '' : undefined },
+        React.createElement("div", { className: styles.bar },
+            React.createElement("div", { className: styles.lead }, lead),
+            hasControls || hasStatus ? (React.createElement("div", { className: styles.side },
+                hasStatus ? (React.createElement("span", { role: "status", className: styles.status }, status)) : null,
+                hasControls ? (React.createElement("div", { className: styles.controls }, controls)) : null)) : null)));
+}
+/** One folder tab: a link when the document has a slug, else a button. */
+function FileTabsTab(props) {
+    const { tab, disabled, mono } = props;
+    const content = (React.createElement("span", { className: cx(styles.label, mono ? styles.labelMono : styles.labelUi), "data-label": tab.name, dir: mono ? 'ltr' : undefined },
+        tab.name,
+        disabled ? (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+            React.createElement("line", { className: styles.edgeLine, x1: "0", y1: "50%", x2: "100%", y2: "50%" }))) : null));
+    if (tab.slug) {
+        return (React.createElement(BaseTabs.Tab, { value: tab.id, disabled: disabled, className: styles.tab, nativeButton: false, render: React.createElement("a", { href: `#${tab.slug}`, onClick: handleLinkClick }) }, content));
+    }
+    return (React.createElement(BaseTabs.Tab, { value: tab.id, disabled: disabled, className: styles.tab }, content));
+}
+/**
+ * One header control for the Root's `controls`: a `<button>` holding an
+ * icon (an `Icon` with `weight="interactive"` takes its hover weight here;
+ * the ⋮ is `more_vert` at the tag tier, `size="tag"`, 20 px).
+ * It always hangs outside the host's inline-end edge: an ear `--size-px-4`
+ * wide from the host's edge line, from the host's top edge to the header
+ * rule's foot, with its `--fgd-size-hit` hit area past that edge and none
+ * over the tabs; the host leaves `--fgd-size-file-tabs-control` free there.
+ * Hovered or focused, the ear shows at once, drawn in `--primary12` on the
+ * `--role-soft-hover` fill (at the top of a rounded host, wrapping the
+ * host's top-end corner, so the outline runs unbroken round both); while its popup is open (`aria-expanded="true"`;
+ * a tooltip's `data-popup-open` changes nothing), on the `--primary1` face.
+ * As a Menu's trigger:
+ * `<Menu.Trigger render={<FileTabsControl />} aria-label="More actions">`.
+ * Or as a lone action, where it is the only one (Code Block's nameless
+ * snippet hangs its copy, `content_copy` at the tag tier): name it with
+ * `aria-label`, pair it with a Tooltip, and give it an `onClick`.
+ */
+export function FileTabsControl(props) {
+    const { render, ref, className, ...elementProps } = props;
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        ref,
+        props: mergeProps({ type: 'button' }, elementProps, {
+            className: cx(styles.control, className),
+        }),
+    });
+}
+const staticPanelState = {
+    hidden: false,
+    orientation: 'horizontal',
+    tabActivationDirection: 'none',
+    transitionStatus: undefined,
+};
+/**
+ * The panel for the selected tab: `role="tabpanel"`, labelled by the selected
+ * tab, which `aria-controls` it. Its element stays the same across selections,
+ * so the content inside is never remounted; empty hidden panels stand in for
+ * the other tabs, so every tab's `aria-controls` resolves. With fewer than
+ * two tabs it renders a plain `div` (there is no tablist to pair with).
+ */
+export function FileTabsPanel(props) {
+    const { className, style, render, keepMounted, children, ...rest } = props;
+    const { tabs, selected } = useFileTabsContext('FileTabsPanel');
+    if (tabs.length < 2 || selected === undefined) {
+        const plainClass = typeof className === 'function' ? className(staticPanelState) : className;
+        const plainStyle = typeof style === 'function' ? style(staticPanelState) : style;
+        return (React.createElement("div", { ...rest, className: cx(styles.panel, plainClass), style: plainStyle }, children));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseTabs.Panel, { ...rest, render: render, keepMounted: keepMounted, value: selected, style: style, className: resolveClassName(className, (extra) => cx(styles.panel, extra)) }, children),
+        tabs.map((tab) => tab.id === selected ? null : (React.createElement(BaseTabs.Panel, { key: tab.id, value: tab.id, keepMounted: true, className: styles.panel })))));
+}
+//# sourceMappingURL=FileTabs.js.map

package/navigation/file-tabs/FileTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTabs.js","sourceRoot":"","sources":["../../src/navigation/file-tabs/FileTabs.tsx"],"names":[],"mappings":"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"}