@burtson-labs/ui 0.12.4 → 0.13.1

package/README.md

@@ -58,7 +58,7 @@ npx shadcn@latest add https://ui.burtson.ai/r/button.json
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/panel-grid.svg"/><img src="https://icons.burtson.ai/svg-black/panel-grid.svg" align="center" alt=""/></picture> Components
 
-Accordion · Alert · Alert Dialog · App Shell · Attachment · Audio Player · Avatar · Badge · Breadcrumb · Button · Card · Chat History · Chat Layout · Checkbox · Collapsible · Combobox · Command · Composer · Connection Status · Context Menu · Conversation · Copy Button · Data Table · Dialog · Dropdown Menu · Editor Tabs · Empty State · Field · Icon Button · Input · Kbd · Label · Markdown · Menubar · Message · Message Actions · Mobile Nav · Navigation Menu · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Source · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Tool Call · Toolbar · Tooltip · Tour · Tree View · Voice Recorder
+Accordion · Alert · Alert Dialog · App Shell · Attachment · Audio Player · Avatar · Badge · Breadcrumb · Button · Card · Chat History · Chat Layout · Checkbox · Checkbox Card · Collapsible · Combobox · Command · Composer · Connection Status · Context Menu · Conversation · Copy Button · Data Table · Dialog · Dropdown Menu · Editor Tabs · Empty State · Field · Icon Button · Input · Kbd · Label · Markdown · Menubar · Message · Message Actions · Mobile Nav · Navigation Menu · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Source · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Tool Call · Toolbar · Tooltip · Tour · Tree View · Voice Recorder
 
 Live previews and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button). Building a chat app? The [chat recipe](https://ui.burtson.ai/docs/recipes/chat) puts history, attachments, streaming, voice notes and full screen together, with the complete source.
 

package/dist/components/checkbox-card.d.ts

@@ -0,0 +1,25 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+export interface CheckboxCardProps extends Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'title' | 'children'> {
+    /** The option's name. */
+    title: React.ReactNode;
+    /** A sentence under the name: what choosing it means. */
+    description?: React.ReactNode;
+    /** Extra classes for the card (the label); className goes to the checkbox. */
+    cardClassName?: string;
+}
+/**
+ * A checkbox with a title and a sentence, where the whole card is the hit
+ * area (44px or taller). For choices that need explaining: roles,
+ * permissions, notification types. One focus ring, on the card.
+ */
+declare function CheckboxCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }: CheckboxCardProps): React.JSX.Element;
+export interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'> {
+    /** The group's name, shown as its legend. */
+    label: React.ReactNode;
+    /** Help under the legend. */
+    description?: React.ReactNode;
+}
+/** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */
+declare function CheckboxCardGroup({ label, description, className, children, ...props }: CheckboxCardGroupProps): React.JSX.Element;
+export { CheckboxCard, CheckboxCardGroup };

package/dist/components/checkbox-card.js

@@ -0,0 +1,65 @@
+import { cn } from "../lib/utils.js";
+import { Checkbox as Checkbox$1 } from "./checkbox.js";
+import "radix-ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/checkbox-card.tsx
+/**
+* A checkbox with a title and a sentence, where the whole card is the hit
+* area (44px or taller). For choices that need explaining: roles,
+* permissions, notification types. One focus ring, on the card.
+*/
+function CheckboxCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "checkbox-card",
+		className: cn("flex min-h-11 cursor-pointer items-start gap-3 rounded-md border border-border bg-surface px-3 py-2.5 transition-colors hover:border-border-strong", "has-[[data-state=checked]]:border-brand/40 has-[[data-state=checked]]:bg-brand-soft/50", "has-[:focus-visible]:border-ring has-[:focus-visible]:inset-ring-1 has-[:focus-visible]:inset-ring-ring", "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border", cardClassName),
+		children: [/* @__PURE__ */ jsx(Checkbox$1, {
+			id,
+			disabled,
+			"aria-labelledby": `${id}-title`,
+			"aria-describedby": description ? `${id}-description` : void 0,
+			className: cn("mt-0.5 outline-hidden! focus-visible:ring-0 focus-visible:outline-none", className),
+			...props
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-title`,
+				className: "text-sm leading-5 font-medium",
+				children: title
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: `${id}-description`,
+				className: "text-[13px] leading-5 text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+}
+/** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */
+function CheckboxCardGroup({ label, description, className, children, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-slot": "checkbox-card-group",
+		"aria-describedby": description ? `${id}-description` : void 0,
+		className: cn("grid min-w-0 gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "mb-1.5 text-sm font-medium",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				id: `${id}-description`,
+				className: "-mt-1.5 text-[13px] text-muted-foreground",
+				children: description
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { CheckboxCard, CheckboxCardGroup };
+
+//# sourceMappingURL=checkbox-card.js.map

package/dist/components/checkbox-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-card.js","names":["Checkbox"],"sources":["../../src/components/checkbox-card.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Checkbox } from './checkbox';\n\nexport interface CheckboxCardProps extends Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\n  'title' | 'children'\n> {\n  /** The option's name. */\n  title: React.ReactNode;\n  /** A sentence under the name: what choosing it means. */\n  description?: React.ReactNode;\n  /** Extra classes for the card (the label); className goes to the checkbox. */\n  cardClassName?: string;\n}\n\n/**\n * A checkbox with a title and a sentence, where the whole card is the hit\n * area (44px or taller). For choices that need explaining: roles,\n * permissions, notification types. One focus ring, on the card.\n */\nfunction CheckboxCard({\n  title,\n  description,\n  id: idProp,\n  disabled,\n  className,\n  cardClassName,\n  ...props\n}: CheckboxCardProps) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"checkbox-card\"\n      className={cn(\n        'flex min-h-11 cursor-pointer items-start gap-3 rounded-md border border-border bg-surface px-3 py-2.5 transition-colors hover:border-border-strong',\n        'has-[[data-state=checked]]:border-brand/40 has-[[data-state=checked]]:bg-brand-soft/50',\n        'has-[:focus-visible]:border-ring has-[:focus-visible]:inset-ring-1 has-[:focus-visible]:inset-ring-ring',\n        // :disabled also catches a disabled fieldset around the card.\n        'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border',\n        cardClassName,\n      )}\n    >\n      <Checkbox\n        id={id}\n        disabled={disabled}\n        aria-labelledby={`${id}-title`}\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn(\n          'mt-0.5 outline-hidden! focus-visible:ring-0 focus-visible:outline-none',\n          className,\n        )}\n        {...props}\n      />\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span id={`${id}-title`} className=\"text-sm leading-5 font-medium\">\n          {title}\n        </span>\n        {description && (\n          <span id={`${id}-description`} className=\"text-[13px] leading-5 text-muted-foreground\">\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\nexport interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'> {\n  /** The group's name, shown as its legend. */\n  label: React.ReactNode;\n  /** Help under the legend. */\n  description?: React.ReactNode;\n}\n\n/** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */\nfunction CheckboxCardGroup({\n  label,\n  description,\n  className,\n  children,\n  ...props\n}: CheckboxCardGroupProps) {\n  const id = React.useId();\n  return (\n    <fieldset\n      data-slot=\"checkbox-card-group\"\n      aria-describedby={description ? `${id}-description` : undefined}\n      className={cn('grid min-w-0 gap-2', className)}\n      {...props}\n    >\n      <legend className=\"mb-1.5 text-sm font-medium\">{label}</legend>\n      {description && (\n        <p id={`${id}-description`} className=\"-mt-1.5 text-[13px] text-muted-foreground\">\n          {description}\n        </p>\n      )}\n      {children}\n    </fieldset>\n  );\n}\n\nexport { CheckboxCard, CheckboxCardGroup };\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,aAAa,EACpB,OACA,aACA,IAAI,QACJ,UACA,WACA,eACA,GAAG,SACiB;CACpB,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,sJACA,0FACA,2GAEA,qGACA,aACF;EAVF,UAAA,CAYE,oBAACA,YAAD;GACM;GACM;GACV,mBAAiB,GAAG,GAAG;GACvB,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;GACtD,WAAW,GACT,0EACA,SACF;GACA,GAAI;EACL,CAAA,GACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI,GAAG,GAAG;IAAS,WAAU;IAChC,UAAA;GACG,CAAA,GACL,eACC,oBAAC,QAAD;IAAM,IAAI,GAAG,GAAG;IAAe,WAAU;IACtC,UAAA;GACG,CAAA,CAEJ;EACD,CAAA,CAAA;;AAEX;;AAUA,SAAS,kBAAkB,EACzB,OACA,aACA,WACA,UACA,GAAG,SACsB;CACzB,MAAM,KAAK,MAAM,MAAM;CACvB,OACE,qBAAC,YAAD;EACE,aAAU;EACV,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;EACtD,WAAW,GAAG,sBAAsB,SAAS;EAC7C,GAAI;EAJN,UAAA;GAME,oBAAC,UAAD;IAAQ,WAAU;IAA8B,UAAA;GAAc,CAAA;GAC7D,eACC,oBAAC,KAAD;IAAG,IAAI,GAAG,GAAG;IAAe,WAAU;IACnC,UAAA;GACA,CAAA;GAEJ;EACO;;AAEd"}

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

@@ -1,4 +1,12 @@
 import * as React from 'react';
+/**
+ * Where a column goes on a phone card: `title` and `subtitle` head the card,
+ * `aside` sits top right (a status badge), `field` is a labelled value in a
+ * two-column grid, `footer` is a full-width line at the bottom (links,
+ * buttons), `hidden` is left off the card.
+ */
+export type DataTableCardSlot = 'title' | 'subtitle' | 'aside' | 'field' | 'footer' | 'hidden';
+export type DataTableBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableColumn<T> {
     id: string;
     header: React.ReactNode;
@@ -7,6 +15,27 @@ export interface DataTableColumn<T> {
     /** Right-aligned tabular figures. */
     numeric?: boolean;
     className?: string;
+    /**
+     * Place on a phone card. With no column marked `title`, the first column
+     * is the title; every other column is a `field` unless it says otherwise.
+     */
+    card?: DataTableCardSlot;
+    /** The field's label on a card when `header` is not plain text. */
+    cardLabel?: string;
+    /** A shorter rendering for the card, e.g. a date without the time. */
+    cardCell?: (row: T) => React.ReactNode;
+    /** Only on cards, never a table column (e.g. a subtitle the table shows in another cell). */
+    cardOnly?: boolean;
+    /** Leave the column out of the table below this width (tablets). */
+    hideBelow?: DataTableBreakpoint;
+}
+export interface DataTablePaginateOptions {
+    /** Starting rows per page; the first option by default. */
+    pageSize?: number;
+    /** 25, 50 and 100 by default. */
+    pageSizeOptions?: readonly number[];
+    /** Remembers the chosen page size in localStorage under this key. */
+    storageKey?: string;
 }
 export type SortDirection = 'asc' | 'desc';
 export interface DataTableSort {
@@ -40,8 +69,23 @@ export interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'ch
     page?: number;
     pageCount?: number;
     onPageChange?: (page: number) => void;
-    /** e.g. "1–25 of 312". */
+    /** e.g. "1–25 of 312". Worked out from `totalRows` and `pageSize` when left out. */
     pageSummary?: React.ReactNode;
+    /** Rows per page, for the page-size menu and the summary. */
+    pageSize?: number;
+    pageSizeOptions?: readonly number[];
+    /** Adds a rows-per-page menu beside the pages. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Every row on every page (server paging), for the summary. */
+    totalRows?: number;
+    /**
+     * Page in the browser: pass every row in `rows` and the table shows one
+     * page, with a rows-per-page menu. It goes back to page 1 when `filter` or
+     * `sort` changes. Leave out to page in your app or on the server.
+     */
+    paginate?: boolean | DataTablePaginateOptions;
+    /** Plural noun appended to the built-in summary: "1–25 of 312 members". */
+    rowNoun?: string;
     loading?: boolean;
     /** A message shown in place of the rows. */
     error?: React.ReactNode;
@@ -52,11 +96,17 @@ export interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'ch
     toolbar?: React.ReactNode;
     density?: 'compact' | 'default';
     stickyHeader?: boolean;
+    /**
+     * Below this width the rows become a list of cards (see DataTableColumn
+     * `card`). `md` (768px) by default; `false` keeps the table everywhere.
+     */
+    cardsBelow?: DataTableBreakpoint | false;
 }
 /**
  * A table recipe for records: sort, search, select, page, and row actions,
  * with loading, empty and error states. Fully controlled, so the data can
- * come from a server; the table never reorders rows itself.
+ * come from a server; the table never reorders rows itself. On a phone the
+ * rows become cards (`cardsBelow`), with the same columns.
  */
-declare function DataTable<T>({ 'aria-label': ariaLabel, columns, rows, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder, selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, loading, error, onRetry, empty, toolbar, density, stickyHeader, className, ...props }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ 'aria-label': ariaLabel, columns, rows: rowsProp, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder, selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, pageSize, pageSizeOptions, onPageSizeChange, totalRows, paginate, rowNoun, loading, error, onRetry, empty, toolbar, density, stickyHeader, cardsBelow, className, ...props }: DataTableProps<T>): React.JSX.Element;
 export { DataTable };