@qodo/design-system 0.20.27 → 0.20.33

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
 import { Column } from '@tanstack/react-table';
 import { Control } from 'react-hook-form';
+import { DateRange } from 'react-day-picker';
 import { default as default_2 } from 'embla-carousel-react';
 import { default as default_3 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -13,6 +14,7 @@ import { FieldValues } from 'react-hook-form';
 import { FormState } from 'react-hook-form';
 import { ForwardRefExoticComponent } from 'react';
 import { FunctionComponent } from 'react';
+import { Header } from '@tanstack/react-table';
 import { HTMLAttributes } from 'react';
 import { IconType } from 'react-icons';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -49,6 +51,7 @@ import { UseFormReturn } from 'react-hook-form';
 import { UseFormSetError } from 'react-hook-form';
 import { UseFormSetFocus } from 'react-hook-form';
 import { UseFormSetValue } from 'react-hook-form';
+import { UseFormSetValues } from 'react-hook-form';
 import { UseFormSubscribe } from 'react-hook-form';
 import { UseFormTrigger } from 'react-hook-form';
 import { UseFormUnregister } from 'react-hook-form';
@@ -92,7 +95,7 @@ export declare type ActionsCellProps = OmittedDropdownProps & {
     showOnHover?: boolean;
 };
 
-export declare function Badge({ className, variant, size, disabled, active, ...props }: BadgeProps): JSX_2.Element;
+export declare function Badge({ className, variant, size, disabled, active, isClickable, ...props }: BadgeProps): JSX_2.Element;
 
 export declare const BadgeCell: (props: BadgeCellProps) => JSX_2.Element;
 
@@ -101,11 +104,12 @@ export declare type BadgeCellProps = BaseCellProps & BadgeProps;
 declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     disabled?: boolean;
     active?: boolean;
+    isClickable?: boolean;
 }
 
 declare const badgeVariants: (props?: ({
-    variant?: "text" | "default" | "secondary" | "outline" | "success" | "warning" | "destructive" | "error" | "primary" | "pending" | null | undefined;
-    size?: "xs" | "sm" | "lg" | "md" | null | undefined;
+    variant?: "text" | "danger" | "success" | "warning" | "emphasis" | "neutral" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const BaseCell: (props: BaseCellProps) => JSX_2.Element;
@@ -139,6 +143,7 @@ declare type BaseSelectProps = {
     inputPlaceholder?: string;
     badgeVariant?: BadgeProps["variant"];
     searchable?: boolean;
+    shouldFilter?: boolean;
     toggleIcon?: ReactNode;
     emptyState?: ReactNode;
     dir?: string;
@@ -153,19 +158,16 @@ declare type BaseSelectProps = {
     size?: "xs" | "default";
     contentMaxWidth?: string;
     contentAlign?: "start" | "center" | "end";
+    contentSide?: "top" | "right" | "bottom" | "left";
+    contentOffset?: number;
+    contentTopOffset?: number;
     error?: boolean;
     renderFooter?: (props: {
         onClose: () => void;
     }) => ReactNode;
+    onToggle?: (value: string, checked: boolean) => void;
 } & Omit<default_3.HTMLAttributes<HTMLDivElement>, "onSelect">;
 
-export declare const borderRadius: {
-    readonly sm: "0.25rem";
-    readonly md: "0.375rem";
-    readonly lg: "0.5rem";
-    readonly xl: "0.75rem";
-};
-
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -180,13 +182,36 @@ export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLBu
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "default" | "xxs" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Card({ className, ...props }: React_2.ComponentProps<"div"> & {
     variant?: string;
 }): JSX_2.Element;
 
+export declare const CardAccordion: ({ icon, title, description, action, children, defaultOpen, open, onOpenChange, className, iconClassName: propsIconClassName, }: CardAccordionProps) => JSX_2.Element;
+
+export declare type CardAccordionProps = {
+    /** Icon element rendered inside the coloured square */
+    icon?: ReactNode;
+    /** Primary label */
+    title: ReactNode;
+    /** Secondary line below the title */
+    description?: ReactNode;
+    /** Slot rendered at the far right (button, badge, etc.) */
+    action?: ReactNode;
+    className?: string;
+    iconClassName?: string;
+    /** Content revealed when the accordion is open */
+    children?: ReactNode;
+    /** Uncontrolled initial open state */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+};
+
 export declare function CardAction({ className, ...props }: React_2.ComponentProps<"div">): JSX_2.Element;
 
 export declare function CardContent({ className, ...props }: React_2.ComponentProps<"div">): JSX_2.Element;
@@ -275,7 +300,7 @@ export declare interface CheckboxProps {
     error?: boolean;
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    label: string;
+    label: React.ReactNode;
     description?: React.ReactNode;
     labelWrapperClassName?: string;
     labelClassName?: string;
@@ -299,31 +324,11 @@ export declare function ClassHelper(styles: any, props: any, debug: boolean): st
 
 export declare function cn(...inputs: ClassValue[]): string;
 
-export declare const colors: {
-    readonly primary: {
-        readonly 50: "#eff6ff";
-        readonly 100: "#dbeafe";
-        readonly 500: "#3b82f6";
-        readonly 600: "#2563eb";
-        readonly 900: "#1e3a8a";
-    };
-    readonly secondary: {
-        readonly 50: "#f8fafc";
-        readonly 100: "#f1f5f9";
-        readonly 500: "#64748b";
-        readonly 600: "#475569";
-        readonly 900: "#0f172a";
-    };
-    readonly success: {
-        readonly 50: "#f0fdf4";
-        readonly 500: "#22c55e";
-        readonly 600: "#16a34a";
-    };
-    readonly error: {
-        readonly 50: "#fef2f2";
-        readonly 500: "#ef4444";
-        readonly 600: "#dc2626";
-    };
+export declare const ColumnResizer: <T extends RowData>({ header, className, }: ColumnResizerProps<T>) => JSX_2.Element;
+
+declare type ColumnResizerProps<T extends RowData> = {
+    header: Header<T, unknown>;
+    className?: string;
 };
 
 export declare const Combobox: React_2.ForwardRefExoticComponent<ComboboxProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -353,6 +358,54 @@ export declare interface ComboboxProps {
 declare interface ComboboxProps_2 extends ComboboxProps, FieldBaseProps {
 }
 
+export declare const DatePicker: ({ value, onChange, presets, selectPresetPlaceholder, className, }: DatePickerProps) => JSX_2.Element;
+
+export declare const DatePickerMenu: ({ value, onChange, presets, selectPresetPlaceholder, className, }: DatePickerMenuProps) => JSX_2.Element;
+
+declare type DatePickerMenuProps = {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    presets?: DatePickerPreset[];
+    selectPresetPlaceholder?: string;
+    className?: string;
+};
+
+export declare type DatePickerPreset = {
+    label: string;
+    value: string;
+    getDate: () => Date;
+};
+
+export declare type DatePickerProps = {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    presets?: DatePickerPreset[];
+    selectPresetPlaceholder?: string;
+    className?: string;
+};
+
+export { DateRange }
+
+export declare const DateRangePicker: ({ value, onChange, className, }: DateRangePickerProps) => JSX_2.Element;
+
+/**
+ * Two-month side-by-side range calendar panel.
+ * Use inside a Popover or inline — no trigger included.
+ */
+export declare const DateRangePickerMenu: ({ value, onChange, className, }: DateRangePickerMenuProps) => JSX_2.Element;
+
+declare type DateRangePickerMenuProps = {
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    className?: string;
+};
+
+export declare type DateRangePickerProps = {
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    className?: string;
+};
+
 export declare function Dialog({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Root>): JSX_2.Element;
 
 export declare function DialogClose({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Close>): JSX_2.Element;
@@ -457,6 +510,121 @@ declare interface FieldBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }
 
+/**
+ * A horizontal flex container for active filter chips.
+ * Renders children (FilterSelectChip / FilterInputChip) in a wrapping row.
+ */
+export declare const FilterChipsBar: ({ children, className: propsClassName, }: FilterChipsBarProps) => JSX_2.Element;
+
+declare type FilterChipsBarProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+/**
+ * An active-filter chip backed by a DatePickerMenu popover.
+ * Shows icon + label + current date; clicking opens the calendar, the X clears the filter.
+ * Mirrors the FilterSelectChip pattern but for date values.
+ */
+export declare const FilterDateChip: ({ icon, label, value, onChange, presets, }: FilterDateChipProps) => JSX_2.Element;
+
+declare type FilterDateChipProps = {
+    icon: ReactNode;
+    label: string;
+    value: Date | undefined;
+    onChange: (date: Date | undefined) => void;
+    presets?: DatePickerPreset[];
+};
+
+/**
+ * A free-text filter row designed for use inside FiltersDropdown.
+ * The trigger shows the label and a ChevronRight; a panel opens to the right
+ * with a search input and apply/cancel/clear actions.
+ */
+export declare const FilterDropdownInputItem: ({ icon, label, value, onValueChange, searchPlaceholder, clearLabel, cancelLabel, applyLabel, className: propsClassName, }: FilterDropdownInputItemProps) => JSX_2.Element;
+
+declare type FilterDropdownInputItemProps = {
+    icon?: ReactNode;
+    label: string;
+    value: string | undefined;
+    onValueChange: (value: string | undefined) => void;
+    searchPlaceholder: string;
+    clearLabel: string;
+    cancelLabel: string;
+    applyLabel: string;
+    className?: string;
+};
+
+/**
+ * A Select-based filter row designed for use inside FiltersDropdown.
+ * The trigger shows the label and a ChevronRight; the select panel opens to the right.
+ */
+export declare const FilterDropdownSelectItem: ({ icon, label, className: propsClassName, ...selectProps }: FilterDropdownSelectItemProps) => JSX_2.Element;
+
+declare type FilterDropdownSelectItemProps = {
+    icon?: ReactNode;
+    label: string;
+    className?: string;
+} & Omit<SelectProps, PlacementControlledKeys>;
+
+/**
+ * An active-filter chip backed by a free-text input dropdown.
+ * Shows icon + label + current value; clicking opens an input panel, the X clears the filter.
+ */
+export declare const FilterInputChip: ({ icon, label, value, onValueChange, searchPlaceholder, clearLabel, cancelLabel, applyLabel, }: FilterInputChipProps) => JSX_2.Element;
+
+declare type FilterInputChipProps = {
+    icon: ReactNode;
+    label: string;
+    value: string | undefined;
+    onValueChange: (value: string | undefined) => void;
+    searchPlaceholder: string;
+    clearLabel: string;
+    cancelLabel: string;
+    applyLabel: string;
+};
+
+/**
+ * A popover-based filter panel trigger.
+ * Renders a ghost button with title + optional icon; children populate the popover content.
+ */
+export declare const FiltersDropdown: ({ title, icon, children, className: propsClassName, open, onOpenChange, }: FiltersDropdownProps) => JSX_2.Element;
+
+declare type FiltersDropdownProps = {
+    title?: string;
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+
+/**
+ * An active-filter chip backed by a Select dropdown.
+ * Shows icon + label + current value; clicking opens the select, the X clears the filter.
+ */
+export declare const FilterSelectChip: ({ icon, label, activeValue, onClear, ...selectProps }: FilterSelectChipProps) => JSX_2.Element;
+
+declare type FilterSelectChipProps = {
+    icon: ReactNode;
+    label: string;
+    activeValue: ReactNode;
+    onClear: () => void;
+} & Omit<SelectProps, PlacementControlledKeys_2>;
+
+/**
+ * A read-only filter chip — shows icon + label: value with an X to clear.
+ * The chip body is non-interactive; only the X button is clickable.
+ */
+export declare const FilterStaticChip: ({ icon, label, value, onClear, }: FilterStaticChipProps) => JSX_2.Element;
+
+declare type FilterStaticChipProps = {
+    icon: ReactNode;
+    label: string;
+    value: ReactNode;
+    onClear: () => void;
+};
+
 declare interface FooterItemType extends BaseMenuItemType {
     action?: () => void;
 }
@@ -553,6 +721,8 @@ export declare const Input: React_2.ForwardRefExoticComponent<Omit<InputProps, "
 
 export declare interface InputProps extends React_2.ComponentProps<"input">, VariantProps<typeof inputVariants> {
     error?: boolean;
+    startIcon?: React_2.ReactNode;
+    endIcon?: React_2.ReactNode;
 }
 
 declare type InputProps_2 = InputProps & FieldBaseProps;
@@ -593,6 +763,8 @@ export declare type InsightCardProps = {
 export declare type LoadingSkeletonProps = {
     columnsCount: number;
     rowsCount?: number;
+    columnSizes?: React.CSSProperties[];
+    columnClassNames?: string[];
 };
 
 declare interface MenuLabelType extends TypeGuard<"MenuLabel"> {
@@ -620,6 +792,7 @@ declare type Option_2 = {
     disabled?: boolean;
     description?: string;
     disableChildrenOnParentSelect?: boolean;
+    showIndeterminateCheckbox?: boolean;
 };
 export { Option_2 as Option }
 
@@ -641,6 +814,10 @@ export declare type PaginationStepperProps<T extends RowData> = {
     isLoading?: boolean;
 };
 
+declare type PlacementControlledKeys = "className" | "toggleIcon" | "renderValue" | "contentAlign" | "contentSide";
+
+declare type PlacementControlledKeys_2 = "className" | "toggleIcon" | "renderValue" | "contentAlign" | "contentSide";
+
 export declare function Progress({ className, value, ...props }: React_2.ComponentProps<typeof ProgressPrimitive.Root>): JSX_2.Element;
 
 export declare const RadioGroup: default_3.ForwardRefExoticComponent<RadioGroupProps & default_3.RefAttributes<HTMLDivElement>>;
@@ -704,12 +881,24 @@ export declare type RadioOption = {
     tooltip?: string;
 };
 
-export declare const SearchInput: ({ containerClassName, className: propsClassName, searchSize, disabled, disableFilterIcon, ...rest }: SearchInputProps) => JSX_2.Element;
+export declare const ResizableHeader: <T extends RowData>({ header, children, resizerClassName, }: ResizableHeaderProps<T>) => JSX_2.Element;
+
+declare type ResizableHeaderProps<T extends RowData> = {
+    header: Header<T, unknown>;
+    children: React.ReactNode;
+    resizerClassName?: string;
+};
+
+export declare const SearchInput: ({ containerClassName, className: propsClassName, searchSize, disabled, disableFilterIcon, debounceMs, onDebouncedChange, onChange, ...rest }: SearchInputProps) => JSX_2.Element;
 
 export declare interface SearchInputProps extends InputProps {
     containerClassName?: string;
     searchSize?: (typeof SearchSize)[keyof typeof SearchSize];
     disableFilterIcon?: boolean;
+    /** Fires with the input's string value after the debounce delay. */
+    onDebouncedChange?: (value: string) => void;
+    /** Debounce delay in ms for `onDebouncedChange`. Defaults to 300. */
+    debounceMs?: number;
 }
 
 declare const SearchSize: {
@@ -717,7 +906,7 @@ declare const SearchSize: {
     LARGE: string;
 };
 
-export declare function Select({ value, options, onSelect: propsOnSelect, disabled, readOnly, mode, placeholder, inputPlaceholder, emptyState, triggerClassName, triggerWrapperClassName, badgeClassName, badgeVariant, searchable, toggleIcon, dir, variant, iconPosition, selectionIndicator, onSearchChange, renderValue, size, contentMaxWidth, contentAlign, error, renderFooter, ...rest }: SelectProps): JSX_2.Element;
+export declare function Select({ value, options, onSelect: propsOnSelect, disabled, readOnly, mode, placeholder, inputPlaceholder, emptyState, triggerClassName, triggerWrapperClassName, badgeClassName, badgeVariant, searchable, shouldFilter, toggleIcon, dir, variant, iconPosition, selectionIndicator, onSearchChange, renderValue, size, contentMaxWidth, contentAlign, contentSide, contentOffset, contentTopOffset, error, renderFooter, ...rest }: SelectProps): JSX_2.Element;
 
 declare const SELECT_MODE: {
     SINGLE: string;
@@ -741,7 +930,7 @@ export declare const SelectLabel: React_2.ForwardRefExoticComponent<Omit<SelectP
 
 export declare type SelectProps = SingleSelectProps | MultipleSelectProps;
 
-declare interface SelectProps_2 extends Omit<SelectProps, "value" | "onSelect" | "dir">, FieldBaseProps {
+declare interface SelectProps_2 extends Omit<SelectProps, "value" | "onSelect" | "dir" | "children">, FieldBaseProps {
     options: Option_2[];
     value?: string[];
     readOnly?: boolean;
@@ -783,15 +972,6 @@ declare type SortableHeaderCellProps<T extends RowData> = {
     tooltipContent?: string;
 };
 
-export declare const spacing: {
-    readonly xs: "0.25rem";
-    readonly sm: "0.5rem";
-    readonly md: "1rem";
-    readonly lg: "1.5rem";
-    readonly xl: "2rem";
-    readonly "2xl": "3rem";
-};
-
 export declare const Steps: {
     Root: ({ className: propsClassName, step, ...rest }: React.ComponentProps<typeof Steps_2.Root>) => JSX_2.Element;
     List: ({ className: propsClassName, ...rest }: React.ComponentProps<typeof Steps_2.List>) => JSX_2.Element;
@@ -819,7 +999,7 @@ declare const switchVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const Table: <T extends RowData>({ table, emptyStateComponent, noResultsComponent, errorComponent, isLoading, isError, hasActiveFilter, onRowClick, emptyStateTitle, emptyStateDescription, noResultsTitle, wrapperClassName, loadingRowsCount, activeRowId, paginationMode, onLoadMore, hasMore, loadMoreThreshold, endOfResultsMessage, className: propsClassName, ...restTableProps }: TableProps<T & WithId>) => JSX_2.Element;
+export declare const Table: <T extends RowData>({ table, emptyStateComponent, noResultsComponent, errorComponent, isLoading, isError, hasActiveFilter, onRowClick, emptyStateTitle, emptyStateDescription, noResultsTitle, wrapperClassName, rowClassName, loadingRowsCount, activeRowId, paginationMode, onLoadMore, hasMore, loadMoreThreshold, endOfResultsMessage, className: propsClassName, ...restTableProps }: TableProps<T & WithId>) => JSX_2.Element;
 
 declare const Table_2: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableElement> & {
     wrapperClassName?: string;
@@ -838,6 +1018,7 @@ export declare type TableProps<T extends RowData> = {
     emptyStateDescription?: string;
     noResultsTitle?: string;
     wrapperClassName?: string;
+    rowClassName?: string;
     loadingRowsCount?: number;
     activeRowId?: number | string;
 } & PaginationModeProps & React.ComponentPropsWithoutRef<typeof Table_2>;
@@ -954,27 +1135,12 @@ declare type TypeGuard<T> = {
 
 export declare const Typography: React_2.ForwardRefExoticComponent<TypographyProps & React_2.RefAttributes<HTMLElement>>;
 
-export declare const typography: {
-    readonly fontFamily: {
-        readonly sans: readonly ["Inter", "system-ui", "sans-serif"];
-        readonly mono: readonly ["JetBrains Mono", "monospace"];
-    };
-    readonly fontSize: {
-        readonly xs: "0.75rem";
-        readonly sm: "0.875rem";
-        readonly base: "1rem";
-        readonly lg: "1.125rem";
-        readonly xl: "1.25rem";
-        readonly "2xl": "1.5rem";
-    };
-};
-
 export declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "blockquote" | "ul" | "ol" | "code" | "pre";
 }
 
 export declare const typographyVariants: (props?: ({
-    variant?: "blockquote" | "body" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "list" | "muted" | "large" | "lead" | "code-inline" | "code-block" | "list-ordered" | null | undefined;
+    variant?: "blockquote" | "body" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "list" | "muted" | "large" | "lead" | "mono-body" | "mono-small" | "code-inline" | "code-block" | "list-ordered" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 declare type UseCarouselParameters = Parameters<typeof default_2>;
@@ -990,6 +1156,7 @@ export declare const useFormContext: () => {
     setError: UseFormSetError<FieldValues>;
     clearErrors: UseFormClearErrors<FieldValues>;
     setValue: UseFormSetValue<FieldValues>;
+    setValues: UseFormSetValues<FieldValues>;
     trigger: UseFormTrigger<FieldValues>;
     formState: FormState<FieldValues>;
     resetField: UseFormResetField<FieldValues>;