plass-ui 0.0.1 → 1.0.0

package/dist/components/table/PlTable.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { controlTextLeadingClasses, focusRingInsetClasses, metaTextClasses, paddingXValues, radiusClasses, sheetRestClasses, surfaceSlots } from '../../internal/styles.js';
+/**
+ * Row height, as vertical padding — and, like the horizontal track, a raw
+ * length rather than a class. See the note on `paddingXValues`.
+ */
+const cellPaddingYValues = {
+    default: { xs: '0.375rem', sm: '0.5rem', md: '0.75rem', lg: '0.875rem', xl: '1rem' },
+    compact: { xs: '0.125rem', sm: '0.25rem', md: '0.4375rem', lg: '0.5625rem', xl: '0.6875rem' }
+};
+/**
+ * Everything a table is painted with is written inline, `<table>` included.
+ *
+ * This is the one component in the library that has to do that, and the reason
+ * is the elements it renders. A PlButton owns its `<button>`; nobody else
+ * styles it. `<table>`, `<th>` and `<td>` are different — VitePress's
+ * `.vp-doc table`, Tailwind Typography's `.prose td` and every CSS framework in
+ * existence style them by tag name, at two-class specificity that a one-class
+ * Tailwind utility cannot outrank.
+ *
+ * Padding and alignment were already written inline for that reason. **The
+ * borders, the display mode and the margins were not**, and that omission was
+ * most of what a Plass table looked like on a documentation page: the host's
+ * `td { border: 1px solid }` drew a full grid of cell rules the design never
+ * asked for, its `table { display: block }` stopped `width: 100%` filling the
+ * sheet, and its `table { margin: 20px 0 }` pushed the whole thing off the
+ * top-left corner of the pane it is supposed to be flush inside. A grid of
+ * boxed cells floating inside a rounded sheet is not a restrained table with a
+ * problem — it is somebody else's table wearing this one's frame.
+ *
+ * So every cell states `border: 0` and then draws the one rule it actually
+ * wants, and the `<table>` states the four properties a prose stylesheet is
+ * known to take off it. It is verbose, and it is the only way the component
+ * looks the same in a bare app and inside `.prose`.
+ *
+ * What is *not* inline is the row's own background, because it has a hover
+ * state and inline styles have no `:hover`. It reads a `--p-row` slot instead,
+ * which classes then set — a custom property is invisible to a host stylesheet,
+ * so a one-class variant wins there without a fight.
+ */
+const tableStyle = {
+    display: 'table',
+    width: '100%',
+    margin: 0,
+    borderCollapse: 'collapse',
+    borderSpacing: 0
+};
+const rowClasses = /* @__PURE__ */ [
+    '[--p-row:transparent]',
+    '[transition:background-color_var(--plass-duration)_var(--plass-ease)]'
+].join(' ');
+/**
+ * What a row that answers a press needs beyond the pointer treatment.
+ *
+ * `tabIndex` is the whole point: a row whose only way in is `onClick` is a
+ * control a keyboard cannot reach at all, and `cursor-pointer` advertises it as
+ * one anyway. The ring is inset rather than offset, because the sheet clips at
+ * its own rounded edge and an outline drawn outside the first or last row is an
+ * outline with its top or bottom sliced off.
+ *
+ * The `role` is deliberately left alone. `role="button"` on a `<tr>` reads well
+ * in isolation and takes the row semantics off it — which orphans every `<td>`
+ * inside from the table they belong to, and costs a screen reader the column
+ * headers, the row position and the count.
+ */
+const clickableRowClasses = /* @__PURE__ */ [
+    'cursor-pointer [outline:none]',
+    focusRingInsetClasses
+].join(' ');
+/**
+ * Two weights of rule, and the whole of the table's structure.
+ *
+ * `--plass-divider` scores one row off the next, the same ink a PlCard and a
+ * PlList are scored with, so a table on a card and the card's own dividers are
+ * one family of lines. The header sits on `--plass-border`, one step firmer,
+ * because the break between the names of the columns and the data in them is
+ * the one division a reader has to find without looking for it.
+ *
+ * Both are neutral inks rather than the `--plass-glass-line` this used to use.
+ * That line is white, and a white rule between two rows of a white sheet is
+ * not a rule — which is why the table had no visible structure of its own in
+ * light mode, and why it looked like whatever grid the host page happened to
+ * be drawing over it.
+ *
+ * They are on the *cells* rather than on the `<tr>`, which is where a rule can
+ * be written inline and therefore where a host stylesheet cannot reach it.
+ */
+const rowRule = '1px solid var(--plass-divider)';
+const headRule = '1px solid var(--plass-border)';
+/**
+ * A grid of data on a sheet of glass.
+ *
+ * The sheet is the ordinary Plass container — `variant`, `size`, `color`,
+ * `density` and `elevation` all mean what they mean everywhere else, and it is
+ * never dyed. What the table adds is the part that is genuinely tabular: the
+ * columns, the rows, and the fact that the two cannot drift apart.
+ *
+ * Not a `forwardRef`, because it is generic: a component wrapped in
+ * `React.forwardRef` loses its type parameter, and `Row` is the whole point of
+ * the API. `ref` is not offered rather than being offered with `Row` widened to
+ * `any`.
+ */
+export function PlTable({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, columns, rows, getRowKey, caption, empty = 'No data', striped = false, hoverable = false, stickyHeader = false, maxHeight, onRowClick, className, style, ...props }) {
+    const padX = paddingXValues[density][size];
+    const padY = cellPaddingYValues[density][size];
+    const clickable = Boolean(onRowClick);
+    const lit = hoverable || clickable;
+    const capped = maxHeight !== undefined;
+    const captionId = React.useId();
+    // `border: 0` first, then the one edge this cell actually draws. Written as
+    // the longhand rather than a `border` shorthand carrying `0` so the rule and
+    // the reset cannot be reordered into each other.
+    const cellStyle = {
+        padding: `${padY} ${padX}`,
+        border: 0,
+        background: 'none'
+    };
+    const headCellStyle = {
+        ...cellStyle,
+        // The rule under the column names, and the one place the table draws an
+        // edge as a shadow rather than as a border. `border-collapse: collapse`
+        // hands a cell's borders to the *table's* border grid, and that grid does
+        // not travel with a `position: sticky` cell — so a pinned header keeps its
+        // fill and leaves its underline behind at the top of the scroll. An inset
+        // shadow belongs to the cell's own box and goes where the cell goes.
+        ...(stickyHeader
+            ? { boxShadow: `inset 0 -1px 0 var(--plass-border)` }
+            : { borderBottom: headRule }),
+        // No band behind the column names.
+        //
+        // The header used to be `--plass-glass-press`, one step up the glass ladder
+        // — and one step up a ladder whose rungs are 62%, 76% and 88% white is, on
+        // a light page, a white bar. A filled strip across the top of a grid is the
+        // single fastest way to make data look like chrome, and it was doing that
+        // while the rules between the rows underneath were invisible: all of the
+        // table's weight in the one place that needed none of it. Muted, semibold
+        // names over a firmer rule say "these are the columns" with nothing filled
+        // in at all.
+        //
+        // A *pinned* header is the exception, and it is not decoration: rows pass
+        // directly underneath it, and a translucent fill lets them through. Two
+        // stacked opaque layers stop the light — the sheet's own densest glass over
+        // the page's surface colour — which is the same trick a pinned first
+        // column needs for the same reason.
+        ...(stickyHeader
+            ? {
+                background: 'linear-gradient(var(--plass-glass-press), var(--plass-glass-press)),' +
+                    ' linear-gradient(var(--plass-surface), var(--plass-surface))'
+            }
+            : null)
+    };
+    /** The rule above a row — every row but the first, which has the header's. */
+    const bodyCellStyle = (index) => index === 0 ? cellStyle : { ...cellStyle, borderTop: rowRule };
+    return (_jsxs("div", { className: [
+            // The sheet clips, and the box inside it scrolls. Two elements rather
+            // than one because a `caption` has to stay out of what scrolls: a
+            // pinned header over rows that pass under it is the point of
+            // `stickyHeader`, and a title that slid away above it would take the
+            // table's name off the screen with it.
+            'overflow-hidden',
+            radiusClasses[size],
+            sheetRestClasses[variant],
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: [caption ? (_jsx("div", { id: captionId, className: `${metaTextClasses[size]} font-semibold text-(--plass-muted-fg)`, style: { ...cellStyle, borderBottom: rowRule, textAlign: 'start' }, children: caption })) : null, _jsx("div", { className: [
+                    'overflow-x-auto',
+                    // Only when there is a cap to scroll against. A box that is as tall
+                    // as its content has nothing to scroll, and `overscroll-contain` on
+                    // one of those would swallow the page's own scroll at its edges.
+                    capped ? 'overflow-y-auto overscroll-contain' : ''
+                ]
+                    .filter(Boolean)
+                    .join(' '), style: capped ? { maxHeight } : undefined, children: _jsxs("table", { "aria-labelledby": caption ? captionId : undefined, className: `text-start ${controlTextLeadingClasses[size]} text-(--plass-fg)`, style: tableStyle, children: [_jsx("colgroup", { children: columns.map((column) => (_jsx("col", { style: column.width === undefined
+                                    ? undefined
+                                    : {
+                                        width: typeof column.width === 'number' ? `${column.width}px` : column.width
+                                    } }, column.key))) }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: [
+                                        'font-semibold whitespace-nowrap text-(--plass-muted-fg)',
+                                        stickyHeader ? 'sticky top-0 z-10' : ''
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' '), style: { ...headCellStyle, textAlign: column.align ?? 'start' }, children: column.header ?? column.key }, column.key))) }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { className: rowClasses, children: _jsx("td", { colSpan: columns.length, className: "text-(--plass-muted-fg)", style: { ...cellStyle, padding: `2rem ${padX}`, textAlign: 'center' }, children: empty }) })) : (rows.map((row, index) => (_jsx("tr", { className: [
+                                    rowClasses,
+                                    striped && index % 2 === 1 ? '[--p-row:var(--plass-stripe)]' : '',
+                                    lit ? 'hover:[--p-row:var(--p-soft)]' : '',
+                                    clickable ? clickableRowClasses : ''
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), style: { backgroundColor: 'var(--p-row)' }, tabIndex: clickable ? 0 : undefined, onClick: onRowClick ? () => onRowClick(row, index) : undefined, onKeyDown: onRowClick
+                                    ? (event) => {
+                                        // Only the row's own keys. A cell can hold a link or a
+                                        // button, and those have an Enter of their own — running
+                                        // both would open the row and follow the link at once.
+                                        if (event.target !== event.currentTarget) {
+                                            return;
+                                        }
+                                        if (event.key !== 'Enter' && event.key !== ' ') {
+                                            return;
+                                        }
+                                        // Space scrolls the page otherwise, which is the one
+                                        // thing a reader pressing it on a row did not ask for.
+                                        event.preventDefault();
+                                        onRowClick(row, index);
+                                    }
+                                    : undefined, children: columns.map((column) => (_jsx("td", { style: { ...bodyCellStyle(index), textAlign: column.align ?? 'start' }, children: column.render
+                                        ? column.render(row, index)
+                                        : row[column.key] }, column.key))) }, getRowKey ? getRowKey(row, index) : index)))) })] }) })] }));
+}

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

@@ -0,0 +1,2 @@
+export { PlTable } from './PlTable.js';
+export type { PlTableAlign, PlTableColumn, PlTableProps } from './PlTable.js';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { PlTable } from './PlTable.js';

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps, PlassVariant } from '../../types.js';
+/** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
+export type PlTabValue = string | number;
+export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * What the tab *bar* is made of, not the panels under it.
+     *
+     * - `solid` — a groove cut into the sheet with a clear pane riding in it, the
+     *   way a segmented control works. (The tile is deliberately *not* the
+     *   gradient: that is what a `PlSegmentedButton` is, and a screen with both
+     *   should be able to tell them apart.)
+     * - `glass` — the classic: a rule along the edge of the bar with the indicator
+     *   riding on it. The default.
+     * - `ghost` — the same bar with the rule taken away, for tabs inside a PlCard
+     *   that already has an edge of its own.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** The chosen tab. Use with `onValueChange` for a controlled set. */
+    value?: PlTabValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: PlTabValue | null;
+    onValueChange?: (value: PlTabValue | null) => void;
+    /**
+     * Which way the bar runs. `vertical` puts the tabs down the side and the panel
+     * beside them, and moves the arrow keys onto the other axis — which is Base
+     * UI's doing, and is what makes a vertical tab bar reachable.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether moving the arrow keys also chooses the tab it lands on.
+     *
+     * `false` by default. Automatic activation is only kind when every panel is
+     * already on the page; the moment one of them fetches, walking past four tabs
+     * fires four requests.
+     * @default false
+     */
+    activateOnFocus?: boolean;
+    /**
+     * Whether the arrow keys wrap from the last tab back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** The tabs share the bar's full width, each taking an equal part of it. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlTabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the tab, and picks out the panel with the same value. */
+    value: PlTabValue;
+    /** Content before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content after the label — a count, a status dot. */
+    endIcon?: React.ReactNode;
+    /** Unavailable, but still listed. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlTabPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Which tab shows this panel. */
+    value: PlTabValue;
+    /**
+     * Keeps the panel in the DOM while it is hidden. For a panel that is expensive
+     * to build, or that holds form state which should survive being switched away
+     * from.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One tab, and one place a tab differs from a PlButton: `solid` puts the tile
+ * *behind* the tab rather than on it, so the tab needs a stacking context of its
+ * own or the indicator would cover the label it is meant to be under.
+ */
+export declare const PlTab: React.ForwardRefExoticComponent<PlTabProps & React.RefAttributes<HTMLButtonElement>>;
+/** The content behind one tab. */
+export declare const PlTabPanel: React.ForwardRefExoticComponent<PlTabPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One set of panels, one of which is shown.
+ *
+ * Base UI owns everything that makes a tab bar a tab bar rather than a row of
+ * buttons: roving focus so the whole bar is one tab stop, the arrow keys on
+ * whichever axis the bar runs, Home and End, the `tab` / `tabpanel` roles and
+ * the `aria-controls` wiring between them, and the measurement that puts the
+ * indicator under the chosen tab. What is here is the surface and the ladders.
+ *
+ * The tabs and the panels are composed rather than passed as data, unlike
+ * `PlSelect` — because a panel is a subtree, and there is no useful shape for
+ * "an array of arbitrary React trees" that is not just children.
+ */
+export declare const PlTabs: React.ForwardRefExoticComponent<PlTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/PlTabs.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Tabs as BaseUITabs } from '@base-ui/react/tabs';
+import { controlHeightClasses, controlTextClasses, focusRingClasses, focusRingInsetClasses, gapClasses, glassClasses, hasContent, iconClasses, paddingXClasses, radiusClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+const TabsContext = /* @__PURE__ */ React.createContext({
+    variant: 'glass',
+    size: 'md',
+    density: 'default',
+    orientation: 'horizontal',
+    fullWidth: false
+});
+/* ---------------------------------------------------------------------------
+ * The bar
+ * ------------------------------------------------------------------------- */
+/**
+ * What the bar itself looks like, per material and per axis.
+ *
+ * `glass` is one border on one edge rather than a box, which is why it needs the
+ * axis: the rule belongs under a horizontal bar and beside a vertical one. It is
+ * `--plass-border` rather than the sheet's own white hairline, because a bar
+ * drawn on a light card would otherwise have no rule at all.
+ */
+const listClasses = {
+    solid: {
+        horizontal: `${glassClasses} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,
+        vertical: `${glassClasses} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`
+    },
+    glass: {
+        horizontal: 'flex border-b [border-color:var(--plass-border)]',
+        vertical: 'flex flex-col border-e [border-color:var(--plass-border)]'
+    },
+    ghost: {
+        horizontal: 'flex',
+        vertical: 'flex flex-col'
+    }
+};
+/**
+ * The indicator.
+ *
+ * `solid` fills the tab — a tile that slides between them. The other two draw a
+ * 2px bar along the bar's own edge. All three move by animating `left`/`top` and
+ * `width`/`height`, which Base UI measures onto `--active-tab-*`. That is a
+ * layout animation on an empty box, not a transform on a label: nothing with
+ * text in it moves, which is the distinction the house rule actually draws.
+ *
+ * `left`, not `inset-inline-start`, and this is one of the two places in the
+ * library that reaches for a physical property on purpose. `--active-tab-left`
+ * is a measurement — the distance from the list's left edge to the active tab's,
+ * in pixels — and it stays a distance from the *left* under RTL. Pairing a
+ * physical measurement with a logical property is what would break the
+ * direction, not what would fix it. The edge the bar sits on is logical, because
+ * that one genuinely flips.
+ */
+const indicatorClasses = {
+    solid: {
+        horizontal: 'absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)',
+        vertical: 'absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)'
+    },
+    glass: {
+        horizontal: 'absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)',
+        vertical: 'absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5'
+    },
+    ghost: {
+        horizontal: 'absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)',
+        vertical: 'absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5'
+    }
+};
+const indicatorSurfaceClasses = {
+    solid: `${glassClasses} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,
+    glass: 'bg-(--p-accent)',
+    ghost: 'bg-(--p-accent)'
+};
+/**
+ * A tab is a control, so it takes the control height ladder — a `md` tab and a
+ * `md` PlButton are the same 40px, which is what lets a tab bar sit in a toolbar
+ * next to one without the row losing its baseline.
+ *
+ * `data-active`, not `data-selected` — Base UI spells a chosen tab's state that
+ * way, and the wrong attribute is a class that silently never matches.
+ */
+const tabStateClasses = 'text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)';
+/**
+ * One tab, and one place a tab differs from a PlButton: `solid` puts the tile
+ * *behind* the tab rather than on it, so the tab needs a stacking context of its
+ * own or the indicator would cover the label it is meant to be under.
+ */
+export const PlTab = /* @__PURE__ */ React.forwardRef(function PlTab({ value, startIcon, endIcon, disabled = false, className, children, ...props }, ref) {
+    const { variant, size, density, fullWidth } = React.useContext(TabsContext);
+    return (_jsxs(BaseUITabs.Tab, { ref: ref, value: value, disabled: disabled, className: [
+            'relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none',
+            'font-semibold whitespace-nowrap',
+            '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+            controlHeightClasses[size],
+            controlTextClasses[size],
+            gapClasses[size],
+            paddingXClasses[density][size],
+            variant === 'solid' ? radiusClasses[size] : '',
+            transitionClasses,
+            iconClasses,
+            tabStateClasses,
+            // The ring is inset rather than offset: an offset ring on a tab inside a
+            // `solid` groove is drawn on top of its neighbours.
+            focusRingInsetClasses,
+            'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+            fullWidth ? 'flex-1' : '',
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), ...props, children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: startIcon })) : null, children, hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: endIcon })) : null] }));
+});
+/** The content behind one tab. */
+export const PlTabPanel = /* @__PURE__ */ React.forwardRef(function PlTabPanel({ value, keepMounted = false, className, children, ...props }, ref) {
+    const { size } = React.useContext(TabsContext);
+    return (_jsx(BaseUITabs.Panel, { ref: ref, value: value, keepMounted: keepMounted, className: [
+            'min-w-0 flex-1 text-(--plass-fg)',
+            // The panel takes focus when it holds nothing focusable of its own, so
+            // it is reachable by keyboard — and it gets the house ring rather than
+            // the browser's.
+            focusRingClasses,
+            radiusClasses[size],
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), ...props, children: children }));
+});
+/**
+ * One set of panels, one of which is shown.
+ *
+ * Base UI owns everything that makes a tab bar a tab bar rather than a row of
+ * buttons: roving focus so the whole bar is one tab stop, the arrow keys on
+ * whichever axis the bar runs, Home and End, the `tab` / `tabpanel` roles and
+ * the `aria-controls` wiring between them, and the measurement that puts the
+ * indicator under the chosen tab. What is here is the surface and the ladders.
+ *
+ * The tabs and the panels are composed rather than passed as data, unlike
+ * `PlSelect` — because a panel is a subtree, and there is no useful shape for
+ * "an array of arbitrary React trees" that is not just children.
+ */
+export const PlTabs = /* @__PURE__ */ React.forwardRef(function PlTabs({ variant = 'glass', size = 'md', color = 'primary', density = 'default', value, defaultValue, onValueChange, orientation = 'horizontal', activateOnFocus = false, loopFocus = true, fullWidth = false, className, style, children, ...props }, ref) {
+    const context = React.useMemo(() => ({ variant, size, density, orientation, fullWidth }), [variant, size, density, orientation, fullWidth]);
+    // Everything a caller writes between the tags is either a tab or a panel, and
+    // the two go in different boxes — so they are sorted here rather than made the
+    // caller's problem with a `<PlTabList>` wrapper they would have to remember.
+    const tabs = [];
+    const panels = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === PlTabPanel) {
+            panels.push(child);
+        }
+        else if (child !== null && child !== undefined && child !== false) {
+            tabs.push(child);
+        }
+    });
+    return (_jsx(TabsContext.Provider, { value: context, children: _jsxs(BaseUITabs.Root, { ref: ref, value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), orientation: orientation, className: [
+                'flex min-w-0',
+                orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-4',
+                className ?? ''
+            ]
+                .filter(Boolean)
+                .join(' '), style: { ...surfaceSlots(color, 0), ...style }, ...props, children: [_jsxs(BaseUITabs.List, { activateOnFocus: activateOnFocus, loopFocus: loopFocus, className: [
+                        'relative shrink-0',
+                        listClasses[variant][orientation],
+                        variant === 'solid' ? radiusClasses[size] : '',
+                        fullWidth && orientation === 'horizontal' ? 'w-full' : '',
+                        // A bar with more tabs than room scrolls rather than wrapping: a tab
+                        // bar on two lines has stopped being a bar, and the indicator has
+                        // nowhere sensible to sit.
+                        orientation === 'horizontal' ? 'overflow-x-auto overflow-y-hidden' : ''
+                    ]
+                        .filter(Boolean)
+                        .join(' '), children: [tabs, _jsx(BaseUITabs.Indicator, { className: [
+                                'pointer-events-none',
+                                indicatorClasses[variant][orientation],
+                                indicatorSurfaceClasses[variant],
+                                variant === 'solid' ? radiusClasses[size] : 'rounded-full',
+                                // The same easing everything else uses, on the four properties the
+                                // measurement actually writes.
+                                '[transition-property:left,top,width,height]',
+                                '[transition-duration:var(--plass-duration)]',
+                                '[transition-timing-function:var(--plass-ease)]'
+                            ].join(' ') })] }), panels] }) }));
+});

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

@@ -0,0 +1,2 @@
+export { PlTab, PlTabPanel, PlTabs } from './PlTabs.js';
+export type { PlTabPanelProps, PlTabProps, PlTabValue, PlTabsProps } from './PlTabs.js';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { PlTab, PlTabPanel, PlTabs } from './PlTabs.js';

package/dist/components/text-field/{TextField.d.ts → PlTextField.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
-export type TextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
+export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
 /**
  * Native `<input>` attributes, minus the three that collide with the shared
  * vocabulary: `color` and `size` are Plass props here, and `onChange` is widened
  * below so the same handler types against a `<textarea>` in multiline mode.
  */
 type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
-export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
+export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it, and the one place in the library where a
@@ -30,7 +30,7 @@ export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
      * breaks a form's column, so only the vertical axis is on by default.
      * @default 'vertical'
      */
-    resize?: TextFieldResize;
+    resize?: PlTextFieldResize;
     /**
      * Label above the control, wired to it by Base UI's Field. There is no
      * floating variant on purpose: a floating label needs a `transform` on the
@@ -61,5 +61,5 @@ export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
     fullWidth?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const PlTextField: React.ForwardRefExoticComponent<PlTextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};