@eml-payments/ui-kit 1.5.1 → 1.5.2

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/Select/Select.js

@@ -5,6 +5,7 @@ import { FaCheck } from 'react-icons/fa6';
 import { IoMdArrowDropdown, IoMdArrowDropup } from 'react-icons/io';
 import { FaSearch } from 'react-icons/fa';
 import { cn } from '../../lib/utils';
+import { Button } from '../Button';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
@@ -14,31 +15,72 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "aria-label": "Scroll down", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(IoMdArrowDropdown, { className: "h-4 w-4" }) })));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = 'popper', showAlwaysSearch = false, searchPlaceholder = 'Search...', ...props }, ref) => {
+const isSelectItemElement = (node) => {
+    return React.isValidElement(node) && node.type === SelectItem;
+};
+const getNodeText = (node) => {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(getNodeText).join('');
+    }
+    if (React.isValidElement(node)) {
+        const nodeProps = node.props;
+        return getNodeText(nodeProps.children);
+    }
+    return '';
+};
+const countSelectItems = (node) => {
+    return React.Children.toArray(node).reduce((count, child) => {
+        if (isSelectItemElement(child)) {
+            return count + 1;
+        }
+        if (!React.isValidElement(child)) {
+            return count;
+        }
+        const childProps = child.props;
+        if (!childProps.children) {
+            return count;
+        }
+        return count + countSelectItems(childProps.children);
+    }, 0);
+};
+const filterSelectChildren = (node, normalizedSearch) => {
+    return React.Children.toArray(node).reduce((acc, child) => {
+        if (!React.isValidElement(child)) {
+            acc.push(child);
+            return acc;
+        }
+        if (isSelectItemElement(child)) {
+            const childProps = child.props;
+            const itemText = getNodeText(childProps.children).toLowerCase();
+            if (itemText.includes(normalizedSearch)) {
+                acc.push(child);
+            }
+            return acc;
+        }
+        const childProps = child.props;
+        if (!childProps.children) {
+            acc.push(child);
+            return acc;
+        }
+        const filteredNestedChildren = filterSelectChildren(childProps.children, normalizedSearch);
+        if (filteredNestedChildren.length > 0) {
+            acc.push(React.cloneElement(child, {}, filteredNestedChildren));
+        }
+        return acc;
+    }, []);
+};
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', showAlwaysSearch = false, searchPlaceholder = 'Search...', noResultsText = 'No results found', noResultsButtonText, onNoResultsButtonClick, ...props }, ref) => {
     const [searchValue, setSearchValue] = React.useState('');
     const searchRef = React.useRef(null);
     const viewportRef = React.useRef(null);
     const totalItems = React.useMemo(() => {
-        let count = 0;
-        const countItems = (node) => {
-            React.Children.forEach(node, (child) => {
-                if (React.isValidElement(child)) {
-                    if (child.type === SelectItem) {
-                        count++;
-                    }
-                    else {
-                        const childProps = child.props;
-                        if (childProps.children) {
-                            countItems(childProps.children);
-                        }
-                    }
-                }
-            });
-        };
-        countItems(children);
-        return count;
+        return countSelectItems(children);
     }, [children]);
     const shouldShowSearch = showAlwaysSearch || totalItems > 7;
+    const normalizedSearch = searchValue.trim().toLowerCase();
     const handleSearchChange = (value) => {
         setSearchValue(value);
         setTimeout(() => {
@@ -66,45 +108,22 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
         }
     };
     const filteredChildren = React.useMemo(() => {
-        var _a;
-        if (!shouldShowSearch || !searchValue) {
+        if (!shouldShowSearch || !normalizedSearch) {
             return children;
         }
-        const filterChild = (child) => {
-            var _a;
-            if (React.isValidElement(child)) {
-                if (child.type === SelectItem) {
-                    const childProps = child.props;
-                    const itemText = typeof childProps.children === 'string'
-                        ? childProps.children
-                        : React.Children.toArray(childProps.children || []).join('');
-                    if (!itemText.toLowerCase().includes(searchValue.toLowerCase())) {
-                        return null;
-                    }
-                }
-                else if (React.isValidElement(child) && child.props) {
-                    const childProps = child.props;
-                    if (childProps.children) {
-                        const filteredGrandChildren = (_a = React.Children.map(childProps.children, filterChild)) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-                        if (!filteredGrandChildren || filteredGrandChildren.length === 0) {
-                            return null;
-                        }
-                        return React.cloneElement(child, {}, filteredGrandChildren);
-                    }
-                }
-            }
-            return child;
-        };
-        const filtered = (_a = React.Children.map(children, filterChild)) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-        return filtered || [];
-    }, [children, shouldShowSearch, searchValue]);
+        return filterSelectChildren(children, normalizedSearch);
+    }, [children, shouldShowSearch, normalizedSearch]);
+    const filteredItemsCount = React.useMemo(() => {
+        return countSelectItems(filteredChildren);
+    }, [filteredChildren]);
+    const noResultsContent = (_jsxs("div", { className: "px-2 py-1.5 flex flex-col items-start gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: noResultsText }), noResultsButtonText && onNoResultsButtonClick && (_jsx(Button, { variant: "primaryText", onMouseDown: (event) => event.preventDefault(), onClick: onNoResultsButtonClick, className: "h-auto p-0 text-sm", children: noResultsButtonText }))] }));
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-(--uikit-radius) border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, onCloseAutoFocus: () => {
                 if (shouldShowSearch) {
                     setSearchValue('');
                 }
             }, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsxs(SelectPrimitive.Viewport, { ref: viewportRef, className: cn('p-1', position === 'popper' &&
-                        'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: [shouldShowSearch && (_jsxs("div", { className: "flex items-center px-2 py-1.5 mb-1", children: [_jsx(FaSearch, { className: "h-4 w-4 mr-2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleSearchKeyDown, className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", autoComplete: "off" })] })), filteredChildren] }), _jsx(SelectScrollDownButton, {})] }) }));
+                        'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: [shouldShowSearch && (_jsxs("div", { className: "flex items-center px-2 py-1.5 mb-1", children: [_jsx(FaSearch, { className: "h-4 w-4 mr-2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleSearchKeyDown, className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground", autoComplete: "off" })] })), filteredItemsCount === 0 ? noResultsContent : filteredChildren] }), _jsx(SelectScrollDownButton, {})] }) }));
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));

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

@@ -10,3 +10,6 @@ export declare const Size: Story;
 export declare const WithError: Story;
 export declare const WithManyOptions: Story;
 export declare const WithSearchEnabled: Story;
+export declare const EmptyOptions: Story;
+export declare const EmptyOptionsWithCustomText: Story;
+export declare const EmptyOptionsWithActionButton: Story;

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

@@ -37,3 +37,14 @@ export const WithManyOptions = {
 export const WithSearchEnabled = {
     render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select a fruit..." }) }), _jsxs(SelectContent, { showAlwaysSearch: true, children: [_jsx(SelectScrollUpButton, { children: _jsx(FaChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(FaChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" })] })] })] })),
 };
+export const EmptyOptions = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, {})] })),
+};
+export const EmptyOptionsWithCustomText = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, { noResultsText: "No matching options available" })] })),
+};
+export const EmptyOptionsWithActionButton = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsx(SelectContent, { noResultsText: "No results found", noResultsButtonText: "Add new option", onNoResultsButtonClick: () => {
+                    console.log('Add new option clicked');
+                } })] })),
+};