@panphora/bevel 0.1.0

package/dist/react/components/column-manager.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentProps } from 'react';
+export declare function ColumnResizeHandle({ columnId, onKeyDown, onPointerDown, disabled, ...props }: ComponentProps<'button'> & {
+    columnId: string;
+}): import("react").JSX.Element;
+declare function Root(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function List(): import("react").JSX.Element;
+declare function Summary(props: ComponentProps<'span'>): import("react").JSX.Element;
+export declare const ColumnManager: {
+    Root: typeof Root;
+    List: typeof List;
+    Summary: typeof Summary;
+    ResizeHandle: typeof ColumnResizeHandle;
+    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;
+    };
+    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;
+    };
+};
+export {};

package/dist/react/components/column-manager.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTable } from "../internal/table-context.js";
+import { usePointerSession } from "../internal/pointer-session.js";
+import { nativePart, styled } from "../internal/part.js";
+import { setColumnVisibility } from "../models/table.js";
+import { Sortable } from "./sortable.js";
+import { Checkbox } from "./checkbox.js";
+import { Button } from "./button.js";
+const RootPart = nativePart("div", "bevel-r-columns");
+const ItemPart = styled(Sortable.Item, "bevel-r-columns__item");
+const HandlePart = styled(Sortable.Handle, "bevel-r-columns__grip");
+const ResizePart = nativePart("button", "bevel-r-grid__resize");
+function ColumnResizeHandle({ columnId, onKeyDown, onPointerDown, disabled, ...props }) {
+  const table = useTable(), column = table.options.columns.find((column2) => column2.id === columnId);
+  const width = table.result.columns.find((column2) => column2.id === columnId)?.width ?? 160;
+  const min = column?.minWidth ?? 80, max = column?.maxWidth ?? 800;
+  const clamp = (value) => Math.max(min, Math.min(max, value));
+  const session = usePointerSession([columnId, Boolean(column), min, max, JSON.stringify(table.result.columns), disabled]);
+  const commit = (value, event) => table.update({ columns: table.result.columns.map((item) => item.id === columnId ? { ...item, width: clamp(value) } : item) }, { reason: "column-resize", event });
+  return /* @__PURE__ */ jsx(
+    ResizePart,
+    {
+      type: "button",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": `Resize ${column?.label ?? columnId}`,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": table.columnPreview[columnId] ?? width,
+      ...props,
+      disabled: disabled || !column,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        const step = event.shiftKey ? 32 : 8;
+        const value = event.key === "Home" ? min : event.key === "End" ? max : event.key === "ArrowLeft" ? width - step : event.key === "ArrowRight" ? width + step : null;
+        if (value !== null) {
+          event.preventDefault();
+          commit(value, event);
+        }
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        if (event.defaultPrevented || disabled || !column) return;
+        const start = event.clientX;
+        let preview = width;
+        session.begin(event, { move: (move) => {
+          preview = clamp(width + move.clientX - start);
+          table.setColumnPreview({ [columnId]: preview });
+        }, end: (accepted) => {
+          table.setColumnPreview({});
+          if (accepted && preview !== width) commit(preview, event);
+        } });
+      }
+    }
+  );
+}
+function Root(props) {
+  return /* @__PURE__ */ jsx(RootPart, { ...props });
+}
+function List() {
+  const table = useTable(), columns = table.result.columns, optional = columns.filter((column) => column.visible && !table.options.columns.find((definition) => definition.id === column.id)?.required).length;
+  return /* @__PURE__ */ jsx(Sortable.Root, { value: columns.map((column) => column.id), onValueChange: (order, details) => table.update({ columns: order.map((id) => columns.find((column) => column.id === id)) }, { ...details, reason: "column-order" }), children: () => columns.map((column, index) => {
+    const definition = table.options.columns.find((definition2) => definition2.id === column.id);
+    return /* @__PURE__ */ jsxs(ItemPart, { id: column.id, disabled: definition.required, children: [
+      /* @__PURE__ */ jsx(HandlePart, { disabled: definition.required, "aria-label": `Move ${definition.label}` }),
+      /* @__PURE__ */ jsx("span", { children: index + 1 }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(Checkbox.Root, { disabled: definition.required || column.visible && optional <= 1, checked: column.visible, onCheckedChange: (checked, details) => table.update({ columns: setColumnVisibility(table.options.columns, columns, column.id, checked) }, { reason: "column-visibility", event: details.event }), children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }),
+        definition.label
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", disabled: definition.required, "aria-pressed": column.pinned, "aria-label": `${column.pinned ? "Unpin" : "Pin"} ${definition.label}`, onClick: (event) => table.update({ columns: columns.map((item) => item.id === column.id ? { ...item, pinned: !item.pinned } : item) }, { reason: "column-pin", event }), children: column.pinned ? "Pinned" : "Pin" })
+    ] }, column.id);
+  }) });
+}
+function Summary(props) {
+  const { result } = useTable();
+  return /* @__PURE__ */ jsx("span", { ...props, children: props.children ?? `${result.visibleColumns.length} of ${result.columns.length} columns visible` });
+}
+const ColumnManager = { Root, List, Summary, ResizeHandle: ColumnResizeHandle, Heading: nativePart("div", "bevel-r-columns__heading"), Footer: nativePart("div", "bevel-r-columns__footer") };
+export {
+  ColumnManager,
+  ColumnResizeHandle
+};

package/dist/react/components/combobox.d.ts

@@ -0,0 +1,32 @@
+import { Combobox as Base } from '@base-ui/react/combobox';
+export declare const Combobox: {
+    Root: typeof Base.Root;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: typeof Base.Value;
+    Input: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    InputGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxStatusProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").NamedExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Chips: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Chip: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChipRemove: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipRemoveProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Row: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Collection: typeof Base.Collection;
+    Empty: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("@base-ui/react/combobox").ComboboxSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    useFilter: typeof Base.useFilter;
+    useFilteredItems: typeof Base.useFilteredItems;
+    createItems: typeof Base.createItems;
+};

package/dist/react/components/combobox.js

@@ -0,0 +1,37 @@
+"use client";
+import { Combobox as Base } from "@base-ui/react/combobox";
+import { styled } from "../internal/part.js";
+const Combobox = {
+  Root: Base.Root,
+  Label: styled(Base.Label, "bevel-r-field__label"),
+  Value: styled(Base.Value, "bevel-r-combobox__value"),
+  Input: styled(Base.Input, "bevel-r-input bevel-r-combobox__input"),
+  InputGroup: styled(Base.InputGroup, "bevel-r-combobox__control"),
+  Trigger: styled(Base.Trigger, "bevel-r-combobox__toggle"),
+  List: styled(Base.List, "bevel-r-combobox__list"),
+  Status: styled(Base.Status, "bevel-r-combobox__status"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Backdrop: styled(Base.Backdrop, "bevel-r-combobox__backdrop"),
+  Positioner: styled(Base.Positioner, "bevel-r-positioner"),
+  Popup: styled(Base.Popup, "bevel-r-combobox__listbox"),
+  Arrow: styled(Base.Arrow, "bevel-r-combobox__arrow"),
+  Icon: styled(Base.Icon, "bevel-r-combobox__icon"),
+  Group: styled(Base.Group, "bevel-r-combobox__group"),
+  GroupLabel: styled(Base.GroupLabel, "bevel-r-combobox__group-label"),
+  Item: styled(Base.Item, "bevel-r-combobox__option"),
+  ItemIndicator: styled(Base.ItemIndicator, "bevel-r-combobox__indicator"),
+  Chips: styled(Base.Chips, "bevel-r-multiselect__tags"),
+  Chip: styled(Base.Chip, "bevel-r-multiselect__tag"),
+  ChipRemove: styled(Base.ChipRemove, "bevel-r-multiselect__remove"),
+  Row: styled(Base.Row, "bevel-r-combobox__row"),
+  Collection: Base.Collection,
+  Empty: styled(Base.Empty, "bevel-r-combobox__empty"),
+  Clear: styled(Base.Clear, "bevel-r-combobox__clear"),
+  Separator: styled(Base.Separator, "bevel-r-combobox__separator"),
+  useFilter: Base.useFilter,
+  useFilteredItems: Base.useFilteredItems,
+  createItems: Base.createItems
+};
+export {
+  Combobox
+};

package/dist/react/components/data-grid.d.ts

@@ -0,0 +1,108 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DataTableInstance, type DataTableOptions } from '../internal/table-context.js';
+import { Input } from './input.js';
+export type { TableColumn, CellCommit, DataTableOptions, DataTableInstance } from '../internal/table-context.js';
+export declare function useDataTable<Row>(options: DataTableOptions<Row>): DataTableInstance<Row>;
+declare const RootPart: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
+    variant?: "dense" | "ruled" | "striped" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
+    variant?: "dense" | "ruled" | "striped" | undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+declare function Root<Row>({ table, ref, ...props }: ComponentProps<typeof RootPart> & {
+    table: DataTableInstance<Row>;
+}): import("react").JSX.Element;
+declare function Search({ onValueChange, ...props }: ComponentProps<typeof Input>): import("react").JSX.Element;
+declare function Status(props: ComponentProps<'p'>): import("react").JSX.Element;
+declare function View({ viewId, children, onClick, ...props }: ComponentProps<'button'> & {
+    viewId: string | null;
+}): import("react").JSX.Element;
+export interface DataGridTableProps<Row> extends ComponentProps<'table'> {
+    selection?: boolean;
+    resizable?: boolean;
+    loading?: boolean;
+    empty?: ReactNode;
+    renderDetail?: (row: Row) => ReactNode;
+}
+declare function Table<Row>({ selection, resizable, loading, empty, renderDetail, ...props }: DataGridTableProps<Row>): import("react").JSX.Element;
+export declare const DataGrid: {
+    Root: typeof Root;
+    Table: typeof Table;
+    Search: typeof Search;
+    Status: typeof Status;
+    View: typeof View;
+    Scroll: {
+        (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;
+    };
+    Bar: {
+        (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;
+    };
+    Tools: {
+        (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;
+    };
+    Title: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Description: {
+        (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;
+    };
+    Masthead: {
+        (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;
+    };
+    Stats: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDListElement> & import("react").HTMLAttributes<HTMLDListElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Stat: {
+        (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;
+    };
+    Views: {
+        (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;
+    };
+    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;
+    };
+};

package/dist/react/components/data-grid.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { TableContext, useTable } from "../internal/table-context.js";
+import { nativePart, nativeVariants } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { createTableState, deriveTable, normalizeColumns, toggleVisibleSelection, updateTableState } from "../models/table.js";
+import { Checkbox } from "./checkbox.js";
+import { Input } from "./input.js";
+import { Button } from "./button.js";
+import { EditableCell } from "./editable-grid-cells.js";
+import { ColumnResizeHandle } from "./column-manager.js";
+function useDataTable(options) {
+  const [initial] = useState(() => createTableState(options.columns, options.defaultState));
+  const [state, change] = useControllableState({ value: options.state, defaultValue: initial, onChange: options.onStateChange });
+  const [activeCell, setActiveCell] = useState(null);
+  const [columnPreview, setColumnPreview] = useState({});
+  const rootRef = useRef(null), focusTimer = useRef(null);
+  useEffect(() => () => {
+    if (focusTimer.current) clearTimeout(focusTimer.current);
+  }, []);
+  const focusCell = useCallback((cell, direction = 0) => {
+    if (focusTimer.current) clearTimeout(focusTimer.current);
+    focusTimer.current = setTimeout(() => {
+      const cells = [...rootRef.current?.querySelectorAll("[data-bevel-react-cell-focus]:not(:disabled)") ?? []];
+      const index = cells.findIndex((node) => node.dataset.rowId === cell.rowId && node.dataset.columnId === cell.columnId);
+      (cells[index + direction] ?? cells[index] ?? cells[0] ?? rootRef.current?.querySelector("[data-bevel-react-table-status]"))?.focus();
+    }, 0);
+  }, []);
+  const result = deriveTable({ ...options, state });
+  result.visibleColumns = result.visibleColumns.map((column) => columnPreview[column.id] === void 0 ? column : { ...column, width: columnPreview[column.id] });
+  useEffect(() => {
+    if (activeCell && (!result.rows.some((row) => options.getRowId(row) === activeCell.rowId) || !result.visibleColumns.some((column) => column.id === activeCell.columnId))) {
+      setActiveCell(null);
+      focusCell(activeCell);
+    }
+  }, [activeCell, result.rows, result.visibleColumns, options.getRowId, focusCell]);
+  return {
+    options,
+    state,
+    result,
+    activeCell,
+    setActiveCell,
+    columnPreview,
+    setColumnPreview,
+    rootRef,
+    focusCell,
+    update: (patch, details) => change((previous) => updateTableState(previous, {
+      ...patch,
+      ...patch.columns ? { columns: normalizeColumns(options.columns, patch.columns) } : {}
+    }), details)
+  };
+}
+const RootPart = nativeVariants("div", "bevel-r-grid", ["dense", "ruled", "striped"]);
+function Root({ table, ref, ...props }) {
+  const merged = useMergedRefs(ref, table.rootRef);
+  return /* @__PURE__ */ jsx(TableContext, { value: table, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged }) });
+}
+function Search({ onValueChange, ...props }) {
+  const table = useTable();
+  return /* @__PURE__ */ jsx(Input, { "aria-label": "Search rows", ...props, value: table.state.query, onValueChange: (value, details) => {
+    onValueChange?.(value, details);
+    if (!details.isCanceled) table.update({ query: value }, { reason: "search", event: details.event });
+  } });
+}
+const StatusPart = nativePart("p", "bevel-r-grid__status");
+function Status(props) {
+  const { result } = useTable();
+  return /* @__PURE__ */ jsx(StatusPart, { role: "status", tabIndex: -1, "data-bevel-react-table-status": "", ...props, children: props.children ?? `${result.start}\u2013${result.end}${result.total === void 0 ? "" : ` of ${result.total}`} \xB7 ${result.selectedCount} selected` });
+}
+const ViewPart = nativePart("button", "bevel-r-grid__view");
+function View({ viewId, children, onClick, ...props }) {
+  const table = useTable();
+  return /* @__PURE__ */ jsxs(ViewPart, { type: "button", ...props, "aria-pressed": table.state.view === viewId, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) table.update({ view: viewId }, { reason: "view", event });
+  }, children: [
+    children ?? table.options.views?.find((view) => view.id === viewId)?.label ?? "All",
+    viewId !== null && table.result.viewCounts[viewId] !== void 0 && /* @__PURE__ */ jsx("span", { children: table.result.viewCounts[viewId] })
+  ] });
+}
+const TablePart = nativePart("table", "bevel-r-grid__table");
+const RowPart = nativePart("tr", "bevel-r-grid__row");
+const CellPart = nativePart("td", "bevel-r-grid__value");
+const HeaderPart = nativePart("th", "bevel-r-grid__head");
+const SortPart = nativePart("button", "bevel-r-grid__sort");
+const GroupPart = nativePart("tr", "bevel-r-grid__group");
+const DetailPart = nativePart("tr", "bevel-r-grid__detail");
+const EmptyPart = nativePart("tr", "bevel-r-grid__empty");
+function Table({ selection = false, resizable = false, loading = false, empty = "No matching rows.", renderDetail, ...props }) {
+  const table = useTable(), { result, options, state } = table;
+  const definitions = new Map(options.columns.map((column) => [column.id, column]));
+  const columns = result.visibleColumns;
+  const widths = columns.map((column) => column.width ?? Math.max(definitions.get(column.id)?.minWidth ?? 80, Math.min(definitions.get(column.id)?.maxWidth ?? 800, 160)));
+  const offsets = columns.map((_, index) => (selection ? 44 : 0) + widths.slice(0, index).reduce((a, b) => a + b, 0));
+  const totalWidth = widths.reduce((a, b) => a + b, 0) + (selection ? 44 : 0);
+  const selectionStyle = { position: "sticky", left: 0, width: 44, minWidth: 44, maxWidth: 44 };
+  const style = (index) => ({ width: widths[index], minWidth: widths[index], maxWidth: widths[index], ...columns[index].pinned ? { position: "sticky", left: offsets[index] } : {} });
+  const span = columns.length + Number(selection);
+  let previousGroup;
+  return /* @__PURE__ */ jsxs(TablePart, { ...props, "aria-busy": loading || void 0, style: { tableLayout: "fixed", width: totalWidth, minWidth: totalWidth, ...props.style }, children: [
+    /* @__PURE__ */ jsxs("colgroup", { children: [
+      selection && /* @__PURE__ */ jsx("col", { style: { width: 44 } }),
+      columns.map((column, index) => /* @__PURE__ */ jsx("col", { "data-column-id": column.id, style: { width: widths[index] } }, column.id))
+    ] }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      selection && /* @__PURE__ */ jsx(HeaderPart, { scope: "col", "data-bevel-react-pinned": "", style: selectionStyle, children: /* @__PURE__ */ jsx(Checkbox.Root, { "aria-label": "Select visible rows", checked: result.allSelected, indeterminate: result.mixedSelection, disabled: !result.eligibleIds.length, onCheckedChange: (checked, details) => table.update({ selectedIds: toggleVisibleSelection(state.selectedIds, result.eligibleIds, checked) }, { reason: "selection", event: details.event }), children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }) }),
+      columns.map((column, index) => /* @__PURE__ */ jsxs(HeaderPart, { scope: "col", "data-column-id": column.id, "data-bevel-react-pinned": column.pinned || void 0, style: style(index), "aria-sort": state.sort?.columnId === column.id ? state.sort.direction : "none", children: [
+        /* @__PURE__ */ jsx(SortPart, { type: "button", onClick: (event) => table.update({ sort: { columnId: column.id, direction: state.sort?.columnId === column.id && state.sort.direction === "ascending" ? "descending" : "ascending" } }, { reason: "sort", event }), children: definitions.get(column.id).label }),
+        resizable && /* @__PURE__ */ jsx(ColumnResizeHandle, { columnId: column.id })
+      ] }, column.id))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: loading || !result.rows.length ? /* @__PURE__ */ jsx(EmptyPart, { children: /* @__PURE__ */ jsx("td", { colSpan: span, children: loading ? "Loading rows\u2026" : empty }) }) : result.rows.map((row) => {
+      const id = options.getRowId(row), expanded = state.expandedIds.includes(id), group = options.groupBy?.(row), showGroup = group !== void 0 && group !== previousGroup;
+      previousGroup = group;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        showGroup && /* @__PURE__ */ jsx(GroupPart, { children: /* @__PURE__ */ jsx("th", { scope: "rowgroup", colSpan: span, children: group }) }),
+        /* @__PURE__ */ jsxs(RowPart, { "data-row-id": id, "data-bevel-react-selected": state.selectedIds.includes(id) || void 0, children: [
+          selection && /* @__PURE__ */ jsx(CellPart, { "data-bevel-react-pinned": "", style: selectionStyle, children: /* @__PURE__ */ jsx(Checkbox.Root, { "aria-label": `Select ${id}`, disabled: options.isRowSelectable?.(row) === false, checked: state.selectedIds.includes(id), onCheckedChange: (checked, details) => table.update({ selectedIds: toggleVisibleSelection(state.selectedIds, [id], checked) }, { reason: "selection", event: details.event }), children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }) }),
+          columns.map((column, index) => {
+            const definition = definitions.get(column.id);
+            const content = definition.cell ? definition.cell(row) : String(definition.getValue(row) ?? "");
+            return /* @__PURE__ */ jsxs(CellPart, { "data-column-id": column.id, "data-bevel-react-pinned": column.pinned || void 0, style: style(index), children: [
+              index === 0 && renderDetail && /* @__PURE__ */ jsx(Button, { "aria-label": `${expanded ? "Collapse" : "Expand"} ${id}`, "aria-expanded": expanded, size: "small", onClick: (event) => table.update({ expandedIds: toggleVisibleSelection(state.expandedIds, [id], !expanded) }, { reason: "expand", event }), children: expanded ? "\u2212" : "+" }),
+              definition.editable ? /* @__PURE__ */ jsx(EditableCell.Root, { rowId: id, columnId: column.id, children: content }) : content
+            ] }, column.id);
+          })
+        ] }),
+        expanded && renderDetail && /* @__PURE__ */ jsx(DetailPart, { children: /* @__PURE__ */ jsx("td", { colSpan: span, children: renderDetail(row) }) })
+      ] }, id);
+    }) }),
+    Object.keys(result.aggregates).length > 0 && /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      selection && /* @__PURE__ */ jsx(CellPart, { "data-bevel-react-pinned": "", style: selectionStyle }),
+      columns.map((column, index) => /* @__PURE__ */ jsx(CellPart, { "data-column-id": column.id, "data-bevel-react-pinned": column.pinned || void 0, style: style(index), children: String(result.aggregates[column.id] ?? "") }, column.id))
+    ] }) })
+  ] });
+}
+const DataGrid = {
+  Root,
+  Table,
+  Search,
+  Status,
+  View,
+  Scroll: nativePart("div", "bevel-r-grid__scroll"),
+  Bar: nativePart("div", "bevel-r-grid__bar"),
+  Tools: nativePart("div", "bevel-r-grid__tools"),
+  Title: nativePart("h2", "bevel-r-grid__title"),
+  Description: nativePart("p", "bevel-r-grid__description"),
+  Masthead: nativePart("div", "bevel-r-grid__masthead"),
+  Stats: nativePart("dl", "bevel-r-grid__stats"),
+  Stat: nativePart("div", "bevel-r-grid__stat"),
+  Views: nativePart("div", "bevel-r-grid__views"),
+  Footer: nativePart("div", "bevel-r-grid__foot")
+};
+export {
+  DataGrid,
+  useDataTable
+};

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

@@ -0,0 +1,2 @@
+export { DataGrid as DataTable, useDataTable } from './data-grid.js';
+export type { DataGridTableProps as DataTableProps, TableColumn, CellCommit, DataTableOptions, DataTableInstance } from './data-grid.js';

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

@@ -0,0 +1,6 @@
+"use client";
+import { DataGrid, useDataTable } from "./data-grid.js";
+export {
+  DataGrid as DataTable,
+  useDataTable
+};

package/dist/react/components/date.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps } from 'react';
+declare function DateInputField(props: Omit<ComponentProps<'input'>, 'type'>): import("react").JSX.Element;
+export declare const DateInput: {
+    Root: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Input: typeof DateInputField;
+    Icon: {
+        (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;
+    };
+};
+export {};

package/dist/react/components/date.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const DateField = nativePart("input", "bevel-r-date__field");
+function DateInputField(props) {
+  return /* @__PURE__ */ jsx(DateField, { ...props, type: "date" });
+}
+const DateInput = { Root: nativeVariants("span", "bevel-r-date", []), Input: DateInputField, Icon: nativePart("span", "bevel-r-date__icon") };
+export {
+  DateInput
+};

package/dist/react/components/details.d.ts

@@ -0,0 +1,13 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+export declare const Details: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const Accordion: {
+    Root: <Value = any>(props: BaseAccordion.Root.Props<Value>) => import("react").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/react/components/details.js

@@ -0,0 +1,20 @@
+"use client";
+import { Collapsible as Base } from "@base-ui/react/collapsible";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { styled } from "../internal/part.js";
+const Details = {
+  Root: styled(Base.Root, "bevel-r-details"),
+  Trigger: styled(Base.Trigger, "bevel-r-details__trigger"),
+  Panel: styled(Base.Panel, "bevel-r-details__body")
+};
+const Accordion = {
+  Root: styled(BaseAccordion.Root, "bevel-r-accordion"),
+  Item: styled(BaseAccordion.Item, "bevel-r-details"),
+  Header: styled(BaseAccordion.Header, "bevel-r-details__header"),
+  Trigger: styled(BaseAccordion.Trigger, "bevel-r-details__trigger"),
+  Panel: styled(BaseAccordion.Panel, "bevel-r-details__body")
+};
+export {
+  Accordion,
+  Details
+};