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

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/theme/index.js

@@ -1,4 +1,4 @@
-import { K as b, k as i, s as m } from "../../chunks/theme.provider-w_I9S10D.js";
+import { K as b, k as i, s as m } from "../../chunks/theme.provider-BD7qyu-B.js";
 export {
   b as KibbleThemeProvider,
   i as kibbleThemeConfig,

package/dist/esm/theme/semanticTokens/index.js

@@ -81,10 +81,10 @@ const r = [
   "background.secondaryAlpha.hover",
   "background.secondaryAlpha.pressed",
   "background.subtle",
-  "background.subtle.contrast",
+  "background.contrast.subtle",
   "background.subtle.less",
-  "background.subtle.more",
-  "background.subtle.most",
+  "background.contrast.moreSubtle",
+  "background.contrast.mostSubtle",
   "background.success",
   "background.success.contrast",
   "background.warning",
@@ -104,7 +104,7 @@ const r = [
   "border.strong",
   "border.strong.contrast",
   "border.subtle",
-  "border.subtle.contrast",
+  "border.contrast.subtle",
   "border.success",
   "border.warning"
 ];

package/dist/esm/theme/semanticTokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/theme/semanticTokens/semanticTokens.types.ts"],"sourcesContent":["export type SemanticProperty = 'text' | 'background' | 'border' | 'divider';\n\nexport type SemanticColorScheme =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'warning'\n  | 'success'\n  | 'neutral'\n  | 'primaryAlpha'\n  | 'secondaryAlpha'\n  | 'dangerAlpha'\n  | 'neutralAlpha'\n  | 'ai';\n\nexport type SemanticTokenDefinition = {\n  value: {\n    _light: string | number;\n    _dark: string | number;\n  };\n};\n\nexport const semanticTypographyTokens = [\n  'text',\n  'text.accent',\n  'text.accentSubtle',\n  'text.brand',\n  'text.brand.contrast',\n  'text.brand.contrast.hover',\n  'text.brand.hover',\n  'text.contrast',\n  'text.danger',\n  'text.danger.contrast',\n  'text.default',\n  'text.info',\n  'text.interactive',\n  'text.interactive.contrast',\n  'text.interactive.contrast.hover',\n  'text.interactive.hover',\n  'text.placeholder',\n  'text.placeholder.contrast',\n  'text.subtle',\n  'text.subtle.contrast',\n  'text.success',\n  'text.warning',\n] as const;\nexport type SemanticTypographyToken = (typeof semanticTypographyTokens)[number];\n\nexport const semanticBackgroundTokens = [\n  'background.accent',\n  'background.accentSubtle',\n  'background.ai',\n  'background.ai.hover',\n  'background.ai.pressed',\n  'background.alpha',\n  'background.alpha.contrast',\n  'background.alpha.contrast.hover',\n  'background.alpha.contrast.pressed',\n  'background.alpha.hover',\n  'background.alpha.pressed',\n  'background.backdrop',\n  'background.brand',\n  'background.contrast',\n  'background.danger',\n  'background.danger.contrast',\n  'background.default',\n  'background.destructive',\n  'background.destructive.hover',\n  'background.destructive.pressed',\n  'background.destructive.contrast',\n  'background.destructive.contrast.hover',\n  'background.destructive.contrast.pressed',\n  'background.destructiveAlpha',\n  'background.destructiveAlpha.contrast',\n  'background.destructiveAlpha.contrast.hover',\n  'background.destructiveAlpha.contrast.pressed',\n  'background.destructiveAlpha.hover',\n  'background.destructiveAlpha.pressed',\n  'background.info',\n  'background.note',\n  'background.note.hover',\n  'background.overlay',\n  'background.primary',\n  'background.primary.contrast',\n  'background.primary.contrast.hover',\n  'background.primary.contrast.pressed',\n  'background.primary.hover',\n  'background.primary.pressed',\n  'background.primaryAlpha',\n  'background.primaryAlpha.contrast',\n  'background.primaryAlpha.contrast.hover',\n  'background.primaryAlpha.contrast.pressed',\n  'background.primaryAlpha.hover',\n  'background.primaryAlpha.pressed',\n  'background.secondary',\n  'background.secondary.contrast',\n  'background.secondary.contrast.hover',\n  'background.secondary.contrast.pressed',\n  'background.secondary.hover',\n  'background.secondary.pressed',\n  'background.secondaryAlpha',\n  'background.secondaryAlpha.contrast',\n  'background.secondaryAlpha.contrast.hover',\n  'background.secondaryAlpha.contrast.pressed',\n  'background.secondaryAlpha.hover',\n  'background.secondaryAlpha.pressed',\n  'background.subtle',\n  'background.subtle.contrast',\n  'background.subtle.less',\n  'background.subtle.more',\n  'background.subtle.most',\n  'background.success',\n  'background.success.contrast',\n  'background.warning',\n  'background.warning.contrast',\n] as const;\nexport type SemanticBackgroundColorToken = (typeof semanticBackgroundTokens)[number];\n\nexport const semanticDividerTokens = ['divider', 'divider.default'] as const;\nexport type SemanticDividerColorToken = (typeof semanticDividerTokens)[number];\n\nexport const semanticBorderTokens = [\n  'border',\n  'border.accent',\n  'border.accentSubtle',\n  'border.brand',\n  'border.contrast',\n  'border.danger',\n  'border.danger.contrast',\n  'border.default',\n  'border.focus',\n  'border.focus.contrast',\n  'border.info',\n  'border.strong',\n  'border.strong.contrast',\n  'border.subtle',\n  'border.subtle.contrast',\n  'border.success',\n  'border.warning',\n] as const;\nexport type SemanticBorderColorToken = (typeof semanticBorderTokens)[number];\n"],"names":["semanticTypographyTokens","semanticBackgroundTokens","semanticDividerTokens","semanticBorderTokens"],"mappings":";AAsBO,MAAMA,IAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAwB,CAAC,WAAW,iBAAiB,GAGrDC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"index.js","sources":["../../../../src/theme/semanticTokens/semanticTokens.types.ts"],"sourcesContent":["export type SemanticProperty = 'text' | 'background' | 'border' | 'divider';\n\nexport type SemanticColorScheme =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'warning'\n  | 'success'\n  | 'neutral'\n  | 'primaryAlpha'\n  | 'secondaryAlpha'\n  | 'dangerAlpha'\n  | 'neutralAlpha'\n  | 'gradientFull'\n  | 'gradientPink'\n  | 'gradientGreen';\n\nexport type SemanticTokenDefinition = {\n  value: {\n    _light: string | number;\n    _dark: string | number;\n  };\n};\n\nexport const semanticTypographyTokens = [\n  'text',\n  'text.accent',\n  'text.accentSubtle',\n  'text.brand',\n  'text.brand.contrast',\n  'text.brand.contrast.hover',\n  'text.brand.hover',\n  'text.contrast',\n  'text.danger',\n  'text.danger.contrast',\n  'text.default',\n  'text.info',\n  'text.interactive',\n  'text.interactive.contrast',\n  'text.interactive.contrast.hover',\n  'text.interactive.hover',\n  'text.placeholder',\n  'text.placeholder.contrast',\n  'text.subtle',\n  'text.subtle.contrast',\n  'text.success',\n  'text.warning',\n] as const;\nexport type SemanticTypographyToken = (typeof semanticTypographyTokens)[number];\n\nexport const semanticBackgroundTokens = [\n  'background.accent',\n  'background.accentSubtle',\n  'background.ai',\n  'background.ai.hover',\n  'background.ai.pressed',\n  'background.alpha',\n  'background.alpha.contrast',\n  'background.alpha.contrast.hover',\n  'background.alpha.contrast.pressed',\n  'background.alpha.hover',\n  'background.alpha.pressed',\n  'background.backdrop',\n  'background.brand',\n  'background.contrast',\n  'background.danger',\n  'background.danger.contrast',\n  'background.default',\n  'background.destructive',\n  'background.destructive.hover',\n  'background.destructive.pressed',\n  'background.destructive.contrast',\n  'background.destructive.contrast.hover',\n  'background.destructive.contrast.pressed',\n  'background.destructiveAlpha',\n  'background.destructiveAlpha.contrast',\n  'background.destructiveAlpha.contrast.hover',\n  'background.destructiveAlpha.contrast.pressed',\n  'background.destructiveAlpha.hover',\n  'background.destructiveAlpha.pressed',\n  'background.info',\n  'background.note',\n  'background.note.hover',\n  'background.overlay',\n  'background.primary',\n  'background.primary.contrast',\n  'background.primary.contrast.hover',\n  'background.primary.contrast.pressed',\n  'background.primary.hover',\n  'background.primary.pressed',\n  'background.primaryAlpha',\n  'background.primaryAlpha.contrast',\n  'background.primaryAlpha.contrast.hover',\n  'background.primaryAlpha.contrast.pressed',\n  'background.primaryAlpha.hover',\n  'background.primaryAlpha.pressed',\n  'background.secondary',\n  'background.secondary.contrast',\n  'background.secondary.contrast.hover',\n  'background.secondary.contrast.pressed',\n  'background.secondary.hover',\n  'background.secondary.pressed',\n  'background.secondaryAlpha',\n  'background.secondaryAlpha.contrast',\n  'background.secondaryAlpha.contrast.hover',\n  'background.secondaryAlpha.contrast.pressed',\n  'background.secondaryAlpha.hover',\n  'background.secondaryAlpha.pressed',\n  'background.subtle',\n  'background.contrast.subtle',\n  'background.subtle.less',\n  'background.contrast.moreSubtle',\n  'background.contrast.mostSubtle',\n  'background.success',\n  'background.success.contrast',\n  'background.warning',\n  'background.warning.contrast',\n] as const;\nexport type SemanticBackgroundColorToken = (typeof semanticBackgroundTokens)[number];\n\nexport const semanticDividerTokens = ['divider', 'divider.default'] as const;\nexport type SemanticDividerColorToken = (typeof semanticDividerTokens)[number];\n\nexport const semanticBorderTokens = [\n  'border',\n  'border.accent',\n  'border.accentSubtle',\n  'border.brand',\n  'border.contrast',\n  'border.danger',\n  'border.danger.contrast',\n  'border.default',\n  'border.focus',\n  'border.focus.contrast',\n  'border.info',\n  'border.strong',\n  'border.strong.contrast',\n  'border.subtle',\n  'border.contrast.subtle',\n  'border.success',\n  'border.warning',\n] as const;\nexport type SemanticBorderColorToken = (typeof semanticBorderTokens)[number];\n\nexport type KibbleSemanticColorToken =\n  | SemanticBackgroundColorToken\n  | SemanticBorderColorToken\n  | SemanticDividerColorToken\n  | SemanticTypographyToken;\n"],"names":["semanticTypographyTokens","semanticBackgroundTokens","semanticDividerTokens","semanticBorderTokens"],"mappings":";AAwBO,MAAMA,IAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAwB,CAAC,WAAW,iBAAiB,GAGrDC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

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

@@ -19,7 +19,7 @@ export { Highlight } from '@chakra-ui/react/highlight';
 export { Kbd } from '@chakra-ui/react/kbd';
 export { LinkBox, LinkOverlay } from '@chakra-ui/react/link';
 export { List } from '@chakra-ui/react/list';
-export { Accordion } from '@chakra-ui/react/accordion';
+export { Accordion, useAccordionItemContext } from '@chakra-ui/react/accordion';
 export { ActionBar } from '@chakra-ui/react/action-bar';
 export { Badge } from '@chakra-ui/react/badge';
 export { Breadcrumb } from '@chakra-ui/react/breadcrumb';
@@ -31,10 +31,8 @@ export { Dialog } from '@chakra-ui/react/dialog';
 export { Drawer } from '@chakra-ui/react/drawer';
 export { Editable } from '@chakra-ui/react/editable';
 export { FileUpload } from '@chakra-ui/react/file-upload';
-export { NumberInput } from '@chakra-ui/react/number-input';
 export { Pagination } from '@chakra-ui/react/pagination';
 export { ProgressCircle } from '@chakra-ui/react/progress-circle';
-export { Progress } from '@chakra-ui/react/progress';
 export { QrCode } from '@chakra-ui/react/qr-code';
 export { RatingGroup } from '@chakra-ui/react/rating-group';
 export { Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react/skeleton';
@@ -53,4 +51,4 @@ export { Portal } from '@chakra-ui/react/portal';
 export { Show } from '@chakra-ui/react/show';
 export { VisuallyHidden } from '@chakra-ui/react/visually-hidden';
 export { useBreakpointValue, useConst, useDisclosure, useMediaQuery } from '@chakra-ui/react';
-export { createSystem, defineConfig, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTokens, mergeConfigs, useRecipe, useSlotRecipe, type SystemStyleObject, } from '@chakra-ui/react/styled-system';
+export { createSystem, defineConfig, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTokens, mergeConfigs, useRecipe, useSlotRecipe, type SystemStyleObject, type ConditionalValue, } from '@chakra-ui/react/styled-system';

package/dist/types/components/Alert/alert.component.d.ts

@@ -6,16 +6,43 @@ import { TextProps } from '../Text/text.component';
 import { Status } from '../../shared/types/status';
 import { AlertButtonProps } from './components/AlertButton/alertButton.component';
 export interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {
+    /** Props to customize the alert button. */
     buttonProps?: AlertButtonProps;
+    /** The body of the alert */
     description?: React.ReactNode;
+    /** Props to customize the description when passed as a string. */
     descriptionProps?: TextProps;
+    /**
+     * If true, the close button will not be displayed.
+     * @default false
+     */
     hideCloseButton?: boolean;
+    /**
+     * If true, the icon will not be displayed.
+     * @default false
+     */
     hideIcon?: boolean;
+    /** Props to customize the icon. */
     iconProps?: IconProps;
+    /** Callback function to be called when the close button is clicked. */
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If true, the alert will use a contrasting variant according to the selected status.
+     * @default false
+     */
     onContrast?: boolean;
+    /**
+     * The status of the alert. Determines the color of the alert.
+     * @default success
+     */
     status?: Status;
+    /** The title of the alert. */
     title?: React.ReactNode;
+    /** Props to customize the title when passed as a string. */
     titleProps?: HeadingProps;
+    /** Data test id for the alert.
+     * @default kibble-alert
+     */
+    'data-testid'?: string;
 }
-export declare const Alert: ({ buttonProps, description, descriptionProps, hideCloseButton, hideIcon, iconProps, onClose, onContrast, status, title, titleProps, ...rest }: AlertProps) => React.JSX.Element;
+export declare const Alert: ({ buttonProps, description, descriptionProps, hideCloseButton, hideIcon, iconProps, onClose, onContrast, status, title, titleProps, ["data-testid"]: dataTestId, ...rest }: AlertProps) => React.JSX.Element;

package/dist/types/components/Alert/alert.recipe.d.ts

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

package/dist/types/components/Alert/components/AlertButton/alertButton.component.d.ts

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

package/dist/types/components/Avatar/avatar.component.d.ts

@@ -5,19 +5,47 @@ import { IconName } from '../Icon';
 import { AvatarSize, AvatarVariant } from './avatar.types';
 import { AvatarBadgeProps } from './components/AvatarBadge/avatarBadge.component';
 export interface AvatarProps extends CAvatar.RootProps {
+    /** Props to customize the badge, `showBadge` must be set to true for the badge to show. */
     badgeProps?: AvatarBadgeProps;
+    /** If true, the border of the avatar will be hidden. */
     hideBorder?: boolean;
+    /** The name of the icon to be displayed inside the avatar. */
     iconName?: IconName;
+    /** The name to derive the initials from. This will also be the default text for the tooltip unless `tooltipProps` is passed in. */
     name?: string;
+    /** Callback function when the avatar is clicked. */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onRemove?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback function when the remove button is clicked. */
+    onRemove?: (value?: string) => void;
+    /** If true, a badge will be displayed on the avatar. */
     showBadge?: boolean;
+    /** If true, a remove button will be displayed when hovering over the avatar.
+     * @default false
+     */
     showRemoveButton?: boolean;
+    /** Shows a tooltip on hover with the avatar name, if `tooltipProps` is not passed in. The tooltip will be disabled if no name is provided. */
     showTooltip?: boolean;
+    /** Size of the avatar.
+     * @default md
+     */
     size?: AvatarSize;
+    /** The source URL of the image to be displayed in the avatar. */
     src?: string;
+    /** Props to customize the tooltip. See `Tooltip` for more information. */
     tooltipProps?: TooltipProps;
+    /** Variant of the avatar.
+     * @default default
+     */
     variant?: AvatarVariant;
+    /** The webp source URL of the image to be displayed in the avatar. */
     webpSrc?: string;
+    /** The value of the avatar. */
+    value?: string;
+    /** Data test id for the avatar.
+     * @default kibble-avatar
+     */
+    'data-testid'?: string;
+    /** The children to be displayed inside the avatar. */
+    children?: React.ReactNode;
 }
-export declare const Avatar: ({ badgeProps, hideBorder, iconName, name, onClick, onRemove, showBadge, showRemoveButton, showTooltip, size, src, tooltipProps, variant, webpSrc, ...rest }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: React.MemoExoticComponent<({ badgeProps, hideBorder, iconName, name, onClick, onRemove, showBadge, showRemoveButton, showTooltip, size, src, tooltipProps, variant, webpSrc, value, ["data-testid"]: dataTestId, children, ...rest }: AvatarProps) => React.JSX.Element>;

package/dist/types/components/Avatar/avatar.recipe.d.ts

@@ -1,9 +1,10 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-type AvatarSlot = 'root' | 'fallback' | 'image';
+declare const avatarSlots: ("image" | "root" | "fallback")[];
+type AvatarSlot = (typeof avatarSlots)[number];
 type AvatarSlotStyles = {
     [key in AvatarSlot]?: SystemStyleObject;
 };
-export declare const avatarRecipe: import('@chakra-ui/react').SlotRecipeDefinition<AvatarSlot, {
+export declare const avatarRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"image" | "root" | "fallback", {
     size: Record<"xs" | "sm" | "md" | "lg" | "xl", AvatarSlotStyles>;
     variant: Record<"accent" | "default" | "dashed" | "contrast" | "outlineAccent" | "outlineYellow", AvatarSlotStyles>;
     interactive: {

package/dist/types/components/Avatar/avatar.records.d.ts

@@ -0,0 +1,2 @@
+import { AvatarSize } from './avatar.types';
+export declare const AvatarSizeMap: Record<AvatarSize, string>;

package/dist/types/components/Avatar/components/AvatarBadge/avatarBadge.component.d.ts

@@ -6,12 +6,20 @@ import { AvatarBadgePosition } from './avatarBadge.types';
 import { FlexProps } from '@chakra-ui/react/flex';
 import { Status } from '../../../../shared/types/status';
 export interface AvatarBadgeProps extends FlexProps {
+    /** Name of the icon inside the badge. */
     iconName?: IconName;
+    /** Position of the badge relative to the avatar. */
     position?: ConditionalValue<AvatarBadgePosition>;
+    /** Determines the color of the badge. */
     status?: Status;
+    /** Data test id for the avatar badge. */
+    'data-testid'?: string;
 }
 interface InternalAvatarBadgeProps extends AvatarBadgeProps {
+    /** Size of the avatar.
+     * @internal
+     */
     avatarSize?: AvatarSize;
 }
-export declare const AvatarBadge: ({ avatarSize, iconName, position, status, ...rest }: InternalAvatarBadgeProps) => React.JSX.Element;
+export declare const AvatarBadge: ({ avatarSize, iconName, position, status, ["data-testid"]: dataTestId, ...rest }: InternalAvatarBadgeProps) => React.JSX.Element;
 export {};

package/dist/types/components/Avatar/components/AvatarRemoveButton/avatarRemoveButton.component.d.ts

@@ -1,11 +1,20 @@
-import { default as React, Dispatch, SetStateAction } from 'react';
+import { default as React } from 'react';
+import { AvatarSize } from '../../avatar.types';
 interface AvatarRemoveButtonProps {
-    onRemove?: React.MouseEventHandler<HTMLDivElement>;
-    isBeingHovered: boolean;
-    setIsBeingHovered: Dispatch<SetStateAction<boolean>>;
+    /** Callback function to be called when the remove button is clicked. */
+    onRemove?: (value?: string) => void;
+    /** Value of the avatar. */
+    value?: string;
+    /** Data test id for the remove button.
+     * @default kibble-avatar-remove-button
+     */
+    'data-testid'?: string;
 }
 interface InternalAvatarRemoveButtonProps extends AvatarRemoveButtonProps {
-    avatarSize: string;
+    /** Size of the avatar.
+     * @internal
+     */
+    avatarSize: AvatarSize;
 }
-declare const AvatarRemoveButton: ({ avatarSize, onRemove, isBeingHovered, setIsBeingHovered, }: InternalAvatarRemoveButtonProps) => React.JSX.Element;
+declare const AvatarRemoveButton: ({ avatarSize, onRemove, value, ["data-testid"]: dataTestId, }: InternalAvatarRemoveButtonProps) => React.JSX.Element;
 export default AvatarRemoveButton;

package/dist/types/components/Avatar/components/AvatarTooltipTriggerWrapper/avatarTooltipTriggerWrapper.component.d.ts

@@ -0,0 +1,2 @@
+import { CenterProps } from '@chakra-ui/react/center';
+export declare const AvatarTooltipTriggerWrapper: import('react').ForwardRefExoticComponent<CenterProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/AvatarGroup/avatarGroup.component.d.ts

@@ -2,15 +2,39 @@ import { default as React } from 'react';
 import { AvatarGroupProps as CAvatarGroupProps } from '@chakra-ui/react/avatar';
 import { AvatarProps } from '../Avatar/avatar.component';
 import { AvatarSize, AvatarVariant } from '../Avatar/avatar.types';
+import { MenuProps } from '../Menu';
 export interface AvatarGroupProps extends CAvatarGroupProps {
+    /** Tooltip text for when the add button is hovered. */
     addButtonTooltipText?: string;
+    /** Array of avatars to display in the group. */
     avatars: AvatarProps[];
+    /** Maximum number of avatars to display before it shows a counter instead. */
     max?: number;
-    onAdd?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onRemove?: (index: number) => void;
+    /** Callback function when the add button is clicked. */
+    onAdd?: () => void;
+    /** Callback function when the remove button is clicked. */
+    onRemove?: (value?: string) => void;
+    /** If true, an add button will be displayed at the end of the avatar group.
+     * @default true
+     */
     showAddButton?: boolean;
+    /** If true, a remove button will be displayed when hovering over an avatar.
+     * @default false
+     */
     showRemoveAvatarButton?: boolean;
+    /** Size of the avatars in the group.
+     * @default md
+     */
     size?: AvatarSize;
+    /** Variant of the avatars in the group.
+     * @default default
+     */
     variant?: AvatarVariant;
+    /** Props to customize the add button Menu. See `Menu` for more information. */
+    menuProps?: Omit<MenuProps, 'buttonProps'>;
+    /** Data test id for the avatar group.
+     * @default kibble-avatar-group
+     */
+    'data-testid'?: string;
 }
-export declare const AvatarGroup: ({ addButtonTooltipText, avatars, max, onAdd, onRemove, showAddButton, showRemoveAvatarButton, size, variant, ...rest }: AvatarGroupProps) => React.JSX.Element;
+export declare const AvatarGroup: ({ avatars, max, onAdd, onRemove, showAddButton, showRemoveAvatarButton, size, variant, menuProps, addButtonTooltipText, ["data-testid"]: dataTestId, ...rest }: AvatarGroupProps) => React.JSX.Element;

package/dist/types/components/Button/button.component.d.ts

@@ -2,14 +2,27 @@ import { default as React } from 'react';
 import { ButtonProps as CButtonProps } from '@chakra-ui/react/button';
 import { IconName } from '../Icon/icon.types';
 import { ButtonIconPosition, ButtonSize, ButtonSpinnerPlacement, ButtonVariant } from './button.types';
-export interface ButtonProps extends CButtonProps {
+export interface ButtonProps extends Omit<CButtonProps, 'variant'> {
+    /** If set to true, the button will be rendered in an active state. */
     active?: boolean;
+    /** Name of the icon. */
     iconName?: IconName;
+    /** Position of the icon in relation to the text. */
     iconPosition?: ButtonIconPosition;
+    /** Set this to true to make the button expand to the inner width of its container. Mainly used in mobile layouts. */
     fullWidth?: boolean;
+    /** Size of the button. */
     size?: ButtonSize;
+    /**
+     * If loading is true and loadingText is defined, positions spinner before or after the loading text. If loadingText is omitted, spinner will be centered and this value can be left undefined.
+     * @default start
+     */
     spinnerPlacement?: ButtonSpinnerPlacement;
+    /** Determines whether the button should render a contrasting variant. */
     onContrast?: boolean;
+    /** Variants are used to adjust the button look and feel. Choose a variant that aligns with the button intent and role in the overall design. */
     variant?: ButtonVariant;
+    /** Data test id for the button. */
+    'data-testid'?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Button/button.recipe.d.ts

@@ -1,7 +1,9 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { ButtonConfigVariant } from './button.types';
 export declare const secondarySubtleButtonStyles: SystemStyleObject;
 export declare const secondarySubtleOnContrastButtonStyles: SystemStyleObject;
+export declare const buttonVariantStyles: Record<ButtonConfigVariant, SystemStyleObject>;
 export declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
-    variant: Record<"primary" | "secondary" | "tertiary" | "primaryOnContrast" | "primaryDestructive" | "primaryDestructiveOnContrast" | "secondaryOnContrast" | "secondaryDestructive" | "secondaryDestructiveOnContrast" | "secondarySubtle" | "secondarySubtleOnContrast" | "secondarySubtleDestructive" | "secondarySubtleDestructiveOnContrast" | "tertiaryOnContrast" | "tertiaryDestructive" | "tertiaryDestructiveOnContrast" | "ghost" | "ghostOnContrast" | "ghostNeutral" | "ghostNeutralOnContrast" | "ghostDestructive" | "ghostDestructiveOnContrast" | "ai" | "aiSecondary", SystemStyleObject>;
+    variant: Record<"primary" | "secondary" | "tertiary" | "primaryOnContrast" | "primaryAccent" | "primaryAccentOnContrast" | "primaryDestructive" | "primaryDestructiveOnContrast" | "primaryGradientFull" | "primaryGradientFullOnContrast" | "secondaryOnContrast" | "secondaryDestructive" | "secondaryDestructiveOnContrast" | "secondarySubtle" | "secondarySubtleOnContrast" | "secondarySubtleDestructive" | "secondarySubtleDestructiveOnContrast" | "secondaryGradientFull" | "secondaryGradientFullOnContrast" | "tertiaryOnContrast" | "tertiaryDestructive" | "tertiaryDestructiveOnContrast" | "ghost" | "ghostOnContrast" | "ghostNeutral" | "ghostNeutralOnContrast" | "ghostDestructive" | "ghostDestructiveOnContrast", SystemStyleObject>;
     size: Record<"xs" | "sm" | "md" | "lg", SystemStyleObject>;
 }>;

package/dist/types/components/Button/button.types.d.ts

@@ -1,6 +1,6 @@
-export declare const buttonConfigVariants: readonly ["primary", "primaryOnContrast", "primaryDestructive", "primaryDestructiveOnContrast", "secondary", "secondaryOnContrast", "secondaryDestructive", "secondaryDestructiveOnContrast", "secondarySubtle", "secondarySubtleOnContrast", "secondarySubtleDestructive", "secondarySubtleDestructiveOnContrast", "tertiary", "tertiaryOnContrast", "tertiaryDestructive", "tertiaryDestructiveOnContrast", "ghost", "ghostOnContrast", "ghostNeutral", "ghostNeutralOnContrast", "ghostDestructive", "ghostDestructiveOnContrast", "ai", "aiSecondary"];
+export declare const buttonConfigVariants: readonly ["primary", "primaryOnContrast", "primaryAccent", "primaryAccentOnContrast", "primaryDestructive", "primaryDestructiveOnContrast", "primaryGradientFull", "primaryGradientFullOnContrast", "secondary", "secondaryOnContrast", "secondaryDestructive", "secondaryDestructiveOnContrast", "secondarySubtle", "secondarySubtleOnContrast", "secondarySubtleDestructive", "secondarySubtleDestructiveOnContrast", "secondaryGradientFull", "secondaryGradientFullOnContrast", "tertiary", "tertiaryOnContrast", "tertiaryDestructive", "tertiaryDestructiveOnContrast", "ghost", "ghostOnContrast", "ghostNeutral", "ghostNeutralOnContrast", "ghostDestructive", "ghostDestructiveOnContrast"];
 export type ButtonConfigVariant = (typeof buttonConfigVariants)[number];
-export declare const buttonVariants: readonly ["primary", "primaryDestructive", "secondary", "secondaryDestructive", "secondarySubtle", "secondarySubtleDestructive", "tertiary", "tertiaryDestructive", "ghost", "ghostNeutral", "ghostDestructive", "ai", "aiSecondary"];
+export declare const buttonVariants: readonly ["primary", "primaryDestructive", "primaryAccent", "primaryGradientFull", "secondary", "secondaryDestructive", "secondarySubtle", "secondarySubtleDestructive", "secondaryGradientFull", "tertiary", "tertiaryDestructive", "ghost", "ghostNeutral", "ghostDestructive"];
 export type ButtonVariant = (typeof buttonVariants)[number];
 export declare const buttonSizes: readonly ["xs", "sm", "md", "lg"];
 export type ButtonSize = (typeof buttonSizes)[number];

package/dist/types/components/ButtonGroup/buttonGroup.component.d.ts

@@ -4,10 +4,21 @@ import { GroupedButton } from './buttonGroup.types';
 import { ButtonSize, ButtonVariant } from '../Button/button.types';
 import { MenuProps } from '../Menu/menu.component';
 export interface ButtonGroupProps extends CButtonGroupProps {
+    /** An array of button objects to be rendered in the group. */
     buttons: GroupedButton[];
+    /** Determines wether the button should render a contrasting variant. */
     onContrast?: boolean;
+    /** Size of the button group.
+     * @default md
+     */
     size?: ButtonSize;
+    /** Variants are used to adjust the button look and feel. Choose a variant that aligns with the button intent and role in the overall design. */
     variant?: ButtonVariant;
+    /** If provided, a Menu will be rendered as the last element in the group. See `Menu` for more information. */
     menuProps?: MenuProps;
+    /** Data test id for the button group.
+     * @default kibble-button-group
+     */
+    'data-testid'?: string;
 }
-export declare const ButtonGroup: ({ attached, borderColor, buttons, menuProps, onContrast, size, variant, ...rest }: ButtonGroupProps) => React.JSX.Element;
+export declare const ButtonGroup: ({ attached, borderColor, buttons, menuProps, onContrast, size, variant, ["data-testid"]: dataTestId, ...rest }: ButtonGroupProps) => React.JSX.Element;

package/dist/types/components/Calendar/calendar.component.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { DateProps } from '../DatePicker/datePicker.types';
+export interface CalendarProps extends DateProps {
+    /** Data test id for the calendar.
+     * @default kibble-calendar
+     */
+    'data-testid'?: string;
+    /**
+     * If true, the calendar will allow for a date range selection.
+     * @default true
+     */
+    withDateRange?: boolean;
+    /**
+     * If true, the calendar will show the month and year selectors in the header.
+     * @default false
+     */
+    withHeaderTriggers?: boolean;
+}
+export declare const Calendar: ({ ["data-testid"]: dataTestId, withDateRange, withHeaderTriggers, ...rest }: CalendarProps) => React.JSX.Element;

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

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

package/dist/types/components/Card/card.component.d.ts

@@ -2,20 +2,60 @@ import { default as React } from 'react';
 import { BoxProps } from '@chakra-ui/react/box';
 import { CardSize } from './card.types';
 export interface BaseCardProps {
+    /**
+     * If `false`, the max width will be set to `max-content` and will not take up the full width of the parent.
+     * @default true
+     */
     fullWidth?: boolean;
+    /**
+     * If `true`, the card will use a contrasting variant.
+     * @default false
+     */
     onContrast?: boolean;
+    /**
+     * Size of the card. This mostly determines the amount of padding around the inside edge of the card.
+     * @default md
+     */
     size?: CardSize;
+    /** Data test id for the card.
+     * @default kibble-card
+     */
+    'data-testid'?: string;
 }
 export interface DefaultCardProps extends BaseCardProps {
+    /**
+     * *Only applicable when the `interactive` prop is `true`. If `true`, a blue 2px box shadow will be present around the card.
+     * @default false
+     */
     active?: never;
+    /**
+     * *Only applicable when the `interactive` prop is `true`. If `true`, the card will be styled with a red border.
+     * @default false
+     */
     invalid?: never;
+    /**
+     * If `true`, the card will have hover and active states, and will use the pointer cursor. If setting this value you can also pass the `active` prop to triggr the cards active state.
+     * @default false
+     */
     interactive?: false;
 }
 export interface InteractiveCardProps extends BaseCardProps {
+    /**
+     * *Only applicable when the `interactive` prop is `true`. If `true`, a blue 2px box shadow will be present around the card.
+     * @default false
+     */
     active?: boolean;
+    /**
+     * *Only applicable when the `interactive` prop is `true`. If `true`, the card will be styled with a red border.
+     * @default false
+     */
     invalid?: boolean;
+    /**
+     * If `true`, the card will have hover and active states, and will use the pointer cursor. If setting this value you can also pass the `active` prop to triggr the cards active state.
+     * @default false
+     */
     interactive?: true;
 }
 export type KCardProps = InteractiveCardProps | DefaultCardProps;
 export type CardProps = KCardProps & BoxProps;
-export declare const Card: ({ active, fullWidth, interactive, invalid, onClick, onContrast, size, children, ...rest }: CardProps) => React.JSX.Element;
+export declare const Card: ({ active, fullWidth, interactive, invalid, onClick, onContrast, size, children, ["data-testid"]: dataTestId, ...rest }: CardProps) => React.JSX.Element;

package/dist/types/components/CharacterCounter/characterCounter.component.d.ts

@@ -1,16 +1,24 @@
 import { default as React } from 'react';
 export interface BaseCharacterCounterProps {
+    /** Current character count. */
     currentCount: number;
+    /** If true, the character counter will use a contrasting variant. */
     onContrast?: boolean;
+    /** Data test id for the character counter. */
+    'data-testid'?: string;
 }
 interface CharacterCounterWithLimitProps extends BaseCharacterCounterProps {
+    /** Character limit for the field. */
     limit: number;
+    /** Whether to show the character limit. */
     withLimit?: true;
 }
 interface OnlyCharacterCounterProps extends BaseCharacterCounterProps {
+    /** Character limit for the field. */
     limit?: never;
+    /** Whether to show the character limit. */
     withLimit?: false;
 }
 export type CharacterCounterProps = CharacterCounterWithLimitProps | OnlyCharacterCounterProps;
-export declare const CharacterCounter: ({ currentCount, onContrast, limit, withLimit, }: CharacterCounterProps) => React.JSX.Element;
+export declare const CharacterCounter: ({ currentCount, onContrast, limit, withLimit, ["data-testid"]: dataTestId, }: CharacterCounterProps) => React.JSX.Element;
 export {};

package/dist/types/components/Checkbox/checkbox.component.d.ts

@@ -2,12 +2,29 @@ import { default as React } from 'react';
 import { Checkbox as CCheckbox } from '@chakra-ui/react/checkbox';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
-export interface CheckboxProps extends WithFormControlProps, CCheckbox.RootProps {
+import { CheckedChangeDetails, CheckedState } from './checkbox.types';
+export interface CheckboxProps extends WithFormControlProps, Omit<CCheckbox.RootProps, 'onChange'> {
+    /** Ref to the hidden input element. */
     checkboxRef?: React.Ref<HTMLInputElement | null>;
-    indeterminate?: boolean;
+    /** Ref to the checkbox component. */
     rootRef?: React.Ref<HTMLLabelElement | null>;
+    /** Size of the checkbox.
+     * @default md
+     */
     size?: FormControlSize;
+    /**
+     * If true, the checkbox will be wrapped in a Card component.
+     * @default false
+     */
     withCard?: boolean;
+    /** Callback function when the checkbox value changes. */
+    onCheckedChange?: (details: CheckedChangeDetails) => void;
+    /** If true, the checkbox will be checked. Use `indeterminate` to show a checkbox with a dash in the middle. */
+    checked?: CheckedState;
+    /** Data test id for the checkbox.
+     * @default kibble-checkbox
+     */
+    'data-testid'?: string;
 }
 declare const WrappedCheckbox: React.FC<CheckboxProps>;
 export { WrappedCheckbox as Checkbox };

package/dist/types/components/Checkbox/checkbox.recipe.d.ts

@@ -1,10 +1,11 @@
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { FormVariant } from '../../hocs/withFormControl/withFormControl.types';
-type CheckboxSlot = 'root' | 'hiddenInput' | 'control' | 'indicator' | 'label';
+declare const checkboxSlots: ("label" | "group" | "root" | "indicator" | "control")[];
+type CheckboxSlot = (typeof checkboxSlots)[number];
 type CheckboxSlotStyles = {
     [key in CheckboxSlot]?: SystemStyleObject;
 };
-export declare const checkboxRecipe: import('@chakra-ui/react').SlotRecipeDefinition<CheckboxSlot, {
+export declare const checkboxRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "group" | "root" | "indicator" | "control", {
     variant: Record<FormVariant, CheckboxSlotStyles>;
     size: Record<"sm" | "md" | "lg", CheckboxSlotStyles>;
     withCard: {

package/dist/types/components/Checkbox/checkbox.types.d.ts

@@ -0,0 +1,4 @@
+export type CheckedState = boolean | 'indeterminate';
+export interface CheckedChangeDetails {
+    checked: CheckedState;
+}

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

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

package/dist/types/components/CheckboxGroup/checkboxGroup.component.d.ts

@@ -5,10 +5,20 @@ import { FlexDirection } from '../../shared/types/alignment';
 import { CheckboxProps } from '../Checkbox/checkbox.component';
 import { ConditionalValue } from '@chakra-ui/react/styled-system';
 export interface KCheckboxGroupProps extends WithFormControlProps {
+    /** An array of Checkbox props to be rendered inside the group. */
     checkboxes: CheckboxProps[];
+    /**
+     * The direction to stack the checkboxes.
+     * @default column
+     */
     direction?: ConditionalValue<FlexDirection>;
-    onChange?: (value: string[]) => void;
+    /** Callback function triggered when the value changes. */
+    onValueChange?: (value: string[]) => void;
+    /** Data test id for the checkbox group.
+     * @default kibble-checkbox-group
+     */
+    'data-testid'?: string;
 }
-export type CheckboxGroupProps = KCheckboxGroupProps & Omit<CCheckboxGroupProps, 'onValueChange'>;
+export type CheckboxGroupProps = KCheckboxGroupProps & Omit<CCheckboxGroupProps, 'onChange'>;
 declare const WrappedCheckboxGroup: React.FC<CheckboxGroupProps>;
 export { WrappedCheckboxGroup as CheckboxGroup };