@eml-payments/ui-kit 1.8.0 → 1.8.1

package/README.md

@@ -1,6 +1,6 @@
 # @eml-payments/ui-kit
 
-A fully-typed, design token-driven React UI Kit for modern web apps, powered by TailwindCSS, HeadlessUI, and Tanstack Table.  
+A fully-typed, design token-driven React UI Kit for modern web apps.  
 Built for fast integration, deep customization, and a great developer experience.
 
 ---
@@ -10,13 +10,83 @@ Built for fast integration, deep customization, and a great developer experience
 - **Full TypeScript support** — all types exported
 - **Design token based theming** (via context provider)
 - **Easy theme override** (colors, radius, fonts, etc)
-- **Composable, accessible components** (Button, Input, Table, etc)
-- **Powered by TailwindCSS, HeadlessUI, Tanstack Table**
+- **Composable, accessible components**
 - **Ready-to-use Storybook with live playground**
 - **Clean API, tree-shakable, zero CSS conflicts**
 
 ---
 
+## 🏗️ Tech Stack & Libraries
+
+| Library | What we use it for |
+| --- | --- |
+| [TailwindCSS](https://tailwindcss.com/) | Utility-first styling, design tokens, and theming |
+| [Radix UI](https://www.radix-ui.com/) | Accessible, unstyled primitive components (see below) |
+| [Base UI](https://base-ui.com/) | Headless primitive for the Combobox component |
+| [Tanstack Table](https://tanstack.com/table) | Powerful headless table engine with sorting, filtering, and pagination |
+| [Tanstack Virtual](https://tanstack.com/virtual) | Virtualized infinite scrolling for large table datasets |
+| [react-day-picker](https://daypicker.dev/) | Calendar and date picking primitives |
+| [dayjs](https://day.js.org/) | Lightweight date formatting, parsing, and manipulation |
+| [intl-tel-input](https://intl-tel-input.com/) | International phone number input with country flags and validation |
+| [class-variance-authority](https://cva.style/) | Type-safe component variant definitions |
+| [clsx](https://github.com/lukeed/clsx) + [tailwind-merge](https://github.com/dcastil/tailwind-merge) | Conditional and conflict-free class name merging (`cn()` utility) |
+| [lucide-react](https://lucide.dev/) | Icon set used in Calendar, Combobox, and DatePicker |
+| [react-icons](https://react-icons.github.io/react-icons/) | Icon set used across many components |
+| [Storybook](https://storybook.js.org/) | Interactive component documentation and playground |
+
+---
+
+## 📦 Components
+
+### Radix UI Primitives
+
+These components are built on top of [Radix UI](https://www.radix-ui.com/) for accessible, composable behavior:
+
+| Component | Radix Primitive |
+| --- | --- |
+| `Accordion` | `@radix-ui/react-accordion` |
+| `Avatar` | `@radix-ui/react-avatar` |
+| `Button` | `@radix-ui/react-slot` (for `asChild` composition) |
+| `Checkbox` | `@radix-ui/react-checkbox` |
+| `Dialog` | `@radix-ui/react-dialog` |
+| `Dropdown` | `@radix-ui/react-dropdown-menu` |
+| `Label` | `@radix-ui/react-label` |
+| `Popover` | `@radix-ui/react-popover` |
+| `RadioGroup` | `@radix-ui/react-radio-group` |
+| `Select` / `SelectWrapper` | `@radix-ui/react-select` |
+| `Switch` | `@radix-ui/react-switch` |
+| `Tabs` | `@radix-ui/react-tabs` |
+| `Tooltip` | `@radix-ui/react-tooltip` |
+
+### Data Table
+
+| Component | Powered by |
+| --- | --- |
+| `Table` | `@tanstack/react-table` for headless table logic (sorting, filtering, pagination) and `@tanstack/react-virtual` for infinite scroll virtualization |
+
+### Date & Time
+
+| Component | Powered by |
+| --- | --- |
+| `Calendar` | `react-day-picker` + `lucide-react` icons |
+| `DatePicker` | `react-day-picker` + `dayjs` for date formatting |
+
+### Specialized Inputs
+
+| Component | Powered by |
+| --- | --- |
+| `Combobox` | `@base-ui/react` (headless combobox primitive) + `lucide-react` icons |
+| `PhoneInput` | `intl-tel-input` (international phone input with country flags) |
+| `InputGroup` | `class-variance-authority` for variant styling |
+
+### Custom-built Components
+
+These components are built from scratch with React and TailwindCSS (no external primitive library):
+
+`Alert` · `ButtonGroup` · `Card` · `CopyButton` · `Counter` · `CreditCard` · `Divider` · `DropdownWrapper` · `Ellipsis` · `Input` · `Pills` · `SearchInput` · `Skeleton` · `Spinner` · `Stepper` · `Textarea` · `UICreditCard`
+
+---
+
 ## 🚀 Installation
 
 ```sh
@@ -101,16 +171,6 @@ Any value not set falls back to a sensible default.
 
 ---
 
-## 📦 Components
-
-- `Button` — variants: primary, secondary, ghost, destructive, loading
-- `Input` — label, error state
-- `Table` — full Tanstack Table v8 support, any data shape
-
-(…and more coming soon!)
-
----
-
 ## 🧩 Example: Table
 
 ```tsx

package/dist/index.d.cts

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

package/dist/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/package.json

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