@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.40

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-dialog';
 import { ButtonHTMLAttributes } from 'react';
+import { CellContext } from '@tanstack/react-table';
 import { CheckboxProps as CheckboxProps_2 } from '@radix-ui/react-checkbox';
 import { ClassProp } from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+import { ColumnDef as ColumnDef_2 } from '@tanstack/react-table';
 import { ComponentRef } from 'react';
 import { Context } from 'react';
 import { DayPickerProps } from 'react-day-picker';
@@ -11,15 +14,26 @@ import { getAllTimezones } from 'countries-and-timezones';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import * as ReactTabs from '@radix-ui/react-tabs';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
+import { RegionCode } from 'google-libphonenumber';
+import { RowData as RowData_2 } from '@tanstack/react-table';
 import { SliderProps } from '@radix-ui/react-slider';
 import { TabsContentProps } from '@radix-ui/react-tabs';
+import { UseQueryOptions } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
+declare type Action<TData> = {
+    label: string | React.ReactNode;
+    onClick: (rowData: TData) => void;
+    className?: string;
+};
+
 export declare const Alert: FC<AlertProps>;
 
 export declare const AlertDialog: FC<AlertDialogProps>;
@@ -81,16 +95,17 @@ declare type BadgeMultiSelectProps = {
 };
 
 declare type BadgeProps = VariantProps<typeof badgeVariants> & {
-    label: string;
     className?: string;
-    loading?: boolean;
     dismissible?: true;
+    label: string;
+    leftIcon?: ReactNode;
+    loading?: boolean;
     onClick?: VoidFunction;
     onDismiss?: VoidFunction;
 };
 
 declare const badgeVariants: (props?: ({
-    variant?: "info" | "warning" | "danger" | "default" | "success" | null | undefined;
+    variant?: "info" | "warning" | "danger" | "default" | "success" | "violet" | null | undefined;
     size?: "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -170,8 +185,14 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const cn: (...inputs: ClassValue[]) => string;
+
+export declare type ColumnDef<TData extends RowData> = ColumnDef_2<TData, string>;
+
 export declare const Content: FC<TabsContentProps>;
 
+declare type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+
 export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
 
 declare type DateFilterDropdownProps = {
@@ -201,6 +222,7 @@ export declare const DropdownButton: FC<Props>;
 declare type DropdownProps = VariantProps<typeof dropdownVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
     additionalOptions?: ReactNode[] | string[];
     className?: string;
+    disabled?: boolean;
     error?: string;
     helperText?: string;
     highlightSearch?: boolean;
@@ -212,22 +234,48 @@ declare type DropdownProps = VariantProps<typeof dropdownVariants> & Omit<InputH
     labelClassName?: string;
     listClassName?: string;
     listItemClassName?: string;
+    listItemSecondRowClassName?: string;
+    mainWrapperClassName?: string;
     options: Option_3[];
     searchable?: boolean;
     showSearchIcon?: boolean;
     theme?: Theme;
     value?: string;
     wrapperClassName?: string;
+    errorClassName?: string;
+    helperTextClassName?: string;
     onBlur?: VoidFunction;
     onChange?: OnChangeFn;
-};
+    onSearchChange?: (searchTerm: string) => void;
+    noOptionsText?: string;
+} & ({
+    isInfiniteScrollEnabled: true;
+    onFetchMoreOptions: (params: {
+        page: number;
+        pageSize: number;
+        termOfSearch?: string;
+    }) => Promise<{
+        data: Option_3[];
+        hasMore: boolean;
+    }>;
+} | {
+    isInfiniteScrollEnabled?: false | undefined;
+    onFetchMoreOptions?: never;
+});
 
 declare const dropdownVariants: (props?: ({
     hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Filter: FilterComponentProps;
 
+declare type FilterAction = {
+    label: string;
+    onClick: () => void;
+    variant?: ButtonProps['variant'];
+};
+
 declare type FilterComponentProps = FC<FilterProps> & {
     BadgeMultiSelect: FC<BadgeMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;
@@ -266,13 +314,13 @@ export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes
 
 declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
     error?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    isRequired?: boolean;
+    isSearch?: boolean;
     label?: string | ReactNode;
     labelClassName?: string;
     theme?: Theme;
-    isRequired?: boolean;
-    isSearch?: boolean;
-    helperText?: string;
-    helperTextClassName?: string;
 }
 
 declare const inputVariants: (props?: ({
@@ -318,12 +366,47 @@ declare interface ModalProps extends PropsWithChildren, VariantProps<typeof moda
     className?: string;
     container?: Element | DocumentFragment;
     isOpen?: boolean;
+    showCloseButton?: boolean;
     theme?: Theme;
     onClose?: () => void;
 }
 
 declare const modalVariants: (props?: ClassProp | undefined) => string;
 
+export declare const MultiSelectDropdown: FC<MultiSelectDropdownProps>;
+
+declare type MultiSelectDropdownOption = {
+    id: string | number;
+    label: string;
+    tagLabel?: string;
+    tagColor?: TagProps['color'];
+    value?: string;
+};
+
+declare interface MultiSelectDropdownProps extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    label?: string;
+    options: MultiSelectDropdownOption[];
+    name?: string;
+    placeholder?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    multiselect?: boolean;
+    value?: MultiSelectDropdownOption[];
+    onChange?: OnChangeFn_2;
+    onBlur?: OnBlurFn;
+    isLoading?: boolean;
+    noOptionsText?: string;
+}
+
+declare const multiSelectDropdownVariants: (props?: ClassProp | undefined) => string;
+
+declare type MultiSelectFilter = {
+    key: string;
+    label: string;
+    position?: 'right' | 'left';
+    options: Option_5[];
+};
+
 export declare const Navigation: FC<NavigationProps> & NavigationChildrenProps;
 
 declare type NavigationChildrenProps = {
@@ -405,6 +488,11 @@ declare interface NumberInputProps extends VariantProps<typeof numberInputVarian
 
 declare const numberInputVariants: (props?: ClassProp | undefined) => string;
 
+declare type OnBlurFn = (event: {
+    target: HTMLInputElement | null;
+    type?: string;
+}) => void;
+
 declare type OnChangeFn = (params: {
     target: {
         value: string;
@@ -412,13 +500,26 @@ declare type OnChangeFn = (params: {
     };
 }) => void;
 
+declare type OnChangeFn_2 = (params: {
+    target: {
+        value: MultiSelectDropdownOption[];
+        name: string;
+    };
+}) => void;
+
 declare type Option_2 = {
     value: string;
 };
 
 declare type Option_3 = {
-    label: string | ReactNode;
+    label: string;
+    subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
+    leftIconClassName?: string;
+    showRightComponentOnselectedValue?: boolean;
+    rightComponent?: ReactNode | string;
+    rightComponentClassName?: string;
+    wrapperClassNameOnSelectedValue?: string;
     value: string;
 };
 
@@ -433,7 +534,9 @@ declare type Option_5 = {
     variant?: BadgeProps['variant'];
 };
 
-export declare const PieChart: FC<Props_2>;
+export declare const PhoneNumberInput: FC<Props_2>;
+
+export declare const PieChart: FC<Props_3>;
 
 export declare const ProgressBar: FC<ProgressBarProps>;
 
@@ -461,15 +564,33 @@ declare type Props = {
     options: Option_4[];
 };
 
+declare type Props_2 = InputHTMLAttributes<HTMLInputElement> & {
+    defaultCountryCode?: RegionCode;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    isRequired?: boolean;
+    label?: string;
+    labelClassName?: string;
+    name?: string;
+    placeholder?: string;
+    showFlagOnSearch?: boolean;
+    showInputFilter?: boolean;
+    showNameOnSearch?: boolean;
+    showPlaceHolder?: boolean;
+    wrapperClassName?: string;
+};
+
 /**
  * Props for the PieChart component
  */
-declare type Props_2 = {
+declare type Props_3 = {
     /**
      * Array of hexadecimal colors for the borders of the pie chart segments
      * @default ['#FFFFFF', '#FFFFFF']
      */
-    borderColors?: HexColor[];
+    borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
      * Width of the border for pie chart segments in pixels
      * @default 0
@@ -479,7 +600,7 @@ declare type Props_2 = {
      * Array of hexadecimal colors for filling the pie chart segments
      * @default ['#525252', '#00D492']
      */
-    colors?: HexColor[];
+    colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
      * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
      * @default 80
@@ -525,13 +646,11 @@ declare type Props_2 = {
      * @required
      */
     values: number[];
-} & 
-/**
+} /**
 * Union type that enforces either:
 * - No title and no subtitle
 * - Title with optional subtitle
-*/
-({
+*/ & ({
     title?: undefined;
     subtitle?: never;
 } | {
@@ -539,6 +658,70 @@ declare type Props_2 = {
     subtitle?: string;
 });
 
+declare type Props_4<TData extends RowData> = CellContext<TData, string> & {
+    value?: string;
+};
+
+declare type Props_5<TData extends RowData_2> = VariantProps<typeof virtualizeTableVariants> & {
+    id: string | string[];
+    ariaLabel?: string;
+    columns: ColumnDef_2<TData, string>[];
+    data: TData[];
+    className?: string;
+    classNameHeaderActiveArrows?: string;
+    classNameHeaderArrows?: string;
+    classNameHeaderTable?: string;
+    classNameTable?: string;
+    classNameWrapperTable?: string;
+    queryOptions?: Omit<UseQueryOptions<any, any, any, any>, 'queryKey' | 'queryFn'>;
+    isLoading?: boolean;
+    fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
+        data: TData[];
+        totalItemsCount?: number;
+    }>;
+} & ({
+    showPagination: true;
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+    totalItems: number;
+} | {
+    showPagination?: false | undefined;
+    showTotalItems?: never;
+    showDropdownPagination?: never;
+    showDotPagination?: never;
+    showFormPagination?: never;
+    pageSizes?: never;
+    totalItems?: never;
+}) & ({
+    filterSearchPlaceholder?: string;
+    multiSelectFilter?: MultiSelectFilter[];
+    showFilter: true;
+    showFilterInput?: boolean;
+    filterActions?: FilterAction[];
+    showResetButton?: boolean;
+    resetButtonClassName?: string;
+} | {
+    filterSearchPlaceholder?: never;
+    multiSelectFilter?: never;
+    showFilter?: false | undefined;
+    showFilterInput?: never;
+    filterActions?: FilterAction[];
+    showResetButton?: never;
+    resetButtonClassName?: never;
+});
+
+declare type Props_6<TData extends RowData> = CellContext<TData, unknown> & {
+    actions: Action<TData>[];
+    iconTriggerButtonClassName?: string;
+    triggerButtonClassName?: string;
+    wrapperActionsClassName?: string;
+    wrapperClassName?: string;
+    wrapperContentActionsClassName?: string;
+};
+
 export declare const Radio: FC<RadioProps>;
 
 export declare const RadioCard: FC<RadioCardProps>;
@@ -619,6 +802,8 @@ declare type ResetButtonProps = ButtonProps & {
     onClick?: VoidFunction;
 };
 
+export declare type RowData = RowData_2;
+
 declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
     width?: string;
     isSelected?: boolean;
@@ -641,11 +826,12 @@ declare type SidebarChildrenProps = {
 };
 
 declare interface SidebarProps extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
-    wrapperClassName?: string;
-    minWith?: number;
-    maxWith?: number;
     canResize?: boolean;
+    dividerClassName?: string;
+    maxWith?: number;
+    minWith?: number;
     theme?: Theme;
+    wrapperClassName?: string;
 }
 
 export declare const Slider: FC<SliderProps_2>;
@@ -715,7 +901,7 @@ declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
-    color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
     id: string | number;
     label: string;
     rightIcon?: ReactNode;
@@ -806,7 +992,9 @@ declare interface ToastProps extends PropsWithChildren, VariantProps<typeof toas
     setOpen: (open: boolean) => void;
 }
 
-declare const toastVariants: (props?: ClassProp | undefined) => string;
+declare const toastVariants: (props?: ({
+    variant?: "warning" | "error" | "success" | null | undefined;
+} & ClassProp) | undefined) => string;
 
 export declare const Tooltip: FC<TooltipProps>;
 
@@ -818,7 +1006,7 @@ declare interface TooltipProps extends PropsWithChildren, VariantProps<typeof to
 }
 
 declare const tooltipVariants: (props?: ({
-    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Trigger: FC<TriggerProps>;
@@ -833,6 +1021,8 @@ declare const triggerVariants: (props?: ({
     variant?: "default" | "active" | "inactive" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const TruncateText: <TData>({ getValue, value }: Props_4<TData>) => JSX.Element;
+
 export declare const Typography: ForwardRefExoticComponent<Omit<TypographyProps, 'ref'> & RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
 
 declare interface TypographyProps extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
@@ -850,6 +1040,25 @@ export declare const useTheme: () => ThemeProps;
 
 export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];
 
+export declare const VirtualizedTable: VirtualizedTableCompound;
+
+declare type VirtualizedTableCompound = (<TData extends RowData>(props: Props_5<TData>) => JSX_2.Element) & {
+    TruncateText: typeof TruncateText;
+    Actions: <TData extends RowData>(props: Props_6<TData>) => JSX_2.Element | null;
+    displayName?: string;
+};
+
+declare const virtualizeTableVariants: (props?: ClassProp | undefined) => string;
+
 declare const wrapperSiderbarVariants: (props?: ClassProp | undefined) => string;
 
 export { }
+
+
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        className?: string | ((row: TData) => string);
+        attributes?: Record<string, string | number | boolean>;
+        headerClassName?: string;
+    }
+}