@crisp-ui-kit/crisp 0.34.0 → 0.36.0

package/dist/types/components/filldoc/filldoc.recipe.d.ts

@@ -0,0 +1,201 @@
+declare const spec: {
+    readonly name: "filldoc";
+    readonly base: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: `var(--${string})`;
+        readonly boxSizing: "border-box";
+        readonly width: "210mm";
+        readonly minHeight: "297mm";
+        readonly padding: "20mm";
+        readonly margin: "0 auto";
+        readonly background: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly lineHeight: "22px";
+        readonly color: `var(--${string})`;
+        readonly borderRadius: "0";
+        readonly boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 0 1px var(--${string}), 0 4px 8px -4px var(--${string}), 0 4px 12px -2px var(--${string})`;
+    };
+    readonly parts: [{
+        readonly selector: "&:focus, &:focus-visible";
+        readonly decls: {
+            readonly outline: "none";
+        };
+    }, {
+        readonly slot: "block";
+        readonly selector: "& .crisp-filldoc-block";
+        readonly decls: {
+            readonly position: "relative";
+        };
+    }, {
+        readonly slot: "heading";
+        readonly selector: "& .crisp-filldoc-heading";
+        readonly decls: {
+            readonly margin: "0";
+            readonly fontSize: `var(--${string})`;
+            readonly fontWeight: `var(--${string})`;
+            readonly lineHeight: "26px";
+            readonly color: `var(--${string})`;
+            readonly whiteSpace: "pre-wrap";
+            readonly overflowWrap: "break-word";
+        };
+    }, {
+        readonly slot: "paragraph";
+        readonly selector: "& .crisp-filldoc-text";
+        readonly decls: {
+            readonly margin: "0";
+            readonly fontSize: `var(--${string})`;
+            readonly lineHeight: "22px";
+            readonly color: `var(--${string})`;
+            readonly whiteSpace: "pre-wrap";
+            readonly overflowWrap: "break-word";
+        };
+    }, {
+        readonly slot: "writer";
+        readonly selector: "& .crisp-filldoc-writer";
+        readonly decls: {
+            readonly display: "block";
+            readonly width: "100%";
+            readonly margin: "0";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly outline: "none";
+            readonly background: "transparent";
+            readonly fontFamily: "inherit";
+            readonly fontSize: "inherit";
+            readonly fontWeight: "inherit";
+            readonly lineHeight: "inherit";
+            readonly color: "inherit";
+            readonly resize: "none";
+            readonly overflow: "hidden";
+            readonly userSelect: "text";
+            readonly WebkitUserSelect: "text";
+        };
+    }, {
+        readonly slot: "inserter";
+        readonly selector: "& .crisp-filldoc-insert";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetInlineStart: "0";
+            readonly insetInlineEnd: "0";
+            readonly insetBlockEnd: `calc(var(--${string}) / -2)`;
+            readonly height: `var(--${string})`;
+            readonly display: "flex";
+            readonly alignItems: "center";
+            readonly gap: `var(--${string})`;
+            readonly opacity: "0";
+            readonly transition: "opacity .1s";
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within";
+        readonly decls: {
+            readonly opacity: "1";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-insert-rule";
+        readonly decls: {
+            readonly flex: "1";
+            readonly height: "1px";
+            readonly background: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "insertButton";
+        readonly selector: "& .crisp-filldoc-insert button";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly height: "20px";
+            readonly padding: `0 var(--${string})`;
+            readonly border: "none";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: `var(--${string})`;
+            readonly fontFamily: "inherit";
+            readonly fontSize: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-insert button:hover";
+        readonly decls: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "blockTools";
+        readonly selector: "& .crisp-filldoc-tools";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetInlineEnd: "100%";
+            readonly insetBlockStart: "0";
+            readonly paddingInlineEnd: `var(--${string})`;
+            readonly display: "flex";
+            readonly gap: `var(--${string})`;
+            readonly opacity: "0";
+            readonly transition: "opacity .1s";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within";
+        readonly decls: {
+            readonly opacity: "1";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-tools button";
+        readonly decls: {
+            readonly width: "20px";
+            readonly height: "20px";
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly justifyContent: "center";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly borderRadius: `var(--${string})`;
+            readonly background: "transparent";
+            readonly fontFamily: "inherit";
+            readonly fontSize: `var(--${string})`;
+            readonly color: `var(--${string})`;
+            readonly cursor: "pointer";
+        };
+    }, {
+        readonly selector: "& .crisp-filldoc-tools button:hover";
+        readonly decls: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    }];
+    readonly variants: {
+        readonly page: {
+            readonly a4: {};
+            readonly auto: {
+                readonly width: "100%";
+                readonly minHeight: "0";
+                readonly maxWidth: "210mm";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly page: "a4";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly page: {
+        readonly a4: string;
+        readonly auto: string;
+    };
+}>;
+export declare const filldocRecipe: import("../..").RecipeFn<{
+    readonly page: {
+        readonly a4: string;
+        readonly auto: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly page: {
+            readonly a4: string;
+            readonly auto: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

package/dist/types/components/filldoc/index.d.ts

@@ -0,0 +1,3 @@
+export { FillDoc, type FillDocBlock, type FillDocProps } from "./filldoc";
+export { filldocRecipe } from "./filldoc.recipe";
+export { docToHTML, docToMarkdown } from "./serialize";

package/dist/types/components/filldoc/serialize.d.ts

@@ -0,0 +1,5 @@
+import type { FillDocBlock } from "./filldoc";
+/** An HTML document body: what Word, Google Docs and Pages paste as a document. */
+export declare function docToHTML(blocks: FillDocBlock[]): string;
+/** The same document as Markdown. */
+export declare function docToMarkdown(blocks: FillDocBlock[]): string;

package/dist/types/components/fillsheet/fillsheet.d.ts

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { type SelectOption } from "../select";
+/** A cell address. Row and column are both zero-based. */
+export type FillSheetCell = {
+    r: number;
+    c: number;
+};
+export type FillSheetColumn = {
+    /**
+     * The column's name in an EXPORT — the header row of a copied table, a CSV
+     * or a Markdown table. It is never rendered: the sheet has no header row,
+     * deliberately, and this exists so a document made from it still does.
+     */
+    label?: string;
+    /**
+     * Turns the column into a select: clicking a cell opens this list instead of
+     * a text caret, and the cell stores the chosen option's **value**.
+     *
+     * The closed cell still renders as plain text — no chevron, no control, no
+     * hint that it is a select until you are in it. That is the whole point of
+     * the component and it is not worth trading for an affordance.
+     *
+     * A function of the row when only SOME rows are a select. A grid where a
+     * column means one field wants the list; a key/value form, where the rows
+     * carry the meaning and the columns are just "label" and "value", wants the
+     * function — and that second shape is the one the fms transaction detail
+     * has, so a column-only option would not have served the thing this was
+     * built for.
+     */
+    options?: SelectOption[] | ((row: number) => SelectOption[] | undefined);
+    /**
+     * How the stored value is DISPLAYED when the cell is closed. A select column
+     * shows its option's label through this by default; give it explicitly for
+     * anything else (a date, a currency). It never changes what is stored — fill,
+     * clear and tiling all keep working on the raw string.
+     */
+    format?: (raw: string) => string;
+    /**
+     * This column holds prose, so **Enter puts in a line break** and
+     * **⌘/Ctrl+Enter commits** — the Slack/Linear/GitHub convention, which is
+     * the one people's hands already have for a box you write paragraphs in.
+     *
+     * Everywhere else Enter commits and moves down, because that is what makes
+     * a form quick to fill. The column is the right place to decide this: it
+     * knows whether it holds a note or a quantity.
+     */
+    multiline?: boolean;
+    /** Starting width in px. Falls back to `columnWidth`. */
+    width?: number;
+    /** `end` right-aligns and turns on tabular figures — use it for numbers. */
+    align?: "start" | "end";
+    /** This column cannot be typed into or filled. */
+    readOnly?: boolean;
+};
+export type FillSheetProps = {
+    /** Column count, or one entry per column to label/size/align them. */
+    columns: number | FillSheetColumn[];
+    /** Row count. Ignored when `value`/`defaultValue` is longer. */
+    rows?: number;
+    /** Controlled cell text, row-major. Pair with `onValueChange`. */
+    value?: string[][];
+    /** Starting cell text when uncontrolled. */
+    defaultValue?: string[][];
+    /** Fires on every commit: typing, filling, and clearing. */
+    onValueChange?: (next: string[][]) => void;
+    /** Nothing can be edited or filled. */
+    readOnly?: boolean;
+    /** Width for columns that do not set their own. */
+    columnWidth?: number;
+    /** The MINIMUM height of a row. Rows grow past it when their text wraps. */
+    rowHeight?: number;
+    /**
+     * Who is holding it.
+     *
+     * `edit` is the person who MAKES the form: columns and rows can be dragged
+     * to size. `fill` is the person who fills it in — the structure is locked
+     * and only the blanks are theirs. Both can type and drag-fill; the only
+     * difference is whether the shape of the form is yours to change.
+     */
+    mode?: "edit" | "fill";
+    /**
+     * The sheet's accessible name. A `role="grid"` with no name is announced as
+     * an anonymous grid, which tells a screen-reader user nothing about which
+     * of several sheets on a page they have landed in.
+     *
+     * There is deliberately **no English default**: a generic fallback would
+     * read "Sheet" out loud in the middle of a Mongolian form. The name is
+     * content, so it comes from the consumer or it is not there.
+     */
+    label?: string;
+    /** `panel` is a framed panel; `paper` lifts it; `bare` drops the frame. */
+    surface?: "panel" | "paper" | "bare";
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "children">;
+/**
+ * A sheet of cells you can select, type into, resize and drag-fill.
+ *
+ * It comes in two modes, because two different people hold a form: in `edit`
+ * you build it, dragging columns and rows to size; in `fill` you only fill it
+ * in, and the structure is locked. Typing and drag-filling work in both --
+ * what `fill` withholds is the shape, not the content.
+ *
+ * Tab off the last cell appends a row, which is the gesture a word processor
+ * uses and the reason its tables are quick to fill: your hands are already on
+ * the keyboard, and the row you want is the one after the one you just
+ * finished. It grows in both modes -- a row is content, not structure.
+ *
+ * One click puts you in a cell, in both modes. A word processor places the
+ * caret where you clicked; there is no select-then-click-again step.
+ *
+ * Deliberately NOT built on Table or DataTable. Those take rows of records and
+ * own the layout; this owns neither. A cell here is addressed by (row, column)
+ * and carries text, its column can be any width and its row any height, and
+ * the grid is CSS `grid` rather than `<table>` precisely so those two axes are
+ * independent.
+ *
+ * It is also deliberately bare: cells and hairlines, nothing else. No A/B/C
+ * lettering, no numbered row gutter, no header row, and no prop that turns
+ * any of them on. Those are what make a grid read as spreadsheet SOFTWARE,
+ * and a boxed-in cell is the loudest of them -- so a cell carries one rule
+ * underneath and nothing else. A consumer that wants headings puts them
+ * above the sheet, where they are content rather than chrome.
+ */
+export declare const FillSheet: React.ForwardRefExoticComponent<{
+    /** Column count, or one entry per column to label/size/align them. */
+    columns: number | FillSheetColumn[];
+    /** Row count. Ignored when `value`/`defaultValue` is longer. */
+    rows?: number;
+    /** Controlled cell text, row-major. Pair with `onValueChange`. */
+    value?: string[][];
+    /** Starting cell text when uncontrolled. */
+    defaultValue?: string[][];
+    /** Fires on every commit: typing, filling, and clearing. */
+    onValueChange?: (next: string[][]) => void;
+    /** Nothing can be edited or filled. */
+    readOnly?: boolean;
+    /** Width for columns that do not set their own. */
+    columnWidth?: number;
+    /** The MINIMUM height of a row. Rows grow past it when their text wraps. */
+    rowHeight?: number;
+    /**
+     * Who is holding it.
+     *
+     * `edit` is the person who MAKES the form: columns and rows can be dragged
+     * to size. `fill` is the person who fills it in — the structure is locked
+     * and only the blanks are theirs. Both can type and drag-fill; the only
+     * difference is whether the shape of the form is yours to change.
+     */
+    mode?: "edit" | "fill";
+    /**
+     * The sheet's accessible name. A `role="grid"` with no name is announced as
+     * an anonymous grid, which tells a screen-reader user nothing about which
+     * of several sheets on a page they have landed in.
+     *
+     * There is deliberately **no English default**: a generic fallback would
+     * read "Sheet" out loud in the middle of a Mongolian form. The name is
+     * content, so it comes from the consumer or it is not there.
+     */
+    label?: string;
+    /** `panel` is a framed panel; `paper` lifts it; `bare` drops the frame. */
+    surface?: "panel" | "paper" | "bare";
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/fillsheet/fillsheet.recipe.d.ts

@@ -0,0 +1,202 @@
+declare const spec: {
+    readonly name: "fillsheet";
+    readonly base: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "var(--crisp-fillsheet-cols)";
+        readonly gridTemplateRows: "var(--crisp-fillsheet-rows)";
+        readonly position: "relative";
+        readonly overflow: "auto";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly background: `var(--${string})`;
+        readonly borderRadius: "0";
+        readonly border: `1px solid var(--${string})`;
+        readonly userSelect: "none";
+        readonly WebkitUserSelect: "none";
+    };
+    readonly parts: [{
+        readonly selector: "&:focus, &:focus-visible";
+        readonly decls: {
+            readonly outline: "none";
+        };
+    }, {
+        readonly slot: "cell";
+        readonly selector: "& .crisp-fillsheet-cell";
+        readonly decls: {
+            readonly position: "relative";
+            readonly display: "flex";
+            readonly alignItems: "flex-start";
+            readonly minWidth: "0";
+            readonly paddingInline: `var(--${string})`;
+            readonly paddingBlock: `var(--${string})`;
+            readonly borderInlineEnd: `1px solid var(--${string})`;
+            readonly borderBlockEnd: `1px solid var(--${string})`;
+            readonly background: `var(--${string})`;
+            readonly whiteSpace: "pre-wrap";
+            readonly overflowWrap: "break-word";
+            readonly lineHeight: "20px";
+            readonly cursor: "cell";
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-cell[aria-readonly]";
+        readonly decls: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-cell:last-child";
+        readonly decls: {
+            readonly borderInlineEnd: "none";
+        };
+    }, {
+        readonly selector: "& > div:last-child .crisp-fillsheet-cell";
+        readonly decls: {
+            readonly borderBlockEnd: "none";
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-cell[data-align=\"end\"]";
+        readonly decls: {
+            readonly justifyContent: "flex-end";
+            readonly fontVariantNumeric: "tabular-nums";
+        };
+    }, {
+        readonly selector: "&[data-multi] .crisp-fillsheet-cell[data-range]";
+        readonly decls: {
+            background: string;
+        };
+    }, {
+        readonly selector: "&[data-keynav] .crisp-fillsheet-cell[data-selected]";
+        readonly decls: {
+            readonly background: string;
+            readonly boxShadow: `inset 0 -2px 0 var(--${string})`;
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-cell[data-editing]";
+        readonly decls: {
+            background: `var(--${string})`;
+        };
+    }, {
+        readonly slot: "columnResize";
+        readonly selector: "& .crisp-fillsheet-colresize";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetBlockStart: "0";
+            readonly insetBlockEnd: "0";
+            readonly insetInlineEnd: "0";
+            readonly zIndex: "3";
+            readonly width: "5px";
+            readonly cursor: "col-resize";
+            readonly touchAction: "none";
+        };
+    }, {
+        readonly slot: "rowResize";
+        readonly selector: "& .crisp-fillsheet-rowresize";
+        readonly decls: {
+            readonly position: "absolute";
+            readonly insetInlineStart: "0";
+            readonly insetInlineEnd: "0";
+            readonly insetBlockEnd: "0";
+            readonly zIndex: "3";
+            readonly height: "5px";
+            readonly cursor: "row-resize";
+            readonly touchAction: "none";
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-colresize:hover";
+        readonly decls: {
+            readonly background: `linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--${string}) calc(50% - 1px), var(--${string}) calc(50% + 1px), transparent calc(50% + 1px))`;
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-rowresize:hover";
+        readonly decls: {
+            readonly background: `linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--${string}) calc(50% - 1px), var(--${string}) calc(50% + 1px), transparent calc(50% + 1px))`;
+        };
+    }, {
+        readonly slot: "editor";
+        readonly selector: "& .crisp-fillsheet-editor";
+        readonly decls: {
+            readonly display: "block";
+            readonly flexGrow: "1";
+            readonly width: "100%";
+            readonly minWidth: "0";
+            readonly margin: "0";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly outline: "none";
+            readonly background: "transparent";
+            readonly fontFamily: "inherit";
+            readonly fontSize: "inherit";
+            readonly lineHeight: "20px";
+            readonly color: "inherit";
+            readonly resize: "none";
+            readonly userSelect: "text";
+            readonly WebkitUserSelect: "text";
+            readonly overflow: "hidden";
+        };
+    }, {
+        readonly slot: "selectCell";
+        readonly selector: "& .crisp-fillsheet-select .crisp-select-trigger";
+        readonly decls: {
+            readonly width: "100%";
+            readonly height: "100%";
+            readonly padding: "0";
+            readonly border: "none";
+            readonly background: "transparent";
+            readonly boxShadow: "none";
+            readonly font: "inherit";
+            readonly color: "inherit";
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open]";
+        readonly decls: {
+            readonly background: "transparent";
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly selector: "& .crisp-fillsheet-select .crisp-select-chevron";
+        readonly decls: {
+            readonly display: "none";
+        };
+    }];
+    readonly variants: {
+        readonly surface: {
+            readonly panel: {};
+            readonly paper: {
+                boxShadow: `inset 0 0 0 1px var(--${string}), 0 0 0 1px var(--${string}), 0 4px 8px -4px var(--${string}), 0 4px 12px -2px var(--${string})`;
+            };
+            readonly bare: {
+                readonly border: "none";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly surface: "panel";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly surface: {
+        readonly panel: string;
+        readonly paper: string;
+        readonly bare: string;
+    };
+}>;
+export declare const fillsheetRecipe: import("../..").RecipeFn<{
+    readonly surface: {
+        readonly panel: string;
+        readonly paper: string;
+        readonly bare: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly surface: {
+            readonly panel: string;
+            readonly paper: string;
+            readonly bare: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

package/dist/types/components/fillsheet/index.d.ts

@@ -0,0 +1,3 @@
+export { FillSheet, type FillSheetCell, type FillSheetColumn, type FillSheetProps, } from "./fillsheet";
+export { fillsheetRecipe } from "./fillsheet.recipe";
+export { type FillSheetExportColumn, type FillSheetExportOptions, toCSV, toHTML, toMarkdown, toTSV, } from "./serialize";

package/dist/types/components/fillsheet/serialize.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Getting a sheet OUT, in the formats documents actually read.
+ *
+ * These are plain functions over `string[][]` — no React, no DOM — so they run
+ * in a server route building an export just as well as in a click handler.
+ * That is the whole reason the grid is `string[][]`: the value IS the
+ * document, and nothing here has to know what a cell meant.
+ */
+/** A column's heading in an export. Nothing is emitted when it has none. */
+export type FillSheetExportColumn = {
+    label?: string;
+};
+export type FillSheetExportOptions = {
+    /** Column headings. A row of them is emitted only if at least one exists. */
+    columns?: FillSheetExportColumn[];
+    /** Included as a caption (HTML) or a heading line (Markdown). */
+    title?: string;
+};
+/**
+ * Tab-separated, the clipboard's lingua franca for a grid: Excel, Sheets,
+ * Numbers and Word's table paste all read it as CELLS.
+ */
+export declare function toTSV(value: string[][]): string;
+/** RFC 4180: quote a field that contains a comma, a quote or a newline. */
+export declare function toCSV(value: string[][], o?: FillSheetExportOptions): string;
+/**
+ * A real `<table>`.
+ *
+ * This is the one that makes "paste into a document" work: Word, Google Docs,
+ * Pages and every rich-text editor read `text/html` from the clipboard and
+ * build a formatted table from it. Given only tab-separated text they paste a
+ * paragraph of tabs instead.
+ *
+ * Newlines inside a cell become `<br>`, so a wrapped note survives as a
+ * wrapped note rather than collapsing into one line.
+ */
+export declare function toHTML(value: string[][], o?: FillSheetExportOptions): string;
+/**
+ * A GitHub-flavoured Markdown table.
+ *
+ * A pipe inside a cell is escaped and a newline becomes `<br>`, because a
+ * Markdown table row is a single line — an unescaped one silently splits the
+ * row into columns that were never there.
+ */
+export declare function toMarkdown(value: string[][], o?: FillSheetExportOptions): string;

package/dist/types/index.d.ts

@@ -20,6 +20,8 @@ export * from "./components/donutchart";
 export * from "./components/drawer";
 export * from "./components/emptystate";
 export * from "./components/fileupload";
+export * from "./components/filldoc";
+export * from "./components/fillsheet";
 export * from "./components/formfield";
 export * from "./components/input";
 export * from "./components/kbd";

package/dist/types/product/recordpanel/recordpanel.d.ts

@@ -4,10 +4,20 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
     /** The record to show; render nothing when null. */
     /** Label for the close control. */
     closeLabel?: string;
+    /**
+     * The panel's heading, and so its accessible name (via `aria-labelledby`,
+     * not a stringified `aria-label` — it also drives the visible title, which
+     * can be any node). Defaults to the entity column's name, same as before
+     * this prop existed; pass it to title the panel by something else, e.g.
+     * "{Collection} record".
+     */
+    title?: React.ReactNode;
     /** Heading above the field list. */
     detailsLabel?: React.ReactNode;
     /** Shown in place of a field that has no value. */
     emptyLabel?: React.ReactNode;
+    /** Rendered below the field list, e.g. an Edit button. Omit for no footer. */
+    footer?: React.ReactNode;
     record: Row | null;
     columns: Column[];
     onClose: () => void;
@@ -19,7 +29,7 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, closeLabel, detailsLabel, emptyLabel, ...rest }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, columns, onClose, className, closeLabel, title, detailsLabel, emptyLabel, footer, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }