@indico-data/design-system 3.0.10 → 3.2.0

package/lib/index.d.ts

@@ -181,10 +181,15 @@ type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IndiconName = keyof typeof indicons;
 type IconName = IndiconName | `fa-${IconName$1}`;
 type IconProps = PermafrostComponent & {
+    /** The name of the icon */
     name: IconName;
+    /** Accessible label for the icon */
     ariaLabel?: string;
+    /** Size of the icon */
     size?: IconSizes;
+    /** Inline styles for the icon */
     style?: CSSProperties;
+    /** Click event handler */
     onClick?: MouseEventHandler<SVGElement>;
 };
 
@@ -204,23 +209,38 @@ interface PinnableColumn<T> extends TableColumn$1<T> {
 }
 type TableColumn<T> = PinnableColumn<T>;
 interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+    /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
     columns: TableColumn<T>[];
+    /** Disables the Table section */
     isDisabled?: boolean;
+    /** It sets the loading of the table */
     isLoading?: boolean;
+    /** Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR). */
     direction?: Direction;
+    /** Show a sub header between the table and table header */
     subHeaderAlign?: 'left' | 'right' | 'center';
+    /** Enables height to be set to the full height of the container */
     isFullHeight?: boolean;
+    /** The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed. */
     totalEntriesText?: string;
+    /** Allows the pinning of columns to the left hand side. This is required when using the column pin API */
     canPinColumns?: boolean;
+    /** Callback that receives the IDs of the pinned columns when they change. */
     onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
 }
 
 type PillSize = 'sm' | 'md' | 'lg';
-type PillColor = SemanticColor | 'neutral';
+type PillColor = ChromaticColor;
+type PillShade = 1 | 2 | 3 | 4 | 5;
 interface PillProps {
+    /** The content displayed inside the pill */
     children: React$1.ReactNode | React$1.ReactNode[];
+    /** Applies a CSS class to change the style of the pill */
     color?: PillColor;
+    /** Applies a CSS class to change the size of the pill */
     size?: PillSize;
+    /** Applies a CSS class to change the shade of the pill */
+    shade?: PillShade;
     className?: string;
 }
 
@@ -231,27 +251,77 @@ type PermafrostComponent = {
     'data-testid'?: string;
 };
 
-type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'teal' | 'purple' | 'orange' | 'pending';
+type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' | 'pink' | 'orange' | 'teal';
 
 type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonTypes = 'button' | 'submit' | 'reset';
 interface ButtonProps {
+    /**
+     * The class name to apply to the button
+     */
     className?: string;
+    /**
+     * The aria-label to apply to the button
+     */
     ariaLabel: string;
+    /**
+     * The children to apply to the button
+     */
     children?: React.ReactNode | React.ReactNode[];
+    /**
+     * The function to call when the mouse enters the button
+     */
     onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The function to call when the mouse exits the button
+     */
     onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    isLoading?: boolean;
+    /**
+     * The function to call when the button is clicked
+     */
     onClick?: (...args: any[]) => void;
+    /**
+     * The function to call when the button is pressed
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Determines the visual style and emphasis level of the button
+     */
     variant?: ButtonVariants;
+    /**
+     * Disables the button and shows a load spinner on the left hand side of the button children by default.
+     * If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
+     * If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.
+     */
+    isLoading?: boolean;
+    /**
+     * Makes the button round, pill-shaped when true
+     */
     isPill?: boolean;
+    /**
+     * The icon to display on the left hand side of the button
+     */
     iconLeft?: IconName;
+    /**
+     * The icon to display on the right hand side of the button
+     */
     iconRight?: IconName;
+    /**
+     * Controls the button's padding and text size
+     */
     size?: ButtonSizes;
+    /**
+     * The type of the button
+     */
     type?: ButtonTypes;
+    /**
+     * URL destination for the button when it needs to function as a link
+     */
     href?: string;
+    /**
+     * Disables the button
+     */
     isDisabled?: boolean;
 }
 
@@ -292,11 +362,17 @@ declare const LabeledInput: React$1.ForwardRefExoticComponent<Omit<InputProps &
 
 interface RadioProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this radio belongs to. */
     id: string;
+    /** The label for the Radio field */
     label: string;
+    /** The name for the Radio field */
     name: string;
+    /** This holds the value that will be emitted when the radio is selected */
     value?: string;
+    /** onChange event handler */
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /** Toggles the disabled state of the Radio field */
     isDisabled?: boolean;
     defaultChecked?: boolean;
 }
@@ -304,12 +380,19 @@ declare const Radio: React$1.ForwardRefExoticComponent<Omit<RadioProps, "ref"> &
 
 interface CheckboxProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this checkbox belongs to. */
     id: string;
+    /** The label for the checkbox field */
     label: string;
+    /** The name for the checkbox field */
     name: string;
+    /** This holds the value that will be emitted when the checkbox is selected */
     value?: string;
+    /** Toggles the checked state of the checkbox field when true */
     isChecked?: boolean | undefined;
+    /** onChange event handler */
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /** Toggles the disabled state of the checkbox field */
     isDisabled?: boolean;
     defaultChecked?: boolean;
     className?: string;
@@ -318,12 +401,19 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "r
 
 interface ToggleProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this toggle belongs to. */
     id: string;
+    /** The label for the toggle field */
     label?: string;
+    /** The name for the toggle field */
     name: string;
+    /** This holds the value that will be emitted when the toggle is selected */
     value?: string;
+    /** onChange event handler */
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /** This disables the toggle */
     isDisabled?: boolean;
+    /** This is the state of the toggle */
     isChecked?: boolean;
     defaultChecked?: boolean;
 }
@@ -338,12 +428,19 @@ interface TextareaProps extends LabelProps {
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
+    /** The number of rows for the textarea field */
     rows?: number;
+    /** Specifies the visible width of a text area */
     cols?: number;
+    /** Sets the textarea field to readonly */
     readonly?: boolean;
+    /** Sets the wrap attribute for the textarea field */
     wrap?: 'hard' | 'soft';
+    /** Specifies which form the text area belongs to */
     form?: string;
+    /** Specifies the maximum number of characters allowed in the text area */
     maxLength?: number;
+    /** Specifies that a text area should automatically get focus when the page loads */
     autofocus?: boolean;
     defaultValue?: string;
     tabIndex?: number;
@@ -360,31 +457,49 @@ interface PasswordInputProps extends LabelProps {
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
+    /** Toggles the visibility of the password */
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionType> {
+    /** Options for the select component */
     options: OptionType[];
+    /** The label for the select component */
     label?: string;
+    /** The name of the select component */
     name?: string;
+    /** Toggles the visibility of the label */
     hasHiddenLabel?: boolean;
+    /** Additional CSS class for the select component */
+    className?: string;
+    /** The prefix to use for the CSS class names. Changing this will result in losing all default styles */
+    classNamePrefix?: string;
+    /** Event handler for when the selected value changes */
+    onChange?: (newValue: any, actionMeta: any) => void;
 }
 declare const LabeledSelect: React$1.ForwardRefExoticComponent<SelectProps<SelectOption> & LabelProps & React$1.RefAttributes<any>>;
 
 interface DatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The selected day(s). */
     selected?: Date | DateRange | undefined;
+    /** Event handler when a day is selected. */
     onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+    /** Allows you to select a single day, a range of days, or multiple days. */
     mode?: Mode;
+    /** Accepts a CSS class name */
     className?: string;
+    /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    /** Whether to show the time picker. */
     hasTimePicker?: boolean;
+    /** The time value to display in the date picker. */
     timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
@@ -395,8 +510,11 @@ interface DatePickerProps {
     firstWeekContainsDate?: 1 | 4;
     today?: Date;
     isRequired?: any;
+    /** The minimum date that can be selected. */
     min?: number;
+    /** The maximum date that can be selected. */
     max?: number;
+    /** Callback when the time changes. */
     onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;
@@ -414,10 +532,15 @@ declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Elem
 
 interface TimePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The time value to be displayed in the input field */
     timeValue?: string;
+    /** The label for the time picker */
     label?: string;
+    /** The name of the input field */
     name?: string;
+    /** Hides the input label in an accessible way (visually hides the label) */
     hasHiddenLabel?: boolean;
+    /** returns an object with the time and errors if they exist */
     onTimeChange?: (time: string) => void;
     className?: string;
     isReadOnly?: boolean;
@@ -428,33 +551,51 @@ interface TimePickerProps {
 declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, ...rest }: TimePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface Props$3 {
+    /** Allows you to select a single day, a range of days, or multiple days. */
     mode?: Mode;
+    /** A label for assistive technologies. */
     ariaLabel: string;
+    /** Disable dates before this date. */
     disableBeforeDate?: Date;
+    /** Disable dates after this date. */
     disableAfterDate?: Date;
+    /** Disable the date picker. */
     isDisabled?: boolean;
+    /** The id of the input field. */
     id: string;
+    /** The label for the input field. */
     label?: string;
+    /** Event handler when a day is selected. */
     onSelect?: (selected: Date | DateRange | undefined) => void;
     selected?: Date | DateRange | undefined;
+    /** The icon to use as a trigger. */
     triggerIcon: IconName;
+    /** The size of the trigger icon. */
     triggerIconSize: IconSizes;
+    /** Whether the date picker is open. */
     isOpen?: boolean;
+    /** Clear the selected date(s) when the date picker closes. */
     clearOnClose?: boolean;
+    /** Accepts a CSS class name */
     className?: string;
     initialMonth?: Date;
     'data-testid'?: string;
+    /** The portal options for the date picker. Follows floating-ui options. */
     portalOptions?: PortalOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
+    /** The floating options for the date picker. Follows floating-ui options. */
     floatingOptions?: UseFloatingOptions;
 }
 declare const IconTriggerDatePicker: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
 interface SingleInputDatePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
     isDisabled?: boolean;
+    /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
     label?: string;
@@ -463,23 +604,30 @@ interface SingleInputDatePickerProps {
     selected?: Date;
     isOpen?: boolean;
     clearOnClose?: boolean;
+    /** Accepts a CSS class name */
     className?: string;
     inputIconName?: IconName;
     isClearable?: boolean;
     inputPlaceholder?: string;
     errorMessage?: string | undefined;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
     'data-testid'?: string;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** Whether the date picker is read only. */
     isReadOnly?: boolean;
+    /** The tab index of the input field. */
     tabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 declare function SingleInputDatePicker(props: SingleInputDatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputDateRangePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -490,6 +638,7 @@ interface InputDateRangePickerProps {
     month?: Date;
     selected?: DateRange | undefined;
     isOpen?: boolean;
+    /** Whether the date picker is open. */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     className?: string;
     inputIconName?: IconName;
@@ -497,24 +646,32 @@ interface InputDateRangePickerProps {
     toErrorMessage?: string | undefined;
     fromErrorMessage?: string | undefined;
     'data-testid'?: string;
+    /** The gutter width for the date picker. */
     gutterWidth?: number;
     fromLabel?: string;
     toLabel?: string;
     closeOnSelect?: boolean;
     clearOnClose?: boolean;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** Whether the from input is read only. */
     isFromReadOnly?: boolean;
+    /** Whether the to input is read only. */
     isToReadOnly?: boolean;
     toTabIndex?: number;
+    /** The tab index of the from input field. */
     fromTabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 declare function InputDateRangePicker(props: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 interface SingleInputDateTimePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -533,16 +690,24 @@ interface SingleInputDateTimePickerProps {
     inputPlaceholder?: string;
     errorMessage?: string | undefined;
     'data-testid'?: string;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
+    /** The time value to display. */
     timeValue?: string;
+    /** Callback function that is called when the time is changed. */
     onTimeChange?: (time: string) => void;
+    /** Whether the date picker is read only. */
     isReadOnly?: boolean;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The ref of the time picker input field. */
     timePickerRef?: React.LegacyRef<HTMLInputElement>;
     dateTabIndex?: number;
+    /** The tab index of the time input field. */
     timeTabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): react_jsx_runtime.JSX.Element;
@@ -562,33 +727,50 @@ interface FormProps {
 declare const Form: ({ children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
 
 type Props$2 = {
+    /** Additional classes for the skeleton component */
     className?: string;
+    /** The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
     height?: number | string;
+    /** The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
     width?: number | string;
+    /** Sets the skeleton component to be a circle */
     isCircle?: boolean;
+    /** Sets the skeleton component to be full height */
     isFullHeight?: boolean;
 };
 declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type Props$1 = {
+    /** Additional classes for the card component */
     className?: string;
+    /** The content of the card */
     children: React$1.ReactNode;
+    /** The title of the card */
     title?: string;
+    /** The subtitle of the card */
     subtitle?: string;
+    /** Adds a box shadow to the card */
     hasBoxShadow?: boolean;
 };
 declare const Card: React$1.FC<Props$1>;
 
 type FloatUIProps = {
+    /** An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI. */
     children: [ReactElement, ReactElement];
+    /** Sets the aria-label attribute for the FloatUI. */
     ariaLabel: string;
+    /** Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options). */
     floatingOptions?: UseFloatingOptions;
+    /** Controls the visibility of the FloatUI (for controlled mode). */
     isOpen?: boolean;
     className?: string;
+    /** Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body) */
     isPortal?: boolean;
+    /** Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into. */
     portalOptions?: {
         rootId?: string;
     };
+    /** Function to toggle the visibility of the FloatUI (for controlled mode). */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
@@ -596,40 +778,61 @@ declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsO
 
 type MenuProps = {
     children: React$1.ReactNode;
+    /** The class name to apply to the Menu component. */
     className?: string;
 };
 declare function Menu({ children, className, ...rest }: MenuProps): react_jsx_runtime.JSX.Element;
 
-declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ children, className, color, size, shade, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
 type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface BadgeProps {
+    /** Additional classes for the badge component */
     className?: string;
+    /** The content of the badge (superseded by the string prop) */
     children?: React.ReactNode;
+    /** The string to display in the badge. (supersedes children prop) */
     string?: string;
+    /** The size of the badge */
     size?: BadgeSizes;
 }
 
 declare const Badge: ({ className, children, size, string, ...rest }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
+    /** Additional classes for the badge component */
     className?: string;
+    /** The content of the badge (superseded by the string prop) */
     children?: React.ReactNode;
+    /** Whether the modal is open */
     isOpen: boolean;
+    /** Callback function to be called when the modal is closed */
     onRequestClose?: () => void;
+    /** Additional classes for the portal element */
     portalClassName?: string;
+    /** Additional classes for the overlay element */
     overlayClassName?: string;
+    /** The element to use as the app element */
     appElement?: HTMLElement;
+    /** Whether the modal should close when the overlay is clicked */
     shouldCloseOnOverlayClick?: boolean;
+    /** Whether the modal should close when the escape key is pressed */
     shouldCloseOnEsc?: boolean;
     testId?: string;
+    /** Custom content element for the modal */
     contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    /** Custom overlay element for the modal */
     overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    /** The position of the modal opens on the page */
     position?: 'top' | 'center';
     parentSelector?: () => HTMLElement;
+    /** The title of the modal */
     title?: string;
+    /** The subtitle of the modal */
     subtitle?: string;
+    /** The footer of the modal. It accepts a React Component */
     footer?: React.ReactNode;
+    /** The maximum width of the modal in pixels */
     maxWidthInPixels?: number;
 }
 interface ConfirmationModalProps extends ModalProps {
@@ -637,11 +840,17 @@ interface ConfirmationModalProps extends ModalProps {
         dontShowAgain?: boolean;
     }) => void | Promise<void> | Promise<boolean>;
     onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
+    /** Whether the modal should have a checkbox to not show again */
     hasDontShowAgainCheckbox?: boolean;
+    /** The variant of the confirmation button. */
     confirmationButtonVariant?: ButtonVariants;
+    /** The text of the confirmation button */
     confirmationButtonText?: string;
+    /** The text of the cancel button */
     cancelButtonText?: string;
+    /** The icon of the modal */
     icon?: IconName;
+    /** The status of the modal. This will determine the color of the icon. */
     status?: 'info' | 'success' | 'error';
 }
 
@@ -650,10 +859,15 @@ declare const Modal: ({ className, children, isOpen, onRequestClose, portalClass
 declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
 
 type WithPaginationProps = {
+    /** Number of rows to display per pagination page. */
     rowsPerPage: number;
+    /** Total number of rows in the table. */
     rowCount: number;
+    /** Callback when the page changes. */
     onChangePage: (page: number) => void;
+    /** Current page number. */
     currentPage: number;
+    /** Text to display for the total number of entries. */
     totalEntriesText?: string;
     showPagination: true;
 };
@@ -667,33 +881,53 @@ type WithoutPaginationProps = {
 };
 type PaginationProps$1 = WithPaginationProps | WithoutPaginationProps;
 type Props<T extends object> = {
+    /** Array of data items. These are the items that will be displayed in the table cell. */
     data: T[];
+    /** Striped rows */
     isStriped?: boolean;
+    /** Column definitions including an `id` field. This is how you define your table structure. */
     columns: ColumnDef<T & {
         id: string;
     }>[];
+    /** Additional option for class names. */
     className?: string;
+    /** class name for styling the action bar. */
     actionBarClassName?: string;
+    /** Component for table actions with selected items. */
     TableActions?: React.ComponentType<{
         selectedItems: Row$1<any>[];
         unselectRows: () => void;
     }>;
+    /** Error state of the table. */
     error?: {
         hasError: boolean;
         errorMessage?: string;
     };
+    /** Enables row selection or defines selection conditions. */
     enableRowSelection?: boolean | ((row: Row$1<T>) => boolean);
+    /** Function to clear applied filters. */
     clearFilters?: () => void;
+    /** Indicates if filters are applied. */
     hasFilters?: boolean;
+    /** When this is true, the table is considered to be in a loading state. */
     isLoading?: boolean;
+    /** Message to display when the table is loading. */
     isLoadingMessage?: string;
+    /** Columns that are pinned by default. */
     defaultPinnedColumns?: string[];
+    /** Callback when a row is clicked. */
     onClickRow?: ((row: Row$1<T>) => void) | null;
+    /** Callback when a row is clicked. */
     onRowClick?: (row: T) => void;
+    /** Array of active rows. */
     activeRows?: string[];
+    /** Row selection state. */
     rowSelection?: Record<string, boolean>;
+    /** Callback when a row is selected. */
     onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+    /** Callback when all rows are selected. */
     onSelectAllChange?: (isSelected: boolean) => void;
+    /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
     defaultSorting?: SortingState;
 } & PaginationProps$1;
 
@@ -703,27 +937,39 @@ declare function TanstackTable<T extends object>({ columns: defaultColumns, data
 
 interface TooltipProps {
     id: string;
+    /** Whether the tooltip should be shown on click */
     clickToShow?: boolean;
+    /** The delay in milliseconds before the tooltip is shown */
     delayShow?: number;
+    /** The delay in milliseconds before the tooltip is hidden */
     delayHide?: number;
     children: React.ReactNode;
+    /** This is an override for the z-index of the tooltip */
     zIndex?: number;
+    /** The placement of the tooltip */
     place?: PlacesType;
+    /** The content of the tooltip */
     [key: string]: any;
 }
 declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
+    /** The total number of pages to be displayed */
     totalPages: number;
+    /** The current page displayed in the input field. */
     currentPage?: number;
+    /** The css class name for the pagination component */
     className?: string;
+    /** The callback function that is called when the page changes. */
     onChange?: (value: number) => void;
 }
 
 declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface CirclePulseProps {
+    /** The size of the circle */
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** The class name of the circle pulse */
     className?: string;
     [key: string]: any;
 }
@@ -731,25 +977,38 @@ declare function CirclePulse({ size, className, ...rest }: CirclePulseProps): re
 
 declare function BarSpinner({ width, id, height, className, ...rest }: {
     'data-testid'?: string;
+    /** The width of the bar spinner */
     width?: number;
+    /** The id of the tooltip. This needs to match the element that holds it's data attribute */
     id?: string;
+    /** The height of the bar spinner */
     height?: number;
+    /** The class name of the bar spinner */
     className?: string;
     [key: string]: any;
 }): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
+    /** An array of step objects that define the stepper navigation. */
     steps: Step[];
     currentStep?: number;
+    /** The header content for the legend. */
     legendHeader?: ReactNode;
+    /** The footer content for the legend. */
     legendFooter?: ReactNode;
+    /** The function to call when the back button is clicked. */
     onBackClick: () => void;
+    /** The function to call when the next button is clicked. */
     onNextClick: () => void;
+    /** The function to call when the finish button is clicked. */
     onFinishClick: () => void;
+    /** Any item passed to this component as a child will be rendered as a step. */
     children: React.ReactNode;
+    /** The function to call when a step is clicked ont he legend. */
     onStepClick: (step: number) => void;
 }
 interface Step {
+    /** Display text for the step in the sidebar/legend */
     label: string;
     isCompleted?: boolean;
     isNextDisabled?: boolean;
@@ -760,9 +1019,13 @@ interface Step {
 declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }: StepperProps) => react_jsx_runtime.JSX.Element;
 
 interface TruncateProps {
+    /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
     lineClamp?: number;
+    /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
     truncateString: string;
+    /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
     hasTooltip?: boolean;
+    /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
     tooltipId?: string;
     [key: string]: any;
 }