@eml-payments/ui-kit 1.2.9 → 1.3.2

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/DatePicker/DatePicker.d.ts

@@ -1,11 +1,11 @@
 import { type FC } from 'react';
 import { type InputProps } from '../Input';
-interface IDatePickerProps extends Omit<InputProps, 'value' | 'variant' | 'onChange'> {
+export type DatePickerProps = Omit<InputProps, 'value' | 'variant' | 'onChange' | 'error'> & {
     currentDate?: Date;
     dateFormat?: string;
     maxDate?: Date;
     minDate?: Date;
+    error?: string;
     onChangeDate?: (date: Date | undefined) => void;
-}
-export declare const DatePicker: FC<IDatePickerProps>;
-export {};
+};
+export declare const DatePicker: FC<DatePickerProps>;

package/dist/src/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CalendarIcon } from 'lucide-react';
 import { dayjs } from '../../utils';
 import { Calendar } from '../Calendar';
@@ -8,15 +8,20 @@ import { Input } from '../Input';
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
-export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', currentDate, minDate, maxDate, onChangeDate, ...inputProps }) => {
+export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
     const [date, setDate] = useState(currentDate);
     const [value, setValue] = useState(formatDate(currentDate, dateFormat));
-    const [error, setError] = useState(false);
+    const [defaultError, setDefaultError] = useState('');
     const [open, setOpen] = useState(false);
+    useEffect(() => {
+        setDate(currentDate);
+        setValue(formatDate(currentDate, dateFormat));
+        setDefaultError('');
+    }, [currentDate, dateFormat]);
     const onUpdateDate = (selectedDate) => {
         setDate(selectedDate);
         onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(selectedDate);
-        setError(false);
+        setDefaultError('');
     };
     const handleChangeDate = (selectedDate) => {
         onUpdateDate(selectedDate);
@@ -30,12 +35,19 @@ export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYY
             return;
         }
         const parsedDate = dayjs(e.target.value, dateFormat, true);
-        if (parsedDate.isValid()) {
+        onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(parsedDate.toDate());
+        if (!parsedDate.isValid()) {
+            setDefaultError('Invalid date format');
+            return;
+        }
+        const isWithinRange = (!minDate || parsedDate.isSameOrAfter(dayjs(minDate), 'day')) &&
+            (!maxDate || parsedDate.isSameOrBefore(dayjs(maxDate), 'day'));
+        if (isWithinRange) {
             onUpdateDate(parsedDate.toDate());
         }
         else {
-            setError(true);
+            setDefaultError('Date is out of range');
         }
     };
-    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error ? 'Invalid date format' : undefined, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeDate }) })] }) }));
+    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error !== null && error !== void 0 ? error : defaultError, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeDate }) })] }) }));
 };

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const WithError: Story;
+export declare const WithDateRange: Story;

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

@@ -11,6 +11,15 @@ const meta = {
             },
         },
     },
+    render: (args) => {
+        const convertedArgs = {
+            ...args,
+            currentDate: args.currentDate ? new Date(args.currentDate) : undefined,
+            minDate: args.minDate ? new Date(args.minDate) : undefined,
+            maxDate: args.maxDate ? new Date(args.maxDate) : undefined,
+        };
+        return _jsx(DatePicker, { ...convertedArgs });
+    },
     argTypes: {
         placeholder: {
             control: 'text',
@@ -29,6 +38,14 @@ const meta = {
             control: 'date',
             description: 'Initial date value',
         },
+        minDate: {
+            control: 'date',
+            description: 'Minimum selectable date',
+        },
+        maxDate: {
+            control: 'date',
+            description: 'Maximum selectable date',
+        },
         onChangeDate: {
             action: 'dateChanged',
             description: 'Callback fired when date changes',
@@ -73,3 +90,17 @@ export const WithError = {
         },
     },
 };
+export const WithDateRange = {
+    args: {
+        label: 'Select Date (Limited Range)',
+        minDate: new Date(2024, 0, 1),
+        maxDate: new Date(2025, 11, 31),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker with minimum and maximum date constraints. Users can only select dates within the specified range.',
+            },
+        },
+    },
+};

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

@@ -24,7 +24,6 @@ export function useInfiniteScrolling(params) {
         count: allRows.length + (isInfinite && hasNextPage ? 1 : 0),
         getScrollElement: () => parentScrollRef.current,
         estimateSize: () => { var _a; return (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.rowEstimate) !== null && _a !== void 0 ? _a : 48; },
-        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);

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
@@ -12,7 +12,17 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
     const columnVisibility = useMemo(() => {
         return Object.fromEntries(stableGrouping.map((columnId) => [columnId, false]));
     }, [stableGrouping]);
-    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!parentScrollRef.current)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(parentScrollRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled)));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
     const [internalRowSelection, setInternalRowSelection] = useState(() => {
         if (selectedRowIds) {
@@ -98,7 +108,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
         return checkboxSelection ? getCheckboxSelectionColumn(table) : null;
     }, [checkboxSelection, table]);
     useEffect(() => {
-        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : []);
+        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled));
         let finalColumns;
         if (checkboxSelection && selectionColumn) {
             if (checkboxPosition === 'start') {
@@ -115,7 +125,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
             finalColumns = normalized;
         }
         setTableColumns(finalColumns);
-    }, [columns, checkboxSelection, checkboxPosition]);
+    }, [columns, checkboxSelection, checkboxPosition, containerWidth, virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled]);
     return {
         table,
         height,

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

@@ -1,4 +1,8 @@
 import type { Table } from '@tanstack/react-table';
 import type { FlexColumnDef } from './Table.types';
 export declare function getCheckboxSelectionColumn<T>(table: Table<T>): FlexColumnDef<T>;
-export declare function applyFlexSizes<T>(columns?: FlexColumnDef<T>[], baseSize?: number): FlexColumnDef<T>[];
+export type VirtualFlexColumnDef<T> = FlexColumnDef<T> & {
+    size?: number;
+    _virtualLocked?: boolean;
+};
+export declare function applyFlexSizes<T>(columns?: FlexColumnDef<T>[], containerWidth?: number, virtualizationEnabled?: boolean): VirtualFlexColumnDef<T>[];

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

@@ -23,15 +23,20 @@ export function getCheckboxSelectionColumn(table) {
         meta: { isSelectionColumn: true },
     };
 }
-export function applyFlexSizes(columns, baseSize = 100) {
-    if (!columns) {
+export function applyFlexSizes(columns, containerWidth = 0, virtualizationEnabled = false) {
+    if (!columns)
         return [];
+    if (!virtualizationEnabled || containerWidth === 0) {
+        return columns;
     }
+    const totalFlex = columns.reduce((sum, col) => { var _a; return sum + ((_a = col.flex) !== null && _a !== void 0 ? _a : 1); }, 0);
     return columns.map((col) => {
         var _a;
-        return ({
+        const px = Math.round((containerWidth * ((_a = col.flex) !== null && _a !== void 0 ? _a : 1)) / totalFlex);
+        return {
             ...col,
-            size: baseSize * ((_a = col.flex) !== null && _a !== void 0 ? _a : 1),
-        });
+            size: px,
+            _virtualLocked: true,
+        };
     });
 }

package/dist/src/utils/dayjs.js

@@ -4,9 +4,13 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import duration from 'dayjs/plugin/duration';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
 export { dayjs };

package/package.json

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