@eml-payments/ui-kit 0.1.6 → 0.1.8

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { SelectWrapper } from './SelectWrapper';
+const meta = {
+    title: 'UIKit/SelectWrapper',
+    component: SelectWrapper,
+    tags: ['autodocs'],
+    args: {
+        options: [
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+        ],
+        value: '',
+        onChange: (value) => console.log(value),
+        placeholder: 'Select an option...',
+        size: 'default',
+        disabled: false,
+        error: false,
+        className: '',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithValue = {
+    args: {
+        value: 'option2',
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Error = {
+    args: {
+        error: true,
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithLabel = {
+    args: {
+        label: 'Select an option',
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Select an option...',
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithSize = {
+    args: {
+        size: 'small',
+    },
+    render: (args) => {
+        const [value, setValue] = React.useState(args.value);
+        return _jsx(SelectWrapper, { ...args, value: value, onChange: setValue });
+    },
+};

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

@@ -0,0 +1,15 @@
+export interface SelectWrapperOptions {
+    label: string;
+    value: string;
+}
+export interface SelectWrapperProps {
+    label?: string;
+    options: SelectWrapperOptions[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: 'small' | 'default';
+    disabled?: boolean;
+    error?: boolean;
+    placeholder?: string;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './SelectWrapper';
+export * from './SelectWrapper.types';

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

@@ -0,0 +1,2 @@
+export * from './SelectWrapper';
+export * from './SelectWrapper.types';

package/dist/src/components/SelectWrapper/select.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/src/components/SelectWrapper/select.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/{components → src/components}/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { SwitchProps } from './Switch.types';
+import type { SwitchProps } from './Switch.types';
 declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };

package/dist/{components → src/components}/Switch/Switch.js

@@ -3,20 +3,20 @@ import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cn } from '../../lib/utils';
 import { Label } from '../Label/Label';
-const sizeClasses = {
-    sm: {
-        root: 'h-4 w-8',
-        thumb: 'h-3 w-3 data-[state=checked]:translate-x-4',
-    },
-    md: {
-        root: 'h-6 w-11',
-        thumb: 'h-4 w-4 data-[state=checked]:translate-x-5',
-    },
-    lg: {
-        root: 'h-7 w-14',
-        thumb: 'h-5 w-5 data-[state=checked]:translate-x-7',
-    },
-};
+// const sizeClasses = {
+// 	sm: {
+// 		root: 'h-4 w-8',
+// 		thumb: 'h-3 w-3 data-[state=checked]:translate-x-4',
+// 	},
+// 	md: {
+// 		root: 'h-6 w-11',
+// 		thumb: 'h-4 w-4 data-[state=checked]:translate-x-5',
+// 	},
+// 	lg: {
+// 		root: 'h-7 w-14',
+// 		thumb: 'h-5 w-5 data-[state=checked]:translate-x-7',
+// 	},
+// };
 const Switch = React.forwardRef(({ className, label, labelPosition = 'left', ...props }, ref) => {
     // Define the position classes for label placement
     const positionClasses = {
@@ -29,7 +29,7 @@ const Switch = React.forwardRef(({ className, label, labelPosition = 'left', ...
     const wrapperClass = cn('inline-flex items-center gap-2', positionClasses[labelPosition]);
     return (_jsxs("div", { className: wrapperClass, children: [label && (_jsx(Label, { htmlFor: props.id, className: cn('text-sm font-medium cursor-pointer', {
                     'cursor-not-allowed opacity-70': props.disabled,
-                }), children: label })), _jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center rounded-full border-2 border-black shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-transparent', className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-[15px] w-[15px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[20px] data-[state=checked]:bg-[var(--uikit-primary)] data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-black') }) })] }));
+                }), children: label })), _jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-[22px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-transparent', className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-[12px] w-[12px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[21px] data-[state=checked]:bg-[var(--uikit-primary)] data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-black') }) })] }));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/{components → src/components}/Switch/Switch.types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from 'react';
-import { Switch as ShadCNSwitch } from '@radix-ui/react-switch';
+import type { ComponentProps } from 'react';
+import type { Switch as ShadCNSwitch } from '@radix-ui/react-switch';
 export interface SwitchProps extends ComponentProps<typeof ShadCNSwitch> {
     label?: string;
     labelPosition?: 'left' | 'right' | 'top' | 'bottom';

package/dist/src/components/Table/Pagination/PaginationControls.d.ts

@@ -0,0 +1,2 @@
+import type { PaginationControlsProps } from './PaginationControls.types';
+export declare const PaginationControls: <T>({ tableId, table, paginationMode, pageCount, pageSizeOptions, onPageSizeChange, }: PaginationControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../Button';
+export const PaginationControls = ({ tableId, table, paginationMode = 'client', pageCount, pageSizeOptions = [5, 10, 20, 50, 100], onPageSizeChange, }) => {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const totalPages = paginationMode === 'server' ? (pageCount !== null && pageCount !== void 0 ? pageCount : 0) : table.getPageCount();
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-2 text-sm w-full", children: [_jsxs("div", { className: "w-1/3 flex items-center gap-2", children: [_jsx("label", { htmlFor: `page-size-select-${tableId}`, className: "text-muted-foreground", children: "Rows per page:" }), _jsx("select", { id: "pageSize", value: pageSize, onChange: (e) => {
+                            const newSize = Number(e.target.value);
+                            table.setPageSize(newSize);
+                            onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newSize);
+                        }, className: "bg-muted px-2 py-1 rounded text-sm", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: "w-1/3 flex justify-center gap-3", children: [_jsx(Button, { variant: "secondary", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), className: "px-3 py-1 bg-muted rounded", children: "Previous" }), _jsx(Button, { variant: "secondary", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), className: "px-3 py-1 bg-muted rounded", children: "Next" })] }), _jsxs("div", { className: "w-1/3 flex justify-end text-muted-foreground", children: ["Page ", pageIndex + 1, " of ", totalPages] })] }));
+};

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

@@ -0,0 +1,9 @@
+import type { Table } from '@tanstack/react-table';
+export interface PaginationControlsProps<T> {
+    tableId: string;
+    table: Table<T>;
+    paginationMode?: 'client' | 'server';
+    pageCount?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+}

package/dist/src/components/Table/Pagination/PaginationControls.types.js

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

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

@@ -0,0 +1,2 @@
+export * from './PaginationControls';
+export * from './PaginationControls.types';

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

@@ -0,0 +1,2 @@
+export * from './PaginationControls';
+export * from './PaginationControls.types';

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

@@ -0,0 +1,4 @@
+import type { TableProps } from './Table.types';
+export declare function Table<T extends {
+    id: string;
+}>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { classNames } from '../../utils/classNames';
+import { PaginationControls } from './Pagination/PaginationControls';
+import { useTableController } from './hooks/useTableController';
+export function Table(props) {
+    var _a;
+    const { table, setPageSize } = 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`)));
+    }
+    else if (table.getRowModel().rows.length === 0) {
+        tableContent = (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length, className: "px-4 py-8 text-center text-muted-foreground", children: (_a = props.noRowsMessage) !== null && _a !== void 0 ? _a : 'No rows to display' }) }));
+    }
+    else {
+        tableContent = table.getRowModel().rows.map((row) => (_jsx("tr", { className: classNames('border-t hover:bg-[var(--hover-bg-color)]', row.getIsSelected() && 'bg-[var(--hover-bg-color)]'), children: row.getVisibleCells().map((cell) => {
+                const width = cell.column.getSize();
+                return (_jsx("td", { style: { width }, className: "px-4 py-2", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+            }) }, row.id)));
+    }
+    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsxs("table", { className: classNames('min-w-full border rounded text-sm table-fixed', props.className), role: "table", children: [_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
+                                return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none', header.column.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.column.id === 'select'
+                                            ? 'flex justify-center items-center'
+                                            : 'flex items-center gap-2'), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsx("span", { className: "text-xs", children: {
+                                                    asc: '↑',
+                                                    desc: '↓',
+                                                }[header.column.getIsSorted()] || null }))] }) }, header.id));
+                            }) }, headerGroup.id))) }), _jsx("tbody", { children: tableContent })] }), table.getRowModel().rows.length > 0 && (_jsx(PaginationControls, { tableId: props.id, table: table, paginationMode: props.paginationMode, pageCount: props.pageCount, onPageSizeChange: setPageSize }))] }));
+}

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

@@ -0,0 +1,20 @@
+import { Table } from './Table';
+import type { FlexColumnDef } from './Table.types';
+import type { Meta, StoryObj } from '@storybook/react';
+type User = {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+};
+export declare const columns: FlexColumnDef<User>[];
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const Basic: Story;
+export declare const NoRows: Story;
+export declare const LoadingWithSkeleton: Story;
+export declare const ClientPagination: Story;
+export declare const WithCheckboxSelection: Story;
+export declare const FlexColumnWidths: Story;
+export declare const WithControlledSorting: Story;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Table } from './Table';
+const data = Array.from({ length: 10 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: i % 2 === 0 ? 'Admin' : 'User',
+}));
+export const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        flex: 1,
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        cell: ({ row }) => (_jsx("a", { href: `mailto:${row.original.email}`, className: "text-blue-600 underline", children: row.original.email })),
+        flex: 1,
+    },
+    {
+        accessorKey: 'role',
+        header: 'Role',
+        cell: ({ row }) => {
+            const role = row.original.role;
+            return _jsx("span", { className: role === 'Admin' ? 'text-red-500 font-bold' : '', children: role });
+        },
+        flex: 1,
+    },
+];
+const meta = {
+    title: 'UIKit/Table',
+    component: Table,
+    tags: ['autodocs'],
+    render: () => _jsx(Table, { id: "example-table", data: data !== null && data !== void 0 ? data : [], columns: columns }),
+};
+export default meta;
+export const Basic = {
+    render: () => _jsx(Table, { id: "example-table", data: data !== null && data !== void 0 ? data : [], columns: columns }),
+};
+export const NoRows = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns }),
+};
+export const LoadingWithSkeleton = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns, isLoading: true, showSkeletonRows: true, rowsPerPage: 5 }),
+};
+export const ClientPagination = {
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 }),
+};
+export const WithCheckboxSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", paginationMode: "client" })),
+};
+export const FlexColumnWidths = {
+    render: () => {
+        const testColumns = [
+            { accessorKey: 'id', header: 'ID', flex: 1 },
+            { accessorKey: 'name', header: 'Name', flex: 2 },
+            { accessorKey: 'email', header: 'Email', flex: 3 },
+            { accessorKey: 'role', header: 'Role', flex: 1 },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: testColumns, paginationMode: "client", checkboxSelection: false, rowsPerPage: 5 }));
+    },
+};
+export const WithControlledSorting = {
+    render: () => {
+        const [sorting, setSorting] = useState([{ id: 'name', desc: true }]);
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, paginationMode: "client", sorting: sorting, onSortingChange: setSorting, rowsPerPage: 5 }));
+    },
+};

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

@@ -0,0 +1,22 @@
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
+export type FlexColumnDef<T> = ColumnDef<T> & {
+    flex?: number;
+};
+export interface TableProps<T extends {
+    id: string;
+}> {
+    id: string;
+    data: T[];
+    columns: FlexColumnDef<T>[];
+    className?: string;
+    isLoading?: boolean;
+    showSkeletonRows?: boolean;
+    checkboxSelection?: boolean;
+    checkboxPosition?: 'start' | 'end';
+    sorting?: SortingState;
+    onSortingChange?: (s: SortingState) => void;
+    pageCount?: number;
+    paginationMode?: 'client' | 'server';
+    noRowsMessage?: string;
+    rowsPerPage?: number;
+}

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

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

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

@@ -0,0 +1,13 @@
+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, pageCount, sorting, onSortingChange, rowsPerPage, }: TableProps<T>): {
+    table: import("@tanstack/react-table").Table<T>;
+    pageSize: number;
+    pageIndex: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    rowSelection: {};
+    sorting: SortingState;
+};

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

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, } from '@tanstack/react-table';
+import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
+export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'end', paginationMode = 'client', pageCount, sorting, onSortingChange, rowsPerPage = 10, }) {
+    const safeData = Array.isArray(data) ? data : [];
+    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
+    const [rowSelection, setRowSelection] = useState({});
+    const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageSize, setPageSize] = useState(rowsPerPage !== null && rowsPerPage !== void 0 ? rowsPerPage : 10);
+    const table = useReactTable({
+        data: safeData,
+        columns: tableColumns,
+        getRowId: (row) => row.id,
+        state: {
+            pagination: { pageSize, pageIndex },
+            rowSelection,
+            sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+        },
+        onRowSelectionChange: setRowSelection,
+        getSortedRowModel: getSortedRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: paginationMode === 'server',
+        pageCount: paginationMode === 'server' ? pageCount : undefined,
+        onPaginationChange: (updater) => {
+            const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
+            setPageIndex(next.pageIndex);
+            setPageSize(next.pageSize);
+        },
+        onSortingChange: (updater) => {
+            const nextSorting = typeof updater === 'function' ? updater(sorting !== null && sorting !== void 0 ? sorting : internalSorting) : updater;
+            setInternalSorting(nextSorting);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(nextSorting);
+        },
+    });
+    useEffect(() => {
+        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : []);
+        const selectionColumn = checkboxSelection ? getCheckboxSelectionColumn(table) : null;
+        if (checkboxSelection && !selectionColumn) {
+            throw new Error('selectionColumn must be defined when checkboxSelection is true.');
+        }
+        let finalColumns;
+        if (checkboxSelection && selectionColumn) {
+            if (checkboxPosition === 'start') {
+                finalColumns = [selectionColumn, ...normalized];
+            }
+            else if (checkboxPosition === 'end') {
+                finalColumns = [...normalized, selectionColumn];
+            }
+            else {
+                finalColumns = normalized;
+            }
+        }
+        else {
+            finalColumns = normalized;
+        }
+        setTableColumns(finalColumns);
+    }, [columns, checkboxSelection, checkboxPosition, table]);
+    return {
+        table,
+        pageSize,
+        pageIndex,
+        setPageSize,
+        setPageIndex,
+        rowSelection,
+        sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+    };
+}

package/dist/src/components/Table/table.helpers.d.ts

@@ -0,0 +1,4 @@
+import type { Table } from '@tanstack/react-table';
+import type { FlexColumnDef } from './Table.types';
+export declare function getCheckboxSelectionColumn<T>(table: Table<T>): FlexColumnDef<T>;
+export declare function applyFlexSizes<T>(columns?: FlexColumnDef<T>[], baseSize?: number): FlexColumnDef<T>[];

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getCheckboxSelectionColumn(table) {
+    return {
+        id: 'select',
+        size: 48,
+        header: () => (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx("input", { type: "checkbox", checked: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), className: "w-5 h-5 accent-[var(--uikit-primary)]" }) })),
+        cell: ({ row }) => (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx("input", { type: "checkbox", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), className: "w-5 h-5 accent-[var(--uikit-primary)]" }) })),
+        enableSorting: false,
+        enableColumnFilter: false,
+        meta: { isSelectionColumn: true },
+    };
+}
+export function applyFlexSizes(columns, baseSize = 100) {
+    if (!columns) {
+        return [];
+    }
+    return columns.map((col) => {
+        var _a;
+        return ({
+            ...col,
+            size: baseSize * ((_a = col.flex) !== null && _a !== void 0 ? _a : 1),
+        });
+    });
+}

package/dist/{components → src/components}/Tooltip/Tooltip.stories.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { TooltipStoryWrapperProps } from './Tooltip.types';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { TooltipStoryWrapperProps } from './Tooltip.types';
 export declare const TooltipStoryWrapper: React.FC<TooltipStoryWrapperProps>;
 declare const meta: Meta;
 export default meta;

package/dist/{components → src/components}/Tooltip/Tooltip.types.d.ts

@@ -1,4 +1,4 @@
-import { TooltipContent } from './Tooltip';
+import type { TooltipContent } from './Tooltip';
 export interface TooltipStoryWrapperProps extends React.ComponentPropsWithoutRef<typeof TooltipContent> {
     content: string;
     children: React.ReactNode;

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

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

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

@@ -0,0 +1,10 @@
+export * from './Button';
+export * from './Input';
+export * from './Table';
+export * from './Tooltip';
+export * from './Input/Input';
+export * from './Select/Select';
+export * from './RadioGroup/RadioGroup';
+export * from './Checkbox/Checkbox';
+export * from './Switch/Switch';
+export * from './Label/Label';

package/dist/src/components/index.js

@@ -0,0 +1,10 @@
+export * from './Button';
+export * from './Input';
+export * from './Table';
+export * from './Tooltip';
+export * from './Input/Input';
+export * from './Select/Select';
+export * from './RadioGroup/RadioGroup';
+export * from './Checkbox/Checkbox';
+export * from './Switch/Switch';
+export * from './Label/Label';

package/dist/src/config/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import type { UIKitConfig } from './uikitConfig';
+export declare const defaultTheme: UIKitConfig;

package/dist/{config → src/config}/uikitConfig.d.ts

@@ -15,5 +15,5 @@ export type UIKitConfig = {
     colors?: UIKitColors;
     radius?: string;
     fontFamily?: string;
-    [key: string]: any;
+    [key: string]: unknown;
 };

package/dist/src/config/uikitConfig.js

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

package/dist/{context → src/context}/UIKitContext.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { UIKitConfig } from '../config/uikitConfig';
+import type { UIKitConfig } from '../config/uikitConfig';
 export declare const UIKitContext: React.Context<UIKitConfig>;
 export declare const useUIKitTheme: () => UIKitConfig;

package/dist/src/context/UIKitProvider.d.ts

@@ -0,0 +1,5 @@
+import React, { type PropsWithChildren } from 'react';
+import type { UIKitConfig } from '../config/uikitConfig';
+export declare const UIKitProvider: React.FC<PropsWithChildren<{
+    config?: UIKitConfig;
+}>>;