@mond-design-system/react 4.6.1 → 4.8.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;
@@ -1365,6 +1449,66 @@ interface TabBarActionProps {
     it is a peer child, and the bar's flex layout leaves it its own width. */
 declare function TabBarAction({ label, icon, onClick }: TabBarActionProps): react.JSX.Element;
 
+interface SideNavProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Accessible name of the navigation landmark. There is more than one
+        navigation on a page wide enough to show this one. */
+    label: string;
+    children: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * The standing column of destinations, from the width where it costs nothing.
+ * TabBar is the same list on a phone; both are navigation landmarks whose
+ * items stay in the natural tab order — roving focus is for composite
+ * widgets, not for navigation.
+ *
+ * ```tsx
+ * <SideNav label="Primary">
+ *   <SideNavItem label="Home" icon={<Icon name="home" />} href="/" active />
+ *   <Divider />
+ *   <SideNavGroup label="More">
+ *     <SideNavItem label="Settings" icon={<Icon name="settings" />} href="/settings" />
+ *   </SideNavGroup>
+ *   <Button fullWidth iconLeft={<Icon name="plus" />} onClick={compose}>New post</Button>
+ * </SideNav>
+ * ```
+ *
+ * The column's own placement is the host's — a sticky offset under a header,
+ * a fixed rail, a plain block — so it takes a className and sets none of it.
+ */
+declare function SideNav({ label, className, children, ref, ...rest }: SideNavProps): ReactElement;
+interface SideNavGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Heading over the run, which also names it to a screen reader. Without
+        one the rows are still a run on screen and nothing to be told about, so
+        the group takes no role. */
+    label?: ReactNode;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/** A run of destinations under one heading, or none. */
+declare function SideNavGroup({ label, className, children, ref, ...rest }: SideNavGroupProps): ReactElement;
+interface SideNavItemProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    href?: string | undefined;
+    onClick?: MouseEventHandler | undefined;
+    /** The destination the reader is on. Lands as aria-current="page". */
+    active?: boolean | undefined;
+    /** How many are waiting, at the far end of the row. Nothing at zero: an
+        absence needs no mark. */
+    count?: number | undefined;
+    /** What the count counts, in words — the badge is read as this, and a bare
+        number is read as nothing. */
+    countLabel?: string | undefined;
+    /** The last number worth printing; above it the badge says `99+`, because
+        the column's width is fixed and a fourth digit takes it from the word. */
+    max?: number | undefined;
+    /** Element override for the link, e.g. a router's Link. */
+    as?: ElementType;
+}
+/** One destination. A link where it has one, a button where it does not. */
+declare function SideNavItem({ label, icon, href, onClick, active, count, countLabel, max, as, }: SideNavItemProps): ReactElement;
+
 interface MediaPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** CSS aspect-ratio for the box, e.g. "4 / 5". Default 16 / 9. */
     aspect?: string;
@@ -1728,4 +1872,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, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, 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;
@@ -1365,6 +1449,66 @@ interface TabBarActionProps {
     it is a peer child, and the bar's flex layout leaves it its own width. */
 declare function TabBarAction({ label, icon, onClick }: TabBarActionProps): react.JSX.Element;
 
+interface SideNavProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Accessible name of the navigation landmark. There is more than one
+        navigation on a page wide enough to show this one. */
+    label: string;
+    children: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * The standing column of destinations, from the width where it costs nothing.
+ * TabBar is the same list on a phone; both are navigation landmarks whose
+ * items stay in the natural tab order — roving focus is for composite
+ * widgets, not for navigation.
+ *
+ * ```tsx
+ * <SideNav label="Primary">
+ *   <SideNavItem label="Home" icon={<Icon name="home" />} href="/" active />
+ *   <Divider />
+ *   <SideNavGroup label="More">
+ *     <SideNavItem label="Settings" icon={<Icon name="settings" />} href="/settings" />
+ *   </SideNavGroup>
+ *   <Button fullWidth iconLeft={<Icon name="plus" />} onClick={compose}>New post</Button>
+ * </SideNav>
+ * ```
+ *
+ * The column's own placement is the host's — a sticky offset under a header,
+ * a fixed rail, a plain block — so it takes a className and sets none of it.
+ */
+declare function SideNav({ label, className, children, ref, ...rest }: SideNavProps): ReactElement;
+interface SideNavGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Heading over the run, which also names it to a screen reader. Without
+        one the rows are still a run on screen and nothing to be told about, so
+        the group takes no role. */
+    label?: ReactNode;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/** A run of destinations under one heading, or none. */
+declare function SideNavGroup({ label, className, children, ref, ...rest }: SideNavGroupProps): ReactElement;
+interface SideNavItemProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    href?: string | undefined;
+    onClick?: MouseEventHandler | undefined;
+    /** The destination the reader is on. Lands as aria-current="page". */
+    active?: boolean | undefined;
+    /** How many are waiting, at the far end of the row. Nothing at zero: an
+        absence needs no mark. */
+    count?: number | undefined;
+    /** What the count counts, in words — the badge is read as this, and a bare
+        number is read as nothing. */
+    countLabel?: string | undefined;
+    /** The last number worth printing; above it the badge says `99+`, because
+        the column's width is fixed and a fourth digit takes it from the word. */
+    max?: number | undefined;
+    /** Element override for the link, e.g. a router's Link. */
+    as?: ElementType;
+}
+/** One destination. A link where it has one, a button where it does not. */
+declare function SideNavItem({ label, icon, href, onClick, active, count, countLabel, max, as, }: SideNavItemProps): ReactElement;
+
 interface MediaPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** CSS aspect-ratio for the box, e.g. "4 / 5". Default 16 / 9. */
     aspect?: string;
@@ -1728,4 +1872,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, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, 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 }) {
@@ -1823,6 +1942,59 @@ function TabBarAction({ label, icon, onClick }) {
   return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": label, className: TabBar_module_default.action, onClick, children: /* @__PURE__ */ jsx("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: icon }) });
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SideNav/SideNav.module.css?mds-scoped
+var SideNav_module_default = { "nav": "mds-SideNav__nav", "group": "mds-SideNav__group", "heading": "mds-SideNav__heading", "item": "mds-SideNav__item", "active": "mds-SideNav__active", "icon": "mds-SideNav__icon", "label": "mds-SideNav__label", "count": "mds-SideNav__count" };
+function SideNav({ label, className, children, ref, ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, className: cx(SideNav_module_default.nav, className), ...rest, children });
+}
+function SideNavGroup({
+  label,
+  className,
+  children,
+  ref,
+  ...rest
+}) {
+  const headingId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(SideNav_module_default.group, className),
+      role: label != null ? "group" : void 0,
+      "aria-labelledby": label != null ? headingId : void 0,
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsx("span", { className: SideNav_module_default.heading, id: headingId, children: label }),
+        children
+      ]
+    }
+  );
+}
+function SideNavItem({
+  label,
+  icon,
+  href,
+  onClick,
+  active = false,
+  count,
+  countLabel,
+  max = 99,
+  as
+}) {
+  const className = cx(SideNav_module_default.item, active && SideNav_module_default.active);
+  const current = active ? "page" : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: SideNav_module_default.icon, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: SideNav_module_default.label, children: label }),
+    count !== void 0 && count > 0 && /* @__PURE__ */ jsx(Badge, { tone: "accent", role: "status", "aria-label": countLabel, className: SideNav_module_default.count, children: count > max ? `${max}+` : count })
+  ] });
+  if (href !== void 0) {
+    const Element = as ?? "a";
+    return /* @__PURE__ */ jsx(Element, { href, className, "aria-current": current, onClick, children: content });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", className, "aria-current": current, onClick, children: content });
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/MediaPlaceholder/MediaPlaceholder.module.css?mds-scoped
 var MediaPlaceholder_module_default = { "media": "mds-MediaPlaceholder__media", "fill": "mds-MediaPlaceholder__fill", "image": "mds-MediaPlaceholder__image", "caption": "mds-MediaPlaceholder__caption", "cover": "mds-MediaPlaceholder__cover", "blurred": "mds-MediaPlaceholder__blurred" };
 function MediaPlaceholder({
@@ -2341,11 +2513,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 +2661,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, SideNav, SideNavGroup, SideNavItem, 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