@televet/kibble-ui 4.0.1 → 5.0.0-beta.hotfix.1

package/dist/types/components/SortableList/components/SortableListItem/sortableListItem.component.d.ts

@@ -2,12 +2,24 @@ import { default as React } from 'react';
 import { List } from '@chakra-ui/react/list';
 import { UniqueIdentifier } from '@dnd-kit/core';
 export interface SortableListItemProps {
+    /** Content to be rendered in the list item. */
     content: React.ReactNode;
+    /** Id of the list item. */
     id: UniqueIdentifier;
+    /** Data test id for the list item.
+     * @default kibble-sortable-list-item
+     */
+    'data-testid'?: string;
 }
 interface InternalSortableListItemProps extends SortableListItemProps {
+    /** If true, the drag handle will not be displayed.
+     * @internal
+     */
     hideHandle?: boolean;
+    /** Props to be passed to the list item.
+     * @internal
+     */
     itemProps?: Omit<List.ItemProps, 'id' | 'content'>;
 }
-export declare const SortableListItem: ({ content, hideHandle, id, itemProps, }: InternalSortableListItemProps) => React.JSX.Element;
+export declare const SortableListItem: ({ content, hideHandle, id, itemProps, ["data-testid"]: dataTestId, }: InternalSortableListItemProps) => React.JSX.Element;
 export {};

package/dist/types/components/SortableList/sortableList.component.d.ts

@@ -2,9 +2,21 @@ import { default as React } from 'react';
 import { List } from '@chakra-ui/react/list';
 import { SortableListItemProps } from './components/SortableListItem/sortableListItem.component';
 export interface SortableListProps extends Omit<List.RootProps, 'onChange'> {
+    /**
+     * If true, the drag handle will not be displayed.
+     * @default false
+     */
     hideHandle?: boolean;
+    /** Array of items to be rendered in the list. */
     items: SortableListItemProps[];
+    /** Props to be passed to each sortable list item. Commonly used for styling. */
     itemsProps?: Omit<List.ItemProps, 'id' | 'content'>;
+    /** Callback function triggered when the order of items changes. */
     onChange(items: SortableListItemProps[]): void;
+    /**
+     * Data test id for the sortable list.
+     * @default kibble-sortable-list
+     */
+    'data-testid'?: string;
 }
-export declare const SortableList: ({ hideHandle, items, itemsProps, onChange, ...rest }: SortableListProps) => React.JSX.Element;
+export declare const SortableList: ({ hideHandle, items, itemsProps, onChange, ["data-testid"]: dataTestId, ...rest }: SortableListProps) => React.JSX.Element;

package/dist/types/components/Spinner/spinner.component.d.ts

@@ -4,12 +4,38 @@ import { TextProps } from '../Text/text.component';
 import { TypographyVariant } from '../../shared/types';
 import { SemanticBackgroundColorToken } from '../../theme/semanticTokens';
 export interface SpinnerProps {
+    /**
+     * The background color for the full size spinner.
+     * @default background.alpha.pressed
+     */
     backdropColor?: SemanticBackgroundColorToken;
+    /**
+     * Whether the spinner should cover the entire screen.
+     * @default false
+     */
     fullScreen?: boolean;
+    /** Optional label to display below the spinner. */
     label?: string;
+    /** Props to customize the label of the spinner. See `Text` for more information. */
     labelProps?: Omit<TextProps, 'chilren'>;
-    showLabel?: boolean;
+    /** The size of the spinner. */
     size?: SpinnerSize;
+    /**
+     * The color variant of the spinner.
+     * @default brand
+     */
     variant?: TypographyVariant;
+    /** The color of the spinner. If this value is provided, the variant prop will be ignored. */
+    color?: string;
+    /**
+     * Data test id for the spinner.
+     * @default kibble-spinner
+     */
+    'data-testid'?: string;
+    /**
+     * Whether the spinner should be centered in the container.
+     * @default true
+     */
+    centered?: boolean;
 }
-export declare const Spinner: ({ backdropColor, fullScreen, label, labelProps, showLabel, size, variant, }: SpinnerProps) => React.JSX.Element;
+export declare const Spinner: ({ backdropColor, fullScreen, label, labelProps, size, variant, color, centered, ["data-testid"]: dataTestId, }: SpinnerProps) => React.JSX.Element;

package/dist/types/components/Spinner/spinner.recipe.d.ts

@@ -4,7 +4,7 @@ type SpinnerSlot = (typeof spinnerSlots)[number];
 type SpinnerSlotStyles = {
     [key in SpinnerSlot]?: SystemStyleObject;
 };
-export declare const spinnerRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "spinner", {
+export declare const spinnerRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "spinner" | "root", {
     variant: Record<"accent" | "accentSubtle" | "brand" | "brandOnContrast" | "danger" | "dangerOnContrast" | "default" | "info" | "interactive" | "interactiveOnContrast" | "onContrast" | "placeholder" | "placeholderOnContrast" | "subtle" | "subtleOnContrast" | "success" | "warning", SpinnerSlotStyles>;
     size: Record<string, SpinnerSlotStyles>;
     fullScreen: {
@@ -25,5 +25,20 @@ export declare const spinnerRecipe: import('@chakra-ui/react').SlotRecipeDefinit
             };
         };
     };
+    centered: {
+        true: {
+            root: {
+                alignItems: "center";
+                justifyContent: "center";
+                w: "100%";
+            };
+        };
+        false: {
+            root: {
+                alignItems: "flex-start";
+                justifyContent: "flex-start";
+            };
+        };
+    };
 }>;
 export {};

package/dist/types/components/StyledAvatar/styledAvatar.component.d.ts

@@ -2,6 +2,15 @@ import { default as React } from 'react';
 import { AvatarProps } from '../Avatar/avatar.component';
 import { StyledAvatarType } from './styledAvatar.types';
 export interface StyledAvatarProps extends AvatarProps {
+    /**
+     * Defines the style of the `Avatar`.
+     * @default Client
+     */
     type?: StyledAvatarType;
+    /**
+     * Data test id for the styled avatar.
+     * @default kibble-styled-avatar
+     */
+    'data-testid'?: string;
 }
-export declare const StyledAvatar: ({ type, ...rest }: StyledAvatarProps) => React.JSX.Element;
+export declare const StyledAvatar: React.MemoExoticComponent<({ type, ["data-testid"]: dataTestId, ...rest }: StyledAvatarProps) => React.JSX.Element>;

package/dist/types/components/StyledAvatar/styledAvatar.types.d.ts

@@ -1,2 +1,2 @@
-export declare const styledAvatarTypes: readonly ["Client", "SMS", "TestClient", "Automated", "Clinic"];
+export declare const styledAvatarTypes: readonly ["Client", "SMS", "TestClient", "Automated", "Clinic", "Pet"];
 export type StyledAvatarType = (typeof styledAvatarTypes)[number];

package/dist/types/components/Swatch/swatch.component.d.ts

@@ -2,7 +2,16 @@ import { default as React } from 'react';
 import { BoxProps } from '@chakra-ui/react/box';
 import { SwatchSize } from './swatch.types';
 export interface BaseSwatchProps {
+    /**
+     * Size of the swatch.
+     * @default md
+     */
     size?: SwatchSize;
+    /**
+     * Data test id for the swatch.
+     * @default kibble-swatch
+     */
+    'data-testid'?: string;
 }
 export type SwatchProps = BaseSwatchProps & Omit<BoxProps, 'children'>;
-export declare const Swatch: ({ size, color, backgroundColor, bgColor, borderColor, ...rest }: SwatchProps) => React.JSX.Element;
+export declare const Swatch: ({ size, color, backgroundColor, bgColor, borderColor, ["data-testid"]: dataTestId, ...rest }: SwatchProps) => React.JSX.Element;

package/dist/types/components/Switch/switch.component.d.ts

@@ -3,10 +3,25 @@ import { Switch as CSwitch } from '@chakra-ui/react/switch';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 export interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, 'label' | 'onChange'> {
+    /**
+     * If true, the switch will be indeterminate. This only affects the switch visually and does not modify the checked property.
+     * @default false
+     */
     indeterminate?: boolean;
+    /** Ref to the switch component. */
     rootRef?: React.Ref<HTMLLabelElement | null>;
+    /**
+     * Size of the switch.
+     * @default md
+     */
     size?: FormControlSize;
+    /** Ref to the hiddeninput element. */
     switchRef?: React.Ref<HTMLInputElement | null>;
+    /**
+     * Data test id for the switch.
+     * @default kibble-switch
+     */
+    'data-testid'?: string;
 }
 declare const WrappedSwitch: React.FC<SwitchProps>;
 export { WrappedSwitch as Switch };

package/dist/types/components/Switch/switch.recipe.d.ts

@@ -1,11 +1,12 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { FormVariant } from '../../hocs/withFormControl/withFormControl.types';
-type SwitchSlot = 'root' | 'control' | 'indicator' | 'thumb' | 'label';
+declare const switchSlots: ("label" | "root" | "indicator" | "control" | "thumb")[];
+type SwitchSlot = (typeof switchSlots)[number];
 type SwitchSlotStyles = {
     [key in SwitchSlot]?: SystemStyleObject;
 };
 type SwitchVariant = FormVariant | 'indeterminate' | 'indeterminateOnContrast';
-export declare const switchRecipe: import('@chakra-ui/react').SlotRecipeDefinition<SwitchSlot, {
+export declare const switchRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
     size: Record<"sm" | "md" | "lg", SwitchSlotStyles>;
     variant: Record<SwitchVariant, SwitchSlotStyles>;
 }>;

package/dist/types/components/Tabs/components/Tab/tab.component.d.ts

@@ -4,11 +4,24 @@ import { IconName } from '../../../Icon';
 import { NotificationCounterProps } from '../../../NotificationCounter/notificationCounter.component';
 import { TabIconPosition, TabSize } from './tab.types';
 export interface TabProps extends Tabs.TriggerProps {
+    /** The name of the icon to be displayed. */
     iconName?: IconName;
+    /** The position of the icon. */
     iconPosition?: TabIconPosition;
+    /** The label of the tab. */
     label: string;
+    /** Props to customize the notification counter. */
     notificationCounterProps?: Omit<NotificationCounterProps, 'size'>;
+    /** Whether to show the notification counter to the right of the label or not. */
     showNotificationCounter?: boolean;
+    /**
+     * The size of the tab.
+     * @default md
+     */
     size?: TabSize;
+    /** The value of the tab. */
+    value: string;
+    /** Data test id for the tab. */
+    'data-testid'?: string;
 }
-export declare const Tab: ({ iconName, iconPosition, label, notificationCounterProps, showNotificationCounter, size, ...rest }: TabProps) => React.JSX.Element;
+export declare const Tab: ({ iconName, iconPosition, label, notificationCounterProps, showNotificationCounter, size, ["data-testid"]: dataTestId, ...rest }: TabProps) => React.JSX.Element;

package/dist/types/components/Tabs/tabs.component.d.ts

@@ -4,10 +4,25 @@ import { TabSize } from './components/Tab/tab.types';
 import { TabProps } from './components/Tab/tab.component';
 import { Alignment } from '../../shared/types/alignment';
 export interface TabsProps extends Omit<CTabs.RootProps, 'onChange' | 'variant'> {
+    /** Alignment of the tabs. */
     align?: Alignment;
+    /** Callback function when the tab changes. */
     onChange?: (value: string) => void;
+    /**
+     * Size of the tabs.
+     * @default md
+     */
     size?: TabSize;
+    /** Array of tabs. Each tab should have a value prop. */
     tabs: TabProps[];
-    tabsContents?: CTabs.ContentProps[];
+    /** Array of tab contents, each tab content should have a value prop that matches the value of their corresponding tab. */
+    tabsContent?: CTabs.ContentProps[];
+    /**
+     * Data test id for the tabs.
+     * @default kibble-tabs
+     */
+    'data-testid'?: string;
+    /** The current value of the tabs. */
+    value?: string | null;
 }
-export declare const Tabs: ({ align, onChange, size, tabs, tabsContents, ...rest }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ align, onChange, size, tabs, tabsContent, ["data-testid"]: dataTestId, ...rest }: TabsProps) => React.JSX.Element;

package/dist/types/components/Tabs/tabs.recipe.d.ts

@@ -1,9 +1,10 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-type TabSlot = 'root' | 'list' | 'trigger' | 'content';
+declare const tabSlots: ("content" | "trigger" | "list" | "root" | "indicator" | "contentGroup")[];
+type TabSlot = (typeof tabSlots)[number];
 type TabSlotStyles = {
     [key in TabSlot]?: SystemStyleObject;
 };
-export declare const tabsRecipe: import('@chakra-ui/react').SlotRecipeDefinition<TabSlot, {
+export declare const tabsRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "list" | "root" | "indicator" | "contentGroup", {
     size: Record<"xs" | "sm" | "md" | "lg", TabSlotStyles>;
 }>;
 export {};

package/dist/types/components/Tag/tag.component.d.ts

@@ -3,20 +3,51 @@ import { Tag as CTag } from '@chakra-ui/react/tag';
 import { CloseButtonDisplay, TagSize } from './tag.types';
 import { Status } from '../../shared/types/status';
 export interface BaseTagProps extends Omit<CTag.RootProps, 'children'> {
+    /** Left element for the tag, typically used for icons. */
     leftElement?: React.ReactNode;
+    /** Right element for the tag, typically used for icons. */
     rightElement?: React.ReactNode;
+    /** The text content of the tag. */
     label: string;
+    /**
+     * The display behavior of the close button.
+     * @default never
+     */
     closeButtonDisplay?: CloseButtonDisplay;
+    /**
+     * The size of the tag.
+     * @default md
+     */
     size?: TagSize;
+    /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to 'always' or 'hover'. */
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The color variant of the tag. This determines the background and text color.
+     * @default default
+     */
     variant?: Status;
+    /**
+     * Data test id for the tag.
+     * @default kibble-tag
+     */
+    'data-testid'?: string;
 }
 interface ClosableTagProps extends BaseTagProps {
+    /**
+     * The display behavior of the close button.
+     * @default never
+     */
     closeButtonDisplay: 'always' | 'hover';
+    /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */
     onClose: React.MouseEventHandler<HTMLButtonElement>;
 }
 interface NonClosableTagProps extends BaseTagProps {
+    /**
+     * The display behavior of the close button.
+     * @default never
+     */
     closeButtonDisplay?: 'never';
+    /** Callback function triggered when the close button is clicked. This is only applicable when `closeButtonDisplay` is set to always or hover. */
     onClose?: never;
 }
 export type TagProps = ClosableTagProps | NonClosableTagProps;

package/dist/types/components/Tag/tag.recipe.d.ts

@@ -1,9 +1,10 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-type TagSlot = 'root' | 'label' | 'closeTrigger';
+declare const tagSlots: ("label" | "root" | "startElement" | "endElement" | "closeTrigger")[];
+type TagSlot = (typeof tagSlots)[number];
 type TagSlotStyles = {
     [key in TagSlot]?: SystemStyleObject;
 };
-export declare const tagRecipe: import('@chakra-ui/react').SlotRecipeDefinition<TagSlot, {
+export declare const tagRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "startElement" | "endElement" | "closeTrigger", {
     size: Record<"sm" | "md" | "lg", TagSlotStyles>;
     variant: Record<"default" | "info" | "success" | "warning" | "error", TagSlotStyles>;
     closeButtonDisplay: Record<"hover" | "always" | "never", TagSlotStyles>;

package/dist/types/components/TagBlock/tagBlock.component.d.ts

@@ -2,24 +2,57 @@ import { default as React } from 'react';
 import { MenuProps } from '../Menu/menu.component';
 import { TagBlockTag } from './tagBlock.types';
 interface BaseTagBlockProps {
+    /**
+     * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.
+     * @default false
+     */
     displayTagsInGroups?: boolean;
+    /**
+     * The error message to be displayed if the `hasError` prop is set to true.
+     * @default This field contains an error
+     */
     errorText?: string;
+    /**
+     * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.
+     * @default false
+     */
     hasError?: boolean;
+    /**
+     * If true, a loading spinner will cover the tag block preventing users from making further selections.
+     * @default false
+     */
     loading?: boolean;
+    /** Configuration for the Menu component. See `Menu` stories for more information. */
     menuProps?: MenuProps;
+    /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */
     onClearAll?: () => void;
+    /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */
     onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;
+    /** The selected items to be shown as tags in the tag block. */
     tags: TagBlockTag[];
+    /** The title of the tag block, if provided, will be shown next to the add new menu button. */
     title?: string;
+    /** Data test id for the tag block. */
+    'data-testid'?: string;
 }
 interface DefaultTagBlockProps extends BaseTagBlockProps {
+    /**
+     * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.
+     * @default false
+     */
     canBeDeleted?: false;
+    /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */
     onDelete?: never;
 }
 interface DeletableTagBlockProps extends BaseTagBlockProps {
+    /**
+     * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.
+     * @default false
+     */
     canBeDeleted: true;
+    /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */
     onDelete: () => void;
 }
 export type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;
-export declare const TagBlock: ({ title, menuProps, tags, canBeDeleted, onClearAll, onRemoveTag, onDelete, hasError, errorText, displayTagsInGroups, loading, }: TagBlockProps) => React.JSX.Element;
+export declare const TagBlock: ({ title, menuProps, tags, canBeDeleted, onClearAll, onRemoveTag, onDelete, hasError, errorText, displayTagsInGroups, loading, ["data-testid"]: dataTestId, }: TagBlockProps) => React.JSX.Element;
 export {};

package/dist/types/components/Text/text.component.d.ts

@@ -5,8 +5,21 @@ import { TextSize } from './text.types';
 import { TypographyVariant } from '../../shared/types/typography';
 import { ConditionalValue } from '@chakra-ui/react/styled-system';
 export interface TextProps extends WithTruncationProps, Omit<CTextProps, 'truncate'> {
+    /**
+     * Size of the text.
+     * @default md
+     */
     size?: ConditionalValue<TextSize>;
+    /**
+     * Color variant of the text.
+     * @default default
+     */
     variant?: TypographyVariant;
+    /**
+     * Data test id for the text.
+     * @default kibble-text
+     */
+    'data-testid'?: string;
 }
 declare const WrappedText: React.FC<TextProps>;
 export { WrappedText as Text };

package/dist/types/components/TextInput/textInput.component.d.ts

@@ -3,21 +3,49 @@ import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl
 import { InputProps as CInputProps } from '@chakra-ui/react/input';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 export interface TextInputBaseProps extends WithFormControlProps {
+    /** The maximum number of characters that can be entered into the input. */
     charLimit?: number;
+    /** Ref to the input element. */
     inputRef?: React.Ref<HTMLInputElement | null>;
+    /** Left addon element. */
     leftAddon?: React.ReactNode;
+    /** Left element inside the input. */
     leftElement?: React.ReactNode;
+    /**
+     * If true, the input will render a contrasting variant.
+     * @default false
+     */
     onContrast?: boolean;
+    /** Placeholder text for the input field. */
+    placeholder?: string;
+    /** Right addon element. */
     rightAddon?: React.ReactNode;
+    /** Right element inside the input. */
     rightElement?: React.ReactNode;
+    /** The size of the input. */
     size?: FormControlSize;
+    /**
+     * Data test id for the text input.
+     * @default kibble-text-input
+     */
+    'data-testid'?: string;
 }
 export interface DefaultTextInputProps extends TextInputBaseProps {
+    /**
+     * If true, the input will have a button to clear out the field.
+     * @default false
+     */
     clearable?: never;
+    /** Callback function when the clear button is clicked. */
     onClear?: never;
 }
 export interface ClearableTextInputProps extends TextInputBaseProps {
+    /**
+     * If true, the input will have a button to clear out the field.
+     * @default false
+     */
     clearable?: boolean;
+    /** Callback function when the clear button is clicked. */
     onClear?: (val: string | number | readonly string[]) => void;
 }
 export type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;

package/dist/types/components/Textarea/textarea.component.d.ts

@@ -3,9 +3,22 @@ import { TextareaProps as CTextareaProps } from '@chakra-ui/react/textarea';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 export interface TextareaProps extends WithFormControlProps, CTextareaProps {
+    /** The maximum number of characters that can be entered into the textarea. */
     charLimit?: number;
+    /** Ref to the textarea element. */
     textareaRef?: React.Ref<HTMLTextAreaElement | null>;
+    /** Placeholder text for the textarea. */
+    placeholder?: string;
+    /**
+     * The size of the textarea.
+     * @default md
+     */
     size?: FormControlSize;
+    /**
+     * Data test id for the textarea.
+     * @default kibble-textarea
+     */
+    'data-testid'?: string;
 }
 declare const WrappedTextarea: React.FC<TextareaProps>;
 export { WrappedTextarea as Textarea };

package/dist/types/components/TimePicker/components/TimeList/timeList.component.d.ts

@@ -1,10 +1,19 @@
 import { default as React } from 'react';
 interface ScrollContainerProps {
+    /** Options to display in the list. */
     options: string[];
+    /** Type of the option. */
     optionType: 'hour' | 'minute' | 'meridiem';
+    /** Selected value of the list. */
     selectedValue?: string;
+    /** Callback function to be called when the option is clicked. */
     onClick: (value: string) => void;
+    /** Determines if the list is open. */
     open: boolean;
+    /** Data test id for the list.
+     * @default kibble-timepicker-list
+     */
+    'data-testid'?: string;
 }
-export declare const TimeList: ({ options, optionType, selectedValue, onClick, open, }: ScrollContainerProps) => React.JSX.Element;
+export declare const TimeList: ({ options, optionType, selectedValue, onClick, open, ["data-testid"]: dataTestId, }: ScrollContainerProps) => React.JSX.Element;
 export {};

package/dist/types/components/TimePicker/components/TimeOption/timeOption.component.d.ts

@@ -1,9 +1,17 @@
 import { default as React } from 'react';
 interface TimeOptionProps {
+    /** Ref to the option component. */
     innerRef?: React.Ref<HTMLDivElement | null> | null;
+    /** Callback function to be called when the option is clicked. */
     onClick: (selectedValue: string) => void;
+    /** If true, the option will be selected. */
     selected: boolean;
+    /** Value of the option. */
     value: string;
+    /** Data test id for the option.
+     * @default kibble-timepicker-option
+     */
+    'data-testid'?: string;
 }
-export declare const TimeOption: ({ value, innerRef, onClick, selected }: TimeOptionProps) => React.JSX.Element;
+export declare const TimeOption: ({ value, innerRef, onClick, selected, ["data-testid"]: dataTestId, }: TimeOptionProps) => React.JSX.Element;
 export {};

package/dist/types/components/TimePicker/timePicker.component.d.ts

@@ -2,10 +2,28 @@ import { default as React } from 'react';
 import { TextInputProps } from '../TextInput/textInput.component';
 import { Placement } from '../../shared/types/placement';
 export interface TimePickerProps {
+    /** Initial time to be displayed in the input field. */
     initialTime?: Date;
+    /** Props to customize the input field. See `TextInput` for more information. */
     inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
+    /**
+     * Interval of minutes to be displayed in the dropdown.
+     * @default 5
+     */
     minuteInterval?: number;
+    /** Callback function triggered when the time is changed. */
     onTimeChange?: (time: Date) => void;
+    /** Callback function triggered when the time picker is closed. */
+    onClose?: (time?: Date) => void;
+    /**
+     * Placement of the dropdown relative to the input field.
+     * @default bottom
+     */
     placement?: Placement;
+    /**
+     * Data test id for the time picker.
+     * @default kibble-timepicker
+     */
+    'data-testid'?: string;
 }
-export declare const TimePicker: ({ initialTime, inputProps, minuteInterval, onTimeChange, placement, }: TimePickerProps) => React.JSX.Element;
+export declare const TimePicker: ({ initialTime, inputProps, minuteInterval, onTimeChange, onClose, placement, ["data-testid"]: dataTestId, }: TimePickerProps) => React.JSX.Element;

package/dist/types/components/TimeRange/timeRange.component.d.ts

@@ -2,8 +2,19 @@ import { default as React } from 'react';
 import { FlexProps } from '@chakra-ui/react/flex';
 import { TimePickerProps } from '../TimePicker/timePicker.component';
 export interface TimeRangeProps extends FlexProps {
+    /**
+     * Element that separates the start and end time pickers. By default, a dash is used.
+     * @default -
+     */
     separator?: React.ReactNode;
+    /** Props for the end time picker. See `TimePicker` for more information. */
     endTimePickerProps: TimePickerProps;
+    /** Props for the start time picker. See `TimePicker` for more information. */
     startTimePickerProps: TimePickerProps;
+    /**
+     * Data test id for the time range.
+     * @default kibble-time-range
+     */
+    'data-testid'?: string;
 }
-export declare const TimeRange: ({ endTimePickerProps, separator, startTimePickerProps, ...rest }: TimeRangeProps) => React.JSX.Element;
+export declare const TimeRange: ({ endTimePickerProps, separator, startTimePickerProps, ["data-testid"]: dataTestId, ...rest }: TimeRangeProps) => React.JSX.Element;

package/dist/types/components/Timestamp/timestamp.component.d.ts

@@ -1,11 +1,28 @@
 import { default as React } from 'react';
 import { TextProps } from '../Text/text.component';
 export interface TimestampProps {
+    /** The date to be shown. If it's today, it'll only show the time not the full date */
     date: Date;
+    /**
+     * Format of the time. See date-fns documentation for available formats.
+     * @default h:mma
+     */
     timeFormat?: string;
+    /**
+     * Format of the date. See date-fns documentation for available formats.
+     * @default M/d/yy
+     */
     dateFormat?: string;
+    /**
+     * If true and the date is today, it will only show the time not the full date.
+     * @default true
+     */
     shouldTodayDisplayTimeOnly?: boolean;
+    /** Text shown on hover. If no text is provided, the tooltip wont be shown */
     tooltipLabel?: string;
+    /** Configuration for the Text component. See the `Text` stories for more information. */
     textProps?: Omit<TextProps, 'children'>;
+    /** Data test id for the timestamp. */
+    'data-testid'?: string;
 }
-export declare const Timestamp: ({ date, timeFormat, dateFormat, shouldTodayDisplayTimeOnly, tooltipLabel, textProps, }: TimestampProps) => React.JSX.Element;
+export declare const Timestamp: ({ date, timeFormat, dateFormat, shouldTodayDisplayTimeOnly, tooltipLabel, textProps, ["data-testid"]: dataTestId, }: TimestampProps) => React.JSX.Element;

package/dist/types/components/Toast/components/ToastAction/toastAction.component.d.ts

@@ -2,11 +2,22 @@ import { default as React } from 'react';
 import { ButtonProps } from '../../../Button/button.component';
 import { Status } from '../../../../shared/types/status';
 export interface ToastActionProps extends Omit<ButtonProps, 'children'> {
+    /** Text to display in the button. */
     buttonText: string;
+    /** Position of the button.
+     * @default topRight
+     */
     buttonPosition?: 'topRight' | 'bottomLeft';
+    /** Data test id for the toast action.
+     * @default kibble-toast-action
+     */
+    'data-testid'?: string;
 }
 interface InternalToastActionProps extends ToastActionProps {
+    /** Status of the toast.
+     * @internal
+     */
     status: Status;
 }
-export declare const ToastAction: ({ buttonPosition, buttonText, status, ...rest }: InternalToastActionProps) => React.JSX.Element;
+export declare const ToastAction: ({ buttonPosition, buttonText, status, ["data-testid"]: dataTestId, ...rest }: InternalToastActionProps) => React.JSX.Element;
 export {};