@surflane/ui 0.1.0 → 0.3.0

package/dist/content.js

@@ -1,65 +1,103 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Surface } from "./foundations.js";
-import { part } from "./parts.js";
-import { Button } from "./button.js";
-import { SyntaxHighlighter } from "./syntax-highlighter.js";
-import { ScrollArea } from "./scroll-area.js";
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Surface } from './foundations.js';
+import { part } from './parts.js';
+import { Button } from './button.js';
+import { SyntaxHighlighter } from './syntax-highlighter.js';
+import { ScrollArea } from './scroll-area.js';
 const CardRoot = React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
-    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ["pui-card", className].filter(Boolean).join(" ") }));
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ['pui-card', className].filter(Boolean).join(' ') }));
 });
 const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
     return React.createElement(`h${level}`, {
         ...props,
         ref,
-        className: ["pui-card-title", className].filter(Boolean).join(" "),
+        className: ['pui-card-title', className].filter(Boolean).join(' '),
     });
 });
 export const Card = {
     Root: CardRoot,
-    Header: part("div", "pui-card-header"),
+    Header: part('div', 'pui-card-header'),
     Title: CardTitle,
-    Description: part("p", "pui-card-description"),
-    Body: part("div", "pui-card-body"),
-    Footer: part("div", "pui-card-footer"),
+    Description: part('p', 'pui-card-description'),
+    Body: part('div', 'pui-card-body'),
+    Footer: part('div', 'pui-card-footer'),
 };
-export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = "Code", language, wrap = false, copyLabel = "Copy code", copiedLabel = "Code copied.", copyErrorLabel = "Copy unavailable. Select the code and copy it manually.", onCopy, className, ...props }, ref) {
-    const [result, setResult] = React.useState(""), [busy, setBusy] = React.useState(false);
-    const revision = React.useRef(0), mounted = React.useRef(false);
+const copyIcons = {
+    idle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '12', rx: '2' }), _jsx("path", { d: 'M16 8V4H4v12h4' })] })),
+    copied: _jsx("path", { d: 'm5 12.5 4.5 4.5L19 7.5' }),
+    failed: (_jsx("path", { d: 'M12 7v6m0 4v.01M4.5 12a7.5 7.5 0 1 0 15 0 7.5 7.5 0 0 0-15 0' })),
+};
+// Feedback stays inside the copy button and returns to the action after this long.
+const copyFeedbackDuration = 2000;
+export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
+    const [state, setState] = React.useState('idle');
+    // After the first copy, each change of label fades in; the first render does not.
+    const [used, setUsed] = React.useState(false);
+    const revision = React.useRef(0), mounted = React.useRef(false), timer = React.useRef(undefined);
+    const button = React.useRef(null), source = React.useRef(null);
     React.useEffect(() => {
         mounted.current = true;
         return () => {
             mounted.current = false;
             revision.current++;
+            clearTimeout(timer.current);
         };
     }, []);
     React.useEffect(() => {
         revision.current++;
-        setResult("");
-        setBusy(false);
+        clearTimeout(timer.current);
+        setState('idle');
     }, [code]);
+    // The button keeps its resting width, so the feedback never moves the toolbar.
+    React.useLayoutEffect(() => {
+        const element = button.current;
+        if (!element || state !== 'idle')
+            return;
+        const measure = () => {
+            element.style.minInlineSize = '';
+            element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
+        };
+        measure();
+        document.fonts?.ready.then(() => {
+            if (mounted.current)
+                measure();
+        });
+    }, [copyLabel, state]);
     async function copy() {
         const request = ++revision.current;
-        setBusy(true);
-        setResult("");
+        clearTimeout(timer.current);
+        setUsed(true);
+        setState('busy');
         let outcome;
         try {
             if (onCopy)
                 await onCopy(code);
             else
                 await navigator.clipboard.writeText(code);
-            outcome = copiedLabel;
+            outcome = 'copied';
         }
         catch {
-            outcome = copyErrorLabel;
-        }
-        if (mounted.current && request === revision.current) {
-            setResult(outcome);
-            setBusy(false);
+            outcome = 'failed';
         }
+        if (!mounted.current || request !== revision.current)
+            return;
+        setState(outcome);
+        // A failed copy selects the source, so the keyboard copy shortcut works next.
+        if (outcome === 'failed' && source.current)
+            window.getSelection()?.selectAllChildren(source.current);
+        timer.current = setTimeout(() => {
+            if (mounted.current && request === revision.current)
+                setState('idle');
+        }, copyFeedbackDuration);
     }
-    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ["pui-code-block", className].filter(Boolean).join(" "), children: [_jsxs("div", { className: "pui-code-toolbar", children: [_jsxs("span", { className: "pui-code-label", children: [label, language && _jsx("span", { className: "pui-code-language", children: language })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, disabled: busy, "aria-busy": busy || undefined, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M16 8V4H4v12h4" })] }), copyLabel] })] }), _jsx(ScrollArea, { label: label, orientation: "horizontal", children: _jsx("pre", { className: "pui-code-text", children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) }), _jsx("span", { className: "pui-code-result", role: "status", children: result })] }));
+    const icon = state === 'copied' || state === 'failed' ? state : 'idle';
+    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ['pui-code-block', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'pui-code-toolbar', children: [_jsxs("span", { className: 'pui-code-label', children: [label, language && _jsx("span", { className: 'pui-code-language', children: language })] }), _jsxs(Button, { ref: button, type: 'button', variant: 'outline', size: 'sm', className: 'pui-code-copy', onClick: copy, disabled: state === 'busy', "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx("svg", { className: 'pui-code-copy-icon', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: copyIcons[icon] }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'pui-code-copy-label', children: state === 'copied'
+                                        ? copiedLabel
+                                        : state === 'failed'
+                                            ? copyErrorLabel
+                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'pui-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
 });
 // Flat names for React Server Components, which cannot dot into client exports.
 export { CardRoot, CardTitle };

package/dist/context-overlays.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export declare const ContextMenu: {
     Trigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {

package/dist/context-overlays.js

@@ -1,18 +1,18 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { Menu } from "./menu.js";
-import { part, skin } from "./parts.js";
-const ContextPositioner = part(BaseContextMenu.Positioner, "pui-positioner");
+import * as React from 'react';
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { Menu } from './menu.js';
+import { part, skin } from './parts.js';
+const ContextPositioner = part(BaseContextMenu.Positioner, 'pui-positioner');
 const ContextContent = React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
     return (_jsx(ContextPositioner, { ...positionerProps, children: _jsx(Menu.Popup, { ...props, ref: ref }) }));
 });
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export const ContextMenu = {
     ...BaseContextMenu,
-    Trigger: part(BaseContextMenu.Trigger, "pui-context-trigger"),
+    Trigger: part(BaseContextMenu.Trigger, 'pui-context-trigger'),
     Positioner: ContextPositioner,
     Content: ContextContent,
     Popup: Menu.Popup,
@@ -26,14 +26,14 @@ export const ContextMenu = {
     Separator: Menu.Separator,
     SubmenuTrigger: Menu.SubmenuTrigger,
 };
-const PreviewPositioner = part(BasePreviewCard.Positioner, "pui-positioner");
+const PreviewPositioner = part(BasePreviewCard.Positioner, 'pui-positioner');
 // The preview is visual enhancement; its destination is the accessible interface.
 const PreviewPopup = React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
-    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": "true", className: skin("pui-preview-card", className) }));
+    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": 'true', className: skin('pui-preview-card', className) }));
 });
 function PreviewTrigger(props) {
     const { className, ...rest } = props;
-    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin("pui-link pui-preview-trigger", className) }));
+    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin('pui-link pui-preview-trigger', className) }));
 }
 const PreviewContent = React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
     return (_jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, children: _jsx(PreviewPopup, { ...props, ref: ref }) }));

package/dist/data.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     label?: string;
     rootClassName?: string;
@@ -8,6 +8,41 @@ declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.De
 } & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label: string;
 } & React.RefAttributes<HTMLDivElement>>;
+export type TableDensity = 'default' | 'compact';
+declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableElement>, "ref"> & {
+    /** compact tightens rows for scanning many records with a pointer. */
+    density?: TableDensity;
+    /** Keeps the header visible while a bounded Container scrolls vertically. */
+    stickyHeader?: boolean;
+} & React.RefAttributes<HTMLTableElement>>;
+type CellLayout = {
+    align?: 'start' | 'center' | 'end';
+    /** Aligns to the end with tabular figures, so digits line up down the column. */
+    numeric?: boolean;
+};
+declare const TableHeaderCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+export type TableSort = 'ascending' | 'descending';
+/** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
+declare const TableSortHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>, "ref">, "scope" | "aria-sort" | "onClick"> & {
+    sort?: TableSort;
+    onSort: () => void;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
+/** One-line text that ends in an ellipsis. String content also becomes the title. */
+declare const TableTruncate: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/** A full-width body row for loading, empty, error and permission messages. It has no hover. */
+declare const TableMessage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    colSpan: number;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     selected?: boolean;
 } & React.RefAttributes<HTMLTableRowElement>>;
@@ -21,8 +56,13 @@ export declare const Table: {
     } & React.RefAttributes<HTMLDivElement>, "ref"> & {
         label: string;
     } & React.RefAttributes<HTMLDivElement>>;
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableElement>, "ref"> & {
+        /** compact tightens rows for scanning many records with a pointer. */
+        density?: TableDensity;
+        /** Keeps the header visible while a bounded Container scrolls vertically. */
+        stickyHeader?: boolean;
     } & React.RefAttributes<HTMLTableElement>>;
     Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -39,11 +79,22 @@ export declare const Table: {
     Row: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean;
     } & React.RefAttributes<HTMLTableRowElement>>;
-    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+    SortHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>, "ref">, "scope" | "aria-sort" | "onClick"> & {
+        sort?: TableSort;
+        onSort: () => void;
+        disabled?: boolean;
     } & React.RefAttributes<HTMLTableCellElement>>;
-    Cell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    Cell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+    Truncate: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Message: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        colSpan: number;
     } & React.RefAttributes<HTMLTableCellElement>>;
 };
 declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
@@ -68,7 +119,7 @@ export declare const List: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export { ListRoot, ListItem, TableContainer, TableRow };
+export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
@@ -78,9 +129,7 @@ export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<Reac
 } & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableElement>>, TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableCaptionElement>>, TableHead: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
@@ -88,8 +137,4 @@ export declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<React.
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableSectionElement>>, TableFoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableSectionElement>>, TableHeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableCellElement>>, TableCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/data.js

@@ -1,40 +1,82 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { part } from "./parts.js";
-import { ScrollArea } from "./scroll-area.js";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { part } from './parts.js';
+import { ScrollArea } from './scroll-area.js';
 const TableContainer = React.forwardRef(function TableContainer(props, ref) {
     return _jsx(ScrollArea, { ...props, ref: ref });
 });
+const RootPart = part('table', 'pui-table');
+const TableRoot = React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
+    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-sticky-header": stickyHeader || undefined }));
+});
+const layout = ({ align, numeric }) => ({
+    'data-align': numeric ? 'end' : align,
+    'data-numeric': numeric || undefined,
+});
+const HeaderCellPart = part('th', 'pui-table-cell pui-table-header');
+const CellPart = part('td', 'pui-table-cell');
+// align replaces the obsolete HTML align attribute of th and td.
+const TableHeaderCell = React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
+    return _jsx(HeaderCellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+const TableCell = React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
+    return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+function SortIcon({ sort }) {
+    return (_jsx("svg", { className: 'pui-table-sort-icon', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: _jsx("path", { d: sort === 'ascending'
+                ? 'M12 19V5m-6 6 6-6 6 6'
+                : sort === 'descending'
+                    ? 'M12 5v14m-6-6 6 6 6-6'
+                    : 'm8 9 4-4 4 4m-8 6 4 4 4-4' }) }));
+}
+/** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
+const TableSortHeader = React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
+    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: ['pui-table-sort-header', className].filter(Boolean).join(' '), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
+});
+/** One-line text that ends in an ellipsis. String content also becomes the title. */
+const TableTruncate = React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: ['pui-table-truncate', className].filter(Boolean).join(' '), children: children }));
+});
+/** A full-width body row for loading, empty, error and permission messages. It has no hover. */
+const TableMessage = React.forwardRef(function TableMessage({ className, ...props }, ref) {
+    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: ['pui-table-cell pui-table-message', className]
+                .filter(Boolean)
+                .join(' ') }) }));
+});
 const TableRow = React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-table-row", className].filter(Boolean).join(" ") }));
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
 });
 export const Table = {
     Container: TableContainer,
-    Root: part("table", "pui-table"),
-    Caption: part("caption", "pui-table-caption"),
-    Head: part("thead", "pui-table-head"),
-    Body: part("tbody", "pui-table-body"),
-    Foot: part("tfoot", "pui-table-foot"),
+    Root: TableRoot,
+    Caption: part('caption', 'pui-table-caption'),
+    Head: part('thead', 'pui-table-head'),
+    Body: part('tbody', 'pui-table-body'),
+    Foot: part('tfoot', 'pui-table-foot'),
     Row: TableRow,
-    HeaderCell: part("th", "pui-table-cell pui-table-header"),
-    Cell: part("td", "pui-table-cell"),
+    HeaderCell: TableHeaderCell,
+    SortHeader: TableSortHeader,
+    Cell: TableCell,
+    Truncate: TableTruncate,
+    Message: TableMessage,
 };
 const ListRoot = React.forwardRef(function ListRoot({ className, ...props }, ref) {
-    return (_jsx("ul", { role: "list", ...props, ref: ref, className: ["pui-list", className].filter(Boolean).join(" ") }));
+    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
 });
 const ListItem = React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ["pui-list-item", className].filter(Boolean).join(" ") }));
+    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-list-item', className].filter(Boolean).join(' ') }));
 });
 export const List = {
     Root: ListRoot,
     Item: ListItem,
-    Content: part("div", "pui-list-content"),
-    Title: part("div", "pui-list-title"),
-    Description: part("p", "pui-list-description"),
-    Actions: part("div", "pui-list-actions"),
+    Content: part('div', 'pui-list-content'),
+    Title: part('div', 'pui-list-title'),
+    Description: part('p', 'pui-list-description'),
+    Actions: part('div', 'pui-list-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export { ListRoot, ListItem, TableContainer, TableRow };
+export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export const { Content: ListContent, Title: ListTitle, Description: ListDescription, Actions: ListActions, } = List;
-export const { Root: TableRoot, Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, HeaderCell: TableHeaderCell, Cell: TableCell, } = Table;
+export const { Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, } = Table;

package/dist/date-picker.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from "react-aria-components/DatePicker";
-import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components/DateRangePicker";
-import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from "react-aria-components/TimeField";
-export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+import * as React from 'react';
+import { type DatePickerProps as AriaDatePickerProps, type DateValue, type ValidationResult } from 'react-aria-components/DatePicker';
+import { type DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
+import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from 'react-aria-components/TimeField';
+export { I18nProvider as DateLocaleProvider } from 'react-aria-components/I18nProvider';
 export type { DateValue, TimeValue };
 type FieldContent = {
     label: string;
@@ -13,9 +13,9 @@ type FieldContent = {
 type CalendarContent = {
     calendarLabel?: string;
 };
-export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, "children"> & FieldContent & CalendarContent;
-export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, "children"> & FieldContent & CalendarContent;
-export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, "children"> & FieldContent;
+export type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, 'children'> & FieldContent & CalendarContent;
+export type DateRangePickerProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, 'children'> & FieldContent & CalendarContent;
+export type TimeFieldProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, 'children'> & FieldContent;
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, calendarLabel, className, ...props }: DatePickerProps<T>): React.JSX.Element;

package/dist/date-picker.js

@@ -1,39 +1,39 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComponentSize } from "./sizing.js";
-import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from "react-aria-components/DatePicker";
-import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from "react-aria-components/DateRangePicker";
-import { TimeField as AriaTimeField, } from "react-aria-components/TimeField";
-import { Heading } from "react-aria-components/Heading";
-import { Dialog } from "react-aria-components/Dialog";
-import { skin } from "./parts.js";
-import { useLocale } from "react-aria-components/I18nProvider";
-export { I18nProvider as DateLocaleProvider } from "react-aria-components/I18nProvider";
+import { useComponentSize } from './sizing.js';
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Group, Label, Text, FieldError, Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, Button, Popover, } from 'react-aria-components/DatePicker';
+import { DateRangePicker as AriaDateRangePicker, RangeCalendar, } from 'react-aria-components/DateRangePicker';
+import { TimeField as AriaTimeField, } from 'react-aria-components/TimeField';
+import { Heading } from 'react-aria-components/Heading';
+import { Dialog } from 'react-aria-components/Dialog';
+import { skin } from './parts.js';
+import { useLocale } from 'react-aria-components/I18nProvider';
+export { I18nProvider as DateLocaleProvider } from 'react-aria-components/I18nProvider';
 function Segments({ slot }) {
-    return (_jsx(DateInput, { slot: slot, className: "pui-date-input", children: (segment) => (_jsx(DateSegment, { segment: segment, className: "pui-date-segment" })) }));
+    return (_jsx(DateInput, { slot: slot, className: 'pui-date-input', children: (segment) => (_jsx(DateSegment, { segment: segment, className: 'pui-date-segment' })) }));
 }
 function FieldHelp({ description, errorMessage, }) {
-    return (_jsxs(_Fragment, { children: [description && (_jsx(Text, { slot: "description", className: "pui-field-description", children: description })), _jsx(FieldError, { className: "pui-field-error", children: errorMessage })] }));
+    return (_jsxs(_Fragment, { children: [description && (_jsx(Text, { slot: 'description', className: 'pui-field-description', children: description })), _jsx(FieldError, { className: 'pui-field-error', children: errorMessage })] }));
 }
 function CalendarButton() {
-    return (_jsx(Button, { className: "pui-date-trigger", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "3" }), _jsx("path", { d: "M7 3v4m10-4v4M3 11h18m-12 4h2" })] }) }));
+    return (_jsx(Button, { className: 'pui-date-trigger', children: _jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: [_jsx("rect", { x: '3', y: '5', width: '18', height: '16', rx: '3' }), _jsx("path", { d: 'M7 3v4m10-4v4M3 11h18m-12 4h2' })] }) }));
 }
 function CalendarContents() {
     const { locale } = useLocale();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pui-calendar-header", children: [_jsx(Button, { slot: "previous", className: "pui-calendar-nav", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m15 6-6 6 6 6" }) }) }), _jsx(Heading, { className: "pui-calendar-heading" }), _jsx(Button, { slot: "next", className: "pui-calendar-nav", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }) })] }), _jsxs(CalendarGrid, { className: "pui-calendar-grid", weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pui-calendar-weekday", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: "pui-calendar-day", children: ({ formattedDate }) => locale.startsWith("ko") ? `${formattedDate}일` : formattedDate })) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'pui-calendar-header', children: [_jsx(Button, { slot: 'previous', className: 'pui-calendar-nav', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm15 6-6 6 6 6' }) }) }), _jsx(Heading, { className: 'pui-calendar-heading' }), _jsx(Button, { slot: 'next', className: 'pui-calendar-nav', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) }) })] }), _jsxs(CalendarGrid, { className: 'pui-calendar-grid', weekdayStyle: 'short', children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: 'pui-calendar-weekday', children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: 'pui-calendar-day', children: ({ formattedDate }) => locale.startsWith('ko') ? `${formattedDate}일` : formattedDate })) })] })] }));
 }
 function CalendarPopup({ label, range }) {
     const scheme = useComponentSize();
-    return (_jsx(Popover, { "data-ui-size": scheme, className: "pui-date-popover", offset: 8, placement: "bottom start", children: _jsx(Dialog, { "aria-label": label, className: "pui-date-dialog", children: range ? (_jsx(RangeCalendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: "pui-calendar", children: _jsx(CalendarContents, {}) })) }) }));
+    return (_jsx(Popover, { "data-ui-size": scheme, className: 'pui-date-popover', offset: 8, placement: 'bottom start', children: _jsx(Dialog, { "aria-label": label, className: 'pui-date-dialog', children: range ? (_jsx(RangeCalendar, { className: 'pui-calendar', children: _jsx(CalendarContents, {}) })) : (_jsx(Calendar, { className: 'pui-calendar', children: _jsx(CalendarContents, {}) })) }) }));
 }
 /** Locale-aware segmented entry with a keyboard and touch calendar. DateValue
  * retains calendar/time-zone semantics; conversion to an instant is caller-owned. */
 export function DatePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDatePicker, { ...props, className: skin("pui-date-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
+    return (_jsxs(AriaDatePicker, { ...props, className: skin('pui-date-picker', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsxs(Group, { className: 'pui-date-group', children: [_jsx(Segments, {}), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label })] }));
 }
 export function DateRangePicker({ label, description, errorMessage, calendarLabel, className, ...props }) {
-    return (_jsxs(AriaDateRangePicker, { ...props, className: skin("pui-date-picker pui-date-range-picker", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsxs(Group, { className: "pui-date-group", children: [_jsxs("div", { className: "pui-date-range-inputs", children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": "true", className: "pui-date-range-separator", children: "\u2013" }), _jsx(Segments, { slot: "end" })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
+    return (_jsxs(AriaDateRangePicker, { ...props, className: skin('pui-date-picker pui-date-range-picker', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsxs(Group, { className: 'pui-date-group', children: [_jsxs("div", { className: 'pui-date-range-inputs', children: [_jsx(Segments, { slot: 'start' }), _jsx("span", { "aria-hidden": 'true', className: 'pui-date-range-separator', children: "\u2013" }), _jsx(Segments, { slot: 'end' })] }), _jsx(CalendarButton, {})] }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage }), _jsx(CalendarPopup, { label: calendarLabel ?? label, range: true })] }));
 }
 export function TimeField({ label, description, errorMessage, className, ...props }) {
-    return (_jsxs(AriaTimeField, { ...props, className: skin("pui-time-field", className), children: [_jsx(Label, { className: "pui-field-label", children: label }), _jsx("div", { className: "pui-date-group", children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
+    return (_jsxs(AriaTimeField, { ...props, className: skin('pui-time-field', className), children: [_jsx(Label, { className: 'pui-field-label', children: label }), _jsx("div", { className: 'pui-date-group', children: _jsx(Segments, {}) }), _jsx(FieldHelp, { description: description, errorMessage: errorMessage })] }));
 }

package/dist/dialog-focus.js

@@ -1,5 +1,5 @@
-"use client";
-import * as React from "react";
+'use client';
+import * as React from 'react';
 /** Base UI 1.9 exposes WebKit's focus guards as buttons for VoiceOver.
  * Give those boundaries a name without hiding or changing their focus behavior.
  * Scope observation to this portal and disconnect it on React ref cleanup.
@@ -11,8 +11,8 @@ export function useDialogFocusBoundary(label) {
         const owned = new Set();
         const nameBoundaries = () => {
             for (const guard of portal.querySelectorAll(':scope > [data-base-ui-focus-guard][role="button"]')) {
-                if (!guard.hasAttribute("aria-label")) {
-                    guard.setAttribute("aria-label", label);
+                if (!guard.hasAttribute('aria-label')) {
+                    guard.setAttribute('aria-label', label);
                     owned.add(guard);
                 }
             }
@@ -23,13 +23,13 @@ export function useDialogFocusBoundary(label) {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ["role"],
+            attributeFilter: ['role'],
         });
         return () => {
             observer.disconnect();
             for (const guard of owned)
-                if (guard.getAttribute("aria-label") === label)
-                    guard.removeAttribute("aria-label");
+                if (guard.getAttribute('aria-label') === label)
+                    guard.removeAttribute('aria-label');
         };
     }, [label]);
 }

package/dist/dialog.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
 /** Visible icon close action; inherits Dialog focus and dismissal behavior. */
 declare const DialogCloseButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "children"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -8,9 +8,9 @@ declare const DialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@
     closeDisabled?: boolean;
     focusBoundaryLabel?: string;
 } & React.RefAttributes<HTMLDivElement>>;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare const DialogBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export declare const Dialog: {
     Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
         closeLabel?: string;