autocasting-ui-library-padimasso 1.3.6 → 1.3.8

package/dist/components/Layout/DataGrid/DataGrid.js

@@ -0,0 +1,189 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import OverflowMenu from '../../Actions/Menus/OverflowMenu/OverflowMenu.js';
+import ChevronLeft from '../../Navigation/Indicators/Chevron/ChevronLeft.js';
+import ChevronRight from '../../Navigation/Indicators/Chevron/ChevronRight.js';
+
+function resolveCell(column, row) {
+    if (column.render)
+        return column.render(row);
+    if (column.name) {
+        const value = row[column.name];
+        return value == null ? null : String(value);
+    }
+    if (typeof column.accessor === 'function') {
+        const value = column.accessor(row);
+        return value == null ? null : String(value);
+    }
+    if (column.accessor) {
+        const value = row[column.accessor];
+        return value == null ? null : String(value);
+    }
+    return null;
+}
+function resolveAlignClass(align = 'left') {
+    if (align === 'center')
+        return 'text-center';
+    if (align === 'right')
+        return 'text-right';
+    return 'text-left';
+}
+function resolveJustifyClass(align = 'left') {
+    if (align === 'center')
+        return 'justify-center';
+    if (align === 'right')
+        return 'justify-end';
+    return 'justify-start';
+}
+function resolveColumnKey(column, index) {
+    if (column.id)
+        return column.id;
+    if (column.stringCode)
+        return column.stringCode;
+    if (column.name)
+        return String(column.name);
+    return `column-${index}`;
+}
+function resolveHeaderAlign(column) {
+    return column.headerAlignment ?? 'left';
+}
+function resolveContentAlign(column) {
+    return column.contentAlignment ?? 'left';
+}
+function resolveSizeValue(value) {
+    if (value == null)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function resolveColumnStyle(column, totalFlex) {
+    const width = resolveSizeValue(column.width);
+    if (width) {
+        return { width, minWidth: width };
+    }
+    const columnFlex = column.flex ?? 1;
+    if (columnFlex > 0 && totalFlex > 0) {
+        return {
+            width: `${(columnFlex / totalFlex) * 100}%`,
+            minWidth: 'max-content',
+        };
+    }
+    return { minWidth: 'max-content' };
+}
+function resolveFixedWidthStyle(width) {
+    const resolvedWidth = resolveSizeValue(width);
+    if (!resolvedWidth)
+        return undefined;
+    return { width: resolvedWidth, minWidth: resolvedWidth };
+}
+function resolveActionsColumnStyle(width) {
+    if (width != null)
+        return resolveFixedWidthStyle(width) ?? { width: '1%', minWidth: 'max-content' };
+    return { width: '1%', minWidth: 'max-content' };
+}
+const DataGrid = ({ columns, data, rowKey, actions, selection, className, tableClassName, emptyMessage = 'No data', pagination, }) => {
+    const selectionColumnClassName = 'w-[72px]';
+    const headerCheckboxRef = useRef(null);
+    const resolvedRowKeys = useMemo(() => data.map((row, index) => {
+        if (typeof rowKey === 'function')
+            return rowKey(row, index);
+        const value = row[rowKey];
+        return value == null ? `${index}` : String(value);
+    }), [data, rowKey]);
+    const selectedKeySet = useMemo(() => new Set(selection?.selectedRowKeys ?? []), [selection?.selectedRowKeys]);
+    const selectableRowKeys = useMemo(() => (selection ? resolvedRowKeys.filter((key) => !selection.isRowDisabled?.(key)) : resolvedRowKeys), [resolvedRowKeys, selection]);
+    const allVisibleSelected = selectableRowKeys.length > 0 && selectableRowKeys.every((key) => selectedKeySet.has(key));
+    const someVisibleSelected = selectableRowKeys.some((key) => selectedKeySet.has(key));
+    useEffect(() => {
+        if (!headerCheckboxRef.current)
+            return;
+        headerCheckboxRef.current.indeterminate = !allVisibleSelected && someVisibleSelected;
+    }, [allVisibleSelected, someVisibleSelected]);
+    const colCount = columns.length + (actions ? 1 : 0) + (selection ? 1 : 0);
+    const totalFlex = useMemo(() => columns.reduce((acc, column) => acc + (column.width == null ? (column.flex ?? 1) : 0), 0), [columns]);
+    const handleToggleAll = () => {
+        if (!selection)
+            return;
+        if (selectableRowKeys.length === 0)
+            return;
+        if (allVisibleSelected) {
+            const next = selection.selectedRowKeys.filter((key) => !selectableRowKeys.includes(key));
+            selection.onSelectedRowKeysChange(next);
+            return;
+        }
+        const next = Array.from(new Set([...selection.selectedRowKeys, ...selectableRowKeys]));
+        selection.onSelectedRowKeysChange(next);
+    };
+    const handleToggleRow = (key, isDisabled) => {
+        if (!selection)
+            return;
+        if (isDisabled)
+            return;
+        if (selectedKeySet.has(key)) {
+            selection.onSelectedRowKeysChange(selection.selectedRowKeys.filter((it) => it !== key));
+            return;
+        }
+        selection.onSelectedRowKeysChange([...selection.selectedRowKeys, key]);
+    };
+    return (jsxs("div", { className: [
+            'w-full overflow-hidden rounded-2xl border border-[var(--color-secondary-outline)] bg-[var(--color-primary-white)]',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [jsx("div", { className: "w-full overflow-x-auto", children: jsxs("table", { className: ['w-full table-auto border-collapse', tableClassName].filter(Boolean).join(' '), children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-[var(--color-secondary-outline)]", children: [selection ? (jsx("th", { className: [selectionColumnClassName, 'p-0 text-center align-middle'].join(' '), children: selection.showSelectAll === false ? null : (jsx("div", { className: "flex h-14 items-center justify-center px-4", children: jsxs("span", { className: "relative inline-flex items-center justify-center h-6 w-6", children: [jsx("input", { ref: headerCheckboxRef, type: "checkbox", checked: allVisibleSelected, onChange: handleToggleAll, disabled: selectableRowKeys.length === 0, "aria-label": selection.headerAriaLabel ?? 'Select all rows', className: "\n                            peer\n                            h-6 w-6\n                            rounded-lg\n                            border\n                            border-[var(--color-secondary-outline)]\n                            appearance-none\n                            cursor-pointer\n                            checked:border-[var(--color-primary-purple)]\n                            checked:bg-[var(--color-primary-white)]\n                            transition-colors\n                            disabled:opacity-50\n                            disabled:cursor-not-allowed\n                          " }), jsx("svg", { viewBox: "0 0 16 16", className: "\n                            pointer-events-none\n                            absolute\n                            h-3 w-3\n                            opacity-0\n                            peer-checked:opacity-100\n                          ", children: jsx("path", { d: "M3 8.5L6.5 12L13 4", fill: "none", stroke: "var(--color-primary-purple)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })) })) : null, columns.map((column, columnIndex) => {
+                                        const columnKey = resolveColumnKey(column, columnIndex);
+                                        const headerAlign = resolveHeaderAlign(column);
+                                        const alignClass = resolveAlignClass(headerAlign);
+                                        const isSortable = Boolean(column.sortable && column.onSort);
+                                        const sortIndicator = column.sortDirection === 'asc' ? ' ↑' : column.sortDirection === 'desc' ? ' ↓' : '';
+                                        return (jsx("th", { style: resolveColumnStyle(column, totalFlex), className: [
+                                                'p-0 text-sm font-semibold text-[var(--color-primary-black)] align-middle',
+                                                alignClass,
+                                                column.headerCellClassName,
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' '), children: jsx("div", { className: [
+                                                    'flex h-14 items-center px-2',
+                                                    resolveJustifyClass(headerAlign),
+                                                    column.headerContentClassName,
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(' '), children: isSortable ? (jsxs("button", { type: "button", onClick: column.onSort, className: "inline-flex items-center gap-1 hover:text-[var(--color-primary-purple)]", children: [jsx("span", { children: column.header }), jsx("span", { children: sortIndicator })] })) : (column.header) }) }, columnKey));
+                                    }), actions ? (jsx("th", { style: resolveActionsColumnStyle(actions.columnWidth), className: [
+                                            'whitespace-nowrap p-0 text-center text-sm font-semibold text-[var(--color-primary-black)] align-middle',
+                                            actions.headerCellClassName,
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' '), children: jsx("div", { className: ['flex h-14 items-center justify-center px-4', actions.headerContentClassName]
+                                                .filter(Boolean)
+                                                .join(' '), children: actions.header ?? 'Actions' }) })) : null] }) }), jsx("tbody", { children: data.length > 0 ? (data.map((row, index) => {
+                                const key = resolvedRowKeys[index];
+                                return (jsxs("tr", { className: "h-14 border-b border-[var(--color-secondary-outline)] last:border-b-0", children: [selection ? (jsx("td", { className: [selectionColumnClassName, 'p-0 text-center align-middle'].join(' '), children: jsxs("span", { className: "relative inline-flex h-14 w-full items-center justify-center px-4", children: [jsx("input", { type: "checkbox", checked: selectedKeySet.has(key), onChange: () => handleToggleRow(key, Boolean(selection.isRowDisabled?.(key))), disabled: Boolean(selection.isRowDisabled?.(key)), "aria-label": selection.rowAriaLabel?.(key) ?? `Select row ${key}`, className: "\n                              peer\n                              h-6 w-6\n                              rounded-lg\n                              border\n                              border-[var(--color-secondary-outline)]\n                              appearance-none\n                              cursor-pointer\n                              checked:border-[var(--color-primary-purple)]\n                              checked:bg-[var(--color-primary-white)]\n                              transition-colors\n                              disabled:opacity-50\n                              disabled:cursor-not-allowed\n                            " }), jsx("svg", { viewBox: "0 0 16 16", className: "\n                              pointer-events-none\n                              absolute\n                              h-3 w-3\n                              opacity-0\n                              peer-checked:opacity-100\n                            ", children: jsx("path", { d: "M3 8.5L6.5 12L13 4", fill: "none", stroke: "var(--color-primary-purple)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })) : null, columns.map((column, columnIndex) => {
+                                            const columnKey = resolveColumnKey(column, columnIndex);
+                                            const contentAlign = resolveContentAlign(column);
+                                            const alignClass = resolveAlignClass(contentAlign);
+                                            return (jsx("td", { style: resolveColumnStyle(column, totalFlex), className: [
+                                                    'p-0 text-sm text-[var(--color-primary-black)] align-middle',
+                                                    alignClass,
+                                                    column.cellClassName,
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(' '), children: jsx("div", { className: [
+                                                        'flex h-14 items-center px-2',
+                                                        resolveJustifyClass(contentAlign),
+                                                        column.cellContentClassName,
+                                                    ]
+                                                        .filter(Boolean)
+                                                        .join(' '), children: resolveCell(column, row) }) }, `${key}-${columnKey}`));
+                                        }), actions ? (jsx("td", { style: resolveActionsColumnStyle(actions.columnWidth), className: ['whitespace-nowrap p-0 text-center align-middle', actions.cellClassName]
+                                                .filter(Boolean)
+                                                .join(' '), children: jsx(OverflowMenu, { items: actions.items(row), align: actions.align ?? 'end', side: actions.side ?? 'bottom', triggerClassName: [
+                                                    'inline-flex h-14 w-full items-center justify-center px-4',
+                                                    actions.triggerClassName,
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(' '), menuClassName: actions.menuClassName }) })) : null] }, key));
+                            })) : (jsx("tr", { children: jsx("td", { colSpan: colCount, className: "px-6 py-10 text-center text-sm text-[var(--color-secondary-grey-fonts)]", children: emptyMessage }) })) })] }) }), pagination ? (jsxs("footer", { className: "flex items-center justify-end gap-4 border-t border-[var(--color-secondary-outline)] px-6 py-4", children: [jsx("span", { className: "text-sm text-[var(--color-primary-black)]", children: pagination.pageLabel?.({ page: pagination.page, hasNext: pagination.hasNext }) ??
+                            `Page ${pagination.page + 1}` }), jsxs("div", { className: "flex items-center gap-1 text-[var(--color-primary-black)]", children: [jsx("button", { type: "button", onClick: () => pagination.onPageChange(0), disabled: pagination.page <= 0, "aria-label": "First page", className: "inline-flex h-8 w-8 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-40", children: jsx(ChevronLeft, { double: true, sizePx: 18 }) }), jsx("button", { type: "button", onClick: () => pagination.onPageChange(Math.max(0, pagination.page - 1)), disabled: pagination.page <= 0, "aria-label": "Previous page", className: "inline-flex h-8 w-8 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-40", children: jsx(ChevronLeft, { sizePx: 18 }) }), jsx("button", { type: "button", onClick: () => pagination.onPageChange(pagination.page + 1), disabled: !pagination.hasNext, "aria-label": "Next page", className: "inline-flex h-8 w-8 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-40", children: jsx(ChevronRight, { sizePx: 18 }) }), jsx("button", { type: "button", onClick: () => pagination.onPageChange(pagination.page + 1), disabled: !pagination.hasNext, "aria-label": "Last page", className: "inline-flex h-8 w-8 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-40", children: jsx(ChevronRight, { double: true, sizePx: 18 }) })] })] })) : null] }));
+};
+
+export { DataGrid as default };

package/dist/components/Navigation/Indicators/Chevron/ChevronLeft.js

@@ -1,7 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-const ChevronLeft = () => {
-    return (jsx("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "cursor-pointer", children: jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+const ChevronLeft = ({ sizePx = 30, className, double = false }) => {
+    return (jsx("svg", { width: sizePx, height: sizePx, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: ['cursor-pointer', className ?? ''].filter(Boolean).join(' '), children: double ? (jsxs(Fragment, { children: [jsx("path", { d: "M17 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("path", { d: "M12 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] })) : (jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })) }));
 };
 
 export { ChevronLeft as default };

package/dist/components/Navigation/Indicators/Chevron/ChevronRight.js

@@ -1,7 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-const ChevronRight = () => {
-    return (jsx("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "cursor-pointer", children: jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+const ChevronRight = ({ sizePx = 30, className, double = false }) => {
+    return (jsx("svg", { width: sizePx, height: sizePx, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: ['cursor-pointer', className ?? ''].filter(Boolean).join(' '), children: double ? (jsxs(Fragment, { children: [jsx("path", { d: "M7 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("path", { d: "M12 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] })) : (jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })) }));
 };
 
 export { ChevronRight as default };

package/dist/components/Overlays/Dialogs/Modal/Modal.js

@@ -1,9 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 function Modal({ isOpen, onClose, title, children, size = 'md' }) {
-    // Hooks siempre arriba
-    const [scrolled, setScrolled] = useState(false);
     // Bloquea el scroll del body solo si está abierto
     useEffect(() => {
         if (!isOpen)
@@ -29,14 +27,10 @@ function Modal({ isOpen, onClose, title, children, size = 'md' }) {
           relative bg-(--color-primary-white) rounded-2xl shadow-2xl
           ${sizeClasses[size]}
           overflow-hidden
-        `, children: jsxs("div", { className: "overflow-y-auto modal-scroll", style: {
+        `, children: jsxs("div", { className: "\n            overflow-y-auto overflow-x-hidden modal-scroll\n            max-sm:[&_.modal-actions]:flex-col\n            max-sm:[&_.modal-actions]:items-stretch\n            max-sm:[&_.modal-actions_.modal-action]:w-full\n          ", style: {
                     // Alto máx. usando viewport visible + safe areas + margen exterior (2rem)
                     maxHeight: 'calc(100dvh - max(env(safe-area-inset-top),0px) - max(env(safe-area-inset-bottom),0px) - 2rem)',
-                }, onScroll: (e) => setScrolled((e.currentTarget.scrollTop || 0) > 5), children: [(title || true) && (jsxs("div", { className: `
-                sticky top-0 z-10 bg-(--color-primary-white)/95 backdrop-blur
-                transition-shadow
-                ${scrolled ? 'shadow-md' : 'shadow-none'}
-              `, children: [jsx("button", { type: "button", onClick: onClose, className: "cursor-pointer absolute right-5 top-4 text-xl leading-none", "aria-label": "Close", children: "\u2715" }), title && jsx("h2", { className: "text-2xl font-bold px-6 pt-5 pb-3 pr-12", children: title })] })), jsx("div", { className: `p-6 pt-4 ${title ? 'mt-0' : 'mt-10'}`, children: children })] }) }) }));
+                }, children: [(title || true) && (jsxs("div", { className: "relative bg-(--color-primary-white)", children: [jsx("button", { type: "button", onClick: onClose, className: "cursor-pointer absolute right-5 top-4 text-xl leading-none", "aria-label": "Close", children: "\u2715" }), title && jsx("h2", { className: "text-2xl font-bold px-6 pt-5 pb-3 pr-12", children: title })] })), jsx("div", { className: `p-6 pt-4 ${title ? 'mt-0' : 'mt-10'}`, children: children })] }) }) }));
 }
 
 export { Modal as default };

package/dist/index.d.ts

@@ -1,38 +1,18 @@
 import * as React$1 from 'react';
-import React__default, { ButtonHTMLAttributes, ImgHTMLAttributes, ReactNode, HTMLAttributes, ReactElement } from 'react';
+import React__default, { ImgHTMLAttributes, ReactNode, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function useDebouncedValue<T>(value: T, delay?: number): T;
 
 declare function useViewportVhVar(freeze?: boolean): void;
 
-type Props$7 = {
+type Props$8 = {
     zIndex?: number;
     lockBodyScroll?: boolean;
     className?: string;
     children: React.ReactNode;
 };
-declare function FullscreenCenter({ zIndex, lockBodyScroll, className, children }: Props$7): React$1.ReactPortal;
-
-declare const Separator: ({ className }: {
-    className: string;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "primary" | "danger" | "primaryOutline" | "outline" | "disabled";
-    asChild?: boolean;
-    className?: string;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-
-type ButtonRowProps = {
-    items: React__default.ReactNode[];
-    className?: string;
-    innerClassName?: string;
-};
-declare function ButtonRow({ items, className, innerClassName }: ButtonRowProps): react_jsx_runtime.JSX.Element | null;
-
-type GoogleButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-declare const GoogleButton: ({ className, children, ...props }: GoogleButtonProps) => react_jsx_runtime.JSX.Element;
+declare function FullscreenCenter({ zIndex, lockBodyScroll, className, children }: Props$8): React$1.ReactPortal;
 
 type IconName = 'ogIcon' | 'switcher' | 'tick' | 'view' | 'viewHide' | 'open' | 'burger' | 'burgerClose' | 'arrowLongLeft' | 'catalog' | 'copyLink' | 'clapper' | 'clapperManage' | 'clock' | 'file' | 'filter' | 'profile' | 'settings' | 'cross' | 'edit' | 'mail' | 'location' | 'calendar' | 'behance' | 'imdb' | 'plus' | 'whatsapp' | 'vimeo' | 'instagram' | 'x' | 'tikTok' | 'linkedin' | 'delete' | 'save' | 'publish' | 'overflowmenu' | 'applicants' | 'search' | 'info' | 'play' | 'web' | 'warning' | 'logout';
 type IconVariant = 'default' | 'primary' | 'white' | 'success' | 'danger' | 'disabled';
@@ -43,12 +23,12 @@ type IconProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
 };
 declare function Icon({ name, variant, size, className, alt, style, ...rest }: IconProps): react_jsx_runtime.JSX.Element;
 
-type Props$6 = React__default.SVGProps<SVGSVGElement> & {
+type Props$7 = React__default.SVGProps<SVGSVGElement> & {
     width?: number | string;
     height?: number | string;
     color?: string;
 };
-declare function HilighterSvg({ width, height, color, ...rest }: Props$6): react_jsx_runtime.JSX.Element;
+declare function HilighterSvg({ width, height, color, ...rest }: Props$7): react_jsx_runtime.JSX.Element;
 
 type OverflowMenuActionItem = {
     type?: 'item';
@@ -76,7 +56,7 @@ type OverflowMenuItem = OverflowMenuActionItem | OverflowMenuSeparatorItem | Ove
 type OverflowMenuAlign = 'start' | 'end';
 type OverflowMenuSide = 'top' | 'bottom';
 
-type Props$5 = {
+type Props$6 = {
     items: OverflowMenuItem[];
     align?: OverflowMenuAlign;
     side?: OverflowMenuSide;
@@ -90,7 +70,91 @@ type Props$5 = {
         disabled: boolean;
     }) => React.ReactNode;
 };
-declare const OverflowMenu: ({ items, align, side, offset, triggerClassName, menuClassName, itemClassName, disabled, trigger, }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const OverflowMenu: ({ items, align, side, offset, triggerClassName, menuClassName, itemClassName, disabled, trigger, }: Props$6) => react_jsx_runtime.JSX.Element;
+
+type DataGridAlign = 'left' | 'center' | 'right';
+type DataGridColumn<T> = {
+    id?: string;
+    name?: keyof T;
+    stringCode?: string;
+    header: ReactNode;
+    accessor?: keyof T | ((row: T) => unknown);
+    render?: (row: T) => ReactNode;
+    width?: number | string;
+    flex?: number;
+    headerAlignment?: DataGridAlign;
+    contentAlignment?: DataGridAlign;
+    cellClassName?: string;
+    headerCellClassName?: string;
+    cellContentClassName?: string;
+    headerContentClassName?: string;
+    sortable?: boolean;
+    sortDirection?: 'asc' | 'desc';
+    onSort?: () => void;
+};
+type DataGridActions<T> = {
+    header?: ReactNode;
+    items: (row: T) => OverflowMenuItem[];
+    columnWidth?: number | string;
+    align?: OverflowMenuAlign;
+    side?: OverflowMenuSide;
+    headerCellClassName?: string;
+    cellClassName?: string;
+    headerContentClassName?: string;
+    triggerClassName?: string;
+    menuClassName?: string;
+};
+type DataGridPagination = {
+    page: number;
+    hasNext: boolean;
+    onPageChange: (nextPage: number) => void;
+    pageLabel?: (ctx: {
+        page: number;
+        hasNext: boolean;
+    }) => ReactNode;
+    previousLabel?: ReactNode;
+    nextLabel?: ReactNode;
+};
+type DataGridSelection = {
+    selectedRowKeys: string[];
+    onSelectedRowKeysChange: (next: string[]) => void;
+    showSelectAll?: boolean;
+    rowAriaLabel?: (rowKey: string) => string;
+    headerAriaLabel?: string;
+    isRowDisabled?: (rowKey: string) => boolean;
+};
+type Props$5<T> = {
+    columns: DataGridColumn<T>[];
+    data: T[];
+    rowKey: keyof T | ((row: T, index: number) => string);
+    actions?: DataGridActions<T>;
+    selection?: DataGridSelection;
+    className?: string;
+    tableClassName?: string;
+    emptyMessage?: ReactNode;
+    pagination?: DataGridPagination;
+};
+declare const DataGrid: <T>({ columns, data, rowKey, actions, selection, className, tableClassName, emptyMessage, pagination, }: Props$5<T>) => react_jsx_runtime.JSX.Element;
+
+declare const Separator: ({ className }: {
+    className: string;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "danger" | "primaryOutline" | "outline" | "disabled";
+    asChild?: boolean;
+    className?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
+type ButtonRowProps = {
+    items: React__default.ReactNode[];
+    className?: string;
+    innerClassName?: string;
+};
+declare function ButtonRow({ items, className, innerClassName }: ButtonRowProps): react_jsx_runtime.JSX.Element | null;
+
+type GoogleButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare const GoogleButton: ({ className, children, ...props }: GoogleButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const TextDropdownTrigger: ({ label, open }: {
     label: string;
@@ -356,9 +420,19 @@ type UniversalVideoPlayerProps = {
 
 declare function UniversalVideoPlayer({ url, title, autoplay, controls, muted, loop, start, className, unsupportedMessage, openLinkLabel, }: UniversalVideoPlayerProps): react_jsx_runtime.JSX.Element;
 
-declare const ChevronLeft: () => react_jsx_runtime.JSX.Element;
+type ChevronLeftProps = {
+    sizePx?: number;
+    className?: string;
+    double?: boolean;
+};
+declare const ChevronLeft: ({ sizePx, className, double }: ChevronLeftProps) => react_jsx_runtime.JSX.Element;
 
-declare const ChevronRight: () => react_jsx_runtime.JSX.Element;
+type ChevronRightProps = {
+    sizePx?: number;
+    className?: string;
+    double?: boolean;
+};
+declare const ChevronRight: ({ sizePx, className, double }: ChevronRightProps) => react_jsx_runtime.JSX.Element;
 
 type ChevronUpDownProps = {
     open: boolean;
@@ -427,5 +501,5 @@ type WizardProps = {
 };
 declare function Wizard({ children }: WizardProps): ReactElement<WizardStepProps, string | React$1.JSXElementConstructor<any>>;
 
-export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, Chip, CurrencyInput, DetailsView, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PasswordInput, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TextDropdownTrigger, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
-export type { IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };
+export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, Chip, CurrencyInput, DataGrid, DetailsView, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PasswordInput, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TextDropdownTrigger, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
+export type { DataGridActions, DataGridColumn, DataGridPagination, DataGridSelection, IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };

package/dist/index.js

@@ -1,6 +1,7 @@
 export { useDebouncedValue } from './hooks/useDebounceValue.js';
 export { useViewportVhVar } from './hooks/useViewportVhVar.js';
 export { default as FullscreenCenter } from './components/Layout/FullscreenCenter.js';
+export { default as DataGrid } from './components/Layout/DataGrid/DataGrid.js';
 export { default as Separator } from './components/Layout/Separator/Separator.js';
 export { default as Button } from './components/Actions/Buttons/Button/Button.js';
 export { default as ButtonRow } from './components/Actions/Buttons/Button/ButtonRow.js';