@optimum-intelligence/opti-ui 0.5.1 → 0.6.0

package/dist/components/badge/Badge.d.ts

@@ -1,5 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
-export type BadgeTone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+/** Colours with no status meaning, for telling categories apart (types, owners, regions). */
+export type ColorTone = 'blue' | 'cyan' | 'green' | 'yellow' | 'purple' | 'pink';
+export type BadgeTone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | ColorTone;
 export type BadgeVariant = 'soft' | 'solid' | 'outline';
 export type BadgeState = {
     tone: BadgeTone;
@@ -7,7 +9,7 @@ export type BadgeState = {
     size: 'sm' | 'md';
 };
 export interface BadgeProps extends useRender.ComponentProps<'span', BadgeState> {
-    /** Semantic color. */
+    /** Status colour, or a plain colour from `ColorTone` for categories. */
     tone?: BadgeTone;
     /** `soft` tinted, `solid` filled, `outline` bordered. */
     variant?: BadgeVariant;

package/dist/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["useRender","mergeProps","BadgeTone","BadgeVariant","BadgeState","tone","variant","size","BadgeProps","ComponentProps","Badge","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","t8","t9","render","children","ref","props","undefined","t10","state","className","defaultTagName","_c"],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\n\nexport type BadgeState = {\n  tone: BadgeTone;\n  variant: BadgeVariant;\n  size: 'sm' | 'md';\n};\n\nexport interface BadgeProps extends useRender.ComponentProps<'span', BadgeState> {\n  /** Semantic color. */\n  tone?: BadgeTone;\n  /** `soft` tinted, `solid` filled, `outline` bordered. */\n  variant?: BadgeVariant;\n  /** Badge height and text size. */\n  size?: 'sm' | 'md';\n}\n\n/**\n * Small status label.\n *\n * @example\n * <Badge tone=\"success\">Online</Badge>\n */\nexport function Badge({\n  tone = 'neutral',\n  variant = 'soft',\n  size = 'md',\n  render,\n  children,\n  ref,\n  ...props\n}: BadgeProps) {\n  const state: BadgeState = { tone, variant, size };\n  return useRender({\n    defaultTagName: 'span',\n    render,\n    ref,\n    state,\n    props: mergeProps<'span'>(\n      {\n        className: 'oui-badge',\n        children,\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAOU,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,MAAAe,IAAAd,SAAAe,IAAAd,MAAAe,IAAAC,QAAAC,UAAAC,KAAA,GAAAC,UAAAf;EACpB,MAAAN,OAAAe,OAAAO,KAAAA,IAAA,YAAAP;EACA,MAAAd,UAAAe,OAAAM,KAAAA,IAAA,SAAAN;EACA,MAAAd,OAAAe,OAAAK,KAAAA,IAAA,OAAAL;EAAW,IAAAM;EAAA,IAAAhB,EAAA,OAAAL,QAAAK,EAAA,OAAAP,QAAAO,EAAA,OAAAN,SAAA;GAMesB,MAAA;IAAAvB;IAAAC;IAAAC;GAAsB;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAP;GAAAO,EAAA,KAAAN;GAAAM,EAAA,MAAAgB;EAAA,OAAAA,MAAAhB,EAAA;EAAjD,MAAAiB,QAA0BD;EACnB5B,KAAAA;EACWc,KAAA;EAChBS,KAAAA;EACAE,KAAAA;EACAI,KAAAA;EACOX,KAAAjB,WACL;GAAA6B,WACa;GAAWN;EAExB,GACAE,KACF;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAXcE,KAAA;GAAAW,gBACCjB;GAAMS,QACtBA;GAAME,KACNA;GAAGI,OACHA;GAAKH,OACER;EAOT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAZMZ,GAAUoB,EAYhB;AAAC"}
+{"version":3,"file":"Badge.js","names":["useRender","mergeProps","ColorTone","BadgeTone","BadgeVariant","BadgeState","tone","variant","size","BadgeProps","ComponentProps","Badge","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","t8","t9","render","children","ref","props","undefined","t10","state","className","defaultTagName","_c"],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\n\n/** Colours with no status meaning, for telling categories apart (types, owners, regions). */\nexport type ColorTone = 'blue' | 'cyan' | 'green' | 'yellow' | 'purple' | 'pink';\nexport type BadgeTone = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | ColorTone;\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\n\nexport type BadgeState = {\n  tone: BadgeTone;\n  variant: BadgeVariant;\n  size: 'sm' | 'md';\n};\n\nexport interface BadgeProps extends useRender.ComponentProps<'span', BadgeState> {\n  /** Status colour, or a plain colour from `ColorTone` for categories. */\n  tone?: BadgeTone;\n  /** `soft` tinted, `solid` filled, `outline` bordered. */\n  variant?: BadgeVariant;\n  /** Badge height and text size. */\n  size?: 'sm' | 'md';\n}\n\n/**\n * Small status label.\n *\n * @example\n * <Badge tone=\"success\">Online</Badge>\n */\nexport function Badge({\n  tone = 'neutral',\n  variant = 'soft',\n  size = 'md',\n  render,\n  children,\n  ref,\n  ...props\n}: BadgeProps) {\n  const state: BadgeState = { tone, variant, size };\n  return useRender({\n    defaultTagName: 'span',\n    render,\n    ref,\n    state,\n    props: mergeProps<'span'>(\n      {\n        className: 'oui-badge',\n        children,\n      },\n      props,\n    ),\n  });\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAOW,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,MAAAe,IAAAd,SAAAe,IAAAd,MAAAe,IAAAC,QAAAC,UAAAC,KAAA,GAAAC,UAAAf;EACpB,MAAAN,OAAAe,OAAAO,KAAAA,IAAA,YAAAP;EACA,MAAAd,UAAAe,OAAAM,KAAAA,IAAA,SAAAN;EACA,MAAAd,OAAAe,OAAAK,KAAAA,IAAA,OAAAL;EAAW,IAAAM;EAAA,IAAAhB,EAAA,OAAAL,QAAAK,EAAA,OAAAP,QAAAO,EAAA,OAAAN,SAAA;GAMesB,MAAA;IAAAvB;IAAAC;IAAAC;GAAsB;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAP;GAAAO,EAAA,KAAAN;GAAAM,EAAA,MAAAgB;EAAA,OAAAA,MAAAhB,EAAA;EAAjD,MAAAiB,QAA0BD;EACnB7B,KAAAA;EACWe,KAAA;EAChBS,KAAAA;EACAE,KAAAA;EACAI,KAAAA;EACOX,KAAAlB,WACL;GAAA8B,WACa;GAAWN;EAExB,GACAE,KACF;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAXcE,KAAA;GAAAW,gBACCjB;GAAMS,QACtBA;GAAME,KACNA;GAAGI,OACHA;GAAKH,OACER;EAOT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAZMb,GAAUqB,EAYhB;AAAC"}

package/dist/components/button/Button.d.ts

@@ -1,10 +1,15 @@
 import { Button as BaseButton } from '@base-ui/react/button';
+import type { ColorTone } from '../badge/Badge';
 export type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'soft' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonShape = 'pill' | 'rounded';
+/** Status colour for a button, e.g. to match a status badge. */
+export type ButtonTone = 'info' | 'success' | 'warning' | 'danger' | ColorTone;
 export interface ButtonProps extends BaseButton.Props {
     /** Visual emphasis. */
     variant?: ButtonVariant;
+    /** Status colour on top of the variant: a filled button in that colour for `primary`/`accent`, tinted text and borders for the others. */
+    tone?: ButtonTone;
     /** Height and padding. */
     size?: ButtonSize;
     /** `pill` (default) or `rounded` corners. Override with `--oui-button-radius`. */
@@ -20,7 +25,7 @@ export interface ButtonProps extends BaseButton.Props {
  * @example
  * <Button variant="secondary" loading={saving} onClick={save}>Save</Button>
  */
-export declare function Button({ variant, size, shape, fullWidth, loading, disabled, className, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, tone, size, shape, fullWidth, loading, disabled, className, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, 'shape' | 'fullWidth'> {
     /** Required: icon-only buttons need an accessible name. */
     'aria-label': string;

package/dist/components/button/Button.js

@@ -12,7 +12,7 @@ import { Button } from "@base-ui/react/button";
 * <Button variant="secondary" loading={saving} onClick={save}>Save</Button>
 */
 function Button$1(t0) {
-	const $ = c(29);
+	const $ = c(31);
 	let children;
 	let className;
 	let disabled;
@@ -23,8 +23,9 @@ function Button$1(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let tone;
 	if ($[0] !== t0) {
-		({variant: t1, size: t2, shape: t3, fullWidth, loading, disabled, className, children, ref, ...props} = t0);
+		({variant: t1, tone, size: t2, shape: t3, fullWidth, loading, disabled, className, children, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -36,6 +37,7 @@ function Button$1(t0) {
 		$[8] = t1;
 		$[9] = t2;
 		$[10] = t3;
+		$[11] = tone;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -47,35 +49,37 @@ function Button$1(t0) {
 		t1 = $[8];
 		t2 = $[9];
 		t3 = $[10];
+		tone = $[11];
 	}
 	const variant = t1 === void 0 ? "primary" : t1;
 	const size = t2 === void 0 ? "md" : t2;
 	const shape = t3 === void 0 ? "pill" : t3;
 	let t4;
-	if ($[11] !== className) {
+	if ($[12] !== className) {
 		t4 = withClass("oui-button", className);
-		$[11] = className;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[12] = className;
+		$[13] = t4;
+	} else t4 = $[13];
 	const t5 = fullWidth || void 0;
 	const t6 = loading || void 0;
 	const t7 = loading || void 0;
 	const t8 = disabled || loading;
 	let t9;
-	if ($[13] !== loading) {
+	if ($[14] !== loading) {
 		t9 = loading && /* @__PURE__ */ jsx(Spinner, {
 			className: "oui-button__spinner",
 			label: null
 		});
-		$[13] = loading;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[14] = loading;
+		$[15] = t9;
+	} else t9 = $[15];
 	let t10;
-	if ($[15] !== children || $[16] !== loading || $[17] !== props || $[18] !== ref || $[19] !== shape || $[20] !== size || $[21] !== t4 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 || $[27] !== variant) {
+	if ($[16] !== children || $[17] !== loading || $[18] !== props || $[19] !== ref || $[20] !== shape || $[21] !== size || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 || $[28] !== tone || $[29] !== variant) {
 		t10 = /* @__PURE__ */ jsxs(Button, {
 			ref,
 			className: t4,
 			"data-variant": variant,
+			"data-tone": tone,
 			"data-size": size,
 			"data-shape": shape,
 			"data-full-width": t5,
@@ -86,21 +90,22 @@ function Button$1(t0) {
 			...props,
 			children: [t9, children]
 		});
-		$[15] = children;
-		$[16] = loading;
-		$[17] = props;
-		$[18] = ref;
-		$[19] = shape;
-		$[20] = size;
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t9;
-		$[27] = variant;
-		$[28] = t10;
-	} else t10 = $[28];
+		$[16] = children;
+		$[17] = loading;
+		$[18] = props;
+		$[19] = ref;
+		$[20] = shape;
+		$[21] = size;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = tone;
+		$[29] = variant;
+		$[30] = t10;
+	} else t10 = $[30];
 	return t10;
 }
 /** Square button for a single icon. Defaults to the compact ghost style. */

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","BaseButton","withClass","Spinner","ButtonVariant","ButtonSize","ButtonShape","ButtonProps","Props","variant","size","shape","fullWidth","loading","t0","$","_c","children","className","disabled","props","ref","t1","t2","t3","undefined","t4","t5","t6","t7","t8","t9","t10","IconButtonProps","Omit","IconButton","Button","_c","BaseButton"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button';\nimport { withClass } from '../../utils/cx';\nimport { Spinner } from '../spinner/Spinner';\n\nexport type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'soft' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'pill' | 'rounded';\n\nexport interface ButtonProps extends BaseButton.Props {\n  /** Visual emphasis. */\n  variant?: ButtonVariant;\n  /** Height and padding. */\n  size?: ButtonSize;\n  /** `pill` (default) or `rounded` corners. Override with `--oui-button-radius`. */\n  shape?: ButtonShape;\n  /** Stretch to the container width. */\n  fullWidth?: boolean;\n  /** Shows a spinner and blocks interaction while keeping focus. */\n  loading?: boolean;\n}\n\n/**\n * Action button. Use `render={<a href=\"…\" />}` with `nativeButton={false}` to style a link as a button.\n *\n * @example\n * <Button variant=\"secondary\" loading={saving} onClick={save}>Save</Button>\n */\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  shape = 'pill',\n  fullWidth,\n  loading,\n  disabled,\n  className,\n  children,\n  ref,\n  ...props\n}: ButtonProps) {\n  return (\n    <BaseButton\n      ref={ref}\n      className={withClass('oui-button', className)}\n      data-variant={variant}\n      data-size={size}\n      data-shape={shape}\n      data-full-width={fullWidth || undefined}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={disabled || loading}\n      focusableWhenDisabled={loading}\n      {...props}\n    >\n      {loading && <Spinner className=\"oui-button__spinner\" label={null} />}\n      {children}\n    </BaseButton>\n  );\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'shape' | 'fullWidth'> {\n  /** Required: icon-only buttons need an accessible name. */\n  'aria-label': string;\n  /** `rounded` square (default) or `circle`. */\n  shape?: 'rounded' | 'circle';\n}\n\n/** Square button for a single icon. Defaults to the compact ghost style. */\nexport function IconButton({\n  variant = 'ghost',\n  size = 'md',\n  shape = 'rounded',\n  className,\n  ref,\n  ...props\n}: IconButtonProps) {\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={withClass('oui-icon-button', className)}\n      data-shape={shape}\n      {...(props as ButtonProps)}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["Button","BaseButton","withClass","ColorTone","Spinner","ButtonVariant","ButtonSize","ButtonShape","ButtonTone","ButtonProps","Props","variant","tone","size","shape","fullWidth","loading","t0","$","_c","children","className","disabled","props","ref","t1","t2","t3","undefined","t4","t5","t6","t7","t8","t9","t10","IconButtonProps","Omit","IconButton","Button","_c","BaseButton"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as BaseButton } from '@base-ui/react/button';\nimport { withClass } from '../../utils/cx';\nimport type { ColorTone } from '../badge/Badge';\nimport { Spinner } from '../spinner/Spinner';\n\nexport type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'soft' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'pill' | 'rounded';\n/** Status colour for a button, e.g. to match a status badge. */\nexport type ButtonTone = 'info' | 'success' | 'warning' | 'danger' | ColorTone;\n\nexport interface ButtonProps extends BaseButton.Props {\n  /** Visual emphasis. */\n  variant?: ButtonVariant;\n  /** Status colour on top of the variant: a filled button in that colour for `primary`/`accent`, tinted text and borders for the others. */\n  tone?: ButtonTone;\n  /** Height and padding. */\n  size?: ButtonSize;\n  /** `pill` (default) or `rounded` corners. Override with `--oui-button-radius`. */\n  shape?: ButtonShape;\n  /** Stretch to the container width. */\n  fullWidth?: boolean;\n  /** Shows a spinner and blocks interaction while keeping focus. */\n  loading?: boolean;\n}\n\n/**\n * Action button. Use `render={<a href=\"…\" />}` with `nativeButton={false}` to style a link as a button.\n *\n * @example\n * <Button variant=\"secondary\" loading={saving} onClick={save}>Save</Button>\n */\nexport function Button({\n  variant = 'primary',\n  tone,\n  size = 'md',\n  shape = 'pill',\n  fullWidth,\n  loading,\n  disabled,\n  className,\n  children,\n  ref,\n  ...props\n}: ButtonProps) {\n  return (\n    <BaseButton\n      ref={ref}\n      className={withClass('oui-button', className)}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-shape={shape}\n      data-full-width={fullWidth || undefined}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={disabled || loading}\n      focusableWhenDisabled={loading}\n      {...props}\n    >\n      {loading && <Spinner className=\"oui-button__spinner\" label={null} />}\n      {children}\n    </BaseButton>\n  );\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'shape' | 'fullWidth'> {\n  /** Required: icon-only buttons need an accessible name. */\n  'aria-label': string;\n  /** `rounded` square (default) or `circle`. */\n  shape?: 'rounded' | 'circle';\n}\n\n/** Square button for a single icon. Defaults to the compact ghost style. */\nexport function IconButton({\n  variant = 'ghost',\n  size = 'md',\n  shape = 'rounded',\n  className,\n  ref,\n  ...props\n}: IconButtonProps) {\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={withClass('oui-icon-button', className)}\n      data-shape={shape}\n      {...(props as ButtonProps)}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -40,12 +40,24 @@ export interface DataTableProps<T> extends UseDataTableOptions<T>, DataTableCont
     pageSizeOptions?: number[];
     /** Size of the search box and the filters. */
     controlSize?: DataTableControlSize;
-    /** Extra toolbar content (export, add…). A function receives the processed rows. */
+    /** Extra toolbar content (add, bulk actions…). A function receives the processed rows. */
     toolbar?: React.ReactNode | ((context: DataTableToolbarContext<T>) => React.ReactNode);
+    /** `false` drops the search, filters, summary and toolbar content: rows only, for short tables under their own heading. */
+    showToolbar?: boolean;
+    /**
+     * Adds an export button that saves the filtered, sorted rows as `<exportName>.csv`.
+     * Columns choose their text with `exportValue`.
+     */
+    exportName?: string;
+    /**
+     * Grow to fill the height of a flex column container (a page, or a `Card`
+     * whose content holds the table); only the rows scroll. `maxHeight` still caps it.
+     */
+    fill?: boolean;
     /** Class name for the table's root element. */
     className?: string;
 }
-declare function DataTableComponent<T>({ density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, className, ...options }: DataTableProps<T>): React.JSX.Element;
+declare function DataTableComponent<T>({ density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, showToolbar, exportName, fill, className, ...options }: DataTableProps<T>): React.JSX.Element;
 /**
  * `<DataTable data={…} columns={…} />` renders a complete table with search,
  * filters, sorting, pagination, row selection, row actions and inline editing;

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

@@ -1,13 +1,16 @@
 "use client";
 import { cx } from "../../utils/cx.js";
 import { createPrimitive } from "../../utils/primitive.js";
+import { DownloadIcon } from "../../icons/index.js";
 import { Spinner } from "../spinner/Spinner.js";
+import { Button } from "../button/Button.js";
 import { SearchInput } from "../search-input/SearchInput.js";
 import { Pagination } from "../pagination/Pagination.js";
 import { DataTableContext, useDataTableContext } from "./context.js";
 import { useDataTable } from "./useDataTable.js";
 import { DataTableContent } from "./DataTableContent.js";
 import { DataTableFilter, DataTableFilters } from "./DataTableFilters.js";
+import { downloadCsv } from "./export.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -287,11 +290,12 @@ function DataTablePagination(t0) {
 	return t2;
 }
 function DataTableComponent(t0) {
-	const $ = c(51);
+	const $ = c(53);
 	let className;
 	let controlSize;
 	let density;
 	let empty;
+	let exportName;
 	let layout;
 	let maxHeight;
 	let onEndReached;
@@ -299,150 +303,161 @@ function DataTableComponent(t0) {
 	let pageSizeOptions;
 	let stickyHeader;
 	let striped;
+	let t1;
+	let t2;
 	let tableProps;
 	let toolbar;
 	let virtualized;
 	if ($[0] !== t0) {
-		({density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, className, ...options} = t0);
+		({density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, showToolbar: t1, exportName, fill: t2, className, ...options} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = controlSize;
 		$[3] = density;
 		$[4] = empty;
-		$[5] = layout;
-		$[6] = maxHeight;
-		$[7] = onEndReached;
-		$[8] = options;
-		$[9] = pageSizeOptions;
-		$[10] = stickyHeader;
-		$[11] = striped;
-		$[12] = tableProps;
-		$[13] = toolbar;
-		$[14] = virtualized;
+		$[5] = exportName;
+		$[6] = layout;
+		$[7] = maxHeight;
+		$[8] = onEndReached;
+		$[9] = options;
+		$[10] = pageSizeOptions;
+		$[11] = stickyHeader;
+		$[12] = striped;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = tableProps;
+		$[16] = toolbar;
+		$[17] = virtualized;
 	} else {
 		className = $[1];
 		controlSize = $[2];
 		density = $[3];
 		empty = $[4];
-		layout = $[5];
-		maxHeight = $[6];
-		onEndReached = $[7];
-		options = $[8];
-		pageSizeOptions = $[9];
-		stickyHeader = $[10];
-		striped = $[11];
-		tableProps = $[12];
-		toolbar = $[13];
-		virtualized = $[14];
+		exportName = $[5];
+		layout = $[6];
+		maxHeight = $[7];
+		onEndReached = $[8];
+		options = $[9];
+		pageSizeOptions = $[10];
+		stickyHeader = $[11];
+		striped = $[12];
+		t1 = $[13];
+		t2 = $[14];
+		tableProps = $[15];
+		toolbar = $[16];
+		virtualized = $[17];
 	}
-	const t1 = options.paginated ?? !virtualized;
-	let t2;
-	if ($[15] !== options || $[16] !== t1) {
-		t2 = {
+	const showToolbar = t1 === void 0 ? true : t1;
+	const fill = t2 === void 0 ? false : t2;
+	const t3 = options.paginated ?? !virtualized;
+	let t4;
+	if ($[18] !== options || $[19] !== t3) {
+		t4 = {
 			...options,
-			paginated: t1
+			paginated: t3
 		};
-		$[15] = options;
-		$[16] = t1;
-		$[17] = t2;
-	} else t2 = $[17];
-	const table = useDataTable(t2);
-	let t3;
-	if ($[18] !== table || $[19] !== toolbar) {
-		t3 = typeof toolbar === "function" ? toolbar({
-			rows: table.rows.map(_temp),
+		$[18] = options;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	const table = useDataTable(t4);
+	let rows;
+	let t5;
+	if ($[21] !== table || $[22] !== toolbar) {
+		rows = table.rows.map(_temp);
+		t5 = typeof toolbar === "function" ? toolbar({
+			rows,
 			selection: table.selection,
 			table
 		}) : toolbar;
-		$[18] = table;
-		$[19] = toolbar;
-		$[20] = t3;
-	} else t3 = $[20];
-	const extra = t3;
-	let t4;
-	if ($[21] !== controlSize || $[22] !== table.searchable) {
-		t4 = table.searchable && /* @__PURE__ */ jsx(DataTableSearch, { size: controlSize });
-		$[21] = controlSize;
-		$[22] = table.searchable;
-		$[23] = t4;
-	} else t4 = $[23];
-	let t5;
-	if ($[24] !== controlSize) {
-		t5 = /* @__PURE__ */ jsx(DataTableFilters, { size: controlSize });
-		$[24] = controlSize;
-		$[25] = t5;
-	} else t5 = $[25];
-	let t6;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(DataTableSummary, {});
-		$[26] = t6;
-	} else t6 = $[26];
+		$[21] = table;
+		$[22] = toolbar;
+		$[23] = rows;
+		$[24] = t5;
+	} else {
+		rows = $[23];
+		t5 = $[24];
+	}
+	const extra = t5;
+	const t6 = fill || void 0;
 	let t7;
-	if ($[27] !== extra) {
-		t7 = /* @__PURE__ */ jsxs(DataTableActions, { children: [t6, extra] });
-		$[27] = extra;
-		$[28] = t7;
-	} else t7 = $[28];
-	let t8;
-	if ($[29] !== t4 || $[30] !== t5 || $[31] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
-			t4,
-			t5,
-			t7
+	if ($[25] !== controlSize || $[26] !== exportName || $[27] !== extra || $[28] !== rows || $[29] !== showToolbar || $[30] !== table.columns || $[31] !== table.labels || $[32] !== table.searchable) {
+		t7 = showToolbar && /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
+			table.searchable && /* @__PURE__ */ jsx(DataTableSearch, { size: controlSize }),
+			/* @__PURE__ */ jsx(DataTableFilters, { size: controlSize }),
+			/* @__PURE__ */ jsxs(DataTableActions, { children: [
+				/* @__PURE__ */ jsx(DataTableSummary, {}),
+				extra,
+				exportName && /* @__PURE__ */ jsxs(Button, {
+					variant: "secondary",
+					size: "sm",
+					disabled: !rows.length,
+					onClick: () => downloadCsv(table.columns, rows, exportName),
+					children: [/* @__PURE__ */ jsx(DownloadIcon, {}), table.labels.export]
+				})
+			] })
 		] });
-		$[29] = t4;
-		$[30] = t5;
-		$[31] = t7;
-		$[32] = t8;
-	} else t8 = $[32];
+		$[25] = controlSize;
+		$[26] = exportName;
+		$[27] = extra;
+		$[28] = rows;
+		$[29] = showToolbar;
+		$[30] = table.columns;
+		$[31] = table.labels;
+		$[32] = table.searchable;
+		$[33] = t7;
+	} else t7 = $[33];
+	const t8 = fill ? maxHeight ?? "none" : maxHeight;
 	let t9;
-	if ($[33] !== density || $[34] !== empty || $[35] !== layout || $[36] !== maxHeight || $[37] !== onEndReached || $[38] !== stickyHeader || $[39] !== striped || $[40] !== tableProps || $[41] !== virtualized) {
+	if ($[34] !== density || $[35] !== empty || $[36] !== layout || $[37] !== onEndReached || $[38] !== stickyHeader || $[39] !== striped || $[40] !== t8 || $[41] !== tableProps || $[42] !== virtualized) {
 		t9 = /* @__PURE__ */ jsx(DataTableContent, {
 			density,
 			striped,
 			stickyHeader,
 			layout,
-			maxHeight,
+			maxHeight: t8,
 			virtualized,
 			onEndReached,
 			empty,
 			tableProps
 		});
-		$[33] = density;
-		$[34] = empty;
-		$[35] = layout;
-		$[36] = maxHeight;
+		$[34] = density;
+		$[35] = empty;
+		$[36] = layout;
 		$[37] = onEndReached;
 		$[38] = stickyHeader;
 		$[39] = striped;
-		$[40] = tableProps;
-		$[41] = virtualized;
-		$[42] = t9;
-	} else t9 = $[42];
+		$[40] = t8;
+		$[41] = tableProps;
+		$[42] = virtualized;
+		$[43] = t9;
+	} else t9 = $[43];
 	let t10;
-	if ($[43] !== pageSizeOptions) {
+	if ($[44] !== pageSizeOptions) {
 		t10 = /* @__PURE__ */ jsx(DataTablePagination, { pageSizeOptions });
-		$[43] = pageSizeOptions;
-		$[44] = t10;
-	} else t10 = $[44];
+		$[44] = pageSizeOptions;
+		$[45] = t10;
+	} else t10 = $[45];
 	let t11;
-	if ($[45] !== className || $[46] !== t10 || $[47] !== t8 || $[48] !== t9 || $[49] !== table) {
+	if ($[46] !== className || $[47] !== t10 || $[48] !== t6 || $[49] !== t7 || $[50] !== t9 || $[51] !== table) {
 		t11 = /* @__PURE__ */ jsxs(DataTableRoot, {
 			table,
 			className,
+			"data-fill": t6,
 			children: [
-				t8,
+				t7,
 				t9,
 				t10
 			]
 		});
-		$[45] = className;
-		$[46] = t10;
-		$[47] = t8;
-		$[48] = t9;
-		$[49] = table;
-		$[50] = t11;
-	} else t11 = $[50];
+		$[46] = className;
+		$[47] = t10;
+		$[48] = t6;
+		$[49] = t7;
+		$[50] = t9;
+		$[51] = table;
+		$[52] = t11;
+	} else t11 = $[52];
 	return t11;
 }
 /**