@eml-payments/ui-kit 0.1.23 → 0.1.25

package/dist/src/components/Card/Card.d.ts

@@ -1,9 +1,9 @@
 import type { ComponentProps } from 'react';
-declare function Card({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardAction({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardHeader: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardTitle: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardDescription: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardAction: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardContent: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const CardFooter: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/src/components/Card/Card.js

@@ -1,24 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
-function Card({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-[var(--uikit-radius)] border py-6 shadow-sm', className), ...props }));
-}
-function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
-}
-function CardTitle({ className, ...props }) {
-    return _jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props });
-}
-function CardDescription({ className, ...props }) {
-    return _jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props });
-}
-function CardAction({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
-}
-function CardContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props });
-}
-function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
-}
+const Card = ({ className, ...props }) => (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-[var(--uikit-radius)] border py-6 shadow-sm', className), ...props }));
+const CardHeader = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
+const CardTitle = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
+const CardDescription = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+const CardAction = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
+const CardContent = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props }));
+const CardFooter = ({ className, ...props }) => (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/src/components/Card/Card.stories.d.ts

@@ -1,7 +1,7 @@
-import { Card } from './Card';
+import React from 'react';
 declare const _default: {
     title: string;
-    component: typeof Card;
+    component: ({ className, ...props }: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 export declare const Basic: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/CardContainer.d.ts

@@ -5,5 +5,5 @@ interface CardContainerProps {
     children: ReactNode;
     className?: string;
 }
-export declare function CardContainer({ title, icon, children, className }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardContainer: ({ title, icon, children, className }: CardContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/Card/CardContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardHeader, CardTitle, CardContent } from './Card';
-export function CardContainer({ title, icon, children, className }) {
+export const CardContainer = ({ title, icon, children, className }) => {
     return (_jsxs(Card, { className: className, children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [icon, _jsx("span", { children: title })] }) }), _jsx(CardContent, { children: children })] }));
-}
+};

package/dist/src/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './Card';
+export { CardContainer } from './CardContainer';

package/dist/src/components/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './Card';
+export { CardContainer } from './CardContainer';

package/dist/src/components/Table/Table.js

@@ -9,7 +9,7 @@ import { FiMoreHorizontal } from 'react-icons/fi';
 import { Button } from '../Button';
 export function Table(props) {
     var _a;
-    const { table, setPageSize, ...pagination } = useTableController(props);
+    const { table, setPageSize, showHeader, ...pagination } = useTableController(props);
     let tableContent;
     if (props.isLoading && props.showSkeletonRows) {
         tableContent = Array.from({ length: 3 }).map((_c) => (_jsx("tr", { className: "border-t animate-pulse", children: table.getVisibleFlatColumns().map((__c) => (_jsx("td", { className: "px-4 py-2", children: _jsx("div", { className: "h-4 w-3/4 bg-[var(--uikit-tertiary)] rounded" }) }, `skeleton-cell-${__c.id}`))) }, `skeleton-row`)));
@@ -26,8 +26,10 @@ export function Table(props) {
                     }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_a = props.tableActionsDropdown.structure) !== null && _a !== void 0 ? _a : 'default', options: props.tableActionsDropdown.getOptions(row.original), triggerElement: (_e = (_d = (_b = props.tableActionsDropdown).renderCustomTrigger) === null || _d === void 0 ? void 0 : _d.call(_b, row.original)) !== null && _e !== void 0 ? _e : (_jsx(Button, { size: "icon", variant: "ghost", className: "p-1 focus-visible:outline-none focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_f = props.rowIdKey) !== null && _f !== void 0 ? _f : 'id')]));
         });
     }
-    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {
-                                        return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none text-[16px]', header.id === 'select' ? 'p-0' : 'px-4 py-2 text-left cursor-pointer'), onClick: header.column.getCanSort()
+    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {
+                                        return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none text-[16px]', header.id === 'select'
+                                                ? 'p-0'
+                                                : 'px-4 py-2 text-left cursor-pointer'), onClick: header.column.getCanSort()
                                                 ? header.column.getToggleSortingHandler()
                                                 : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'
                                                     ? 'flex justify-center items-center'
@@ -35,5 +37,5 @@ export function Table(props) {
                                                             asc: _jsx(FaChevronUp, {}),
                                                             desc: _jsx(FaChevronDown, {}),
                                                         }[header.column.getIsSorted()] || null }))] }) }, header.id));
-                                    }), props.tableActionsDropdown && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) }), _jsx("tbody", { children: tableContent })] }) }), _jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination })] }));
+                                    }), props.tableActionsDropdown && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) })), _jsx("tbody", { children: tableContent })] }) }), _jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination })] }));
 }

package/dist/src/components/Table/Table.stories.d.ts

@@ -16,3 +16,4 @@ export declare const FlexColumnWidths: Story;
 export declare const WithControlledSorting: Story;
 export declare const WithRowActionsDropdown: Story;
 export declare const WithRowClickHandler: Story;
+export declare const WithHiddenHeader: Story;

package/dist/src/components/Table/Table.stories.js

@@ -136,9 +136,12 @@ export const WithRowActionsDropdown = {
 };
 export const WithRowClickHandler = {
     render: () => {
-        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, onRowClick: row => {
+        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, onRowClick: (row) => {
                 console.log('Row clicked:', row);
                 alert(`Clicked on ${row.name}`);
             } }));
     },
 };
+export const WithHiddenHeader = {
+    render: () => _jsx(Table, { id: "header-hidden-table", data: data, columns: columns, showHeader: false }),
+};

package/dist/src/components/Table/Table.types.d.ts

@@ -33,4 +33,5 @@ export interface TableProps<T> {
         renderCustomTrigger?: (row: T) => React.ReactNode;
     };
     onRowClick?: (row: T) => void;
+    showHeader?: boolean;
 }

package/dist/src/components/Table/hooks/useTableController.d.ts

@@ -2,7 +2,7 @@ import { type SortingState } from '@tanstack/react-table';
 import type { TableProps } from '../Table.types';
 export declare function useTableController<T extends {
     id: string;
-}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, }: TableProps<T>): {
+}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, showHeader, }: TableProps<T>): {
     pageIndex: number;
     pageSize: number;
     canNextPage: boolean;
@@ -13,4 +13,5 @@ export declare function useTableController<T extends {
     setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
     setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     sorting: SortingState;
+    showHeader: boolean;
 };

package/dist/src/components/Table/hooks/useTableController.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
-export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, }) {
+export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, }) {
     const safeData = Array.isArray(data) ? data : [];
     const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
@@ -82,6 +82,7 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         setPageSize,
         setPageIndex,
         sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+        showHeader,
         ...pagination,
     };
 }

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/dist/src/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './Switch/Switch';
 export * from './Label/Label';
 export * from './DropdownWrapper/DropdownWrapper';
 export * from './Dropdown/Dropdown';
+export * from './Card';

package/dist/src/components/index.js

@@ -10,3 +10,4 @@ export * from './Switch/Switch';
 export * from './Label/Label';
 export * from './DropdownWrapper/DropdownWrapper';
 export * from './Dropdown/Dropdown';
+export * from './Card';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "0.1.23",
+	"version": "0.1.25",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",