@eml-payments/ui-kit 1.2.6 → 1.2.7

package/dist/index.d.cts

@@ -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/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/Table.js

@@ -60,16 +60,16 @@ export function Table(props) {
     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: "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: header.column.getCanSort()
+                                        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'
                                                     ? '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: {
+                                                    : 'flex items-center gap-2'), children: [flexRender(header.column.columnDef.header, header.getContext()), !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort() && (_jsx("span", { className: "text-xs", children: {
                                                             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: virtualizationEnabled && rowVirtualizer ? (_jsxs(_Fragment, { children: [_jsx("tr", { style: { height: `${paddingTop}px` }, children: _jsx("td", { colSpan: colSpanFull }) }), isTrulyEmpty && (_jsx("tr", { children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-8 text-center text-muted-foreground", children: noResultsMessage }) })), virtualItems.map((vi) => {
-                                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                                         const isLoaderRow = vi.index >= tableRows.length;
                                         if (isLoaderRow) {
                                             return (_jsx("tr", { className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: hasNextPage
@@ -86,7 +86,7 @@ export function Table(props) {
                                                             : props.tableActionsDropdown.isDisabled, triggerElement: (_g = (_f = (_e = props.tableActionsDropdown).renderCustomTrigger) === null || _f === void 0 ? void 0 : _f.call(_e, row.original)) !== null && _g !== void 0 ? _g : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof props.tableActionsDropdown.isDisabled ===
                                                                 'function'
                                                                 ? props.tableActionsDropdown.isDisabled(row.original)
-                                                                : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.id));
+                                                                : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_j = props.rowIdKey) !== null && _j !== void 0 ? _j : 'id')]));
                                     }), _jsx("tr", { style: { height: `${paddingBottom}px` }, children: _jsx("td", { colSpan: colSpanFull }) })] })) : (_jsxs(_Fragment, { children: [tableContent, (infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && !isTrulyEmpty && (_jsx("tr", { ref: loaderRef, className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: props.isLoading || hasNextPage
                                                 ? ((_e = infiniteScroll.loadingMoreMessage) !== null && _e !== void 0 ? _e : 'Loading more...')
                                                 : ((_f = infiniteScroll.noMoreDataMessage) !== null && _f !== void 0 ? _f : 'Nothing more to load') }) }))] })) })] }) }), !((_g = props.infiniteScroll) === null || _g === void 0 ? void 0 : _g.enabled) && (_jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination }))] }));

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

@@ -11,8 +11,8 @@ export interface UseInfiniteScrollingParams<T extends {
     flatData?: T[] | undefined;
     infiniteScroll?: InfiniteScrollOptions;
     virtualization?: VirtualizationOptions;
-    parentScrollRef: RefObject<HTMLDivElement>;
-    loaderRef?: RefObject<HTMLElement>;
+    parentScrollRef: RefObject<HTMLDivElement | null>;
+    loaderRef?: RefObject<HTMLElement | null>;
 }
 export interface UseInfiniteScrollingReturn<T extends {
     id: string;

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 export function useInfiniteScrolling(params) {
     var _a;
@@ -27,22 +27,33 @@ export function useInfiniteScrolling(params) {
         measureElement: (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 48; },
         overscan: (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.overscan) !== null && _a !== void 0 ? _a : 6,
     });
+    const loadLockRef = useRef(false);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const lastVirtualIndex = virtualItems.length ? virtualItems[virtualItems.length - 1].index : -1;
+    const loaderIndex = allRows.length;
     useEffect(() => {
         if (!virtualizationEnabled || !isInfinite)
             return;
-        if (!rowVirtualizer || !fetchNextPage)
+        if (!fetchNextPage || !hasNextPage || isFetchingNextPage)
             return;
-        if (isFetchingNextPage || !hasNextPage)
+        if (allRows.length === 0)
             return;
-        const items = rowVirtualizer.getVirtualItems();
-        if (!items.length)
+        if (lastVirtualIndex < loaderIndex || loadLockRef.current)
             return;
-        const last = items[items.length - 1];
-        const loaderIndex = allRows.length;
-        if (last.index >= loaderIndex) {
-            fetchNextPage();
-        }
-    });
+        loadLockRef.current = true;
+        Promise.resolve(fetchNextPage()).finally(() => {
+            loadLockRef.current = false;
+        });
+    }, [
+        virtualizationEnabled,
+        isInfinite,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        lastVirtualIndex,
+        loaderIndex,
+        allRows.length,
+    ]);
     useEffect(() => {
         var _a, _b;
         if (!isInfinite || virtualizationEnabled)

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

@@ -19,8 +19,8 @@ export declare function useTableController<T extends {
     virtualizationEnabled: boolean;
     rowVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element> | undefined;
     hasNextPage: boolean;
-    parentScrollRef: import("react").RefObject<HTMLDivElement>;
-    loaderRef: import("react").RefObject<HTMLTableRowElement>;
+    parentScrollRef: import("react").RefObject<HTMLDivElement | null>;
+    loaderRef: import("react").RefObject<HTMLTableRowElement | null>;
     infiniteScroll: import("..").InfiniteScrollOptions | undefined;
     virtualization: import("..").VirtualizationOptions | undefined;
 };

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

@@ -25,11 +25,19 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
     });
     const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, id);
     const isInfinite = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
+    const dataPages = useMemo(() => {
+        if (!isInfinite) {
+            return undefined;
+        }
+        return [{ rows: safeData }];
+    }, [isInfinite, safeData.length]);
+    const infiniteOpts = useMemo(() => infiniteScroll, [infiniteScroll]);
+    const virtualizationOpts = useMemo(() => virtualization, [virtualization]);
     const { allRows, virtualizationEnabled, rowVirtualizer, hasNextPage } = useInfiniteScrolling({
-        dataPages: Array.isArray(data) ? [{ rows: data }] : undefined,
+        dataPages,
         flatData: data,
-        infiniteScroll,
-        virtualization,
+        infiniteScroll: infiniteOpts,
+        virtualization: virtualizationOpts,
         parentScrollRef,
         loaderRef,
     });

package/package.json

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