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

package/dist/types/components/PinInput/pinInput.component.d.ts

@@ -1,12 +1,30 @@
 import { default as React } from 'react';
 import { PinInput as CPinInput } from '@chakra-ui/react/pin-input';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
+import { FormControlSize } from '../../shared/types';
 export interface PinInputProps extends WithFormControlProps, Omit<CPinInput.RootProps, 'size'> {
+    /**
+     * Number of inputs in the pin input.
+     * @default 6
+     */
     count?: number;
+    /** Ref to the hidden input element. */
     inputRef?: React.Ref<HTMLInputElement | null>;
+    /**
+     * If true, the pin input will render a contrasting variant.
+     * @default false
+     */
     onContrast?: boolean;
+    /** Ref to the pin input component. */
     rootRef?: React.Ref<HTMLDivElement | null>;
-    size?: 'sm' | 'md' | 'lg';
+    /** Size of the pin input.
+     * @default md
+     */
+    size?: FormControlSize;
+    /** Data test id for the pin input.
+     * @default kibble-pin-input
+     */
+    'data-testid'?: string;
 }
 declare const WrappedPinInput: React.FC<PinInputProps>;
 export { WrappedPinInput as PinInput };

package/dist/types/components/PinInput/pinInput.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const pinInputRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "hiddenInput" | "control", {
+export declare const pinInputRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "input" | "root" | "control", {
     size: {
         sm: {
             input: import('@chakra-ui/react').SystemStyleObject;

package/dist/types/components/Popover/components/PopoverFooter/popoverFooter.component.d.ts

@@ -2,19 +2,44 @@ import { default as React, ReactNode } from 'react';
 import { FlexProps } from '@chakra-ui/react/flex';
 import { PopoverTriggerType } from '../../popover.types';
 export interface PopoverFooterProps extends FlexProps {
+    /** Content to be rendered in the footer. */
     children?: ReactNode;
+    /** If true, the footer will be disabled. */
     disabled?: boolean;
+    /** If true, the buttons will not be displayed.
+     * @default false
+     */
     hideButtons?: boolean;
+    /** If true, the cancel button will not be displayed.
+     * @default false
+     */
     hideCancelButton?: boolean;
+    /** If true, the submit button will be displayed as a destructive button.
+     * @default false
+     */
     destructive?: boolean;
+    /** If true, the submit button will be displayed with a loading state. */
     loading?: boolean;
+    /** Callback function to be called when the cancel button is clicked. */
     onCancel?: () => void;
+    /** If true, the buttons will render with a contrasting variant.
+     * @default true
+     */
     onContrast?: boolean;
+    /** Callback function to be called when the submit button is clicked. */
     onSubmit?: () => void;
+    /** Text to display in the submit button. */
     submitText?: string;
+    /** Data test id for the footer.
+     * @default kibble-popover-footer
+     */
+    'data-testid'?: string;
 }
 interface InternalPopoverFooterProps extends PopoverFooterProps {
+    /** Trigger type of the popover.
+     * @internal
+     */
     trigger: PopoverTriggerType;
 }
-export declare const PopoverFooter: ({ children, disabled, hideButtons, hideCancelButton, destructive, loading, onCancel, onContrast, onSubmit, submitText, trigger, ...rest }: InternalPopoverFooterProps) => React.JSX.Element;
+export declare const PopoverFooter: ({ children, disabled, hideButtons, hideCancelButton, destructive, loading, onCancel, onContrast, onSubmit, submitText, trigger, ["data-testid"]: dataTestId, ...rest }: InternalPopoverFooterProps) => React.JSX.Element;
 export {};

package/dist/types/components/Popover/components/PopoverHeader/popoverHeader.component.d.ts

@@ -3,14 +3,32 @@ import { HeadingSize } from '../../../Heading';
 import { FlexProps } from '@chakra-ui/react/flex';
 import { PopoverTriggerType } from '../../popover.types';
 export interface PopoverHeaderProps extends FlexProps {
+    /** Content to be rendered in the header. */
     children?: ReactNode;
+    /** If true, the close button will not be displayed.
+     * @default false
+     */
     hideCloseButton?: boolean;
+    /** Callback function to be called when the close button is clicked. */
     onClose?: () => void;
+    /** If true, the header will render in a contrasting color.
+     * @default true
+     */
     onContrast?: boolean;
+    /** Size of the header.
+     * @default sm
+     */
     size?: HeadingSize;
+    /** Data test id for the header.
+     * @default kibble-popover-header
+     */
+    'data-testid'?: string;
 }
 interface InternalPopoverHeaderProps extends PopoverHeaderProps {
+    /** Trigger type of the popover.
+     * @internal
+     */
     trigger: PopoverTriggerType;
 }
-export declare const PopoverHeader: ({ children, color, hideCloseButton, onContrast, onClose, size, trigger, ...rest }: InternalPopoverHeaderProps) => React.JSX.Element;
+export declare const PopoverHeader: ({ children, color, hideCloseButton, onContrast, onClose, size, trigger, ["data-testid"]: dataTestId, ...rest }: InternalPopoverHeaderProps) => React.JSX.Element;
 export {};

package/dist/types/components/Popover/popover.component.d.ts

@@ -7,24 +7,67 @@ import { PopoverHeaderProps } from './components/PopoverHeader/popoverHeader.com
 import { PopoverFooterProps } from './components/PopoverFooter/popoverFooter.component';
 import { ConditionalValue } from '@chakra-ui/react/styled-system';
 export interface KPopoverProps {
-    allowEscape?: boolean;
+    /** The element that triggers the popover. */
     anchor: React.ReactNode;
+    /** Props to customize the content of the popover. */
     contentProps?: CPopover.ContentProps;
+    /**
+     * If true, the popover will be disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /** Props to configure the footer of the popover. */
     footerProps?: PopoverFooterProps;
+    /** Props to configure the header of the popover. */
     headerProps?: PopoverHeaderProps;
+    /** Configuration for the positioner of the popover. */
+    positionerProps?: CPopover.PositionerProps;
+    /**
+     * If true, the popover will be rendered in a portal.
+     * @default true
+     */
     portalled?: boolean;
+    /**
+     * Sets the placement of the popover in relation to the designated element. If the chosen placement puts the tooltip out-of-bounds of the viewport, the placement will automatically adjust. You should, however, choose a placement that works best with orientation of the element.
+     * @default bottom
+     */
     placement?: Placement;
+    /** Whether to show the arrow of the popover. */
+    showArrow?: boolean;
+    /**
+     * The size of the popover.
+     * @default md
+     */
     size?: ConditionalValue<PopoverSize>;
+    /**
+     * The trigger type of the popover.
+     * @default click
+     */
     trigger?: PopoverTriggerType;
+    /**
+     * The color variant of the popover.
+     * @default contrast
+     */
     variant?: PopoverVariant;
+    /** Data test id for the popover.
+     * @default kibble-popover
+     */
+    'data-testid'?: string;
 }
 interface ClickPopoverProps extends CPopover.RootProps {
+    /**
+     * The trigger type of the popover.
+     * @default click
+     */
     trigger?: 'click';
 }
 interface HoverPopoverProps extends HoverCard.RootProps {
+    /**
+     * The trigger type of the popover.
+     * @default click
+     */
     trigger?: 'hover';
 }
 export type PopoverProps = KPopoverProps & (Omit<ClickPopoverProps, 'size'> | Omit<HoverPopoverProps, 'size'>);
-export declare const Popover: ({ allowEscape, anchor, children, contentProps, footerProps, headerProps, disabled, portalled, placement, positioning, size, trigger, variant, ...rest }: PopoverProps) => React.ReactNode;
+export declare const Popover: ({ anchor, children, contentProps, footerProps, headerProps, disabled, portalled, placement, positioning, showArrow, size, trigger, variant, positionerProps, ["data-testid"]: dataTestId, ...rest }: PopoverProps) => React.ReactNode;
 export {};

package/dist/types/components/Popover/popover.recipe.d.ts

@@ -1,10 +1,11 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-type PopoverSlot = 'root' | 'content' | 'arrow' | 'arrowTip' | 'body' | 'header' | 'footer' | 'trigger';
+declare const popoverSlots: ("body" | "content" | "arrow" | "arrowTip" | "trigger" | "positioner" | "anchor" | "description" | "footer" | "header" | "title" | "indicator" | "closeTrigger")[];
+type PopoverSlot = (typeof popoverSlots)[number];
 type PopoverSlotStyles = {
     [key in PopoverSlot]?: SystemStyleObject;
 };
-export declare const popoverRecipe: import('@chakra-ui/react').SlotRecipeDefinition<PopoverSlot, {
-    size: Record<"xs" | "sm" | "md" | "lg" | "xl", PopoverSlotStyles>;
+export declare const popoverRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "content" | "arrow" | "arrowTip" | "trigger" | "positioner" | "anchor" | "description" | "footer" | "header" | "title" | "indicator" | "closeTrigger", {
+    size: Record<"xs" | "sm" | "md" | "lg" | "xl" | "2xl", PopoverSlotStyles>;
     variant: Record<"default" | "contrast" | "defaultDestructive" | "contrastDestructive", PopoverSlotStyles>;
 }>;
 export {};

package/dist/types/components/Popover/popover.types.d.ts

@@ -1,4 +1,4 @@
-export declare const popoverSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const popoverSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
 export type PopoverSize = (typeof popoverSizes)[number];
 export declare const popoverVariants: readonly ["default", "defaultDestructive", "contrastDestructive", "contrast"];
 export type PopoverVariant = (typeof popoverVariants)[number];

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

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

package/dist/types/components/Progress/progress.component.d.ts

@@ -0,0 +1,26 @@
+import { Progress as CProgress, ProgressRangeProps } from '@chakra-ui/react/progress';
+import { default as React } from 'react';
+import { ProgressVariant } from './progress.types';
+export interface ProgressProps extends Omit<CProgress.RootProps, 'variant'> {
+    /**
+     * Whether the progress bar should show the value text.
+     * @default false
+     */
+    showValueText?: boolean;
+    /** Text shown below the progress bar with the current value displayed as a percentage. By default this number is calculated for you based on the max value and value provided. You can override this by passing in any string value. */
+    valueText?: React.ReactNode;
+    /** The label of the progress bar. */
+    label?: React.ReactNode;
+    /**
+     * Style of the progress bar.
+     * @default primary
+     */
+    variant?: ProgressVariant;
+    /** Props to customize the range of the progress bar. */
+    rangeProps?: ProgressRangeProps;
+    /** Data test id for the progress.
+     * @default kibble-progress
+     */
+    'data-testid'?: string;
+}
+export declare const Progress: ({ showValueText, valueText, label, variant, shape, rangeProps, ["data-testid"]: dataTestId, ...rest }: ProgressProps) => React.JSX.Element;

package/dist/types/components/Progress/progress.recipe.d.ts

@@ -0,0 +1,38 @@
+export declare const progressRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "track" | "circle" | "view" | "root" | "valueText" | "range" | "circleTrack" | "circleRange", {
+    shape: {
+        square: {
+            track: {
+                borderRadius: "none";
+            };
+            range: {
+                borderRadius: "none";
+            };
+        };
+    };
+    variant: {
+        primary: {
+            track: {
+                bgColor: "background.primaryAlpha";
+            };
+            range: {
+                bgColor: "background.primary";
+            };
+        };
+        secondary: {
+            track: {
+                bgColor: "background.secondaryAlpha";
+            };
+            range: {
+                bgColor: "background.secondary";
+            };
+        };
+        subtle: {
+            track: {
+                bgColor: "background.alpha";
+            };
+            range: {
+                bgColor: "background.alpha.pressed";
+            };
+        };
+    };
+}>;

package/dist/types/components/Progress/progress.types.d.ts

@@ -0,0 +1,9 @@
+import { ProgressRangeProps } from '@chakra-ui/react/progress';
+import { ConditionalValue } from '@chakra-ui/react/styled-system';
+export declare const progressVariants: string[];
+export type ProgressVariant = ConditionalValue<'primary' | 'secondary' | 'subtle' | undefined>;
+export declare const progressSizes: string[];
+export type ProgressSize = (typeof progressSizes)[number];
+export declare const progressShapes: string[];
+export type ProgressShape = (typeof progressShapes)[number];
+export type { ProgressRangeProps };

package/dist/types/components/RadioGroup/components/Radio/radio.component.d.ts

@@ -4,12 +4,27 @@ import { FormControlSize } from '../../../../hocs/withFormControl/withFormContro
 import { WithFormControlProps } from '../../../../hocs/withFormControl/withFormControl';
 import { RadioType } from '../../radioGroup.types';
 export interface RadioProps extends WithFormControlProps, RadioGroup.ItemProps {
+    /** If true, the radio will render a contrasting variant.
+     * @default false
+     */
     onContrast?: boolean;
+    /** Ref to the hidden input element. */
     radioRef?: React.Ref<HTMLInputElement | null>;
+    /** Ref to the radio component. */
     rootRef?: React.Ref<HTMLDivElement | null>;
+    /** Size of the radio.
+     * @default md
+     */
     size?: FormControlSize;
+    /** Data test id for the radio.
+     * @default kibble-radio
+     */
+    'data-testid'?: string;
 }
 interface InternalRadioProps extends RadioProps {
+    /** Type of the radio.
+     * @internal
+     */
     radioType?: RadioType;
 }
 declare const WrappedRadio: React.FC<InternalRadioProps>;

package/dist/types/components/RadioGroup/radioGroup.component.d.ts

@@ -6,13 +6,33 @@ import { ConditionalValue } from '@chakra-ui/react/styled-system';
 import { FlexDirection } from '../../shared/types/alignment';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 import { RadioAlignment, RadioType } from './radioGroup.types';
-export interface RadioGroupProps extends WithFormControlProps, Omit<CRadioGroup.RootProps, 'onValueChange' | 'onChange'> {
+export interface RadioGroupProps extends WithFormControlProps, CRadioGroup.RootProps {
+    /**
+     * The direction to stack the radios.
+     * @default column
+     */
     direction?: ConditionalValue<FlexDirection>;
-    onChange?: (value: string | null) => void;
+    /**
+     * Size of the radio group.
+     * @default md
+     */
     size?: FormControlSize;
+    /**
+     * The visual type of the radio group.
+     * @default default
+     */
     radioType?: RadioType;
+    /** An array of Radio props to be rendered inside the group. See `Radio` for more information. */
     radios: RadioProps[];
+    /**
+     * The alignment of the radio input element.
+     * @default start
+     */
     radioAlignment?: RadioAlignment;
+    /** Data test id for the radio group.
+     * @default kibble-radio-group
+     */
+    'data-testid'?: string;
 }
 declare const WrappedRadioGroup: React.FC<RadioGroupProps>;
 export { WrappedRadioGroup as RadioGroup };

package/dist/types/components/RadioGroup/radioGroup.recipe.d.ts

@@ -1,10 +1,12 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { FormVariant } from '../../hocs/withFormControl/withFormControl.types';
-type RadioSlot = 'root' | 'item' | 'itemHiddenInput' | 'itemControl' | 'itemText';
+declare const radioSlots: ("label" | "root" | "indicator" | "item" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon")[];
+type RadioSlot = (typeof radioSlots)[number];
 type RadioSlotStyles = {
     [key in RadioSlot]?: SystemStyleObject;
 };
-export declare const radioGroupRecipe: import('@chakra-ui/react').SlotRecipeDefinition<RadioSlot, {
+export declare const radioControlStyles: Record<FormVariant, SystemStyleObject>;
+export declare const radioGroupRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon", {
     size: Record<"sm" | "md" | "lg", RadioSlotStyles>;
     variant: Record<FormVariant, RadioSlotStyles>;
     withCard: {

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

@@ -0,0 +1 @@
+export * from './radiomark.component';

package/dist/types/components/Radiomark/radiomark.component.d.ts

@@ -0,0 +1,12 @@
+import { RadiomarkProps as CRadiomarkProps } from '@chakra-ui/react/radiomark';
+export interface RadiomarkProps extends Omit<CRadiomarkProps, 'variant'> {
+    /** Variant of the radiomark.
+     * @default default
+     */
+    variant?: 'default' | 'onContrast';
+    /** Data test id for the radiomark.
+     * @default kibble-radiomark
+     */
+    'data-testid'?: string;
+}
+export declare const Radiomark: ({ variant, ["data-testid"]: dataTestId, ...props }: RadiomarkProps) => React.JSX.Element;

package/dist/types/components/Radiomark/radiomark.recipe.d.ts

@@ -0,0 +1,2 @@
+import { RecipeDefinition } from '@chakra-ui/react/styled-system';
+export declare const radiomarkRecipe: RecipeDefinition;

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

@@ -0,0 +1 @@
+export * from './rating.component';

package/dist/types/components/Rating/rating.component.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { RatingGroup } from '@chakra-ui/react/rating-group';
+import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
+import { IconName } from '../Icon';
+import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
+import { KibbleSemanticColorToken } from '../../theme/semanticTokens/semanticTokens.types';
+import { ConditionalValue } from '@chakra-ui/react';
+export interface RatingProps extends Omit<RatingGroup.RootProps, 'allowHalf'>, WithFormControlProps {
+    /** Total number of ratings.
+     * @default 5
+     */
+    count?: number;
+    /**
+     * Data test id for the star rating.
+     * @default kibble-rating
+     */
+    'data-testid'?: string;
+    /** Ref to the hidden input element. */
+    inputRef?: React.Ref<HTMLInputElement | null>;
+    /**
+     * Size of the rating.
+     * @default md
+     */
+    size?: FormControlSize;
+    /**
+     * Name of the icon to display in the rating.
+     * @default starSolid
+     */
+    iconName?: IconName;
+    /**
+     * Color of the highlighted rating.
+     * @default background.warning.contrast
+     */
+    highlightColor?: ConditionalValue<KibbleSemanticColorToken>;
+}
+declare const WrappedRating: React.FC<RatingProps>;
+export { WrappedRating as Rating };

package/dist/types/components/Rating/rating.recipe.d.ts

@@ -0,0 +1,10 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+declare const ratingSlots: ("label" | "root" | "control" | "item" | "itemIndicator")[];
+type RatingSlot = (typeof ratingSlots)[number];
+type RatingSlotStyles = {
+    [key in RatingSlot]?: SystemStyleObject;
+};
+export declare const ratingRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "item" | "itemIndicator", {
+    size: Record<"sm" | "md" | "lg", RatingSlotStyles>;
+}>;
+export {};

package/dist/types/components/RatingDots/components/RatingDot/ratingDot.component.d.ts

@@ -1,9 +1,18 @@
 import { default as React } from 'react';
 export interface RatingDotProps {
+    /** If true, the dot will be active. */
     active?: boolean;
+    /** If true, the dot will be disabled. */
     disabled?: boolean;
+    /** If true, the dot will be invalid. */
     invalid?: boolean;
+    /** Number of the dot. */
     number: number;
+    /** Callback function to be called when the dot is clicked. */
     onClick?: (value: number) => void;
+    /** Data test id for the dot.
+     * @default kibble-rating-dot
+     */
+    'data-testid'?: string;
 }
-export declare const RatingDot: ({ active, disabled, invalid, number, onClick }: RatingDotProps) => React.JSX.Element;
+export declare const RatingDot: ({ active, disabled, invalid, number, onClick, ["data-testid"]: dataTestId, }: RatingDotProps) => React.JSX.Element;

package/dist/types/components/RatingDots/ratingDots.component.d.ts

@@ -1,13 +1,25 @@
 import { default as React } from 'react';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 export interface RatingDotsProps extends WithFormControlProps {
+    /** Label to be displayed centered below the dots. */
     centeredLabel?: string;
+    /** Companion label to describe the maximum value of the dots. */
     maxLabel?: string;
+    /** Maximum value of the rating dots. */
     maxValue: number;
+    /** Companion label to describe the minimum value of the dots. */
     minLabel?: string;
+    /** Minimum value of the rating dots. */
     minValue: number;
+    /** Callback function to handle value change when a dot is clicked. */
     onChange?: (value: number) => void;
+    /** Current value of the rating dots. */
     value?: number;
+    /**
+     * Data test id for the rating dots.
+     * @default kibble-rating-dots
+     */
+    'data-testid'?: string;
 }
 declare const WrappedRatingDots: React.FC<RatingDotsProps>;
 export { WrappedRatingDots as RatingDots };

package/dist/types/components/Select/components/SelectItemContent/selectItemContent.component.d.ts

@@ -2,9 +2,15 @@ import { default as React } from 'react';
 import { SelectOption } from '../../select.types';
 import { FormControlSize } from '../../../../hocs/withFormControl/withFormControl.types';
 interface SelectItemContentProps {
+    /** Item to display in the content. */
     item: SelectOption;
+    /** If true, the content will be displayed with a contrasting variant. */
     onContrast: boolean;
+    /** If true, the content will be truncated.
+     * @default true
+     */
     shouldTruncateText: boolean;
+    /** Size of the content. */
     size: FormControlSize;
 }
 export declare const SelectItemContent: ({ item, onContrast, shouldTruncateText, size, }: SelectItemContentProps) => React.JSX.Element;

package/dist/types/components/Select/components/SelectTrigger/selectTrigger.component.d.ts

@@ -1,11 +1,16 @@
 import { default as React } from 'react';
 import { FormControlSize } from '../../../../hocs/withFormControl/withFormControl.types';
 interface SelectTriggerProps {
+    /** Placeholder text to display in the trigger. */
     placeholder?: string;
-    placeholderElement?: React.ReactNode;
+    /** Left element to display in the trigger. */
+    leftElement?: React.ReactNode;
+    /** If true, the trigger will be displayed with a contrasting variant. */
     onContrast: boolean;
+    /** If true, the selected option text will be truncated. */
     shouldTruncateText: boolean;
+    /** Size of the trigger. */
     size: FormControlSize;
 }
-export declare const SelectTrigger: ({ placeholder, placeholderElement, shouldTruncateText, ...rest }: SelectTriggerProps) => React.JSX.Element;
+export declare const SelectTrigger: ({ placeholder, leftElement, shouldTruncateText, ...rest }: SelectTriggerProps) => React.JSX.Element;
 export {};

package/dist/types/components/Select/select.component.d.ts

@@ -2,22 +2,72 @@ import { default as React } from 'react';
 import { Select as CSelect } from '@chakra-ui/react/select';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
-import { SelectOption } from './select.types';
+import { SelectOption, SelectValueChangeDetails } from './select.types';
 export interface SelectProps extends WithFormControlProps, Omit<CSelect.RootProps, 'collection' | 'multiple'> {
+    /** If true, allows the user to clear the selected value by clicking the clear button. */
     clearable?: boolean;
+    /**
+     * Text to display when the options list is empty.
+     * @default No options available
+     */
     emptyPlaceholder?: string;
+    /** If true, shows a loading spinner instead of the options. */
     loading?: boolean;
+    /**
+     * If true, the select will render a contrasting variant.
+     * @default false
+     */
     onContrast?: boolean;
-    onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Array of options to display in the select dropdown. */
     options: SelectOption[];
+    /** Text to display when no option is selected. */
     placeholder?: string;
-    placeholderElement?: React.ReactNode;
+    /** Custom element to display to the left of the placeholder or the selected option whenever the selected option doesnt have a left element. */
+    leftElement?: React.ReactNode;
+    /** Ref to the select component. */
     rootRef?: React.Ref<HTMLDivElement | null>;
+    /**
+     * If true, enables a search input to filter options.
+     * @default false
+     */
     searchable?: boolean;
+    /**
+     * Placeholder text for the search input.
+     * @default Search...
+     */
     searchPlaceholder?: string;
+    /** Ref to the hidden select element. */
     selectRef?: React.Ref<HTMLSelectElement | null>;
+    /**
+     * If true, truncates the text of the selected option.
+     * @default true
+     */
     shouldTruncateText?: boolean;
+    /**
+     * The size of the select.
+     * @default md
+     */
     size?: FormControlSize;
+    /** Callback function triggered when the search input changes. If not provided, the component will filter options based on the search input. */
+    onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback function triggered when the selected value changes. */
+    onValueChange?: (details: SelectValueChangeDetails) => void;
+    /** Callback function triggered when the select dropdown is opened or closed. */
+    onOpenChange?: (details: CSelect.OpenChangeDetails) => void;
+    /**
+     * Data test id for the select.
+     * @default kibble-select
+     */
+    'data-testid'?: string;
+    /** Configuration for the content of the select. */
+    contentProps?: CSelect.ContentProps;
+    /** Configuration for the positioner of the select. */
+    positionerProps?: CSelect.PositionerProps;
+    /**
+     * Whether to render the select in a portal.
+     * @default true
+     */
+    portalled?: boolean;
 }
 declare const WrappedSelect: React.FC<SelectProps>;
 export { WrappedSelect as Select };

package/dist/types/components/Select/select.types.d.ts

@@ -1,4 +1,5 @@
 import { TypographyVariant } from '../../shared/types/typography';
+import { Select as CSelect } from '@chakra-ui/react/select';
 export interface SelectOption {
     disabled?: boolean;
     groupLabel?: string;
@@ -8,4 +9,6 @@ export interface SelectOption {
     value: string;
     valueText?: string;
     variant?: TypographyVariant;
+    'data-testid'?: string;
 }
+export type SelectValueChangeDetails = CSelect.ValueChangeDetails<SelectOption>;

package/dist/types/components/SortableList/components/SortableListDragHandle/sortableListDragHandle.component.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../../../Button/button.component';
-export declare const SortableListDragHandle: ({ ...rest }: ButtonProps) => React.JSX.Element;
+export declare const SortableListDragHandle: ({ ["data-testid"]: dataTestId, ...rest }: ButtonProps) => React.JSX.Element;