@televet/kibble-ui 1.2.0-beta.2 → 1.2.0-beta.2f7t92n.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/build/components/Avatar/avatar.component.d.ts +26 -0
  2. package/build/components/Avatar/avatar.config.d.ts +2 -0
  3. package/build/components/Avatar/avatar.types.d.ts +1 -0
  4. package/build/components/Avatar/index.d.ts +3 -0
  5. package/build/components/AvatarGroup/avatarGroup.component.d.ts +13 -0
  6. package/build/components/AvatarGroup/avatarGroup.utilities.d.ts +6 -0
  7. package/build/components/AvatarGroup/index.d.ts +1 -0
  8. package/build/components/Button/button.component.d.ts +4 -3
  9. package/build/components/Button/button.config.d.ts +16 -2
  10. package/build/components/Button/button.types.d.ts +8 -5
  11. package/build/components/Button/index.d.ts +0 -1
  12. package/build/components/Icon/icon.config.d.ts +3 -0
  13. package/build/components/Icon/icon.types.d.ts +1 -1
  14. package/build/components/Logo/logo.records.d.ts +6 -0
  15. package/build/components/Textarea/index.d.ts +0 -1
  16. package/build/components/Tooltip/index.d.ts +1 -1
  17. package/build/components/Tooltip/tooltip.config.d.ts +1 -1
  18. package/build/components/Tooltip/tooltip.types.d.ts +4 -0
  19. package/build/components/Typography/Heading/heading.component.d.ts +1 -0
  20. package/build/components/index.d.ts +1 -0
  21. package/build/hooks/useAdaptiveColor.d.ts +1 -1
  22. package/build/hooks/useTheme.d.ts +2 -2
  23. package/build/index.js +766 -475
  24. package/build/index.js.map +1 -1
  25. package/build/theme/theme.config.d.ts +2 -2
  26. package/build/theme/theme.model.d.ts +21 -17
  27. package/build/theme/theme.types.d.ts +22 -17
  28. package/build/theme/tokens/colors/color.record.d.ts +5 -5
  29. package/build/theme/tokens/colors/color.types.d.ts +105 -0
  30. package/build/theme/tokens/colors/colors.d.ts +3 -0
  31. package/build/theme/tokens/colors/index.d.ts +1 -2
  32. package/package.json +5 -2
@@ -0,0 +1,26 @@
1
+ import { AvatarProps as CAvatarProps, Placement } from '@chakra-ui/react';
2
+ import { CSSProperties } from 'react';
3
+ import { AvatarSize } from './avatar.types';
4
+ export declare enum AvatarVariant {
5
+ Green = "green",
6
+ Red = "red",
7
+ Blue = "blue",
8
+ Comet = "comet",
9
+ Number = "number",
10
+ Dashed = "dashed",
11
+ Image = "image"
12
+ }
13
+ export interface AvatarProps extends CAvatarProps {
14
+ name: string;
15
+ size?: AvatarSize;
16
+ isClinic?: boolean;
17
+ showTooltip?: boolean;
18
+ tooltipPlacement?: Placement;
19
+ style?: CSSProperties;
20
+ handleClick?: () => void;
21
+ showRemoveButton?: boolean;
22
+ handleRemoveButtonClick?: () => void;
23
+ variant?: AvatarVariant;
24
+ tooltipText?: string;
25
+ }
26
+ export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, tooltipText, ...rest }: AvatarProps) => JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { ComponentStyleConfig } from '@chakra-ui/react';
2
+ export declare const AvatarConfig: ComponentStyleConfig;
@@ -0,0 +1 @@
1
+ export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -0,0 +1,3 @@
1
+ export * from './avatar.component';
2
+ export * from './avatar.types';
3
+ export * from './avatar.config';
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { AvatarProps, AvatarSize } from 'components/Avatar';
3
+ export interface AvatarGroupProps {
4
+ avatars: AvatarProps[];
5
+ max?: number;
6
+ size?: AvatarSize;
7
+ handleAddButtonClick?: () => void;
8
+ showAddButton?: boolean;
9
+ addButtonTooltipText?: string;
10
+ showRemoveAvatarButton?: boolean;
11
+ handleRemoveButtonClick?: () => void;
12
+ }
13
+ export declare const AvatarGroup: ({ avatars, max, size, handleAddButtonClick, showAddButton, addButtonTooltipText, showRemoveAvatarButton, handleRemoveButtonClick, }: AvatarGroupProps) => JSX.Element;
@@ -0,0 +1,6 @@
1
+ export declare const avatarSizeMap: {
2
+ xs: string;
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ };
@@ -0,0 +1 @@
1
+ export * from './avatarGroup.component';
@@ -1,12 +1,13 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
3
3
  import { IconName } from '../Icon';
4
- import { ButtonSize, ButtonVariant } from './button.types';
4
+ import { ButtonSizeType, ButtonVariantType } from './button.types';
5
5
  export interface ButtonProps extends ChakraButtonProps {
6
6
  children?: ReactNode;
7
- variant?: ButtonVariant;
8
- size?: ButtonSize;
7
+ variant?: ButtonVariantType;
8
+ size?: ButtonSizeType;
9
9
  iconName?: IconName;
10
10
  iconPosition?: 'left' | 'right';
11
+ darkMode?: boolean;
11
12
  }
12
13
  export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1,2 +1,16 @@
1
- import { ButtonStyleConfig } from './button.types';
2
- export declare const ButtonConfig: ButtonStyleConfig;
1
+ import { ButtonStyleType } from './button.types';
2
+ export declare const ButtonVariantConfig: ButtonStyleType;
3
+ export declare const ButtonSizeConfig: {
4
+ lg: {
5
+ p: string;
6
+ };
7
+ md: {
8
+ p: string;
9
+ };
10
+ sm: {
11
+ p: string;
12
+ };
13
+ xs: {
14
+ p: string;
15
+ };
16
+ };
@@ -1,5 +1,8 @@
1
- import { ButtonVariantConfig } from './button.model';
2
- export declare type ButtonVariant = 'primary' | 'primaryDestructive' | 'secondary' | 'secondaryDestructive' | 'secondarySubtle' | 'secondarySubtleDestructive' | 'tertiary' | 'tertiaryDestructive' | 'ghost' | 'ghostNeutral' | 'ghostDestructive';
3
- export declare type ButtonColorOptions = 'content' | 'default' | 'hover' | 'active' | 'border';
4
- export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
5
- export declare type ButtonStyleConfig = Record<ButtonVariant, ButtonVariantConfig>;
1
+ import { AdaptiveColorMap } from '../../theme/tokens';
2
+ export interface ButtonVariantConfigType extends AdaptiveColorMap<ButtonColorOptionsType> {
3
+ variant: 'solid' | 'outline' | 'ghost';
4
+ }
5
+ export declare type ButtonVariantType = 'primary' | 'primaryDestructive' | 'secondary' | 'secondaryDestructive' | 'secondarySubtle' | 'secondarySubtleDestructive' | 'tertiary' | 'tertiaryDestructive' | 'ghost' | 'ghostNeutral' | 'ghostDestructive';
6
+ export declare type ButtonColorOptionsType = 'content' | 'default' | 'hover' | 'active' | 'border';
7
+ export declare type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg';
8
+ export declare type ButtonStyleType = Record<ButtonVariantType, ButtonVariantConfigType>;
@@ -1,4 +1,3 @@
1
1
  export * from './button.component';
2
2
  export * from './button.types';
3
- export * from './button.model';
4
3
  export * from './button.config';
@@ -0,0 +1,3 @@
1
+ import { IconName, IconsSize } from './icon.types';
2
+ export declare const IconMap: Record<IconName, any>;
3
+ export declare const IconSizeMap: Record<IconsSize, number>;
@@ -1,3 +1,3 @@
1
- export declare type IconName = 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'arrowDownRight' | 'arrowCircle' | 'arrowLeft' | 'arrowRight' | 'arrowsIn' | 'arrowsOut' | 'article' | 'asterisk' | 'bell' | 'bellRinging' | 'bookmarkFilled' | 'bookmarkOutlined' | 'brush' | 'caduceus' | 'calendarDate' | 'calendarCheck' | 'calendarInfo' | 'calendarPen' | 'calendarOutlined' | 'camera' | 'cameraFlip' | 'cameraOff' | 'cancel' | 'cellphone' | 'cellphoneAlert' | 'chainLink' | 'chatBubbleFilled' | 'chatBubbleOutlined' | 'checkmark' | 'checkmarkBox' | 'checkmarkCircle' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleDotted' | 'clock' | 'close' | 'closeCircle' | 'code' | 'conversation' | 'creditCardHand' | 'crossClipboard' | 'crossPaw' | 'crossHatPerson' | 'dogHouse' | 'dogHouseOutlined' | 'dollar' | 'dollarCircle' | 'dotsCircle' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'dragDrop' | 'emailSend' | 'envelopeFilled' | 'envelopeOutlined' | 'eyedropper' | 'eyeOpen' | 'eyeSlash' | 'faceScreen' | 'formsFilled' | 'formsOutlined' | 'funnelFilled' | 'funnelOutlined' | 'gear' | 'grid' | 'horizontalLines' | 'house' | 'infoCircleFilled' | 'infoCircleOutlined' | 'invoice' | 'invoiceOutlined' | 'list' | 'locationMarker' | 'locationMarkerGround' | 'lockRectangle' | 'lockRound' | 'loudspeaker' | 'magnifyingGlass' | 'manHeadset' | 'message' | 'messages' | 'messageClipboard' | 'messageEllipses' | 'messageGear' | 'messageLink' | 'microphone' | 'microphoneMute' | 'moveLeft' | 'moveRight' | 'notification' | 'paperAirplane' | 'paperAirplane2' | 'paperAirplaneRight' | 'paperclip' | 'paperPen' | 'paw' | 'paw2' | 'pawMagnifyingGlass' | 'pawOutlined' | 'pdfLogo' | 'pen' | 'penSquare' | 'person' | 'phone' | 'phoneButtons' | 'phoneDown' | 'phoneRing' | 'pill' | 'pillHand' | 'playingCards' | 'plus' | 'questionMark' | 'questionMarkCircle' | 'quilInk' | 'reactLogo' | 'report' | 'robot' | 'smileyFace' | 'smileyFacePlus' | 'star' | 'star2' | 'star2Outlined' | 'team' | 'textEdit' | 'thumbsUp' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website';
1
+ export declare type IconName = 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'arrowDownRight' | 'arrowCircle' | 'arrowLeft' | 'arrowRight' | 'arrowsIn' | 'arrowsOut' | 'article' | 'asterisk' | 'bell' | 'bellRinging' | 'bookmarkFilled' | 'bookmarkOutlined' | 'brush' | 'caduceus' | 'calendarDate' | 'calendarCheck' | 'calendarInfo' | 'calendarPen' | 'calendarOutlined' | 'camera' | 'cameraFlip' | 'cameraOff' | 'cancel' | 'cellphone' | 'cellphoneAlert' | 'chainLink' | 'chatBubbleFilled' | 'chatBubbleOutlined' | 'checkmark' | 'checkmarkBox' | 'checkmarkCircle' | 'checkmarkList' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleDotted' | 'clock' | 'close' | 'closeCircle' | 'code' | 'conversation' | 'creditCardHand' | 'crossClipboard' | 'crossPaw' | 'crossHatPerson' | 'dogHouse' | 'dogHouseOutlined' | 'dollar' | 'dollarCircle' | 'dotsCircle' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'dragDrop' | 'emailSend' | 'envelopeFilled' | 'envelopeOutlined' | 'eyedropper' | 'eyeOpen' | 'eyeSlash' | 'faceScreen' | 'formsFilled' | 'formsOutlined' | 'funnelFilled' | 'funnelOutlined' | 'gear' | 'grid' | 'horizontalLines' | 'house' | 'infoCircleFilled' | 'infoCircleOutlined' | 'input' | 'invoice' | 'invoiceOutlined' | 'largeTextInput' | 'list' | 'locationMarker' | 'locationMarkerGround' | 'lockRectangle' | 'lockRound' | 'loudspeaker' | 'magnifyingGlass' | 'manHeadset' | 'message' | 'messages' | 'messageClipboard' | 'messageEllipses' | 'messageGear' | 'messageLink' | 'microphone' | 'microphoneMute' | 'moveLeft' | 'moveRight' | 'multipleChoice' | 'notification' | 'paperAirplane' | 'paperAirplane2' | 'paperAirplaneRight' | 'paperclip' | 'paperPen' | 'paw' | 'paw2' | 'pawMagnifyingGlass' | 'pawOutlined' | 'pdfLogo' | 'pen' | 'penSquare' | 'person' | 'personAdd' | 'phone' | 'phoneButtons' | 'phoneDown' | 'phoneRing' | 'pill' | 'pillHand' | 'playingCards' | 'plus' | 'questionMark' | 'questionMarkCircle' | 'quilInk' | 'reactLogo' | 'record' | 'report' | 'robot' | 'smileyFace' | 'smileyFacePlus' | 'star' | 'star2' | 'star2Outlined' | 'starCircle' | 'team' | 'textEdit' | 'thumbsUp' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website';
2
2
  export declare type IconsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
3
3
  export declare type IconColor = 'default' | 'subtle' | 'inactive' | 'active' | 'success' | 'warning' | 'error' | 'currentColor';
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { Props } from 'framer-motion/types/types';
3
+ import { LogoColor, LogoHoliday } from './logo.types';
4
+ export declare const holidaysLogoIconMap: Record<LogoHoliday, React.FC<Props>>;
5
+ export declare const logoIconMap: Record<LogoColor, React.FC<Props>>;
6
+ export declare const fullLogoMap: Record<LogoColor, React.FC<Props>>;
@@ -1,4 +1,3 @@
1
1
  export * from './textarea.component';
2
2
  export * from './textarea.types';
3
3
  export * from './textarea.config';
4
- export * from './textarea.config';
@@ -1,3 +1,3 @@
1
1
  export * from './tooltip.component';
2
- export * from './tooltip.model';
2
+ export * from './tooltip.types';
3
3
  export * from './tooltip.config';
@@ -1,4 +1,4 @@
1
- import { TooltipStyleConfig } from './tooltip.model';
1
+ import { TooltipStyleConfig } from './tooltip.types';
2
2
  export declare const TooltipGlobalStyle: {
3
3
  '[id^=tooltip]': {
4
4
  padding: string;
@@ -0,0 +1,4 @@
1
+ import { AdaptiveColor } from '../../theme/tokens';
2
+ export interface TooltipStyleConfig {
3
+ color: AdaptiveColor;
4
+ }
@@ -5,5 +5,6 @@ export interface HeadingProps extends ChakraHeadingProps {
5
5
  children: ReactNode;
6
6
  size?: HeadingSize;
7
7
  variant?: HeadingVariant;
8
+ darkMode?: boolean;
8
9
  }
9
10
  export declare const Heading: ({ children, size, variant, ...rest }: HeadingProps) => JSX.Element;
@@ -3,6 +3,7 @@ export * from './Icon';
3
3
  export * from './Logo';
4
4
  export * from './Typography';
5
5
  export * from './Textarea';
6
+ export * from './Avatar';
6
7
  export * from './Button';
7
8
  export * from './Tooltip';
8
9
  export { Box, BoxProps, Center, CenterProps, Flex, FlexProps, Hide, HideProps, Show, ShowProps, Tbody, Td, Th, Thead, Tr, VStack, HStack, } from '@chakra-ui/react';
@@ -1,2 +1,2 @@
1
- import { AdaptiveColor } from '../theme/tokens/colors';
1
+ import { AdaptiveColor } from '../theme/tokens';
2
2
  export declare const useAdaptiveColor: (color: AdaptiveColor) => string;
@@ -1,3 +1,3 @@
1
1
  import { WithCSSVar } from '@chakra-ui/react';
2
- import { ITheme } from '../theme';
3
- export declare const useTheme: () => WithCSSVar<ITheme>;
2
+ import { Theme } from '../theme';
3
+ export declare const useTheme: () => WithCSSVar<Theme>;