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

package/dist/types/components/Toast/components/Toaster/toaster.component.d.ts

@@ -1,7 +1,12 @@
 import { default as React } from 'react';
 import { CreateToasterReturn } from '@chakra-ui/react/toast';
 interface ToasterProps {
+    /** Toaster to be used. */
     toaster: CreateToasterReturn;
+    /** Data test id for the toaster.
+     * @default kibble-toaster
+     */
+    'data-testid'?: string;
 }
-export declare const Toaster: ({ toaster }: ToasterProps) => React.JSX.Element;
+export declare const Toaster: ({ toaster, ["data-testid"]: dataTestId, }: ToasterProps) => React.JSX.Element;
 export {};

package/dist/types/components/Toast/toast.component.d.ts

@@ -3,12 +3,30 @@ import { IconProps } from '../Icon/icon.component';
 import { Status } from '../../shared/types/status';
 import { ToastActionProps } from './components/ToastAction/toastAction.component';
 export interface ToastProps {
+    /** The action for the toast. Renders a `Button` */
     action?: ToastActionProps;
+    /**
+     * If true, the toast will display a close button.
+     * @default true
+     */
     closable?: boolean;
+    /** The description of the toast. */
     description?: string;
+    /**
+     * If true, the toast will not display an icon.
+     * @default false
+     */
     hideIcon?: boolean;
+    /** The icon to display in the toast. If no icon is provided, a default icon based on the status will be used. */
     icon?: IconProps;
+    /**
+     * The status of the toast. This will determine the icon and color of the toast.
+     * @default success
+     */
     status?: Status;
+    /** The title of the toast. */
     title?: string;
+    /** Data test id for the toast. */
+    'data-testid'?: string;
 }
-export declare const Toast: ({ action, closable, description, hideIcon, icon, status, title, }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ action, closable, description, hideIcon, icon, status, title, ["data-testid"]: dataTestId, }: ToastProps) => React.JSX.Element;

package/dist/types/components/Toast/toast.recipe.d.ts

@@ -1,9 +1,10 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-type ToastSlot = 'root' | 'indicator' | 'title' | 'description' | 'closeTrigger' | 'actionTrigger';
+declare const toastSlots: ("description" | "title" | "root" | "indicator" | "closeTrigger" | "actionTrigger")[];
+type ToastSlot = (typeof toastSlots)[number];
 type ToastSlotStyles = {
     [key in ToastSlot]?: SystemStyleObject;
 };
-export declare const toastRecipe: import('@chakra-ui/react').SlotRecipeDefinition<ToastSlot, {
+export declare const toastRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"description" | "title" | "root" | "indicator" | "closeTrigger" | "actionTrigger", {
     variant: Record<"default" | "info" | "success" | "warning" | "error", ToastSlotStyles>;
     hideIcon: {
         true: {

package/dist/types/components/Toast/toast.types.d.ts

@@ -5,10 +5,23 @@ interface ToastStatusChangeDetails {
     src?: string | undefined;
 }
 export interface ToastOptions extends ToastProps {
+    /** The duration the toast will be displayed in milliseconds.
+     * @default 5000
+     */
     duration?: number;
+    /** Unique identifier for the toast. */
     id?: string;
+    /** Callback function triggered when the toast status changes. */
     onStatusChange?: (details: ToastStatusChangeDetails) => void;
+    /** The delay in milliseconds before the toast is removed from the DOM after being dismissed.
+     * @default 0
+     */
     removeDelay?: number;
+    /**
+     * If true, the toast will not be dismissed automatically.
+     * @default false
+     */
+    persistent?: boolean;
 }
 export interface ToastInstance {
     create: (options: ToastOptions) => string;

package/dist/types/components/Toast/useToast.d.ts

@@ -1,3 +1,8 @@
 import { ToastInstance } from './toast.types';
 import { ToasterPlacement } from './components/Toaster/toaster.records';
+/**
+ * Hook to create and manage toast notifications.
+ * @param placement The placement of the toast.
+ * @returns The toast instance.
+ */
 export declare const useToast: (placement?: ToasterPlacement) => ToastInstance;

package/dist/types/components/Tooltip/tooltip.component.d.ts

@@ -2,10 +2,36 @@ import { default as React } from 'react';
 import { HoverCard } from '@chakra-ui/react/hover-card';
 import { Placement } from '../../shared/types/placement';
 export interface TooltipProps extends Omit<HoverCard.RootProps, 'children'> {
+    /** The element that the tooltip will be attached to. The tooltip will be shown when the user hovers over this element. */
     children?: React.ReactNode;
+    /**
+     * Controls whether the tooltip is shown on hover or not
+     * @default false
+     */
     disabled?: boolean;
+    /** The text to be displayed in the tooltip */
     label: string;
+    /**
+     * Sets the placement of the tooltip 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 top
+     */
     placement?: Placement;
+    /**
+     * Controls whether the tooltip is rendered in a portal or not. Portals are used to render components outside of their parent components DOM hierarchy.
+     * @default true
+     */
     portalled?: boolean;
+    /** Ref to the portal element. */
+    portalRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * If true, the tooltip will render a contrasting variant.
+     * @default false
+     */
+    onContrast?: boolean;
+    /**
+     * Data test id for the tooltip.
+     * @default kibble-tooltip
+     */
+    'data-testid'?: string;
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Tooltip/tooltip.recipe.d.ts

@@ -1 +1,10 @@
-export declare const tooltipRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "arrow" | "arrowTip", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "trigger" | "content" | "arrow" | "arrowTip">>;
+export declare const tooltipRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "arrow" | "arrowTip" | "trigger" | "positioner", {
+    onContrast: {
+        true: {
+            content: {
+                '--hovercard-bg': "colors.background.overlay";
+                color: "text";
+            };
+        };
+    };
+}>;

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

@@ -3,12 +3,14 @@ export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './Calendar';
 export * from './Card';
 export * from './CharacterCounter';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './ConversationCard';
 export * from './DatePicker';
+export * from './DateTimePicker';
 export * from './Divider';
 export * from './Heading';
 export * from './Icon';
@@ -21,6 +23,8 @@ export * from './Picture';
 export * from './PinInput';
 export * from './Popover';
 export * from './RadioGroup';
+export * from './Radiomark';
+export * from './Rating';
 export * from './RatingDots';
 export * from './Select';
 export * from './SortableList';
@@ -39,3 +43,4 @@ export * from './TimeRange';
 export * from './Timestamp';
 export * from './Toast';
 export * from './Tooltip';
+export * from './NumberInput';

package/dist/types/hocs/withFormControl/withFormControl.d.ts

@@ -3,23 +3,67 @@ import { FormControlLabelPosition, FormControlSize } from './withFormControl.typ
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { TypographyVariant } from '../../shared/types/typography';
 export interface WithFormControlProps {
+    /** If true, the form control will be disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /** The error text to be displayed when the form control is invalid.
+     * @default Field is invalid
+     */
     errorText?: string;
+    /** Props to customize the form control. */
     formControlStyle?: SystemStyleObject;
+    /** If true, the form control will take the full width of its container.
+     * @default true
+     */
     fullWidth?: boolean;
+    /** The helper text to be displayed below the form control. */
     helperText?: string;
+    /** If true, the form control will be displayed inline with the label. */
     inlineField?: boolean;
+    /** If true, the form control will be invalid.
+     * @default false
+     */
     invalid?: boolean;
+    /** The variant of the invalid icon.
+     * @default danger
+     */
     invalidIconColor?: TypographyVariant;
+    /** The label to be displayed above the form control. */
     label?: string | React.ReactNode;
+    /** The position of the label relative to the form control.
+     * @default start
+     */
     labelPosition?: FormControlLabelPosition;
+    /** Props to customize the label. */
     labelStyle?: SystemStyleObject;
+    /** If true, the form control will be styled for contrast mode.
+     * @default false
+     */
     onContrast?: boolean;
+    /** If true, the form element will be read only.
+     * @default false
+     */
     readOnly?: boolean;
+    /** If true, the form control will be required.
+     * @default false
+     */
     required?: boolean;
+    /** If true, the form control will show an optional text.
+     * @default false
+     */
     showOptionalElement?: boolean;
+    /** The size of the form control.
+     * @default md
+     */
     size?: FormControlSize;
+    /** If true, the form control will show an invalid icon.
+     * @default false
+     */
     useInvalidIcon?: boolean;
+    /** If true, the form control will show an invalid text.
+     * @default true
+     */
     useInvalidText?: boolean;
 }
 export declare const withFormControl: <P extends WithFormControlProps>(Component: React.ComponentType<P>) => React.FC<P>;

package/dist/types/hocs/withTruncation.d.ts

@@ -1,9 +1,17 @@
 import { default as React, ReactNode } from 'react';
 import { TooltipProps } from '../components/Tooltip';
 export interface WithTruncationProps {
+    /** If true, the text will be truncated. */
     truncated?: boolean;
+    /** The number of lines to truncate the text to. */
     noOfLines?: number;
+    /** Props to customize the tooltip. See `Tooltip` for more information. */
     tooltipProps?: Omit<TooltipProps, 'disabled'>;
+    /** The children to be displayed inside the truncated text. */
     children?: ReactNode | string;
+    /** Data test id for the truncated text.
+     * @default kibble-truncated-text
+     */
+    'data-testid'?: string;
 }
 export declare const withTruncation: <P extends WithTruncationProps>(Component: React.ComponentType<P>) => React.FC<P>;

package/dist/types/hooks/useBreakpoint/index.d.ts

@@ -1 +1,5 @@
+/**
+ * @description Hook to get the current page breakpoint
+ * @returns The current breakpoint
+ */
 export declare const useBreakpoint: () => string;

package/dist/types/hooks/useColorMode/index.d.ts

@@ -1,10 +1,49 @@
 import { ColorMode } from '../../shared/types/theme';
+/**
+ * The return object for the useColorMode hook.
+ */
 export interface UseColorModeReturn {
+    /**
+     * The current active color mode.
+     * If the system preference is being used, this will be the resolved mode.
+     */
     colorMode: ColorMode;
+    /**
+     * The theme key used for color mode styling.
+     */
     colorModeThemeKey: string;
+    /**
+     * The forced color mode, if any.
+     */
     forcedColorMode?: ColorMode;
+    /**
+     * Function to set the color mode.
+     * @param colorMode - The new color mode to set. Can be 'light', 'dark', or 'system'.
+     */
     setColorMode: (colorMode: ColorMode | 'system') => void;
+    /**
+     * The system's preferred color mode.
+     */
     systemColorMode: ColorMode;
+    /**
+     * Function to toggle between 'light' and 'dark' color modes.
+     */
     toggleColorMode: () => void;
 }
+/**
+ * Hook to manage and access the current color mode (light or dark).
+ *
+ * @returns {UseColorModeReturn} An object containing the current color mode and methods to update it.
+ *
+ * @example
+ * ```tsx
+ * const { colorMode, toggleColorMode } = useColorMode();
+ *
+ * return (
+ *   <Button onClick={toggleColorMode}>
+ *     Toggle to {colorMode === 'light' ? 'dark' : 'light'}
+ *   </Button>
+ * );
+ * ```
+ */
 export declare const useColorMode: () => UseColorModeReturn;

package/dist/types/hooks/useColorModeValue/index.d.ts

@@ -1 +1,7 @@
+/**
+ * @description Hook to get a color mode dependent value
+ * @param light The value to return when the color mode is light
+ * @param dark The value to return when the color mode is dark
+ * @returns The color mode dependent value
+ */
 export declare const useColorModeValue: <T>(light: T, dark: T) => T;

package/dist/types/hooks/useDeviceType/index.d.ts

@@ -1,3 +1,7 @@
 type DeviceType = 'mobile' | 'desktop' | 'tablet';
+/**
+ * @description Hook to get the current device type
+ * @returns The current device type
+ */
 export declare const useDeviceType: () => DeviceType;
 export {};

package/dist/types/hooks/useIconTextSizeMap.d.ts

@@ -1,3 +1,8 @@
 import { IconSize } from '../components/Icon/icon.types';
 import { TextSize } from '../components/Text/text.types';
+/**
+ * @description Hook to get the corresponding icon size for a given text size
+ * @param textSize The text size to get the corresponding icon size for
+ * @returns The corresponding icon size
+ */
 export declare const useIconTextSizeMap: (textSize: TextSize) => IconSize;

package/dist/types/shared/components/withVariantStory.d.ts

@@ -1,4 +1,10 @@
 import { default as React } from 'react';
+import { ColorMode } from '../types/theme';
+export declare const VariantContainer: ({ children, onContrast, theme, }: {
+    children: React.ReactNode;
+    onContrast?: boolean;
+    theme: ColorMode;
+}) => React.JSX.Element;
 export declare const WithVariantStory: ({ children, variant, onContrast, }: {
     variant?: string;
     onContrast?: boolean;

package/dist/types/shared/types/index.d.ts

@@ -3,3 +3,4 @@ export * from './placement';
 export * from './status';
 export * from './theme';
 export * from './typography';
+export { type FormControlSize } from '../../hocs/withFormControl/withFormControl.types';

package/dist/types/theme/providers/theme.provider.d.ts

@@ -3,6 +3,7 @@ import { ChakraProviderProps } from '@chakra-ui/react';
 import { SystemContext } from '@chakra-ui/react/styled-system';
 import { ColorModeProviderProps } from './colorMode.provider';
 interface KibbleThemeProviderProps extends Omit<ChakraProviderProps, 'value'>, Omit<ColorModeProviderProps, 'children' | 'storageKey'> {
+    /** Custom theme to override the default theme. */
     customTheme?: SystemContext;
 }
 export declare const KibbleThemeProvider: ({ customTheme, children, enableSystem, ...rest }: KibbleThemeProviderProps) => React.JSX.Element;

package/dist/types/theme/recipes/List/list.recipe.d.ts

@@ -0,0 +1,14 @@
+export declare const listRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item", {
+    variant: {
+        marker: {
+            root: {
+                ml: number;
+            };
+            item: {
+                _marker: {
+                    color: "text.default";
+                };
+            };
+        };
+    };
+}>;

package/dist/types/theme/recipes/Table/table.recipe.d.ts

@@ -0,0 +1,29 @@
+export declare const tableRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
+    striped: {
+        true: {
+            columnHeader: {
+                bg: "background.subtle";
+                '&[data-sticky]': {
+                    bg: "background.subtle";
+                };
+            };
+            row: {
+                '&:nth-of-type(odd) td': {
+                    bg: "background";
+                };
+                '&:nth-of-type(even) td': {
+                    bg: "background.subtle";
+                };
+            };
+        };
+    };
+    stickyHeader: {
+        true: {
+            header: {
+                '& tr': {
+                    shadow: "0 1px 0 0 {colors.border.default}";
+                };
+            };
+        };
+    };
+}>;