@eml-payments/ui-kit 1.7.9 → 1.8.1

package/dist/index.d.ts

@@ -0,0 +1,488 @@
+import * as React$1 from 'react';
+import React__default, { PropsWithChildren, InputHTMLAttributes, ComponentProps, ReactNode, JSX } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef, SortingState, Row } from '@tanstack/react-table';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { SelectTrigger as SelectTrigger$1, SelectContent as SelectContent$1 } from '@radix-ui/react-select';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox as Checkbox$1 } from '@radix-ui/react-checkbox';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { Switch as Switch$1 } from '@radix-ui/react-switch';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+type ColorVariant = string | {
+    light: string;
+    dark: string;
+};
+type UIKitColors = {
+    primary?: ColorVariant;
+    secondary?: ColorVariant;
+    accent?: ColorVariant;
+    success?: ColorVariant;
+    warning?: ColorVariant;
+    error?: ColorVariant;
+    info?: ColorVariant;
+    background?: ColorVariant;
+    foreground?: ColorVariant;
+    textPrimary?: ColorVariant;
+    textSecondary?: ColorVariant;
+    [key: string]: ColorVariant | undefined;
+};
+type UIKitConfig = {
+    colors?: UIKitColors;
+    radius?: string;
+    fontFamily?: string;
+    [key: string]: unknown;
+};
+
+declare const UIKitProvider: React__default.FC<PropsWithChildren<{
+    config?: UIKitConfig;
+}>>;
+
+declare const useUIKitTheme: () => UIKitConfig;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "primaryFilled" | "primaryOutlined" | "primaryText" | "secondaryFilled" | "secondaryOutlined" | "secondaryText" | "outlined" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    children: React.ReactNode;
+    asChild?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+    variant?: 'default' | 'search';
+}
+
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type DropdownStructure = 'default' | 'checkbox' | 'radio' | 'grouped' | 'submenu';
+type DropdownOption = {
+    label: string;
+    value?: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onClick?: () => void;
+    disabled?: boolean;
+    subOptions?: DropdownOption[];
+    groupLabel?: string;
+};
+
+type FlexColumnDef<T> = ColumnDef<T> & {
+    flex?: number;
+};
+type InfiniteScrollOptions = {
+    enabled: boolean;
+    hasNextPage: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage: () => void;
+    rootMarginPx?: number;
+    loadingMoreMessage?: string;
+    noMoreDataMessage?: string;
+};
+type PaginationMode = 'client' | 'server' | 'none';
+interface VirtualizationOptions {
+    enabled: boolean;
+    rowEstimate?: number;
+    overscan?: number;
+}
+interface TableProps<T> {
+    id: string;
+    height?: number | string;
+    data: T[];
+    columns: FlexColumnDef<T>[];
+    rowIdKey?: keyof T | 'id';
+    className?: string;
+    isLoading?: boolean;
+    showSkeletonRows?: boolean;
+    checkboxSelection?: boolean;
+    checkboxPosition?: 'start' | 'end';
+    sorting?: SortingState;
+    onSortingChange?: (s: SortingState) => void;
+    onSelectionChange?: (selectedIds: string[]) => void;
+    enableRowSelection?: (row: Row<T>) => boolean;
+    onRefetch?: (pageIndex: number, pageSize: number) => void;
+    isMultiRowSelection?: boolean;
+    totalServerRows?: number;
+    paginationMode?: PaginationMode;
+    noRowsMessage?: string;
+    rowsPerPage?: number;
+    selectedRowIds?: string[];
+    tableActionsDropdown?: {
+        getOptions: (row: T) => DropdownOption[];
+        structure?: DropdownStructure;
+        renderCustomTrigger?: (row: T) => React.ReactNode;
+        menuAlignment?: 'start' | 'end' | 'center' | undefined;
+        isDisabled?: boolean | ((row: T) => boolean);
+    };
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    showHeader?: boolean;
+    grouping?: string[];
+    isSearchActive?: boolean;
+    noSearchResultsMessage?: string;
+    infiniteScroll?: InfiniteScrollOptions;
+    virtualization?: VirtualizationOptions;
+}
+
+declare function Table<T extends {
+    id: string;
+}>(props: Readonly<TableProps<T>>): react_jsx_runtime.JSX.Element;
+
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SelectTriggerProps extends ComponentProps<typeof SelectTrigger$1> {
+    error?: boolean;
+    size?: 'sm' | 'md';
+}
+interface SelectContentProps extends ComponentProps<typeof SelectContent$1> {
+    showAlwaysSearch?: boolean;
+    searchPlaceholder?: string;
+}
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & SelectTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & SelectContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SelectWrapperOptions {
+    label: string;
+    value: string;
+}
+interface SelectWrapperProps {
+    label?: string;
+    options: SelectWrapperOptions[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: 'small' | 'default';
+    disabled?: boolean;
+    error?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+
+declare const SelectWrapper: ({ label, options, value, onChange, size, disabled, error, placeholder, className, }: SelectWrapperProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps extends ComponentProps<typeof Checkbox$1> {
+    label?: string;
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & CheckboxProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface SwitchProps extends ComponentProps<typeof Switch$1> {
+    label?: string;
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & SwitchProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+
+declare const DropdownWrapper: ({ triggerElement, options, className, structure, selectedValue, onValueChange, menuAlignment, isTriggerElementDisabled, }: {
+    triggerElement: React__default.ReactNode;
+    options: DropdownOption[];
+    className?: string;
+    structure?: DropdownStructure;
+    selectedValue?: string;
+    onValueChange?: (value: string) => void;
+    menuAlignment?: "start" | "end" | "center";
+    isTriggerElementDisabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+declare function DropdownMenu({ ...props }: Readonly<React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: Readonly<React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+
+declare const Card: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardHeader: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardTitle: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardDescription: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardAction: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardContent: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+declare const CardFooter: ({ className, ...props }: ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
+
+interface CardContainerProps {
+    title: string;
+    icon: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const CardContainer: ({ title, icon, children, className }: CardContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "error" | "default" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type AlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
+    onClose?: () => void;
+    isVisible?: boolean;
+    disableAnimation?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+
+declare function Alert({ className, variant, onClose, isVisible, disableAnimation, position, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
+
+type AlertContainerProps = AlertProps & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+
+declare const AlertContainer: ({ variant, isVisible, title, description, onClose, className, disableAnimation, position, icon, }: AlertContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+interface DialogContainerProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    triggerElement: React$1.ReactNode;
+    title: string;
+    description?: string;
+    children?: React$1.ReactNode;
+    submitLoader?: boolean;
+    submitLabel?: string;
+    cancelLabel?: string;
+    backLabel?: string;
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    onBack?: () => void;
+    isSubmitDisabled?: boolean;
+    fullScreen?: boolean;
+    showCloseButton?: boolean;
+    showCancelButton?: boolean;
+    showSubmitButton?: boolean;
+    customFooter?: React$1.ReactNode;
+}
+declare function DialogContainer({ open, onOpenChange, triggerElement, title, description, children, submitLoader, submitLabel, cancelLabel, backLabel, onSubmit, onCancel, onBack, isSubmitDisabled, fullScreen, showCloseButton, showCancelButton, showSubmitButton, customFooter, }: Readonly<DialogContainerProps>): react_jsx_runtime.JSX.Element;
+
+type Orientation = 'horizontal' | 'vertical';
+interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: Orientation;
+    color?: string;
+}
+
+declare const Divider: React$1.FC<DividerProps>;
+
+interface PillsProps {
+    label: string;
+    size?: 'default' | 'small';
+    variant?: 'filled' | 'outlined';
+    color?: 'primary' | 'secondary' | 'warning' | 'error' | 'info' | 'success';
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+declare const Pills: ({ label, size, variant, color, onClick, disabled, className, }: PillsProps) => react_jsx_runtime.JSX.Element;
+
+type EllipsisMode = 'end' | 'middle';
+interface EllipsisTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    text: string;
+    maxLength?: number;
+    mode?: EllipsisMode;
+    width?: string;
+}
+
+declare const EllipsisText: React$1.FC<EllipsisTextProps>;
+
+declare const tabsTriggerVariants: (props?: ({
+    color?: "primary" | "secondary" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger> & VariantProps<typeof tabsTriggerVariants> & {
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    vertical?: boolean;
+    onClick?: () => void;
+};
+
+declare function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, vertical, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
+    vertical?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ icon, iconPosition, vertical, color, className, children, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+
+declare function Spinner({ size, color, className, 'aria-label': ariaLabel, }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface UICreditCardProps {
+    cardholderName: string;
+    cardholderNameLabel?: string;
+    cardNumber: string;
+    cardNumberLabel?: string;
+    frontImageUrl: string;
+    backImageUrl: string;
+    cvv?: string;
+    cvvLabel?: string;
+    expiryDate?: string;
+    expiryDateLabel?: string;
+    aspectRatio?: number;
+    classNames?: {
+        container?: string;
+        front?: string;
+        back?: string;
+        fieldLabel?: string;
+        fieldValue?: string;
+        copyIcon?: string;
+    };
+    customFrontContent?: React.ReactNode;
+    customBackContent?: React.ReactNode;
+    isFlipped?: boolean;
+    enableCopy?: boolean;
+}
+
+declare const UICreditCard: ({ cvv, cvvLabel, cardNumber, cardNumberLabel, expiryDate, expiryDateLabel, enableCopy, classNames, backImageUrl, frontImageUrl, cardholderName, cardholderNameLabel, isFlipped, customBackContent, customFrontContent, aspectRatio, }: UICreditCardProps) => JSX.Element;
+
+interface CopyButtonProps {
+    value: string;
+    className?: string;
+}
+
+declare const CopyButton: ({ value, className }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface Step<T extends string = string, P = unknown> {
+    id: T;
+    label: string;
+    content: React.ReactNode | ((props: P & {
+        step: T;
+    }) => React.ReactNode);
+}
+interface StepperProps<T extends string, P = unknown> {
+    steps: Step<T, P>[];
+    currentStep: T;
+    onStepChange?: (step: T) => void;
+    contentProps?: P;
+    className?: string;
+    showIndicators?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}
+
+declare function Stepper<T extends string>({ steps, currentStep, onStepChange, contentProps, className, showIndicators, orientation, }: Readonly<StepperProps<T>>): react_jsx_runtime.JSX.Element;
+
+declare function useStepper<T extends string>(steps: T[], initialStep?: T): {
+    currentStep: T;
+    currentIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+    goNext: () => void;
+    goBack: () => void;
+    goTo: (step: T) => void;
+    reset: () => void;
+};
+
+interface SkeletonProps {
+    variant?: 'text' | 'rectangular' | 'circular' | 'rounded';
+    width?: number | string;
+    height?: number | string;
+    animation?: 'pulse' | 'wave' | false;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+declare function Skeleton({ variant, width, height, animation, className, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface CounterProps {
+    to: number;
+    from?: number;
+    duration?: number;
+    autoStart?: boolean;
+    prefix?: string;
+    suffix?: string;
+    decimals?: number;
+    separator?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onComplete?: () => void;
+    triggerOnVisible?: boolean;
+}
+
+declare function Counter({ to, from, duration, autoStart, prefix, suffix, decimals, separator, className, style, onComplete, triggerOnVisible, }: CounterProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    onSearch: (query: string) => void;
+    onClear?: () => void;
+    debounce?: number;
+    minChars?: number;
+    maxChars?: number;
+    placeholder?: string;
+    clearIcon?: React.ReactNode;
+    className?: string;
+}
+
+declare const SearchInput: React__default.FC<SearchInputProps>;
+
+export { Alert, AlertContainer, type AlertContainerProps, type AlertProps, Avatar, AvatarFallback, AvatarImage, Button, Card, CardAction, CardContainer, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type ColorVariant, CopyButton, type CopyButtonProps, Counter, type CounterProps, Dialog, DialogClose, DialogContainer, type DialogContainerProps, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownWrapper, EllipsisText, type FlexColumnDef, type InfiniteScrollOptions, Input, type InputProps, Label, type PaginationMode, Pills, type PillsProps, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectWrapper, type SelectWrapperOptions, type SelectWrapperProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Step, Stepper, type StepperProps, Switch, Table, type TableProps, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UICreditCard, type UIKitColors, type UIKitConfig, UIKitProvider, type VirtualizationOptions, useStepper, useUIKitTheme };

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

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

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

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

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

@@ -9,6 +9,7 @@ export interface PaginationControlsProps {
     onNextPage: () => void;
     onPrevPage: () => void;
     onPageSizeChange: (size: number) => void;
+    showPageSizeSelector?: boolean;
 }
 export type PageSizeSelectorProps = {
     id: string;

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

@@ -1,2 +1,2 @@
 import type { PaginationControlsProps } from './Pagination.types';
-export declare const PaginationFooter: ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationFooter: ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, showPageSizeSelector, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,8 +3,8 @@ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
 import { PageSizeSelector } from './PageSizeSelector';
 import { Button } from '../../Button';
 import { cn } from '../../../lib/utils';
-export const PaginationFooter = ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }) => {
+export const PaginationFooter = ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, showPageSizeSelector = true, }) => {
     const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
     const endRow = totalRows === 0 ? 0 : Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => onPageSizeChange(Number(val)), size: "small", label: "Rows per page" }), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", onClick: onPrevPage, disabled: !canPrevPage, className: cn({ '!bg-transparent': !canPrevPage }), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, disabled: !canNextPage, className: cn({ '!bg-transparent': !canNextPage }), children: _jsx(FaChevronRight, { className: "!w-3 !h-3" }) })] }))] }));
+    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [showPageSizeSelector && (_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => onPageSizeChange(Number(val)), size: "small", label: "Rows per page" })), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", onClick: onPrevPage, disabled: !canPrevPage, className: cn({ '!bg-transparent': !canPrevPage }), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, disabled: !canNextPage, className: cn({ '!bg-transparent': !canNextPage }), children: _jsx(FaChevronRight, { className: "!w-3 !h-3" }) })] }))] }));
 };

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

@@ -46,5 +46,5 @@ export function StandardTable(props) {
                 customNoRows: props.customNoRows,
                 accordion: enableAccordion,
                 showGroupedTotal: props.showGroupedTotal,
-            }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize })) : null }) }));
+            }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize, showPageSizeSelector: props.showPageSizeSelector })) : null }) }));
 }

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

@@ -15,6 +15,7 @@ export declare const EmptyState: Story;
 export declare const EmptyStateWithIcon: Story;
 export declare const Loading: Story;
 export declare const ClientPagination: Story;
+export declare const HiddenPageSizeSelector: Story;
 export declare const ServerPagination: Story;
 export declare const RowClick: Story;
 export declare const ControlledSorting: Story;

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

@@ -68,6 +68,9 @@ export const Loading = {
 export const ClientPagination = {
     render: () => (_jsx(StandardTable, { id: "client-pagination", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 })),
 };
+export const HiddenPageSizeSelector = {
+    render: () => (_jsx(StandardTable, { id: "hidden-page-size", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5, showPageSizeSelector: false })),
+};
 function ServerPaginationExample() {
     const [rows, setRows] = useState([]);
     const [isLoading, setIsLoading] = useState(false);

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

@@ -59,7 +59,7 @@ export function Table(props) {
     const paddingBottom = Math.max(totalSize - end, 0);
     const tableRows = table.getRowModel().rows;
     const isTrulyEmpty = tableRows.length === 0 && !props.isLoading && !hasNextPage;
-    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && (_jsx("div", { className: classNames('mui-loader', showHeader ? 'mt-4' : 'mt-0') })), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
+    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader mt-4" }), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
                                         return (_jsx("th", { scope: "col", style: { width: header.getSize() }, className: classNames('select-none text-[14px] font-bold ', header.id === 'select' ? 'p-0' : ' p-4 text-left cursor-pointer'), onClick: !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort()
                                                 ? header.column.getToggleSortingHandler()
                                                 : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'

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

@@ -35,12 +35,14 @@ export type VirtualizationOptions = {
 export type ClientPaginationProps = {
     paginationMode?: 'client' | 'none';
     rowsPerPage?: number;
+    showPageSizeSelector?: boolean;
     onRefetch?: never;
     totalServerRows?: never;
 };
 export type ServerPaginationProps = {
     paginationMode: 'server';
     rowsPerPage?: number;
+    showPageSizeSelector?: boolean;
     onRefetch: (pageIndex: number, pageSize: number) => void;
     totalServerRows: number;
 };

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.7.9",
+	"version": "1.8.1",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -109,7 +109,7 @@
 		"lint-staged": "^16.1.2",
 		"postcss": "^8.4.21",
 		"storybook": "^10.0.6",
-		"typescript": "^5.4.0",
+		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.36.0"
 	},
 	"peerDependencies": {