@panphora/bevel 0.1.0

package/dist/react/components/files-table.d.ts

@@ -0,0 +1,174 @@
+import { type ComponentProps, type MouseEvent, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export type FilesTableKind = 'folder' | 'site' | 'upload';
+export type FilesTableColumn = 'name' | 'updated' | 'size';
+export interface FilesTableSort {
+    column: FilesTableColumn;
+    direction: 'ascending' | 'descending';
+}
+export interface FilesTablePill {
+    id: string;
+    label: ReactNode;
+    tone?: 'default' | 'accent' | 'good' | 'alert';
+    icon?: ReactNode;
+    title?: string;
+}
+export interface FilesTableEditor {
+    initials: string;
+    name: string;
+    tone?: 'default' | 'accent' | 'good';
+}
+export interface FilesTableItem {
+    id: string;
+    kind: FilesTableKind;
+    name: string;
+    href?: string;
+    detail?: ReactNode;
+    location?: ReactNode;
+    icon?: ReactNode;
+    pills?: readonly FilesTablePill[];
+    updated?: ReactNode;
+    updatedTitle?: string;
+    updatedDateTime?: string;
+    size?: string | number;
+    editor?: FilesTableEditor;
+    selectable?: boolean;
+}
+export interface FilesTableLabels {
+    name: ReactNode;
+    status: ReactNode;
+    editor: ReactNode;
+    updated: ReactNode;
+    size: ReactNode;
+    actions: ReactNode;
+    selectAll: string;
+    loading: ReactNode;
+    select: (item: FilesTableItem) => string;
+    open: (item: FilesTableItem) => string;
+    share: (item: FilesTableItem) => string;
+    openInNewTab: (item: FilesTableItem) => string;
+    actionsFor: (item: FilesTableItem) => string;
+}
+export type FilesTableIcons = Record<FilesTableKind | 'open' | 'share' | 'openInNewTab' | 'actions' | 'sort', ReactNode>;
+type ItemHandler = (item: FilesTableItem, event: MouseEvent<HTMLElement>) => void;
+export interface FilesTableToolProps extends ComponentProps<'button'> {
+    reveal?: boolean;
+}
+declare function Tool({ reveal, className, type, ...props }: FilesTableToolProps): import("react").JSX.Element;
+declare function More({ size, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+export interface FilesTableTableProps extends Omit<ComponentProps<'table'>, 'children'> {
+    items: readonly FilesTableItem[];
+    sort?: FilesTableSort | null;
+    defaultSort?: FilesTableSort | null;
+    onSortChange?: (sort: FilesTableSort | null, details: ChangeDetails) => void;
+    sortable?: boolean;
+    selection?: boolean;
+    selectedIds?: readonly string[];
+    defaultSelectedIds?: readonly string[];
+    onSelectedIdsChange?: (ids: readonly string[], details: ChangeDetails) => void;
+    editors?: boolean;
+    loading?: boolean;
+    skeletonRows?: number;
+    empty?: ReactNode;
+    dropTargetId?: string | null;
+    dropHint?: ReactNode;
+    rowProps?: (item: FilesTableItem) => ComponentProps<'tr'>;
+    onOpen?: ItemHandler;
+    onShare?: ItemHandler;
+    onOpenInNewTab?: ItemHandler;
+    onActions?: ItemHandler;
+    renderActions?: (item: FilesTableItem) => ReactNode;
+    labels?: Partial<FilesTableLabels>;
+    icons?: Partial<FilesTableIcons>;
+}
+declare function Table({ items, sort: sortValue, defaultSort, onSortChange, sortable, selection, selectedIds, defaultSelectedIds, onSelectedIdsChange, editors, loading, skeletonRows, empty, dropTargetId, dropHint, rowProps, onOpen, onShare, onOpenInNewTab, onActions, renderActions, labels: labelOverrides, icons: iconOverrides, ...props }: FilesTableTableProps): import("react").JSX.Element;
+export declare const FilesTable: {
+    Root: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Table: typeof Table;
+    Tool: typeof Tool;
+    Pill: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "accent" | "alert" | "good" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "accent" | "alert" | "good" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Avatar: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "accent" | "good" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "accent" | "good" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Kind: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    DropHint: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    More: typeof More;
+    Footer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Spacer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Blank: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    BlankTile: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    BlankTitle: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    BlankText: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/react/components/files-table.js

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/classes.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, nativeVariants, styled } from "../internal/part.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { Icon } from "./icon.js";
+import { VisuallyHidden } from "./layout.js";
+const defaultIcons = {
+  folder: /* @__PURE__ */ jsx(Icon, { name: "folder", size: 17 }),
+  site: /* @__PURE__ */ jsx(Icon, { name: "file-html", size: 17 }),
+  upload: /* @__PURE__ */ jsx(Icon, { name: "doc", size: 17 }),
+  open: /* @__PURE__ */ jsx(Icon, { name: "external", size: 15 }),
+  share: /* @__PURE__ */ jsx(Icon, { name: "share-nodes", size: 15 }),
+  openInNewTab: /* @__PURE__ */ jsx(Icon, { name: "external", size: 15 }),
+  actions: /* @__PURE__ */ jsx(Icon, { name: "more", size: 17 }),
+  sort: /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: 11 })
+};
+const defaultLabels = {
+  name: "Name",
+  status: "Status",
+  editor: "Edited by",
+  updated: "Updated",
+  size: "Size",
+  actions: "Actions",
+  selectAll: "Select all files",
+  loading: "Loading files\u2026",
+  select: (item) => `Select ${item.name}`,
+  open: (item) => `Open ${item.name}`,
+  share: (item) => `Share ${item.name}`,
+  openInNewTab: (item) => `Open ${item.name} in a new tab`,
+  actionsFor: (item) => `Actions for ${item.name}`
+};
+const skeletonWidths = [[132, 196, 44], [104, 168, 38], [148, 180, 50]];
+const Root = nativePart("div", "bevel-r-files");
+const Scroll = nativePart("div", "bevel-r-files__scroll");
+const TablePart = nativePart("table", "bevel-r-files__table");
+const Row = nativePart("tr", "bevel-r-files__row");
+const column = (name) => ({ Head: nativePart("th", `bevel-r-files__${name}`), Cell: nativePart("td", `bevel-r-files__${name}`) });
+const Pick = column("pick"), Name = column("name"), Status = column("status"), Editor = column("editor"), Updated = column("updated"), Size = column("size"), Actions = column("actions");
+const Sort = nativePart("button", "bevel-r-files__sort");
+const Arrow = nativePart("span", "bevel-r-files__arrow");
+const Anchor = nativePart("span", "bevel-r-files__anchor");
+const Kind = nativePart("span", "bevel-r-files__kind");
+const Label = nativePart("span", "bevel-r-files__label");
+const TitleButton = nativePart("button", "bevel-r-files__title");
+const TitleLink = nativePart("a", "bevel-r-files__title");
+const TitleText = nativePart("span", "bevel-r-files__title");
+const Detail = nativePart("span", "bevel-r-files__detail");
+const Tools = nativePart("span", "bevel-r-files__tools");
+const ToolPart = nativePart("button", "bevel-r-files__tool");
+const Pill = nativeVariants("span", "bevel-r-files__pill", ["accent", "good", "alert"]);
+const Avatar = nativeVariants("span", "bevel-r-files__avatar", ["accent", "good"]);
+const DropHint = nativePart("span", "bevel-r-files__drop-hint");
+const Skeleton = nativePart("tr", "bevel-r-files__skeleton");
+const Lines = nativePart("span", "bevel-r-files__lines");
+const Bar = nativeVariants("span", "bevel-r-files__bar", ["short"]);
+const Notice = nativePart("tr", "bevel-r-files__notice");
+const Empty = nativePart("tr", "bevel-r-files__empty");
+const MorePart = styled(Button, "bevel-r-files__more");
+function Tool({ reveal = false, className, type = "button", ...props }) {
+  return /* @__PURE__ */ jsx(ToolPart, { ...props, type, className: cx(reveal && "bevel-r-files__tool--reveal", className) });
+}
+function More({ size = "small", ...props }) {
+  return /* @__PURE__ */ jsx(MorePart, { ...props, size });
+}
+const interactive = 'a, button, input, label, select, textarea, summary, [role="button"], [role="checkbox"], [role="menuitem"], .bevel-r-files__pick';
+const defined = (values) => Object.fromEntries(Object.entries(values ?? {}).filter(([, value]) => value !== void 0));
+const plain = (value) => typeof value === "string" || typeof value === "number" ? String(value) : "";
+const foldLine = (item, detail) => {
+  const parts = [plain(item.updated), plain(item.size)].filter(Boolean).join(" \xB7 ");
+  return parts ? detail === void 0 ? parts : ` \xB7 ${parts}` : void 0;
+};
+function Table({
+  items,
+  sort: sortValue,
+  defaultSort = null,
+  onSortChange,
+  sortable = true,
+  selection = true,
+  selectedIds,
+  defaultSelectedIds = [],
+  onSelectedIdsChange,
+  editors = false,
+  loading = false,
+  skeletonRows = 3,
+  empty,
+  dropTargetId = null,
+  dropHint,
+  rowProps,
+  onOpen,
+  onShare,
+  onOpenInNewTab,
+  onActions,
+  renderActions,
+  labels: labelOverrides,
+  icons: iconOverrides,
+  ...props
+}) {
+  const labels = { ...defaultLabels, ...defined(labelOverrides) }, icons = { ...defaultIcons, ...defined(iconOverrides) };
+  const [sort, changeSort] = useControllableState({ value: sortValue, defaultValue: defaultSort, onChange: onSortChange });
+  const [selected, changeSelected] = useControllableState({ value: selectedIds, defaultValue: defaultSelectedIds, onChange: onSelectedIdsChange });
+  const eligible = items.filter((item) => item.selectable !== false).map((item) => item.id);
+  const count = eligible.filter((id) => selected.includes(id)).length;
+  const allSelected = eligible.length > 0 && count === eligible.length;
+  const span = 5 + Number(selection) + Number(editors);
+  const toggle = (ids, on, details) => changeSelected((previous) => {
+    const next = new Set(previous.filter((id) => items.some((item) => item.id === id)));
+    for (const id of ids) if (on) next.add(id);
+    else next.delete(id);
+    return [...next];
+  }, details);
+  const sortHead = (column2, label, Part) => {
+    const direction = sort?.column === column2 ? sort.direction : "none";
+    return /* @__PURE__ */ jsx(Part.Head, { role: "columnheader", scope: "col", "aria-sort": direction, children: sortable ? /* @__PURE__ */ jsxs(Sort, { type: "button", onClick: (event) => changeSort({ column: column2, direction: direction === "ascending" ? "descending" : "ascending" }, { reason: "sort", event }), children: [
+      label,
+      /* @__PURE__ */ jsx(Arrow, { children: icons.sort })
+    ] }) : label });
+  };
+  return /* @__PURE__ */ jsx(Scroll, { children: /* @__PURE__ */ jsxs(TablePart, { role: "table", ...props, "aria-busy": loading || void 0, children: [
+    /* @__PURE__ */ jsx("thead", { role: "rowgroup", children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+      selection && /* @__PURE__ */ jsx(Pick.Head, { role: "columnheader", scope: "col", children: /* @__PURE__ */ jsx(
+        Checkbox.Root,
+        {
+          "aria-label": labels.selectAll,
+          checked: allSelected,
+          indeterminate: count > 0 && !allSelected,
+          disabled: loading || !eligible.length,
+          onCheckedChange: (checked, details) => toggle(eligible, checked, { reason: "selection", event: details.event }),
+          children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+        }
+      ) }),
+      sortHead("name", labels.name, Name),
+      /* @__PURE__ */ jsx(Status.Head, { role: "columnheader", scope: "col", children: labels.status }),
+      editors && /* @__PURE__ */ jsx(Editor.Head, { role: "columnheader", scope: "col", children: labels.editor }),
+      sortHead("updated", labels.updated, Updated),
+      sortHead("size", labels.size, Size),
+      /* @__PURE__ */ jsx(Actions.Head, { role: "columnheader", scope: "col", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.actions }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { role: "rowgroup", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      Array.from({ length: Math.max(0, skeletonRows) }, (_, index) => {
+        const [title, detail, size] = skeletonWidths[index % skeletonWidths.length];
+        return /* @__PURE__ */ jsxs(Skeleton, { role: "row", "aria-hidden": "true", children: [
+          selection && /* @__PURE__ */ jsx(Pick.Cell, { role: "cell" }),
+          /* @__PURE__ */ jsx(Name.Cell, { role: "cell", children: /* @__PURE__ */ jsxs(Anchor, { children: [
+            /* @__PURE__ */ jsx(Kind, {}),
+            /* @__PURE__ */ jsxs(Lines, { children: [
+              /* @__PURE__ */ jsx(Bar, { style: { width: title } }),
+              /* @__PURE__ */ jsx(Bar, { variant: "short", style: { width: detail } })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Status.Cell, { role: "cell" }),
+          editors && /* @__PURE__ */ jsx(Editor.Cell, { role: "cell" }),
+          /* @__PURE__ */ jsx(Updated.Cell, { role: "cell" }),
+          /* @__PURE__ */ jsx(Size.Cell, { role: "cell", children: /* @__PURE__ */ jsx(Bar, { style: { width: size } }) }),
+          /* @__PURE__ */ jsx(Actions.Cell, { role: "cell" })
+        ] }, index);
+      }),
+      /* @__PURE__ */ jsx(Notice, { role: "row", children: /* @__PURE__ */ jsx("td", { role: "cell", colSpan: span, children: /* @__PURE__ */ jsx("span", { role: "status", children: labels.loading }) }) })
+    ] }) : !items.length ? empty !== void 0 && /* @__PURE__ */ jsx(Empty, { role: "row", children: /* @__PURE__ */ jsx("td", { role: "cell", colSpan: span, children: empty }) }) : items.map((item) => {
+      const extra = rowProps?.(item) ?? {}, isSelected = selected.includes(item.id), isTarget = dropTargetId === item.id;
+      const open = onOpen && ((event) => onOpen(item, event));
+      const title = item.href ? /* @__PURE__ */ jsx(TitleLink, { href: item.href, onClick: open, children: item.name }) : open ? /* @__PURE__ */ jsx(TitleButton, { type: "button", onClick: open, children: item.name }) : /* @__PURE__ */ jsx(TitleText, { children: item.name });
+      const detail = item.location ?? item.detail, fold = foldLine(item, detail);
+      return /* @__PURE__ */ jsxs(
+        Row,
+        {
+          role: "row",
+          ...extra,
+          "data-bevel-react-key": item.id,
+          "data-bevel-react-kind": item.kind,
+          "data-bevel-react-selected": isSelected || void 0,
+          "data-bevel-react-drop-target": isTarget || void 0,
+          onClick: (event) => {
+            extra.onClick?.(event);
+            if (!event.currentTarget.contains(event.target)) return;
+            if (!event.defaultPrevented && open && !(event.target instanceof Element && event.target.closest(interactive))) open(event);
+          },
+          children: [
+            selection && /* @__PURE__ */ jsx(Pick.Cell, { role: "cell", children: /* @__PURE__ */ jsx(
+              Checkbox.Root,
+              {
+                "aria-label": labels.select(item),
+                checked: isSelected,
+                disabled: item.selectable === false,
+                onCheckedChange: (checked, details) => toggle([item.id], checked, { reason: "selection", event: details.event }),
+                children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Name.Cell, { role: "cell", children: /* @__PURE__ */ jsxs(Anchor, { children: [
+              /* @__PURE__ */ jsx(Kind, { children: item.icon ?? icons[item.kind] }),
+              /* @__PURE__ */ jsxs(Label, { children: [
+                title,
+                (detail !== void 0 || fold !== void 0) && /* @__PURE__ */ jsx(Detail, { "data-fold": fold, className: cx(item.location !== void 0 && "bevel-r-files__detail--location"), children: detail })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(Status.Cell, { role: "cell", children: isTarget && dropHint !== void 0 ? /* @__PURE__ */ jsx(DropHint, { children: dropHint }) : item.pills?.map((pill) => /* @__PURE__ */ jsxs(Pill, { variant: pill.tone === "default" ? void 0 : pill.tone, title: pill.title, children: [
+              pill.icon,
+              pill.label
+            ] }, pill.id)) }),
+            editors && /* @__PURE__ */ jsx(Editor.Cell, { role: "cell", children: item.editor && /* @__PURE__ */ jsx(Avatar, { variant: item.editor.tone === "default" ? void 0 : item.editor.tone, title: item.editor.name, "aria-label": item.editor.name, role: "img", children: item.editor.initials }) }),
+            /* @__PURE__ */ jsx(Updated.Cell, { role: "cell", children: item.updated === void 0 ? "\u2013" : item.updatedDateTime ? /* @__PURE__ */ jsx("time", { dateTime: item.updatedDateTime, title: item.updatedTitle, children: item.updated }) : /* @__PURE__ */ jsx("span", { title: item.updatedTitle, children: item.updated }) }),
+            /* @__PURE__ */ jsx(Size.Cell, { role: "cell", children: item.size }),
+            /* @__PURE__ */ jsx(Actions.Cell, { role: "cell", children: /* @__PURE__ */ jsxs(Tools, { children: [
+              item.kind !== "folder" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                onShare && /* @__PURE__ */ jsx(Tool, { reveal: true, "aria-label": labels.share(item), onClick: (event) => onShare(item, event), children: icons.share }),
+                onOpenInNewTab && /* @__PURE__ */ jsx(Tool, { reveal: true, "aria-label": labels.openInNewTab(item), onClick: (event) => onOpenInNewTab(item, event), children: icons.openInNewTab })
+              ] }),
+              renderActions ? renderActions(item) : onActions && /* @__PURE__ */ jsx(Tool, { "aria-label": labels.actionsFor(item), onClick: (event) => onActions(item, event), children: icons.actions })
+            ] }) })
+          ]
+        },
+        item.id
+      );
+    }) })
+  ] }) });
+}
+const FilesTable = {
+  Root,
+  Table,
+  Tool,
+  Pill,
+  Avatar,
+  Kind,
+  DropHint,
+  More,
+  Footer: nativePart("div", "bevel-r-files__foot"),
+  Spacer: nativePart("span", "bevel-r-files__spacer"),
+  Blank: nativePart("div", "bevel-r-files__blank"),
+  BlankTile: nativePart("span", "bevel-r-files__blank-tile"),
+  BlankTitle: nativePart("p", "bevel-r-files__blank-title"),
+  BlankText: nativePart("p", "bevel-r-files__blank-text")
+};
+export {
+  FilesTable
+};

package/dist/react/components/filter-builder.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { type FilterExpression, type FilterField } from '../models/filter.js';
+import { Button } from './button.js';
+export interface FilterBuilderProps<Row> extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    value?: FilterExpression;
+    defaultValue?: FilterExpression;
+    onValueChange?: (value: FilterExpression, details: ChangeDetails) => void;
+    fields?: readonly FilterField<Row>[];
+}
+declare function Root<Row>({ value, defaultValue, onValueChange, fields, ...props }: FilterBuilderProps<Row>): import("react").JSX.Element;
+declare function Rules(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function Match(props: ComponentProps<'select'>): import("react").JSX.Element;
+export declare const FilterBuilder: {
+    Root: typeof Root;
+    Rules: typeof Rules;
+    Match: typeof Match;
+    Edit: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Add: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Apply: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Cancel: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Heading: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Actions: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/react/components/filter-builder.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { TableContext } from "../internal/table-context.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart } from "../internal/part.js";
+import { filterOperators, validateFilter } from "../models/filter.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+const Context = createContext(null);
+function useFilter() {
+  const context = useContext(Context);
+  if (!context) throw new Error("FilterBuilder parts require FilterBuilder.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-filter");
+const RulesPart = nativePart("div", "bevel-r-filter__rules");
+const RulePart = nativePart("div", "bevel-r-filter__rule");
+function Root({ value, defaultValue = { match: "all", rules: [] }, onValueChange, fields, ...props }) {
+  const table = useContext(TableContext);
+  const [local, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const current = table?.state.filter ?? local;
+  const definitions = fields ?? table?.options.columns ?? [];
+  const [draft, setDraft] = useState(null), [errors, setErrors] = useState([]);
+  useEffect(() => {
+    setDraft(null);
+    setErrors([]);
+  }, [current]);
+  const edit = () => {
+    setErrors([]);
+    setDraft({ ...current, rules: current.rules.map((rule) => ({ ...rule })) });
+  };
+  const add = () => {
+    const field = definitions[0];
+    if (!field) return;
+    const base = draft ?? current;
+    setDraft({ ...base, rules: [...base.rules, { id: crypto.randomUUID(), field: field.id, operator: filterOperators[field.type ?? "text"][0], value: field.type === "enum" ? field.options?.[0]?.id ?? "" : "" }] });
+  };
+  const apply = () => {
+    if (!draft) return;
+    const errors2 = validateFilter(draft, definitions);
+    setErrors(errors2);
+    if (errors2.length) return;
+    if (table) table.update({ filter: draft }, { reason: "filter" });
+    else change(draft, { reason: "apply" });
+    setDraft(null);
+  };
+  return /* @__PURE__ */ jsx(Context, { value: { value: current, draft, fields: definitions, errors, setDraft, edit, apply, add }, children: /* @__PURE__ */ jsx(RootPart, { ...props, "data-bevel-react-editing": draft !== null || void 0, "data-bevel-react-invalid": errors.length > 0 || void 0 }) });
+}
+function Rule({ rule, index }) {
+  const context = useFilter(), errorId = useId(), field = context.fields.find((field2) => field2.id === rule.field);
+  const error = context.errors.find((error2) => error2.ruleId === rule.id)?.message;
+  const update = (patch) => {
+    if (context.draft) context.setDraft({ ...context.draft, rules: context.draft.rules.map((item) => item.id === rule.id ? { ...item, ...patch } : item) });
+  };
+  const disabled = !context.draft, valueDisabled = disabled || rule.operator === "is-empty";
+  return /* @__PURE__ */ jsxs(RulePart, { children: [
+    /* @__PURE__ */ jsx("span", { children: index ? (context.draft ?? context.value).match === "all" ? "And" : "Or" : "Where" }),
+    /* @__PURE__ */ jsx("select", { "aria-label": `Rule ${index + 1} field`, value: rule.field, disabled, onChange: (event) => {
+      const next = context.fields.find((field2) => field2.id === event.target.value);
+      update({ field: next.id, operator: filterOperators[next.type ?? "text"][0], value: next.type === "enum" ? next.options?.[0]?.id ?? "" : "" });
+    }, children: context.fields.map((field2) => /* @__PURE__ */ jsx("option", { value: field2.id, children: field2.label }, field2.id)) }),
+    /* @__PURE__ */ jsx("select", { "aria-label": `Rule ${index + 1} operator`, disabled, value: rule.operator, onChange: (event) => update({ operator: event.target.value }), children: filterOperators[field?.type ?? "text"].map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: operator.replaceAll("-", " ") }, operator)) }),
+    field?.type === "enum" ? /* @__PURE__ */ jsx("select", { "aria-label": `${field.label} filter value`, disabled: valueDisabled, value: rule.value, "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : void 0, onChange: (event) => update({ value: event.target.value }), children: field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.label }, option.id)) }) : /* @__PURE__ */ jsx(Input, { "aria-label": `${field?.label ?? "Rule"} filter value`, value: rule.value, inputMode: field?.type === "number" ? "decimal" : void 0, disabled: valueDisabled, "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : void 0, onValueChange: (value) => update({ value }) }),
+    /* @__PURE__ */ jsx(Button, { "aria-label": `Remove rule ${index + 1}`, disabled, onClick: () => {
+      if (context.draft) context.setDraft({ ...context.draft, rules: context.draft.rules.filter((item) => item.id !== rule.id) });
+    }, children: "\xD7" }),
+    error && /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", children: error })
+  ] });
+}
+function Rules(props) {
+  const context = useFilter();
+  return /* @__PURE__ */ jsx(RulesPart, { ...props, children: (context.draft ?? context.value).rules.map((rule, index) => /* @__PURE__ */ jsx(Rule, { rule, index }, rule.id)) });
+}
+function Match(props) {
+  const context = useFilter();
+  return /* @__PURE__ */ jsxs("select", { "aria-label": "Match rules", ...props, value: (context.draft ?? context.value).match, disabled: !context.draft, onChange: (event) => {
+    props.onChange?.(event);
+    if (context.draft && !event.defaultPrevented) context.setDraft({ ...context.draft, match: event.target.value });
+  }, children: [
+    /* @__PURE__ */ jsx("option", { value: "all", children: "All rules" }),
+    /* @__PURE__ */ jsx("option", { value: "any", children: "Any rule" })
+  ] });
+}
+function action(kind, label) {
+  return function Action({ onClick, ...props }) {
+    const context = useFilter();
+    return /* @__PURE__ */ jsx(Button, { ...props, hidden: props.hidden || (kind === "edit" ? context.draft !== null : kind !== "add" && context.draft === null), disabled: props.disabled || kind === "add" && !context.fields.length, onClick: (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (kind === "cancel") context.setDraft(null);
+      else context[kind]();
+    }, children: props.children ?? label });
+  };
+}
+const FilterBuilder = {
+  Root,
+  Rules,
+  Match,
+  Edit: action("edit", "Edit filters"),
+  Add: action("add", "Add rule"),
+  Apply: action("apply", "Apply filters"),
+  Cancel: action("cancel", "Cancel"),
+  Heading: nativePart("div", "bevel-r-filter__heading"),
+  Actions: nativePart("div", "bevel-r-filter__actions")
+};
+export {
+  FilterBuilder
+};

package/dist/react/components/form-error-summary.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from 'react';
+export interface FormError {
+    id: string;
+    message: string;
+}
+export declare function nativeFormErrors(form: HTMLFormElement): FormError[];
+export interface ErrorLinkProps extends ComponentProps<'a'> {
+    controlId: string;
+}
+export declare function ErrorLink({ controlId, onClick, ...props }: ErrorLinkProps): import("react").JSX.Element;
+export interface FormErrorSummaryProps extends ComponentProps<'section'> {
+    errors: readonly FormError[];
+    focus?: 'summary' | 'first-field' | false;
+    focusToken?: string | number;
+}
+export declare function FormErrorSummary({ errors, focus, focusToken, ref, children, ...props }: FormErrorSummaryProps): import("react").JSX.Element | null;

package/dist/react/components/form-error-summary.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+function nativeFormErrors(form) {
+  const errors = [];
+  for (const element of form.elements) {
+    if (!("willValidate" in element) || !element.willValidate || !("validity" in element) || element.validity.valid) continue;
+    if (!element.id) throw new Error("Controls used with nativeFormErrors need stable IDs.");
+    errors.push({ id: element.id, message: element.validationMessage });
+  }
+  return errors;
+}
+const RootPart = nativePart("section", "bevel-r-errors");
+const List = nativePart("ul", "bevel-r-errors__list");
+function ErrorLink({ controlId, onClick, ...props }) {
+  return /* @__PURE__ */ jsx("a", { ...props, href: `#${encodeURIComponent(controlId)}`, onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    const control = event.currentTarget.ownerDocument.getElementById(controlId);
+    if (control) {
+      event.preventDefault();
+      control.focus();
+      control.scrollIntoView({ block: "nearest" });
+    }
+  } });
+}
+function FormErrorSummary({ errors, focus = "summary", focusToken, ref, children, ...props }) {
+  const root = useRef(null), merged = useMergedRefs(ref, root);
+  const latest = useRef({ errors, focus });
+  latest.current = { errors, focus };
+  useEffect(() => {
+    const { errors: errors2, focus: focus2 } = latest.current;
+    if (focusToken === void 0 || !errors2.length || !focus2) return;
+    if (focus2 === "summary") root.current?.focus();
+    else root.current?.ownerDocument.getElementById(errors2[0].id)?.focus();
+  }, [focusToken]);
+  if (!errors.length) return null;
+  return /* @__PURE__ */ jsx(RootPart, { role: "alert", tabIndex: -1, ...props, ref: merged, children: children ?? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("strong", { children: errors.length === 1 ? "One thing needs your attention." : `${errors.length} things need your attention.` }),
+    /* @__PURE__ */ jsx(List, { children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ErrorLink, { controlId: error.id, children: error.message }) }, `${error.id}-${index}`)) })
+  ] }) });
+}
+export {
+  ErrorLink,
+  FormErrorSummary,
+  nativeFormErrors
+};

package/dist/react/components/icon-button.d.ts

@@ -0,0 +1,8 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type ComponentProps, type ReactNode } from 'react';
+export interface IconButtonProps extends Omit<ComponentProps<typeof BaseButton>, 'aria-label' | 'children'> {
+    label: string;
+    variant?: 'raised' | 'flat';
+    children: ReactNode;
+}
+export declare function IconButton({ label, variant, title, children, ...props }: IconButtonProps): import("react").JSX.Element;