@mond-design-system/react 4.6.1 → 4.7.0

package/dist/index.d.cts

@@ -698,6 +698,15 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
     /** Inline label — part of the click target. Rich content welcome (an
         inline link, a Text run); the label element names the box either way. */
     label: ReactNode;
+    /** Keep the name for readers and take it off the screen. A box in a table's
+        select column has no room for the word and the column header says it
+        anyway, but a reader who cannot see which row they are in still needs
+        to be told. Naming it is not optional; showing it is. */
+    labelHidden?: boolean;
+    /** Neither checked nor unchecked: the third thing a box governing a set of
+        others has to say. Only the DOM property carries it — there is no
+        attribute — so a caller cannot set it without this. */
+    indeterminate?: boolean;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -712,7 +721,7 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
  * />
  * ```
  */
-declare function Checkbox({ label, className, ...rest }: CheckboxProps): ReactElement;
+declare function Checkbox({ label, labelHidden, indeterminate, className, ref, ...rest }: CheckboxProps): ReactElement;
 
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     /** Inline label — part of the click target. */
@@ -894,6 +903,81 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
  */
 declare function ListItem({ title, description, leading, trailing, actions, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
 
+interface DataColumn<Row> {
+    key: string;
+    /** Read in the header row, and echoed beside the cell once the table has
+        folded into cards. */
+    header: ReactNode;
+    /** CSS width for the column, applied through the colgroup. */
+    width?: string;
+    cell: (row: Row) => ReactNode;
+}
+interface DataTableSelectionLabels {
+    /** Names one row's box — "Select Ada Lovelace". The row's own label is
+        handed in, so the sentence is the app's to build. */
+    row: (label: string) => string;
+    /** Names the header box, which takes or lets go of every row at once. */
+    all: string;
+    /** "3 selected" — a function, because only the app knows how its language
+        counts. */
+    count: (selected: number) => string;
+}
+type DataTableSelection = {
+    /** Row keys currently taken. Held by the caller: the table draws it and
+        says what changed, and never keeps a second copy. */
+    selected: string[];
+    onSelectedChange: (keys: string[]) => void;
+    selectionLabels: DataTableSelectionLabels;
+    /** What can be done to the taken rows, shown with the count of them. */
+    bulkActions?: ReactNode;
+} | {
+    selected?: undefined;
+    onSelectedChange?: undefined;
+    selectionLabels?: undefined;
+    bulkActions?: undefined;
+};
+type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the table. Required: a table of rows with no name is a grid of
+        values with nothing saying what they are a list of. */
+    label: string;
+    columns: DataColumn<Row>[];
+    rows: Row[];
+    rowKey: (row: Row) => string;
+    /** Names one row where its first cell will not do — a row led by an avatar,
+        or by a title that repeats down the table. */
+    rowLabel?: (row: Row) => string;
+    /** What can be done to one row, in a column of its own at the end. */
+    rowActions?: (row: Row) => ReactNode;
+    /** Names that column. */
+    actionsHeader?: ReactNode;
+    /** A row the table still lists but no longer counts — suspended, hidden. */
+    rowMuted?: (row: Row) => boolean;
+    /** Shown in place of the rows when there are none. */
+    empty?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+} & DataTableSelection;
+/**
+ * Rows and columns, folded into cards on a narrow screen.
+ *
+ * Below the wide breakpoint a table cannot be read across, so each row becomes
+ * a card and every cell carries its column's header beside it. The markup is
+ * one table either way: what changes is the layout, never the semantics.
+ *
+ * ```tsx
+ * <DataTable
+ *   label={t("admin.members.table")}
+ *   columns={[
+ *     { key: "name", header: t("admin.name"), cell: (m) => m.name },
+ *     { key: "role", header: t("admin.role"), cell: (m) => <Tag>{m.role}</Tag> },
+ *   ]}
+ *   rows={members}
+ *   rowKey={(m) => m.id}
+ *   empty={t("admin.members.none")}
+ * />
+ * ```
+ */
+declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
+
 interface EmptyStateProps {
     title: string;
     description?: string;
@@ -1728,4 +1812,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -698,6 +698,15 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
     /** Inline label — part of the click target. Rich content welcome (an
         inline link, a Text run); the label element names the box either way. */
     label: ReactNode;
+    /** Keep the name for readers and take it off the screen. A box in a table's
+        select column has no room for the word and the column header says it
+        anyway, but a reader who cannot see which row they are in still needs
+        to be told. Naming it is not optional; showing it is. */
+    labelHidden?: boolean;
+    /** Neither checked nor unchecked: the third thing a box governing a set of
+        others has to say. Only the DOM property carries it — there is no
+        attribute — so a caller cannot set it without this. */
+    indeterminate?: boolean;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -712,7 +721,7 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
  * />
  * ```
  */
-declare function Checkbox({ label, className, ...rest }: CheckboxProps): ReactElement;
+declare function Checkbox({ label, labelHidden, indeterminate, className, ref, ...rest }: CheckboxProps): ReactElement;
 
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     /** Inline label — part of the click target. */
@@ -894,6 +903,81 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onC
  */
 declare function ListItem({ title, description, leading, trailing, actions, onClick, pressed, href, as, surface, className, ref, ...rest }: ListItemProps): ReactElement;
 
+interface DataColumn<Row> {
+    key: string;
+    /** Read in the header row, and echoed beside the cell once the table has
+        folded into cards. */
+    header: ReactNode;
+    /** CSS width for the column, applied through the colgroup. */
+    width?: string;
+    cell: (row: Row) => ReactNode;
+}
+interface DataTableSelectionLabels {
+    /** Names one row's box — "Select Ada Lovelace". The row's own label is
+        handed in, so the sentence is the app's to build. */
+    row: (label: string) => string;
+    /** Names the header box, which takes or lets go of every row at once. */
+    all: string;
+    /** "3 selected" — a function, because only the app knows how its language
+        counts. */
+    count: (selected: number) => string;
+}
+type DataTableSelection = {
+    /** Row keys currently taken. Held by the caller: the table draws it and
+        says what changed, and never keeps a second copy. */
+    selected: string[];
+    onSelectedChange: (keys: string[]) => void;
+    selectionLabels: DataTableSelectionLabels;
+    /** What can be done to the taken rows, shown with the count of them. */
+    bulkActions?: ReactNode;
+} | {
+    selected?: undefined;
+    onSelectedChange?: undefined;
+    selectionLabels?: undefined;
+    bulkActions?: undefined;
+};
+type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the table. Required: a table of rows with no name is a grid of
+        values with nothing saying what they are a list of. */
+    label: string;
+    columns: DataColumn<Row>[];
+    rows: Row[];
+    rowKey: (row: Row) => string;
+    /** Names one row where its first cell will not do — a row led by an avatar,
+        or by a title that repeats down the table. */
+    rowLabel?: (row: Row) => string;
+    /** What can be done to one row, in a column of its own at the end. */
+    rowActions?: (row: Row) => ReactNode;
+    /** Names that column. */
+    actionsHeader?: ReactNode;
+    /** A row the table still lists but no longer counts — suspended, hidden. */
+    rowMuted?: (row: Row) => boolean;
+    /** Shown in place of the rows when there are none. */
+    empty?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+} & DataTableSelection;
+/**
+ * Rows and columns, folded into cards on a narrow screen.
+ *
+ * Below the wide breakpoint a table cannot be read across, so each row becomes
+ * a card and every cell carries its column's header beside it. The markup is
+ * one table either way: what changes is the layout, never the semantics.
+ *
+ * ```tsx
+ * <DataTable
+ *   label={t("admin.members.table")}
+ *   columns={[
+ *     { key: "name", header: t("admin.name"), cell: (m) => m.name },
+ *     { key: "role", header: t("admin.role"), cell: (m) => <Tag>{m.role}</Tag> },
+ *   ]}
+ *   rows={members}
+ *   rowKey={(m) => m.id}
+ *   empty={t("admin.members.none")}
+ * />
+ * ```
+ */
+declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
+
 interface EmptyStateProps {
     title: string;
     description?: string;
@@ -1728,4 +1812,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.js

@@ -1185,12 +1185,40 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
 
+// src/internal/forkRef.ts
+function forkRef(own, given) {
+  return (node) => {
+    own.current = node;
+    if (typeof given === "function") given(node);
+    else if (given != null) given.current = node;
+  };
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
-var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "label": "mds-Checkbox__label" };
-function Checkbox({ label, className, ...rest }) {
-  return /* @__PURE__ */ jsxs("label", { className: cx(Checkbox_module_default.root, className), children: [
-    /* @__PURE__ */ jsx("input", { type: "checkbox", className: Checkbox_module_default.box, ...rest }),
-    /* @__PURE__ */ jsx("span", { className: Checkbox_module_default.label, children: label })
+var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
+function Checkbox({
+  label,
+  labelHidden = false,
+  indeterminate = false,
+  className,
+  ref,
+  ...rest
+}) {
+  const own = useRef(null);
+  useEffect(() => {
+    if (own.current !== null) own.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: cx(Checkbox_module_default.root, labelHidden && Checkbox_module_default.bare, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: Checkbox_module_default.box,
+        ref: forkRef(own, ref),
+        ...rest
+      }
+    ),
+    labelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { className: Checkbox_module_default.label, children: label }) : /* @__PURE__ */ jsx("span", { className: Checkbox_module_default.label, children: label })
   ] });
 }
 
@@ -1397,6 +1425,97 @@ function ListItem({
   );
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped
+var DataTable_module_default = { "root": "mds-DataTable__root", "table": "mds-DataTable__table", "body": "mds-DataTable__body", "row": "mds-DataTable__row", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "key": "mds-DataTable__key", "lead": "mds-DataTable__lead", "selected": "mds-DataTable__selected", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions", "head": "mds-DataTable__head" };
+function DataTable({
+  label,
+  columns,
+  rows,
+  rowKey,
+  rowLabel,
+  rowActions,
+  actionsHeader,
+  rowMuted,
+  empty,
+  ref,
+  selected,
+  onSelectedChange,
+  selectionLabels,
+  bulkActions,
+  className,
+  ...rest
+}) {
+  const selectable = selected !== void 0;
+  const keys = rows.map(rowKey);
+  const all = selectable && keys.length > 0 && keys.every((key) => selected.includes(key));
+  const some = selectable && !all && keys.some((key) => selected.includes(key));
+  const span = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+  const toggle = (key, taken) => {
+    if (selected === void 0) return;
+    const next = taken ? [...selected, key] : selected.filter((each) => each !== key);
+    onSelectedChange(keys.filter((each) => next.includes(each)));
+  };
+  const nameOf = (row) => {
+    if (rowLabel !== void 0) return rowLabel(row);
+    const first = columns[0]?.cell(row);
+    return typeof first === "string" ? first : rowKey(row);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx(DataTable_module_default.root, className), ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("table", { className: DataTable_module_default.table, "aria-label": label, children: [
+      /* @__PURE__ */ jsxs("colgroup", { children: [
+        selectable && /* @__PURE__ */ jsx("col", {}),
+        columns.map((column) => /* @__PURE__ */ jsx("col", { style: column.width !== void 0 ? { width: column.width } : void 0 }, column.key)),
+        rowActions && /* @__PURE__ */ jsx("col", {})
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { as: "thead", className: DataTable_module_default.head, children: /* @__PURE__ */ jsxs("tr", { className: DataTable_module_default.row, children: [
+        selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: DataTable_module_default.select, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: selectionLabels.all,
+            labelHidden: true,
+            checked: all,
+            indeterminate: some,
+            onChange: (event) => onSelectedChange(event.target.checked ? keys : [])
+          }
+        ) }),
+        columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", className: DataTable_module_default.cell, children: column.header }, column.key)),
+        rowActions && /* @__PURE__ */ jsx("th", { scope: "col", className: DataTable_module_default.actions, children: actionsHeader })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: DataTable_module_default.body, children: rows.length > 0 ? rows.map((row) => {
+        const key = rowKey(row);
+        const taken = selected?.includes(key) ?? false;
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cx(DataTable_module_default.row, taken && DataTable_module_default.selected, rowMuted?.(row) === true && DataTable_module_default.muted),
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  label: selectionLabels.row(nameOf(row)),
+                  labelHidden: true,
+                  checked: taken,
+                  onChange: (event) => toggle(key, event.target.checked)
+                }
+              ) }),
+              columns.map((column, index) => /* @__PURE__ */ jsxs("td", { className: cx(DataTable_module_default.cell, index === 0 && DataTable_module_default.lead), children: [
+                index > 0 && /* @__PURE__ */ jsx("span", { className: DataTable_module_default.key, "aria-hidden": "true", children: column.header }),
+                column.cell(row)
+              ] }, column.key)),
+              rowActions && /* @__PURE__ */ jsx("td", { className: DataTable_module_default.actions, children: rowActions(row) })
+            ]
+          },
+          key
+        );
+      }) : empty !== void 0 && /* @__PURE__ */ jsx("tr", { className: DataTable_module_default.row, children: /* @__PURE__ */ jsx("td", { className: DataTable_module_default.empty, colSpan: span, children: /* @__PURE__ */ jsx(Text, { variant: "note", children: empty }) }) }) })
+    ] }),
+    selectable && selected.length > 0 && bulkActions !== void 0 && /* @__PURE__ */ jsxs("div", { className: DataTable_module_default.bulk, role: "status", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "meta", children: selectionLabels.count(selected.length) }),
+      /* @__PURE__ */ jsx("div", { className: DataTable_module_default.bulkActions, children: bulkActions })
+    ] })
+  ] });
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped
 var EmptyState_module_default = { "root": "mds-EmptyState__root", "icon": "mds-EmptyState__icon", "action": "mds-EmptyState__action" };
 function EmptyState({ title, description, icon, action, className }) {
@@ -2341,11 +2460,7 @@ function VideoPlayer({
     {
       className: cx(VideoPlayer_module_default.player, covered && VideoPlayer_module_default.covered, className),
       "aria-label": labels.region,
-      ref: (node) => {
-        root.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
+      ref: forkRef(root, ref),
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: VideoPlayer_module_default.frame, children: [
@@ -2493,6 +2608,6 @@ function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   );
 }
 
-export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DateTimePicker, Divider, EmptyState, Field, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DataTable, DateTimePicker, Divider, EmptyState, Field, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map