@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/primitives/components/chart-stats-footer/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MinMaxAvg } from '../min-max-avg';
+import { cn } from '../../utils';
+/**
+ * ChartStatsFooter - Displays Min/Max/Avg values and optional stats grid below a chart
+ *
+ * @example
+ * ```tsx
+ * <ChartStatsFooter
+ *   minMaxAvg={{ min: '10 TH/s', max: '100 TH/s', avg: '55 TH/s' }}
+ *   stats={[{ label: 'Uptime', value: '99.5%' }]}
+ * />
+ * ```
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const ChartStatsFooter = ({ minMaxAvg, stats, statsPerColumn = 1, secondaryLabel, className, }) => {
+    const hasMinMaxAvg = minMaxAvg && (minMaxAvg.min || minMaxAvg.max || minMaxAvg.avg);
+    const hasStats = stats && stats.length > 0;
+    const hasSecondaryLabel = secondaryLabel && secondaryLabel.title;
+    if (!hasMinMaxAvg && !hasStats && !hasSecondaryLabel)
+        return null;
+    const numColumns = hasStats ? Math.ceil(stats.length / statsPerColumn) : 0;
+    return (_jsxs("div", { className: cn('mdk-chart-stats-footer', statsPerColumn > 1 && 'mdk-chart-stats-footer--multi-row', className), children: [hasMinMaxAvg && (_jsx("div", { className: "mdk-chart-stats-footer__min-max-avg", children: _jsx(MinMaxAvg, { ...minMaxAvg }) })), hasStats && (_jsx("div", { className: cn('mdk-chart-stats-footer__stats', statsPerColumn === 1 && 'mdk-chart-stats-footer__stats--full-width'), children: Array.from({ length: numColumns }, (_, colIndex) => {
+                    const start = colIndex * statsPerColumn;
+                    const colItems = stats.slice(start, start + statsPerColumn);
+                    return (_jsx("div", { className: "mdk-chart-stats-footer__stats-col", children: colItems.map((item) => (_jsxs("div", { className: cn('mdk-chart-stats-footer__stats-row', statsPerColumn === 1 && 'mdk-chart-stats-footer__stats-row--full-width'), style: { flex: 1 / statsPerColumn }, children: [_jsx("div", { className: "mdk-chart-stats-footer__stat-label", children: item.label }), _jsx("div", { className: "mdk-chart-stats-footer__stat-value", children: item.value })] }, item.label))) }, colIndex));
+                }) })), hasSecondaryLabel && (_jsxs("div", { className: "mdk-chart-stats-footer__row", children: [_jsx("div", { className: "mdk-chart-stats-footer__primary-text", children: secondaryLabel.title }), _jsx("div", { className: "mdk-chart-stats-footer__secondary-text mdk-chart-stats-footer__secondary-label-value", children: secondaryLabel.value })] }))] }));
+};
+ChartStatsFooter.displayName = 'ChartStatsFooter';

package/dist/primitives/components/chart-stats-footer/types.d.ts

@@ -0,0 +1,28 @@
+import type { MinMaxAvgValues } from '../min-max-avg/types';
+export type ChartStatsFooterItem = {
+    /** Stat label */
+    label: string;
+    /** Stat value */
+    value: string | number;
+};
+export type SecondaryLabel = {
+    /** Label text */
+    title: string;
+    /** Value text */
+    value: string | number;
+};
+export type ChartStatsFooterProps = Partial<{
+    /** Min/Max/Avg values row */
+    minMaxAvg: MinMaxAvgValues;
+    /** Additional stats displayed in a columnar grid */
+    stats: ChartStatsFooterItem[];
+    /**
+     * Number of stat items per column (default: 1)
+     * @default 1
+     */
+    statsPerColumn: number;
+    /** Secondary label displayed below stats */
+    secondaryLabel: SecondaryLabel;
+    /** Custom class name */
+    className: string;
+}>;

package/dist/primitives/components/chart-stats-footer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/components/checkbox/checkbox.example.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxExample: () => import("react").JSX.Element;

package/dist/primitives/components/checkbox/checkbox.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Checkbox.
+ */
+import { useState } from 'react';
+import { Checkbox, Label } from '@tetherto/mdk-react-devkit';
+export const CheckboxExample = () => {
+    const [agreed, setAgreed] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-col", children: [_jsxs("div", { className: "mdk-example-inline", children: [_jsx(Checkbox, { id: "agree", checked: agreed, onCheckedChange: (value) => setAgreed(value === true) }), _jsx(Label, { htmlFor: "agree", children: "I agree to the terms" })] }), _jsxs("div", { className: "mdk-example-inline", children: [_jsx(Checkbox, { id: "indet", checked: "indeterminate" }), _jsx(Label, { htmlFor: "indet", children: "Indeterminate" })] }), _jsxs("div", { className: "mdk-example-inline", children: [_jsx(Checkbox, { id: "disabled", disabled: true }), _jsx(Label, { htmlFor: "disabled", children: "Disabled" })] })] }));
+};

package/dist/primitives/components/checkbox/index.d.ts

@@ -0,0 +1,94 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { BorderRadius, ComponentColor, ComponentSize } from '../../types';
+import { type ComponentPropsWithoutRef } from 'react';
+export type { CheckedState } from '@radix-ui/react-checkbox';
+export type CheckboxSize = 'xs' | ComponentSize;
+type CheckboxRootProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+export type CheckboxProps = {
+    /** Controlled checked state */
+    checked?: CheckboxRootProps['checked'];
+    /** Uncontrolled initial checked state */
+    defaultChecked?: CheckboxRootProps['defaultChecked'];
+    /**
+     * Disable the input
+     * @default false
+     */
+    disabled?: CheckboxRootProps['disabled'];
+    /**
+     * Size variant of the checkbox
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * Color variant when checked
+     * @default 'primary'
+     */
+    color?: ComponentColor;
+    /**
+     * Border radius variant
+     * @default 'none'
+     */
+    radius?: BorderRadius;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+    /**
+     * Custom className for the indicator element
+     */
+    indicatorClassName?: string;
+    /**
+     * Callback when the checked state changes
+     */
+    onCheckedChange?: (checked: CheckboxPrimitive.CheckedState) => void;
+} & CheckboxRootProps;
+/**
+ * Checkbox component with full customization
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked={checked} onCheckedChange={setChecked} size="lg" color="primary" />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    /** Controlled checked state */
+    checked?: CheckboxRootProps['checked'];
+    /** Uncontrolled initial checked state */
+    defaultChecked?: CheckboxRootProps['defaultChecked'];
+    /**
+     * Disable the input
+     * @default false
+     */
+    disabled?: CheckboxRootProps['disabled'];
+    /**
+     * Size variant of the checkbox
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * Color variant when checked
+     * @default 'primary'
+     */
+    color?: ComponentColor;
+    /**
+     * Border radius variant
+     * @default 'none'
+     */
+    radius?: BorderRadius;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+    /**
+     * Custom className for the indicator element
+     */
+    indicatorClassName?: string;
+    /**
+     * Callback when the checked state changes
+     */
+    onCheckedChange?: (checked: CheckboxPrimitive.CheckedState) => void;
+} & Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/primitives/components/checkbox/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+/**
+ * Checkbox component with full customization
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked={checked} onCheckedChange={setChecked} size="lg" color="primary" />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+const Checkbox = forwardRef(({ className, indicatorClassName, size = 'md', color = 'primary', radius = 'none', ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { onCheckedChange: props.onCheckedChange, ref: ref, className: cn('mdk-checkbox', `mdk-checkbox--${size}`, `mdk-checkbox--${color}`, `mdk-checkbox--radius-${radius}`, className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('mdk-checkbox__indicator', indicatorClassName), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "mdk-checkbox__icon", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }) })));
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };

package/dist/primitives/components/currency-toggler/currency-toggler.example.d.ts

@@ -0,0 +1 @@
+export declare const CurrencyTogglerExample: () => import("react").JSX.Element;

package/dist/primitives/components/currency-toggler/currency-toggler.example.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for CurrencyToggler.
+ */
+import { useState } from 'react';
+import { CurrencyToggler } from '@tetherto/mdk-react-devkit';
+export const CurrencyTogglerExample = () => {
+    const [currency, setCurrency] = useState('USD');
+    const [advancedCurrency, setAdvancedCurrency] = useState('BTC');
+    return (_jsxs("div", { className: "mdk-example-col", children: [_jsx(CurrencyToggler, { currencies: ['USD', 'BTC', 'ETH'], value: currency, onChange: setCurrency }), _jsx(CurrencyToggler, { currencies: [
+                    { value: 'BTC', label: 'BTC' },
+                    { value: 'USD', label: 'USD' },
+                    { value: 'EUR', label: 'EUR', disabled: true },
+                ], value: advancedCurrency, onChange: setAdvancedCurrency })] }));
+};

package/dist/primitives/components/currency-toggler/index.d.ts

@@ -0,0 +1,48 @@
+type CurrencyItem = {
+    /** Option value (used for selection) */
+    value: string;
+    /** Display label (defaults to `value`) */
+    label?: string;
+    /** Disables this option */
+    disabled?: boolean;
+};
+type CurrencyTogglerProps = {
+    /** Currently selected currency value */
+    value: string;
+    /** Additional class for the root element */
+    className?: string;
+    /** List of currency options */
+    currencies: (string | CurrencyItem)[];
+    /** Fired with the selected currency value when a button is clicked */
+    onChange: (currency: string) => void;
+};
+/**
+ * CurrencyToggler component for switching between currencies
+ *
+ * @example
+ * ```tsx
+ * <CurrencyToggler
+ *   currencies={['USD', 'BTC', 'ETH']}
+ *   value="USD"
+ *   onChange={(currency) => console.log(currency)}
+ * />
+ * ```
+ *
+ * @example
+ * // With disabled items
+ * ```tsx
+ * <CurrencyToggler
+ *   currencies={[
+ *     { value: 'USD', label: 'USD' },
+ *     { value: 'BTC', label: 'BTC', disabled: true },
+ *   ]}
+ *   value="USD"
+ *   onChange={(currency) => console.log(currency)}
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const CurrencyToggler: import("react").ForwardRefExoticComponent<CurrencyTogglerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { CurrencyToggler };

package/dist/primitives/components/currency-toggler/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../utils';
+/**
+ * CurrencyToggler component for switching between currencies
+ *
+ * @example
+ * ```tsx
+ * <CurrencyToggler
+ *   currencies={['USD', 'BTC', 'ETH']}
+ *   value="USD"
+ *   onChange={(currency) => console.log(currency)}
+ * />
+ * ```
+ *
+ * @example
+ * // With disabled items
+ * ```tsx
+ * <CurrencyToggler
+ *   currencies={[
+ *     { value: 'USD', label: 'USD' },
+ *     { value: 'BTC', label: 'BTC', disabled: true },
+ *   ]}
+ *   value="USD"
+ *   onChange={(currency) => console.log(currency)}
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+const CurrencyToggler = forwardRef(({ currencies, value, onChange, className }, ref) => (_jsx("div", { ref: ref, className: cn('mdk_currency_toggler', className), children: currencies.map((currency) => {
+        const item = typeof currency === 'string' ? { value: currency, label: currency } : currency;
+        const label = item.label ?? item.value;
+        return (_jsx("button", { type: "button", disabled: item.disabled, "aria-label": `Select ${label} currency`, className: cn('mdk_currency_toggler__button', value === item.value && 'mdk_currency_toggler__button--active'), onClick: () => !item.disabled && onChange(item.value), children: label }, item.value));
+    }) })));
+CurrencyToggler.displayName = 'CurrencyToggler';
+export { CurrencyToggler };

package/dist/primitives/components/data-label/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DATE: {
+    readonly SEPARATOR: '-';
+    readonly FALLBACK: '--/--/--';
+};
+export declare const LABEL: {
+    readonly SUFFIX: ':';
+    readonly DEFAULT: 'Period';
+};

package/dist/primitives/components/data-label/constants.js

@@ -0,0 +1,8 @@
+export const DATE = {
+    SEPARATOR: '-',
+    FALLBACK: '--/--/--',
+};
+export const LABEL = {
+    SUFFIX: ':',
+    DEFAULT: 'Period',
+};

package/dist/primitives/components/data-label/data-label.example.d.ts

@@ -0,0 +1 @@
+export declare const DataLabelExample: () => import("react").JSX.Element;

package/dist/primitives/components/data-label/data-label.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for DataLabel.
+ *
+ * Wrap the app in `<MdkProvider>` so `useTimezone` can read the timezone store.
+ */
+import { DataLabel } from '@tetherto/mdk-react-devkit';
+const start = new Date(2025, 0, 6);
+const end = new Date(2025, 2, 15);
+export const DataLabelExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(DataLabel, { startDate: start, endDate: end }), _jsx(DataLabel, { startDate: null, endDate: null })] }));

package/dist/primitives/components/data-label/index.d.ts

@@ -0,0 +1,34 @@
+export type DataLabelProps = Partial<{
+    /**
+     * Range start; formatted in the active timezone (`dd/MM/yy`).
+     */
+    startDate: Date | null;
+    /**
+     * Range end; formatted in the active timezone (`dd/MM/yy`).
+     */
+    endDate: Date | null;
+    /**
+     * Label text; defaults to `PERIOD`.
+     * @default "PERIOD"
+     */
+    label: string;
+    /**
+     * IANA timezone the dates are shown in (e.g. `'UTC'`). Defaults to the
+     * browser's timezone; pass `useTimezone().timezone` to follow the user's
+     * selected one.
+     */
+    timezone: string;
+}>;
+/**
+ * Read-only period label (`PERIOD: start - end`) with timezone-aware dates.
+ * Pure: the timezone comes in as a prop.
+ *
+ * @example
+ * ```tsx
+ * <DataLabel startDate={range[0]} endDate={range[1]} />
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const DataLabel: ({ startDate, endDate, label, timezone, }: DataLabelProps) => import("react").JSX.Element;

package/dist/primitives/components/data-label/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns/format';
+import { toZonedTime } from 'date-fns-tz';
+import _isDate from 'lodash/isDate';
+import { DATE, LABEL } from './constants';
+const browserTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+/**
+ * Read-only period label (`PERIOD: start - end`) with timezone-aware dates.
+ * Pure: the timezone comes in as a prop.
+ *
+ * @example
+ * ```tsx
+ * <DataLabel startDate={range[0]} endDate={range[1]} />
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export const DataLabel = ({ startDate, endDate, label = LABEL.DEFAULT, timezone = browserTimezone(), }) => {
+    const formatDate = (date) => {
+        if (!_isDate(date) || Number.isNaN(date?.getTime?.()))
+            return DATE.FALLBACK;
+        const zonedDate = toZonedTime(date, timezone);
+        return format(zonedDate, 'dd/MM/yy');
+    };
+    return (_jsxs("div", { className: "mdk-data-label", children: [_jsxs("span", { className: "mdk-data-label__header", children: [label, LABEL.SUFFIX] }), _jsx("span", { className: "mdk-data-label__date", children: formatDate(startDate) }), _jsx("span", { className: "mdk-data-label__separator", children: DATE.SEPARATOR }), _jsx("span", { className: "mdk-data-label__date", children: formatDate(endDate) })] }));
+};

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

@@ -0,0 +1,16 @@
+import type { Row, Table } from '@tanstack/react-table';
+import { type JSX, type ReactNode } from 'react';
+export type TableBodyProps<I = unknown> = {
+    table: Table<I>;
+    renderExpandedContent?: (row: Row<I>) => ReactNode;
+    onRowClick?: (rowData: I) => void;
+};
+export declare const TableBody: <I = unknown>({ table, renderExpandedContent, onRowClick, }: TableBodyProps<I>) => JSX.Element;
+export declare const SkeletonTableBody: ({ columnCount, rowCount, }: {
+    columnCount: number;
+    rowCount?: number;
+}) => JSX.Element;
+export declare const EmptyTableBody: ({ description, hideContent, }: {
+    description?: string;
+    hideContent?: boolean;
+}) => JSX.Element;

package/dist/primitives/components/data-table/data-table-body.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArchiveIcon } from '@radix-ui/react-icons';
+import { flexRender } from '@tanstack/react-table';
+import { cn } from '../../utils';
+import { Fragment } from 'react';
+import { SkeletonBlock } from '../skeleton';
+import { getTableCellAlignClassName } from './data-table-cell-align';
+// Clicks that land on an interactive control inside the row (the selection
+// checkbox, expand toggle, a link/button/input, or anything opting out with
+// `data-no-row-click`) must not trigger the row-level navigation.
+const isInteractiveTarget = (target) => target instanceof Element &&
+    target.closest('button, a, input, label, [role="checkbox"], [data-no-row-click]') !== null;
+export const TableBody = ({ table, renderExpandedContent, onRowClick, }) => (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsxs(Fragment, { children: [_jsx("tr", { className: cn('mdk-table__body-row', {
+                    'mdk-table__body-row--selected': row.getIsSelected(),
+                    'mdk-table__body-row--clickable': Boolean(onRowClick),
+                }), ...(onRowClick && {
+                    role: 'button',
+                    tabIndex: 0,
+                    onClick: (event) => {
+                        if (isInteractiveTarget(event.target))
+                            return;
+                        onRowClick(row.original);
+                    },
+                    onKeyDown: (event) => {
+                        if (event.key !== 'Enter' && event.key !== ' ')
+                            return;
+                        if (isInteractiveTarget(event.target))
+                            return;
+                        event.preventDefault();
+                        onRowClick(row.original);
+                    },
+                }), children: row.getVisibleCells().map((cell) => {
+                    const align = cell.column.columnDef.meta?.align;
+                    return (_jsx("td", { style: { width: cell.column.getSize() }, className: getTableCellAlignClassName(align), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                }) }), row.getIsExpanded() && (_jsx("tr", { children: _jsx("td", { colSpan: row.getAllCells().length, children: renderExpandedContent?.(row) }) }))] }, row.id))) }));
+// Cycled so adjacent cells get different bar lengths — reads as "text of
+// varying width" rather than a uniform grid.
+const SKELETON_CELL_WIDTHS = ['85%', '55%', '70%', '45%'];
+export const SkeletonTableBody = ({ columnCount, rowCount = 5, }) => (_jsx("tbody", { "aria-hidden": true, children: Array.from({ length: rowCount }, (_, rowIndex) => (_jsx("tr", { className: "mdk-table__body-row mdk-table__body-row--skeleton", children: Array.from({ length: columnCount }, (_, cellIndex) => (_jsx("td", { children: _jsx(SkeletonBlock, { height: 14, width: SKELETON_CELL_WIDTHS[(rowIndex + cellIndex) % SKELETON_CELL_WIDTHS.length] }) }, cellIndex))) }, rowIndex))) }));
+export const EmptyTableBody = ({ description = 'No data present', hideContent, }) => {
+    return (_jsx("div", { className: cn('mdk-table__empty-body-wrapper', {
+            'mdk-table__empty-body--hidden': hideContent,
+        }), children: !hideContent && (_jsxs("div", { className: "mdk-table__empty-body", children: [_jsx(ArchiveIcon, { width: "128px", height: "128px" }), _jsx("p", { children: description })] })) }));
+};

package/dist/primitives/components/data-table/data-table-cell-align.d.ts

@@ -0,0 +1,3 @@
+type ColumnAlign = 'left' | 'center' | 'right';
+export declare const getTableCellAlignClassName: (align?: ColumnAlign) => string | undefined;
+export {};

package/dist/primitives/components/data-table/data-table-cell-align.js

@@ -0,0 +1,5 @@
+import { cn } from '../../utils';
+export const getTableCellAlignClassName = (align) => cn({
+    'mdk-table__cell--align-center': align === 'center',
+    'mdk-table__cell--align-right': align === 'right',
+}) || undefined;

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

@@ -0,0 +1,7 @@
+import type { Table } from '@tanstack/react-table';
+import { type JSX } from 'react';
+type TableHeaderProps<I> = {
+    table: Table<I>;
+};
+export declare const TableHeader: <I = unknown>({ table }: TableHeaderProps<I>) => JSX.Element;
+export {};

package/dist/primitives/components/data-table/data-table-header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleDownIcon, TriangleUpIcon } from '@radix-ui/react-icons';
+import { flexRender } from '@tanstack/react-table';
+import { Fragment } from 'react';
+import { cn } from '../../utils';
+import { SimpleTooltip } from '../tooltip';
+import { columnIds } from './data-table.constants';
+import { getTableCellAlignClassName } from './data-table-cell-align';
+const SORT_ICON_SIZE = 24;
+export const TableHeader = ({ table }) => {
+    const renderTableHeaderCell = (header) => {
+        const align = header.column.columnDef.meta?.align;
+        return (_jsx("th", { colSpan: header.colSpan, style: { width: header.getSize() }, className: cn({
+                sortable: header.column.getCanSort(),
+                sorted: !!header.column.getIsSorted(),
+            }, getTableCellAlignClassName(align)), onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "mdk-table-header-content", children: [_jsx("span", { className: cn('mdk-table-header-subject', {
+                            'mdk-table-header-subject-checkbox': header.column.id === columnIds.rowSelection,
+                        }), children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx("span", { className: "mdk-table-header-sort", style: { minWidth: SORT_ICON_SIZE }, children: {
+                            asc: _jsx(TriangleUpIcon, { height: SORT_ICON_SIZE, width: SORT_ICON_SIZE }),
+                            desc: _jsx(TriangleDownIcon, { height: SORT_ICON_SIZE, width: SORT_ICON_SIZE }),
+                        }[header.column.getIsSorted()] ?? null })] }) }));
+    };
+    return (_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx(Fragment, { children: header.isPlaceholder ? null : header.column.getCanSort() ? (_jsx(SimpleTooltip, { content: {
+                        asc: 'Sort ascending',
+                        desc: 'Sort descending',
+                    }[header.column.getNextSortingOrder()] ?? 'Clear sort', children: renderTableHeaderCell(header) })) : (renderTableHeaderCell(header)) }, header.id))) }, headerGroup.id))) }));
+};

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

@@ -0,0 +1,4 @@
+export declare const columnIds: {
+    rowExpansion: string;
+    rowSelection: string;
+};

package/dist/primitives/components/data-table/data-table.constants.js

@@ -0,0 +1,4 @@
+export const columnIds = {
+    rowExpansion: 'row-expand',
+    rowSelection: 'row-select',
+};