plass-ui 1.0.0 → 1.0.2

package/dist/components/switch/PlSwitch.js

@@ -1,131 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { Switch as BaseUISwitch } from '@base-ui/react/switch';
-import { Field } from '@base-ui/react/field';
-import { controlSlots, focusRingClasses, hasContent, metaTextClasses, tickRowTextClasses } from '../../internal/styles.js';
-/**
- * Track and thumb.
- *
- * The thumb is inset 2px on every side, so its diameter is the track's height
- * minus 4 and the `left` it travels to is `100% − 2px − diameter`. That is the
- * one number per step that has to be written out; everything else falls out of
- * `inset-y-0.5` and `aspect-square`.
- */
-const trackClasses = {
-    xs: 'h-3.5 w-6',
-    sm: 'h-4 w-7',
-    md: 'h-5 w-9',
-    lg: 'h-6 w-11',
-    xl: 'h-7 w-13'
-};
-const thumbTravelClasses = {
-    xs: 'data-[checked]:left-[calc(100%-0.75rem)]',
-    sm: 'data-[checked]:left-[calc(100%-0.875rem)]',
-    md: 'data-[checked]:left-[calc(100%-1.125rem)]',
-    lg: 'data-[checked]:left-[calc(100%-1.375rem)]',
-    xl: 'data-[checked]:left-[calc(100%-1.625rem)]'
-};
-/**
- * A pill, and one of the two places in the library that is right.
- *
- * Everywhere else the radius stops well short of 50%, because the flat run
- * along the top and bottom edge is what reads as a sheet with its corners cut
- * off. A switch is not a sheet — it is a track something runs along, and a
- * track with corners is a track the thumb would have to climb out of.
- */
-const trackBaseClasses = /* @__PURE__ */ [
-    'relative inline-flex shrink-0 rounded-full',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    // `background-image` is in the list because the on state is the gradient, and
-    // `left` deliberately is not: it belongs to the thumb, which is the one thing
-    // in the library that actually moves.
-    '[transition-property:background-color,background-image,box-shadow,filter]',
-    '[transition-duration:var(--plass-duration)]',
-    '[transition-timing-function:var(--plass-ease)]',
-    focusRingClasses
-].join(' ');
-/**
- * Off, the track is the **groove** — `--plass-track`, the one neutral ink in the
- * library whose job is to be seen from across a room. On, it is the family's
- * gradient.
- *
- * Off used to be the glass at its most opaque with `--plass-well` falling into
- * it, and it was wrong twice over. It was invisible: a 88%-white pill with a
- * white thumb in it, set on a near-white page, is a switch a reader cannot find
- * until they have already flipped it — and the off state is the one a settings
- * list is mostly made of. And where it *was* visible, in the dark, an inset
- * shadow under a thumb carrying a drop shadow of its own was a moulded rocker
- * in a bevelled slot, which is the one picture this design language exists to
- * not draw.
- *
- * So there is no well, no gloss and no edge either. A groove that is a *tone*
- * rather than a recess needs no hairline to say where it ends, and the hairline
- * it used to have was the second of two lines round the same object once the
- * focus ring arrived.
- *
- * Dropping the border also squares the thumb's travel. `inset-y-0.5` and
- * `left-0.5` are measured from the padding box; the `left` a checked thumb
- * travels to is measured from the track's *width*. With a 1px edge between
- * them the two disagreed, and every switch in the library sat 2px from its
- * track on the left and 4px from it on the right.
- */
-const restTrackClasses = /* @__PURE__ */ [
-    'cursor-pointer bg-(--plass-track)',
-    'hover:brightness-[0.97] dark:hover:brightness-110',
-    'data-[checked]:[background-image:var(--p-fill)]',
-    'data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105'
-].join(' ');
-const readOnlyTrackClasses = /* @__PURE__ */ [
-    'cursor-default bg-(--plass-track) saturate-[0.55]',
-    'data-[checked]:[background-image:var(--p-fill)]',
-    'data-[checked]:shadow-none'
-].join(' ');
-const disabledTrackClasses = /* @__PURE__ */ [
-    'cursor-not-allowed bg-(--plass-track)',
-    'opacity-50 saturate-[0.35] shadow-none',
-    'data-[checked]:[background-image:var(--p-fill)]'
-].join(' ');
-/**
- * The thumb is white in both themes — not `--plass-surface`, which is a near
- * navy in the dark and left the off state as a grey lozenge in a grey slot.
- *
- * It keeps a shadow, and it is the smallest one on the ladder rather than the
- * `--plass-shadow-1` it used to carry: the thumb is the one part of a switch
- * that genuinely is above the surface it moves along, so it casts something —
- * but a 14px disc under a 4px-blurred, 14px-wide shadow is a knob, not a light.
- */
-const thumbClasses = /* @__PURE__ */ [
-    'absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-white',
-    '[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]',
-    '[transition:left_var(--plass-duration)_var(--plass-ease)]'
-].join(' ');
-/**
- * An immediate on/off.
- *
- * The difference from a PlCheckbox is not visual, it is temporal: a checkbox is
- * a value that gets submitted with a form, a switch takes effect the moment it
- * moves. If there is a Save button underneath, it should have been a checkbox.
- */
-export const PlSwitch = /* @__PURE__ */ React.forwardRef(function PlSwitch({ size = 'md', color = 'primary', label, description, error, invalid, labelPlacement = 'end', disabled = false, readOnly = false, className, style, ...props }, ref) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    const family = isInvalid ? 'danger' : color;
-    const track = (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUISwitch.Root, { ref: ref, className: [
-                trackBaseClasses,
-                trackClasses[size],
-                disabled ? disabledTrackClasses : readOnly ? readOnlyTrackClasses : restTrackClasses
-            ].join(' '), disabled: disabled, readOnly: readOnly, ...props, children: _jsx(BaseUISwitch.Thumb, { className: `${thumbClasses} ${thumbTravelClasses[size]}` }) }) }));
-    const text = label || description ? (_jsxs("span", { className: [
-            'flex min-w-0 flex-col gap-0.5',
-            // With the label on the left it has to take the slack, or the switch
-            // sits against the text instead of against the edge of the row.
-            labelPlacement === 'start' ? 'flex-1' : ''
-        ]
-            .filter(Boolean)
-            .join(' '), children: [label ? (_jsx(Field.Label, { className: disabled ? 'text-(--plass-muted-fg)' : 'cursor-pointer text-(--plass-fg)', children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null] })) : null;
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['inline-flex flex-col gap-1 align-top', className ?? '']
-            .filter(Boolean)
-            .join(' '), 
-        // `solid`, because an on track *is* the coloured thing.
-        style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [_jsx("div", { className: `flex items-start gap-2.5 ${tickRowTextClasses[size]}`, children: labelPlacement === 'start' ? (_jsxs(_Fragment, { children: [text, track] })) : (_jsxs(_Fragment, { children: [track, text] })) }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
-});
+"use client";import{jsx as a,jsxs as e,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{Switch as r}from"@base-ui/react/switch";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,focusRingClasses as c,hasContent as n,metaTextClasses as o,tickRowTextClasses as d}from"../../internal/styles.js";const h={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},m={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},p=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",c].join(" "),f=/* @__PURE__ */["cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),u=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),g=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),b=/* @__PURE__ */["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:left_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */l.forwardRef(function PlSwitch({size:l="md",color:c="primary",label:x,description:k,error:w,invalid:v,labelPlacement:j="end",disabled:N=!1,readOnly:y=!1,className:_,style:$,...P},R){const S=n(w),B=v??S,O=B?"danger":c,q=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(r.Root,{ref:R,className:[p,h[l],N?g:y?u:f].join(" "),disabled:N,readOnly:y,...P,children:a(r.Thumb,{className:`${b} ${m[l]}`})})}),z=x||k?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===j?"flex-1":""].filter(Boolean).join(" "),children:[x?a(s.Label,{className:N?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:x}):null,k?a(s.Description,{className:`${o[l]} text-(--plass-muted-fg)`,children:k}):null]}):null;return e(s.Root,{disabled:N,invalid:B,className:["inline-flex flex-col gap-1 align-top",_??""].filter(Boolean).join(" "),style:{...i(O,0,"solid"),...$},children:[a("div",{className:`flex items-start gap-2.5 ${d[l]}`,children:e(t,"start"===j?{children:[z,q]}:{children:[q,z]})}),S?a(s.Error,{match:!0,className:`${o[l]} text-(--p-accent)`,children:w}):null]})});

package/dist/components/switch/index.js

@@ -1 +1 @@
-export { PlSwitch } from './PlSwitch.js';
+export{PlSwitch}from"./PlSwitch.js";

package/dist/components/table/PlTable.js

@@ -1,210 +1 @@
-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)))) })] }) })] }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{controlTextLeadingClasses as t,focusRingInsetClasses as l,metaTextClasses as o,paddingXValues as s,radiusClasses as i,sheetRestClasses as n,surfaceSlots as d}from"../../internal/styles.js";const c={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"}},p={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0},m=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" "),g=/* @__PURE__ */["cursor-pointer [outline:none]",l].join(" "),v="1px solid var(--plass-divider)";export function PlTable({variant:l="glass",size:h="md",color:y="primary",density:u="default",elevation:x=0,columns:b,rows:f,getRowKey:w,caption:k,empty:j="No data",striped:N=!1,hoverable:B=!1,stickyHeader:$=!1,maxHeight:A,onRowClick:C,className:H,style:S,...T}){const z=s[u][h],D=c[u][h],I=Boolean(C),K=B||I,R=void 0!==A,_=a.useId(),E={padding:`${D} ${z}`,border:0,background:"none"},P={...E,...$?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:"1px solid var(--plass-border)"},...$?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?E:{...E,borderTop:v};return r("div",{className:["overflow-hidden",i[h],n[l],H??""].filter(Boolean).join(" "),style:{...d(y,x),...S},...T,children:[k?e("div",{id:_,className:`${o[h]} font-semibold text-(--plass-muted-fg)`,style:{...E,borderBottom:v,textAlign:"start"},children:k}):null,e("div",{className:["overflow-x-auto",R?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:R?{maxHeight:A}:void 0,children:r("table",{"aria-labelledby":k?_:void 0,className:`text-start ${t[h]} text-(--plass-fg)`,style:p,children:[e("colgroup",{children:b.map(r=>e("col",{style:void 0===r.width?void 0:{width:"number"==typeof r.width?`${r.width}px`:r.width}},r.key))}),e("thead",{children:e("tr",{children:b.map(r=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",$?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...P,textAlign:r.align??"start"},children:r.header??r.key},r.key))})}),e("tbody",{children:0===f.length?e("tr",{className:m,children:e("td",{colSpan:b.length,className:"text-(--plass-muted-fg)",style:{...E,padding:`2rem ${z}`,textAlign:"center"},children:j})}):f.map((r,a)=>e("tr",{className:[m,N&&a%2==1?"[--p-row:var(--plass-stripe)]":"",K?"hover:[--p-row:var(--p-soft)]":"",I?g:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:I?0:void 0,onClick:C?()=>C(r,a):void 0,onKeyDown:C?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),C(r,a)))}:void 0,children:b.map(t=>e("td",{style:{...bodyCellStyle(a),textAlign:t.align??"start"},children:t.render?t.render(r,a):r[t.key]},t.key))},w?w(r,a):a))})]})})]})}

package/dist/components/table/index.js

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

package/dist/components/tabs/PlTabs.js

@@ -1,182 +1 @@
-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] }) }));
-});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as l}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as s,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as r,glassClasses as c,hasContent as d,iconClasses as h,paddingXClasses as f,radiusClasses as u,surfaceSlots as p,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${c} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${c} 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"}},x={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"}},g={solid:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},w="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:i,startIcon:c,endIcon:p,disabled:m=!1,className:x,children:g,...z},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(v);return t(l.Tab,{ref:y,value:i,disabled:m,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]",o[j],s[j],r[j],f[N][j],"solid"===P?u[j]:"",b,h,w,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...z,children:[d(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null,g,d(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:o=!1,className:s,children:n,...r},c){const{size:d}=a.useContext(v);return e(l.Panel,{ref:c,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--plass-fg)",i,u[d],s??""].filter(Boolean).join(" "),...r,children:n})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:o="glass",size:s="md",color:i="primary",density:n="default",value:r,defaultValue:c,onValueChange:d,orientation:h="horizontal",activateOnFocus:f=!1,loopFocus:b=!0,fullWidth:w=!1,className:z,style:y,children:P,...j},N){const T=a.useMemo(()=>({variant:o,size:s,density:n,orientation:h,fullWidth:w}),[o,s,n,h,w]),k=[],C=[];return a.Children.forEach(P,e=>{a.isValidElement(e)&&e.type===PlTabPanel?C.push(e):null!=e&&!1!==e&&k.push(e)}),e(v.Provider,{value:T,children:t(l.Root,{ref:N,value:r,defaultValue:c,onValueChange:e=>d?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...p(i,0),...y},...j,children:[t(l.List,{activateOnFocus:f,loopFocus:b,className:["relative shrink-0",m[o][h],"solid"===o?u[s]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[k,e(l.Indicator,{className:["pointer-events-none",x[o][h],g[o],"solid"===o?u[s]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),C]})})});

package/dist/components/tabs/index.js

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