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

package/dist/types/components/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.d.ts

@@ -1,8 +1,18 @@
 import { default as React } from 'react';
 export interface ConversationCardAvatarGroupProps {
+    /** Avatars to display in the group. */
     avatars: React.ReactNode[];
+    /** Maximum number of avatars to display.
+     * @default 1
+     */
     max?: number;
+    /** Callback function to be called when the avatar group is clicked. */
     onAvatarGroupClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    /** Label for the tooltip. */
     tooltipLabel?: string;
+    /** Data test id for the avatar group.
+     * @default kibble-conversation-card-avatar-group
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCardAvatarGroup: ({ avatars, max, onAvatarGroupClick, tooltipLabel, }: ConversationCardAvatarGroupProps) => React.JSX.Element;
+export declare const ConversationCardAvatarGroup: ({ avatars, max, onAvatarGroupClick, tooltipLabel, ["data-testid"]: dataTestId, }: ConversationCardAvatarGroupProps) => React.JSX.Element;

package/dist/types/components/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.d.ts

@@ -1,21 +1,42 @@
 import { default as React } from 'react';
 import { MenuProps } from '../../../Menu';
 export interface ConversationCardOverlayProps {
+    /** Determines if the conversation is open in an overlay. */
     isOpenInOverlay?: boolean;
+    /** Callback function to be called when the conversation is opened in an overlay. */
     onOpenInOverlay: () => void;
+    /** Data test id for the overlay button. */
+    'data-testid'?: string;
 }
 export interface ConversationCardPinProps {
+    /** Determines if the conversation is pinned. */
     isPinned?: boolean;
+    /** Callback function to called when the conversation is pinned. */
     onTogglePin: (isPinned: boolean) => void;
+    /** Data test id for the pin button. */
+    'data-testid'?: string;
 }
 export interface ConversationCardButtonsProps {
+    /** Props for the overlay button. */
     overlayProps?: ConversationCardOverlayProps;
+    /** Props for the pin button. */
     pinProps?: ConversationCardPinProps;
+    /** Props for the header Menu. */
     headerMenuProps?: MenuProps;
+    /** Data test id for the buttons.
+     * @default kibble-conversation-card-buttons
+     */
+    'data-testid'?: string;
 }
 interface ConversationCardButtonsComponentProps extends ConversationCardButtonsProps {
+    /** Determines if the conversation is being hovered.
+     * @internal
+     */
     isHovering: boolean;
+    /** Callback function to set the hover state.
+     * @internal
+     */
     setIsHovering: (isHovering: boolean) => void;
 }
-export declare const ConversationCardButtons: ({ overlayProps, pinProps, headerMenuProps, isHovering, setIsHovering, }: ConversationCardButtonsComponentProps) => React.JSX.Element;
+export declare const ConversationCardButtons: ({ overlayProps, pinProps, headerMenuProps, isHovering, setIsHovering, ["data-testid"]: dataTestId, }: ConversationCardButtonsComponentProps) => React.JSX.Element;
 export {};

package/dist/types/components/ConversationCard/components/ConversationCardContent/conversationCardContent.component.d.ts

@@ -1,8 +1,15 @@
 import { default as React } from 'react';
 import { TextProps } from '../../../Text/text.component';
 export interface ConversationCardContentProps {
+    /** Content of the card. */
     content?: React.ReactNode;
+    /** Props to customize the content styling. */
     contentProps?: Omit<TextProps, 'children'>;
+    /** Optional Menu for the card. */
     contentMenu?: React.ReactNode;
+    /** Data test id for the content.
+     * @default kibble-conversation-card-content
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCardContent: ({ contentMenu, content, contentProps, }: ConversationCardContentProps) => React.JSX.Element;
+export declare const ConversationCardContent: ({ contentMenu, content, contentProps, ["data-testid"]: dataTestId, }: ConversationCardContentProps) => React.JSX.Element;

package/dist/types/components/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.d.ts

@@ -2,8 +2,15 @@ import { default as React } from 'react';
 import { IconProps } from '../../../Icon/icon.component';
 import { TextProps } from '../../../Text/text.component';
 export interface ConversationCardFooterProps {
+    /** Props for the Icon component. */
     iconProps?: IconProps;
+    /** Content of the footer. */
     content: React.ReactNode;
+    /** Props to customize the content styling. */
     contentProps?: Omit<TextProps, 'children'>;
+    /** Data test id for the footer.
+     * @default kibble-conversation-card-footer
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCardFooter: ({ iconProps, content, contentProps, }: ConversationCardFooterProps) => React.JSX.Element;
+export declare const ConversationCardFooter: ({ iconProps, content, contentProps, ["data-testid"]: dataTestId, }: ConversationCardFooterProps) => React.JSX.Element;

package/dist/types/components/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.d.ts

@@ -2,12 +2,23 @@ import { default as React } from 'react';
 import { TimestampProps } from '../../../Timestamp/timestamp.component';
 import { ConversationCardAvatarGroupProps } from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';
 export interface ConversationCardHeaderProps {
+    /** Props for the avatar group. */
     avatarGroupProps?: ConversationCardAvatarGroupProps;
+    /** If true, the notification indicator will be displayed. */
     showNotificationIndicator?: boolean;
+    /** Determines if the card is pinned. */
     isCardPinned?: boolean;
+    /** Determines if the card is being hovered. */
     isHoveringCard?: boolean;
+    /** Subtitle of the card. */
     subtitle?: string;
+    /** Props for the timestamp. */
     timestampProps: TimestampProps;
+    /** Title of the card. */
     title: string;
+    /** Data test id for the header.
+     * @default kibble-conversation-card-header
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCardHeader: ({ avatarGroupProps, timestampProps, isHoveringCard, isCardPinned, title, showNotificationIndicator, subtitle, }: ConversationCardHeaderProps) => React.JSX.Element;
+export declare const ConversationCardHeader: ({ avatarGroupProps, timestampProps, isHoveringCard, isCardPinned, title, showNotificationIndicator, subtitle, ["data-testid"]: dataTestId, }: ConversationCardHeaderProps) => React.JSX.Element;

package/dist/types/components/ConversationCard/components/ConversationCardTags/conversationCardTags.component.d.ts

@@ -1,9 +1,15 @@
 import { default as React } from 'react';
 import { TagProps } from '../../../Tag/tag.component';
 export type ConversationCardTag = TagProps & {
+    /** Content to display in the tooltip. */
     tooltipContent?: string;
 };
 export interface ConversationCardTagsProps {
+    /** Tags to display in the ConversationCard. */
     tags: ConversationCardTag[];
+    /** Data test id for the tags.
+     * @default kibble-conversation-card-tags
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCardTags: ({ tags }: ConversationCardTagsProps) => React.JSX.Element;
+export declare const ConversationCardTags: ({ tags, ["data-testid"]: dataTestId, }: ConversationCardTagsProps) => React.JSX.Element;

package/dist/types/components/ConversationCard/conversationCard.component.d.ts

@@ -7,17 +7,45 @@ import { ConversationCardFooterProps } from './components/ConversationCardFooter
 import { ConversationCardContentProps } from './components/ConversationCardContent/conversationCardContent.component';
 import { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';
 export interface ConversationCardProps extends ConversationCardContentProps {
+    /**
+     * Used to enable hover actions on the ConversationCard.
+     * @default true
+     */
     allowHoverActions?: boolean;
+    /** Props for the `AvatarGroup` component. */
     avatarGroupProps?: ConversationCardAvatarGroupProps;
+    /** Props for the ConversationCard footer. */
     footerProps?: ConversationCardFooterProps;
+    /** Props for the Menu component. See the `Menu` for more details. This component provides a default menu button if none is provided. If menuProps and pinProps are passed together, the component automatically adds a menuItem to control the pinned state. */
     headerMenuProps?: MenuProps;
+    /** Props for the ConversationCard header. */
     headerProps: ConversationCardHeaderProps;
+    /**
+     * Used to set the active state of the ConversationCard.
+     * @default false
+     */
     active?: boolean;
+    /** Callback function for clicking the ConversationCard. */
     onClick?: () => void;
+    /** Props to show and configure the conversation overlay button. If not passed, the overlay button won't be shown. */
     overlayProps?: ConversationCardOverlayProps;
+    /** Props for the pin functionality. If not passed, pin functionality won't be shown. */
     pinProps?: ConversationCardPinProps;
+    /**
+     * Used to preserve the position of the ConversationCard in a list with infinite scrolling.
+     * @default false
+     */
     shouldPreservePosition?: boolean;
+    /**
+     * Used to show the unread messages indicator.
+     * @default false
+     */
     showNotificationIndicator?: boolean;
+    /** The tags to be displayed in the ConversationCard. See the `Tag` for more information. Additionally, you can pass in a tooltipContent to customize what is shown in the tooltip. */
     tags?: ConversationCardTag[];
+    /** Data test id for the conversation card.
+     * @default kibble-conversation-card
+     */
+    'data-testid'?: string;
 }
-export declare const ConversationCard: ({ allowHoverActions, avatarGroupProps, content, contentProps, contentMenu, footerProps, headerMenuProps, headerProps, active, onClick, overlayProps, pinProps, shouldPreservePosition, showNotificationIndicator, tags, }: ConversationCardProps) => React.JSX.Element;
+export declare const ConversationCard: ({ allowHoverActions, avatarGroupProps, content, contentProps, contentMenu, footerProps, headerMenuProps, headerProps, active, onClick, overlayProps, pinProps, shouldPreservePosition, showNotificationIndicator, tags, ["data-testid"]: dataTestId, }: ConversationCardProps) => React.JSX.Element;

package/dist/types/components/DatePicker/components/DatePickerCalendar/datePickerCalendar.component.d.ts

@@ -1,2 +1,11 @@
 import { default as React } from 'react';
-export declare function DatePickerCalendar(): React.JSX.Element;
+interface DatePickerCalendarProps {
+    /** If true, the month labels will be displayed. */
+    showMonthLabels?: boolean;
+    /** Data test id for the calendar.
+     * @default kibble-datepicker-calendar
+     */
+    'data-testid'?: string;
+}
+export declare function DatePickerCalendar({ showMonthLabels, ['data-testid']: dataTestId, }: DatePickerCalendarProps): React.JSX.Element;
+export {};

package/dist/types/components/DatePicker/components/DatePickerDay/datePickerCalendarDay.component.d.ts

@@ -1,8 +1,18 @@
 import { default as React } from 'react';
+import { CornerRoundingFlags } from '../../datePicker.types';
 interface DayProps {
+    /** Label of the day. */
     dayLabel: string;
+    /** Date of the day. */
     date: Date;
+    /** Callback function to be called when the day is selected. */
     onDaySelected: () => void;
+    /** Used to determine which corners of the day should be rounded. */
+    cornerRounding?: CornerRoundingFlags | null;
+    /** Data test id for the day.
+     * @default kibble-datepicker-day
+     */
+    'data-testid'?: string;
 }
-export declare const DatePickerCalendarDay: ({ dayLabel, date, onDaySelected }: DayProps) => React.JSX.Element;
+export declare const DatePickerCalendarDay: ({ dayLabel, date, onDaySelected, cornerRounding, ["data-testid"]: dataTestId, }: DayProps) => React.JSX.Element;
 export {};

package/dist/types/components/DatePicker/components/DatePickerDay/datePickerCalendarDay.recipe.d.ts

@@ -1,15 +1,16 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { DayVariant } from './datePickerCalendarDay.types';
-type CalendarDaySlot = 'root' | 'indicator';
+type CalendarDaySlot = 'root';
 type CalendarDaySlotStyles = {
     [key in CalendarDaySlot]?: SystemStyleObject;
 };
-export declare const datePickerCalendarDayRecipe: import('@chakra-ui/react').SlotRecipeDefinition<CalendarDaySlot, {
+export declare const datePickerCalendarDayRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root", {
     variant: Record<DayVariant, CalendarDaySlotStyles>;
     isToday: {
         true: {
-            indicator: {
-                bg: "background.secondary";
+            root: {
+                color: "text";
+                fontWeight: "semibold";
             };
         };
         false: {};

package/dist/types/components/DatePicker/components/DatePickerDay/datePickerCalendarDay.types.d.ts

@@ -1 +1 @@
-export type DayVariant = 'default' | 'selectedStart' | 'disabled' | 'inRange' | 'selectedEnd';
+export type DayVariant = 'default' | 'selectedStart' | 'disabled' | 'inRange' | 'selectedEnd' | 'selectedRange';

package/dist/types/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.d.ts

@@ -1,8 +1,17 @@
 import { default as React } from 'react';
 import { DateRange } from '../../datePicker.types';
 export interface DatePickerFooterProps {
+    /** Text to display in the submit button.
+     * @default Apply
+     */
     buttonText?: string;
+    /** Callback function to be called when the submit button is clicked. */
     onSubmit?: ({ startDate, endDate }: DateRange) => void;
+    /** If true, the reset button will be hidden. */
     hideResetButton?: boolean;
+    /** Data test id for the footer.
+     * @default kibble-datepicker-footer
+     */
+    'data-testid'?: string;
 }
 export declare function DatePickerFooter({ buttonText, onSubmit, hideResetButton, }: DatePickerFooterProps): React.JSX.Element;

package/dist/types/components/DatePicker/components/DatePickerHeader/datePickerHeader.component.d.ts

@@ -1,2 +1,16 @@
 import { default as React } from 'react';
-export declare function DatePickerHeader(): React.JSX.Element;
+import { MenuButtonProps } from '../../../Menu/components/MenuButton/menuButton.component';
+interface DatePickerHeaderProps {
+    /** Props to be passed to the menu buttons. */
+    triggerProps?: MenuButtonProps;
+    /** Data test id for the header.
+     * @default kibble-datepicker-header
+     */
+    'data-testid'?: string;
+    /** If true, the triggers for the month and year will be displayed.
+     * @default true
+     */
+    withTriggers?: boolean;
+}
+export declare function DatePickerHeader({ triggerProps, withTriggers, ['data-testid']: dataTestId, }: DatePickerHeaderProps): React.JSX.Element;
+export {};

package/dist/types/components/DatePicker/components/DatePickerInput/datePickerInput.component.d.ts

@@ -1,7 +1,12 @@
 import { default as React } from 'react';
 import { TextInputProps } from '../../../TextInput/textInput.component';
 interface DatePickerInputProps {
+    /** Props to customize the input field. See `TextInput` for more information. */
     inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
+    /** Data test id for the input.
+     * @default kibble-datepicker-input
+     */
+    'data-testid'?: string;
 }
-export declare function DatePickerInput({ inputProps }: DatePickerInputProps): React.JSX.Element;
+export declare function DatePickerInput({ inputProps, ['data-testid']: dataTestId, }: DatePickerInputProps): React.JSX.Element;
 export {};

package/dist/types/components/DatePicker/components/DatePickerMonth/datePickerCalendarMonth.component.d.ts

@@ -1,5 +1,15 @@
 import { default as React } from 'react';
+import { MonthType } from '@datepicker-react/hooks';
 export interface MonthProps {
+    /** Callback function to be called when a day is selected. */
     onDaySelected: () => void;
+    /** Month to display. */
+    month?: MonthType;
+    /** If true, the month labels will be displayed. */
+    showMonthLabels?: boolean;
+    /** Data test id for the month.
+     * @default kibble-datepicker-month
+     */
+    'data-testid'?: string;
 }
-export declare const DatePickerCalendarMonth: ({ onDaySelected }: MonthProps) => React.JSX.Element;
+export declare const DatePickerCalendarMonth: ({ onDaySelected, month, showMonthLabels, ["data-testid"]: dataTestId, }: MonthProps) => React.JSX.Element;

package/dist/types/components/DatePicker/context/datePicker.context.d.ts

@@ -21,6 +21,9 @@ export interface IDatePickerContext {
     clearDates: ({ open }: {
         open?: boolean;
     }) => void;
+    onQuickOptionSelect: ({ startDate, endDate }: DateRange) => void;
+    onTimeChange: (date: Date) => void;
+    standalone: boolean;
     focusedDate: Date | null;
     firstDayOfWeek?: FirstDayOfWeek;
     activeMonths: MonthType[];

package/dist/types/components/DatePicker/context/datePicker.provider.d.ts

@@ -1,7 +1,16 @@
 import { default as React } from 'react';
 import { DatePickerProps } from '../datePicker.component';
+import { FocusedInput } from './datePicker.context';
 type DatePickerProviderProps = DatePickerProps & {
     children: React.ReactNode;
+    numberOfMonths?: number;
+    sameWidth?: boolean;
+    standalone?: boolean;
 };
-export declare const DatePickerProvider: ({ children, dateFormat, endDate, inputProps, maxDate, maxDaysInRange, maxYear, minDate, minYear, onDateChange, placement, startDate, withDateRange, }: DatePickerProviderProps) => React.JSX.Element;
+export interface DatePickerInternalState {
+    startDate: Date | null;
+    endDate: Date | null;
+    focusedInput: FocusedInput | null;
+}
+export declare const DatePickerProvider: ({ children, dateFormat, endDate, inputProps, maxDate, maxDaysInRange, maxYear, minDate, minYear, numberOfMonths, onDateChange, placement, startDate, withDateRange, sameWidth, standalone, }: DatePickerProviderProps) => React.JSX.Element;
 export {};

package/dist/types/components/DatePicker/datePicker.component.d.ts

@@ -1,22 +1,36 @@
 import { default as React } from 'react';
-import { DateFormats, DateRange } from './datePicker.types';
+import { DateProps } from './datePicker.types';
 import { TextInputProps } from '../TextInput/textInput.component';
 import { Placement } from '../../shared/types/placement';
 import { DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';
-export interface DatePickerProps {
-    dateFormat?: string | DateFormats;
-    endDate?: Date | null;
+export interface DatePickerProps extends DateProps {
+    /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */
     footerProps?: DatePickerFooterProps;
+    /**
+     * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.
+     * @default false
+     */
     hideFooter?: boolean;
+    /** Props to customize the input field. See `TextInput` for more information. */
     inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;
-    maxDate?: Date;
-    maxYear?: number;
-    maxDaysInRange?: number;
-    minDate?: Date;
-    minYear?: number;
-    onDateChange?: ({ startDate, endDate }: DateRange) => void;
+    /**
+     * Placement of the calendar popover
+     * @default bottom
+     */
     placement?: Placement;
-    startDate: Date | null;
+    /**
+     * If true, the date picker will be rendered in a portal.
+     * @default true
+     */
+    portalled?: boolean;
+    /**
+     * If true, the date picker will render two input fields that control both the start and end date for a range selection.
+     * @default false
+     */
     withDateRange?: boolean;
+    /** Data test id for the date picker.
+     * @default kibble-datepicker
+     */
+    'data-testid'?: string;
 }
 export declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;

package/dist/types/components/DatePicker/datePicker.types.d.ts

@@ -1,3 +1,15 @@
+export interface DateProps {
+    dateFormat?: string | DateFormats;
+    endDate?: Date | null;
+    startDate: Date | null;
+    maxDate?: Date;
+    maxYear?: number;
+    maxDaysInRange?: number;
+    minDate?: Date;
+    minYear?: number;
+    onDateChange?: ({ startDate, endDate }: DateRange) => void;
+    'data-testid'?: string;
+}
 export declare enum DateFormats {
     'ShortDate' = "MM/dd/yyyy",
     'LongDate' = "MMM dd yyyy",
@@ -7,3 +19,9 @@ export interface DateRange {
     startDate: Date | null;
     endDate?: Date | null;
 }
+export interface CornerRoundingFlags {
+    roundTopLeft: boolean;
+    roundTopRight: boolean;
+    roundBottomLeft: boolean;
+    roundBottomRight: boolean;
+}

package/dist/types/components/DatePicker/hooks/useComputeCornerRoundingFlags.d.ts

@@ -0,0 +1,10 @@
+import { CornerRoundingFlags } from '../datePicker.types';
+type DayItem = {
+    date: Date;
+    dayLabel: string;
+} | number | null | undefined;
+/**
+ * Hook to compute corner rounding flags for calendar days
+ */
+export declare const useComputeCornerRoundingFlags: (days: DayItem[]) => (CornerRoundingFlags | null)[];
+export {};

package/dist/types/components/DatePicker/utils/getDayVariant.d.ts

@@ -0,0 +1,12 @@
+import { DayVariant } from '../components/DatePickerDay/datePickerCalendarDay.types';
+export declare const isRangeVariant: (variant: DayVariant) => boolean;
+export declare const getDayVariant: ({ date, startDate, endDate, dateFormat, disabledDate, isSelected, isDateSelected, isDateBlocked, }: {
+    date: Date;
+    startDate: Date | null;
+    endDate: Date | null;
+    dateFormat: string;
+    disabledDate?: boolean;
+    isSelected?: boolean;
+    isDateSelected: (date: Date) => boolean;
+    isDateBlocked: (date: Date) => boolean;
+}) => DayVariant;

package/dist/types/components/DateTimePicker/components/DateTimePickerCustomView/dateTimePickerCustomView.component.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface DateTimePickerCustomViewProps {
+    /** Determines if the calendar view is single. */
+    isSingleView: boolean;
+}
+export declare const DateTimePickerCustomView: ({ isSingleView }: DateTimePickerCustomViewProps) => React.JSX.Element;
+export {};

package/dist/types/components/DateTimePicker/components/DateTimePickerQuickOptions/dateTimePickerQuickOptions.component.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { DateTimePickerDefaultOptionValue } from '../../dateTimePicker.types';
+interface DateTimePickerQuickOptionsProps {
+    /** The currently selected quick option. */
+    selectedQuickOption: DateTimePickerDefaultOptionValue;
+    /** Callback function to set the selected quick option. */
+    setSelectedQuickOption: (option: DateTimePickerDefaultOptionValue) => void;
+    /** Data test id for the quick options.
+     * @default kibble-datetime-picker-quick-options
+     */
+    'data-testid'?: string;
+}
+export declare const DateTimePickerQuickOptions: ({ selectedQuickOption, setSelectedQuickOption, ["data-testid"]: dataTestId, }: DateTimePickerQuickOptionsProps) => React.JSX.Element;
+export {};

package/dist/types/components/DateTimePicker/components/DateTimePickerRangeSelector/dateTimePickerRangeSelector.component.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { FocusedInput } from '../../../DatePicker/context/datePicker.context';
+interface DateTimePickerRangeSelectorProps {
+    /** Label for the range selector. */
+    label: string;
+    /** Type of range selector. */
+    rangeType: FocusedInput;
+}
+export declare const DateTimePickerRangeSelector: ({ label, rangeType, }: DateTimePickerRangeSelectorProps) => React.JSX.Element;
+export {};

package/dist/types/components/DateTimePicker/dateTimePicker.component.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { CalendarView } from './dateTimePicker.types';
+import { DateProps } from '../DatePicker/datePicker.types';
+import { Placement } from '../../shared/types/placement';
+export interface DateTimePickerProps extends DateProps {
+    /**
+     * Controls the number of months displayed in the calendar.
+     * @default double
+     */
+    calendarView?: CalendarView;
+    /** Custom element to trigger the date time picker. If not provided, a button will be rendered. */
+    trigger?: React.ReactNode;
+    /**
+     * Placement of the calendar popover
+     * @default bottom
+     */
+    placement?: Placement;
+    /**
+     * If true, the date time picker will be rendered in a portal.
+     * @default true
+     */
+    portalled?: boolean;
+    /**
+     * Whether to show the left side quick options in the calendar.
+     * @default true
+     */
+    showQuickOptions?: boolean;
+    /** Data test id for the date time picker.
+     * @default kibble-datetime-picker
+     */
+    'data-testid'?: string;
+}
+export declare const DateTimePicker: ({ trigger, calendarView, portalled, showQuickOptions, ["data-testid"]: dataTestId, ...rest }: DateTimePickerProps) => React.JSX.Element;

package/dist/types/components/DateTimePicker/dateTimePicker.records.d.ts

@@ -0,0 +1,8 @@
+import { IconName } from '../Icon/icon.types';
+import { CalendarView, DateTimePickerDefaultOptionValue } from './dateTimePicker.types';
+export declare const dateTimePickerDefaultOptions: {
+    label: string;
+    value: DateTimePickerDefaultOptionValue;
+    iconName?: IconName;
+}[];
+export declare const CalendarViewToNumberOfMonthsMap: Record<CalendarView, number>;

package/dist/types/components/DateTimePicker/dateTimePicker.types.d.ts

@@ -0,0 +1,11 @@
+export declare enum DateTimePickerDefaultOptionValue {
+    Today = "Today",
+    Yesterday = "Yesterday",
+    ThisWeek = "ThisWeek",
+    LastWeek = "LastWeek",
+    ThisMonth = "ThisMonth",
+    LastMonth = "LastMonth",
+    Custom = "Custom"
+}
+export declare const calendarViews: readonly ["single", "double"];
+export type CalendarView = (typeof calendarViews)[number];

package/dist/types/components/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dateTimePicker.component';
+export * from './dateTimePicker.types';

package/dist/types/components/DateTimePicker/utils/quickOptions.d.ts

@@ -0,0 +1,13 @@
+import { DateTimePickerDefaultOptionValue } from '../dateTimePicker.types';
+/**
+ * Utility function to get the date range for a given quick option
+ */
+export declare const getQuickOptionDateRange: (option: DateTimePickerDefaultOptionValue) => {
+    startDate: Date;
+    endDate: Date;
+} | null;
+/**
+ * Matches provided dates to a quick option
+ * Returns the matching option, or Custom if no match, or Today if no dates provided
+ */
+export declare const matchDatesToQuickOption: (startDate: Date | null, endDate: Date | null) => DateTimePickerDefaultOptionValue;

package/dist/types/components/Divider/divider.component.d.ts

@@ -1,4 +1,9 @@
 import { default as React } from 'react';
 import { SeparatorProps } from '@chakra-ui/react/separator';
-export type DividerProps = SeparatorProps;
-export declare const Divider: ({ borderColor, orientation, size, variant, ...rest }: DividerProps) => React.JSX.Element;
+export interface DividerProps extends SeparatorProps {
+    /** Data test id for the divider.
+     * @default kibble-divider
+     */
+    'data-testid'?: string;
+}
+export declare const Divider: ({ borderColor, orientation, size, variant, ["data-testid"]: dataTestId, ...rest }: DividerProps) => React.JSX.Element;

package/dist/types/components/Heading/heading.component.d.ts

@@ -5,8 +5,20 @@ import { HeadingSize } from './heading.types';
 import { TypographyVariant } from '../../shared/types/typography';
 import { WithTruncationProps } from '../../hocs/withTruncation';
 export interface HeadingProps extends WithTruncationProps, Omit<CHeadingProps, 'truncate'> {
+    /**
+     * Size of the heading.
+     * @default lg
+     */
     size?: ConditionalValue<HeadingSize>;
+    /**
+     * Color variant of the heading.
+     * @default default
+     */
     variant?: TypographyVariant;
+    /** Data test id for the heading.
+     * @default kibble-heading
+     */
+    'data-testid'?: string;
 }
 declare const WrappedHeading: React.FC<HeadingProps>;
 export { WrappedHeading as Heading };

package/dist/types/components/Icon/generated/Backspace.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/CaretLeft.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/CheckList.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;