@surflane/ui 0.8.0 → 0.10.0

package/dist/table.d.ts

@@ -1,116 +1,152 @@
 import * as React from 'react';
-declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    label?: string;
-    rootClassName?: string;
-    rootStyle?: React.CSSProperties;
-    orientation?: "horizontal" | "vertical" | "both";
-    scrollChain?: "auto" | "contain";
-} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+import { ScrollArea } from './scroll-area.js';
+declare const TableContainer: ({ bleed, rootClassName, ref, ...props }: React.ComponentPropsWithoutRef<typeof ScrollArea> & {
     label: string;
     /** Hangs the table into the gutter by its cell inset, so cell text lines up with
      * the text around it and a row's hover reaches past it evenly on both sides. */
     bleed?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+declare const RootPart: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableElement> | undefined;
+}) => React.JSX.Element;
 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"> & {
+export type TableVariant = 'plain' | 'lined' | 'grid' | 'striped';
+declare const TableRoot: ({ density, variant, stickyHeader, ref, ...props }: React.ComponentPropsWithoutRef<typeof RootPart> & {
     /** compact tightens rows for scanning many records with a pointer. */
     density?: TableDensity;
+    /**
+     * plain separates rows by space; lined draws lines between rows, grid between
+     * rows and columns, both inside the table only; striped tones every other row.
+     */
+    variant?: TableVariant;
     /** Keeps the header visible while a bounded Container scrolls vertically. */
     stickyHeader?: boolean;
-} & React.RefAttributes<HTMLTableElement>>;
+} & {
+    ref?: React.Ref<HTMLTableElement>;
+}) => React.JSX.Element;
 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>>;
+declare const HeaderCellPart: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+}) => React.JSX.Element;
+declare const CellPart: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+}) => React.JSX.Element;
+declare const TableHeaderCell: ({ align, numeric, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof HeaderCellPart>, "align"> & CellLayout & {
+    ref?: React.Ref<HTMLTableCellElement>;
+}) => React.JSX.Element;
+declare const TableCell: ({ align, numeric, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof CellPart>, "align"> & CellLayout & {
+    ref?: React.Ref<HTMLTableCellElement>;
+}) => React.JSX.Element;
 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"> & {
+declare const TableSortHeader: ({ sort, onSort, disabled, children, className, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof TableHeaderCell>, "scope" | "aria-sort" | "onClick"> & {
     sort?: TableSort;
     onSort: () => void;
     disabled?: boolean;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & {
+    ref?: React.Ref<HTMLTableCellElement>;
+}) => React.JSX.Element;
 /** 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>>;
+declare const TableTruncate: ({ className, title, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;
 /** 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"> & {
+declare const TableMessage: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"td"> & {
     colSpan: number;
-} & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+} & {
+    ref?: React.Ref<HTMLTableCellElement>;
+}) => React.JSX.Element;
+declare const TableRow: ({ selected, className, ref, ...props }: React.ComponentPropsWithoutRef<"tr"> & {
     selected?: boolean;
-} & React.RefAttributes<HTMLTableRowElement>>;
+} & {
+    ref?: React.Ref<HTMLTableRowElement>;
+}) => React.JSX.Element;
 export declare const Table: {
-    Container: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        label?: string;
-        rootClassName?: string;
-        rootStyle?: React.CSSProperties;
-        orientation?: "horizontal" | "vertical" | "both";
-        scrollChain?: "auto" | "contain";
-    } & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Container: ({ bleed, rootClassName, ref, ...props }: React.ComponentPropsWithoutRef<typeof ScrollArea> & {
         label: string;
         /** Hangs the table into the gutter by its cell inset, so cell text lines up with
          * the text around it and a row's hover reaches past it evenly on both sides. */
         bleed?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLTableElement>, "ref"> & {
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Root: ({ density, variant, stickyHeader, ref, ...props }: React.ComponentPropsWithoutRef<typeof RootPart> & {
         /** compact tightens rows for scanning many records with a pointer. */
         density?: TableDensity;
+        /**
+         * plain separates rows by space; lined draws lines between rows, grid between
+         * rows and columns, both inside the table only; striped tones every other row.
+         */
+        variant?: TableVariant;
         /** 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;
-    } & React.RefAttributes<HTMLTableCaptionElement>>;
-    Head: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLTableSectionElement>>;
-    Body: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLTableSectionElement>>;
-    Foot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLTableSectionElement>>;
-    Row: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    } & {
+        ref?: React.Ref<HTMLTableElement>;
+    }) => React.JSX.Element;
+    Caption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLTableCaptionElement> | undefined;
+    }) => React.JSX.Element;
+    Head: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLTableSectionElement> | undefined;
+    }) => React.JSX.Element;
+    Body: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLTableSectionElement> | undefined;
+    }) => React.JSX.Element;
+    Foot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLTableSectionElement> | undefined;
+    }) => React.JSX.Element;
+    Row: ({ selected, className, ref, ...props }: React.ComponentPropsWithoutRef<"tr"> & {
         selected?: boolean;
-    } & React.RefAttributes<HTMLTableRowElement>>;
-    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"> & {
+    } & {
+        ref?: React.Ref<HTMLTableRowElement>;
+    }) => React.JSX.Element;
+    HeaderCell: ({ align, numeric, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof HeaderCellPart>, "align"> & CellLayout & {
+        ref?: React.Ref<HTMLTableCellElement>;
+    }) => React.JSX.Element;
+    SortHeader: ({ sort, onSort, disabled, children, className, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof TableHeaderCell>, "scope" | "aria-sort" | "onClick"> & {
         sort?: TableSort;
         onSort: () => void;
         disabled?: boolean;
-    } & React.RefAttributes<HTMLTableCellElement>>;
-    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"> & {
+    } & {
+        ref?: React.Ref<HTMLTableCellElement>;
+    }) => React.JSX.Element;
+    Cell: ({ align, numeric, ref, ...props }: Omit<React.ComponentPropsWithoutRef<typeof CellPart>, "align"> & CellLayout & {
+        ref?: React.Ref<HTMLTableCellElement>;
+    }) => React.JSX.Element;
+    Truncate: ({ className, title, children, ref, ...props }: React.ComponentPropsWithoutRef<"span"> & {
+        ref?: React.Ref<HTMLSpanElement>;
+    }) => React.JSX.Element;
+    Message: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"td"> & {
         colSpan: number;
-    } & React.RefAttributes<HTMLTableCellElement>>;
+    } & {
+        ref?: React.Ref<HTMLTableCellElement>;
+    }) => React.JSX.Element;
 };
 export { TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
-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;
-} & React.RefAttributes<HTMLTableSectionElement>>, TableBody: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
-    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>>;
+export declare const TableCaption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableCaptionElement> | undefined;
+}) => React.JSX.Element, TableHead: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableSectionElement> | undefined;
+}) => React.JSX.Element, TableBody: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableSectionElement> | undefined;
+}) => React.JSX.Element, TableFoot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLTableSectionElement> | undefined;
+}) => React.JSX.Element;
 export { useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table-selection.js';

package/dist/table.js

@@ -1,59 +1,58 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { Button } from './button.js';
-import { part, cx } from './parts.js';
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
 import { ScrollArea } from './scroll-area.js';
-const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer({ bleed, rootClassName, ...props }, ref) {
-    return (_jsx(ScrollArea, { ...props, ref: ref, rootClassName: cx(bleed && 'pui-table-bleed', rootClassName) }));
-});
-const RootPart = /* @__PURE__ */ part('table', 'pui-table');
-const TableRoot = /* @__PURE__ */ 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 TableContainer = function TableContainer({ bleed, rootClassName, ref, ...props }) {
+    return (_jsx(ScrollArea, { ...props, ref: ref, rootClassName: cx(bleed && 'surf-table-bleed', rootClassName) }));
+};
+const RootPart = /* @__PURE__ */ elementPart('table', 'surf-table');
+const TableRoot = function TableRoot({ density, variant, stickyHeader, ref, ...props }) {
+    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-variant": variant && variant !== 'plain' ? variant : undefined, "data-sticky-header": stickyHeader || undefined }));
+};
 const layout = ({ align, numeric }) => ({
     'data-align': numeric ? 'end' : align,
     'data-numeric': numeric || undefined,
 });
-const HeaderCellPart = /* @__PURE__ */ part('th', 'pui-table-cell pui-table-header');
-const CellPart = /* @__PURE__ */ part('td', 'pui-table-cell');
+const HeaderCellPart = /* @__PURE__ */ elementPart('th', 'surf-table-cell surf-table-header');
+const CellPart = /* @__PURE__ */ elementPart('td', 'surf-table-cell');
 // align replaces the obsolete HTML align attribute of th and td.
-const TableHeaderCell = /* @__PURE__ */ React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
+const TableHeaderCell = function TableHeaderCell({ align, numeric, ref, ...props }) {
     return _jsx(HeaderCellPart, { ...props, ...layout({ align, numeric }), ref: ref });
-});
-const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
+};
+const TableCell = function TableCell({ align, numeric, ref, ...props }) {
     return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
-});
+};
 function SortIcon({ sort }) {
     return (_jsx(Icon, { name: sort === 'ascending'
             ? 'arrow-up'
             : sort === 'descending'
                 ? 'arrow-down'
-                : 'sort', className: 'pui-table-sort-icon' }));
+                : 'sort', className: 'surf-table-sort-icon' }));
 }
 /** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
-const TableSortHeader = /* @__PURE__ */ React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
-    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: cx('pui-table-sort-header', className), 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 })] }) }));
-});
+const TableSortHeader = function TableSortHeader({ sort, onSort, disabled, children, className, ref, ...props }) {
+    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: cx('surf-table-sort-header', className), children: _jsxs(Button, { variant: 'ghost', className: 'surf-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 = /* @__PURE__ */ React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: cx('pui-table-truncate', className), children: children }));
-});
+const TableTruncate = function TableTruncate({ className, title, children, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: cx('surf-table-truncate', className), children: children }));
+};
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
-const TableMessage = /* @__PURE__ */ 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: cx('pui-table-cell pui-table-message', className) }) }));
-});
-const TableRow = /* @__PURE__ */ React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('pui-table-row', className) }));
-});
+const TableMessage = function TableMessage({ className, ref, ...props }) {
+    return (_jsx("tr", { className: 'surf-table-row surf-table-message-row', children: _jsx("td", { ...props, ref: ref, className: cx('surf-table-cell surf-table-message', className) }) }));
+};
+const TableRow = function TableRow({ selected, className, ref, ...props }) {
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('surf-table-row', className) }));
+};
 export const Table = {
     Container: TableContainer,
     Root: TableRoot,
-    Caption: /* @__PURE__ */ part('caption', 'pui-table-caption'),
-    Head: /* @__PURE__ */ part('thead', 'pui-table-head'),
-    Body: /* @__PURE__ */ part('tbody', 'pui-table-body'),
-    Foot: /* @__PURE__ */ part('tfoot', 'pui-table-foot'),
+    Caption: /* @__PURE__ */ elementPart('caption', 'surf-table-caption'),
+    Head: /* @__PURE__ */ elementPart('thead', 'surf-table-head'),
+    Body: /* @__PURE__ */ elementPart('tbody', 'surf-table-body'),
+    Foot: /* @__PURE__ */ elementPart('tfoot', 'surf-table-foot'),
     Row: TableRow,
     HeaderCell: TableHeaderCell,
     SortHeader: TableSortHeader,

package/dist/tabs.d.ts

@@ -1,29 +1,49 @@
 import * as React from 'react';
 export declare const Tabs: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    List: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Tab: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Panel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Indicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>, TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsPanel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, TabsTab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
+export declare const TabsIndicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element, TabsList: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, TabsPanel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, TabsRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, TabsTab: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;

package/dist/tabs.js

@@ -3,11 +3,11 @@ import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { part } from './parts.js';
 export const Tabs = {
     ...BaseTabs,
-    Root: /* @__PURE__ */ part(BaseTabs.Root, 'pui-tabs'),
-    List: /* @__PURE__ */ part(BaseTabs.List, 'pui-tabs-list'),
-    Tab: /* @__PURE__ */ part(BaseTabs.Tab, 'pui-tabs-tab'),
-    Panel: /* @__PURE__ */ part(BaseTabs.Panel, 'pui-tabs-panel'),
-    Indicator: /* @__PURE__ */ part(BaseTabs.Indicator, 'pui-tabs-indicator'),
+    Root: /* @__PURE__ */ part(BaseTabs.Root, 'surf-tabs'),
+    List: /* @__PURE__ */ part(BaseTabs.List, 'surf-tabs-list'),
+    Tab: /* @__PURE__ */ part(BaseTabs.Tab, 'surf-tabs-tab'),
+    Panel: /* @__PURE__ */ part(BaseTabs.Panel, 'surf-tabs-panel'),
+    Indicator: /* @__PURE__ */ part(BaseTabs.Indicator, 'surf-tabs-indicator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Indicator: TabsIndicator, List: TabsList, Panel: TabsPanel, Root: TabsRoot, Tab: TabsTab, } = Tabs;

package/dist/textarea.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { type ComponentSizeAlias } from './sizing.js';
 /** A multi-line text field. Inside Field.Root it takes the label, description and
  * error from the field, as Input does. */
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+export declare const Textarea: ({ className, size, rows, cols, wrap, ref, ...props }: React.ComponentPropsWithoutRef<"textarea"> & {
     size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+} & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => React.JSX.Element;

package/dist/textarea.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { Field as BaseField } from '@base-ui/react/field';
 import { cx } from './parts.js';
 /** A multi-line text field. Inside Field.Root it takes the label, description and
  * error from the field, as Input does. */
-export const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ className, size, rows, cols, wrap, ...props }, ref) {
+export const Textarea = function Textarea({ className, size, rows, cols, wrap, ref, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('pui-input pui-textarea', className) }));
-});
+    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('surf-input surf-textarea', className) }));
+};