@televet/kibble-ui 1.0.11-beta.0 → 1.0.11

package/build/components/Button/button.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { IconName } from '../Icon/icon.types';
+import { ButtonOptions } from '@chakra-ui/button/dist/declarations/src/button';
+import { ButtonSize, ButtonVariant } from './button.types';
+export interface ButtonProps extends ButtonOptions {
+    children?: ReactNode;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    iconName?: IconName;
+    iconPosition?: 'left' | 'right';
+}
+export declare const Button: (props: ButtonProps) => JSX.Element;

package/build/components/Button/button.model.d.ts

@@ -0,0 +1,5 @@
+import { ButtonColorOptions } from './button.types';
+import { AdaptiveColorMap } from '../../theme/tokens/colors';
+export interface ButtonVariantConfig extends AdaptiveColorMap<ButtonColorOptions> {
+    variant: 'solid' | 'outline' | 'ghost';
+}

package/build/components/Button/button.records.d.ts

@@ -0,0 +1,2 @@
+import { ButtonStyleConfig } from './button.types';
+export declare const ButtonConfig: ButtonStyleConfig;

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

@@ -0,0 +1,5 @@
+import { ButtonVariantConfig } from './button.model';
+export declare type ButtonVariant = 'primary' | 'primaryDestructive' | 'secondary' | 'secondaryDestructive' | 'secondarySubtle' | 'secondarySubtleDestructive' | 'tertiary' | 'tertiaryDestructive' | 'ghost' | 'ghostNeutral' | 'ghostDestructive';
+export declare type ButtonColorOptions = 'content' | 'default' | 'hover' | 'active' | 'border';
+export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare type ButtonStyleConfig = Record<ButtonVariant, ButtonVariantConfig>;

package/build/components/Button/index.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-declare const Button: ({ children }: {
-    children: ReactNode;
-}) => JSX.Element;
-export default Button;
+export * from './button.component';
+export * from './button.types';
+export * from './button.model';
+export * from './button.records';

package/build/components/Icon/icon.types.d.ts

@@ -1,3 +1,3 @@
 export declare type IconName = 'account' | 'add' | 'alert' | 'appointment' | 'attachFile' | 'back' | 'cat' | 'chat' | 'collapse' | 'conversations' | 'delete' | 'dialPad' | 'dog' | 'download' | 'emoji' | 'expand' | 'filter' | 'forms' | 'grooming' | 'help' | 'hidden' | 'home' | 'invoicing' | 'messageTemplates' | 'more' | 'next' | 'pets' | 'reminder' | 'reporting' | 'searchPets' | 'search' | 'send' | 'sendPayment' | 'settings' | 'schedule' | 'teamChat' | 'videoCall' | 'view' | 'visible' | 'warning' | 'massTextAlerts';
 export declare type IconsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare type IconColor = 'default' | 'subtle' | 'inactive' | 'active' | 'success' | 'warning' | 'error';
+export declare type IconColor = 'default' | 'subtle' | 'inactive' | 'active' | 'success' | 'warning' | 'error' | 'currentColor';

package/build/components/Logo/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare enum LogoType {
+    Full = "Full",
+    Icon = "Icon",
+    Holiday = "Holiday"
+}
+export declare enum LogoColor {
+    Teal = "Teal",
+    Black = "Black",
+    White = "White"
+}
+export declare enum LogoHoliday {
+    NewYears = "NewYears",
+    Valentines = "Valentines",
+    StPatricks = "StPatricks",
+    AprilFools = "AprilFools",
+    Easter1 = "Easter1",
+    Easter2 = "Easter2",
+    Easter3 = "Easter3",
+    Easter4 = "Easter4",
+    Easter5 = "Easter5",
+    Easter6 = "Easter6",
+    MothersDay = "MothersDay",
+    MemorialDay = "MemorialDay",
+    Halloween = "Halloween",
+    Thanksgiving = "Thanksgiving",
+    Christmas = "Christmas"
+}
+export interface ILogoProps {
+    type?: LogoType;
+    color?: LogoColor;
+    holiday?: LogoHoliday;
+}
+declare const Logo: ({ type, color, holiday }: ILogoProps) => JSX.Element;
+export default Logo;

package/build/components/Logo/logos.d.ts

@@ -0,0 +1,21 @@
+import { ReactComponent as TealLogo } from '../../assets/logos/teal.svg';
+import { ReactComponent as TealLogoIcon } from '../../assets/logos/tealIcon.svg';
+import { ReactComponent as BlackLogo } from '../../assets/logos/black.svg';
+import { ReactComponent as BlackLogoIcon } from '../../assets/logos/blackIcon.svg';
+import { ReactComponent as WhiteLogo } from '../../assets/logos/white.svg';
+import { ReactComponent as WhiteLogoIcon } from '../../assets/logos/whiteIcon.svg';
+import { ReactComponent as NewYearsLogoIcon } from '../../assets/logos/holidays/newYears.svg';
+import { ReactComponent as ValentinesLogoIcon } from '../../assets/logos/holidays/valentines.svg';
+import { ReactComponent as StPatricksLogoIcon } from '../../assets/logos/holidays/stPatricks.svg';
+import { ReactComponent as Easter1LogoIcon } from '../../assets/logos/holidays/easter1.svg';
+import { ReactComponent as Easter2LogoIcon } from '../../assets/logos/holidays/easter2.svg';
+import { ReactComponent as Easter3LogoIcon } from '../../assets/logos/holidays/easter3.svg';
+import { ReactComponent as Easter4LogoIcon } from '../../assets/logos/holidays/easter4.svg';
+import { ReactComponent as Easter5LogoIcon } from '../../assets/logos/holidays/easter5.svg';
+import { ReactComponent as Easter6LogoIcon } from '../../assets/logos/holidays/easter6.svg';
+import { ReactComponent as MothersDayLogoIcon } from '../../assets/logos/holidays/mothersDay.svg';
+import { ReactComponent as MemorialDayLogoIcon } from '../../assets/logos/holidays/memorialDay.svg';
+import { ReactComponent as HalloweenLogoIcon } from '../../assets/logos/holidays/halloween.svg';
+import { ReactComponent as ThanksgivingLogoIcon } from '../../assets/logos/holidays/thanksgiving.svg';
+import { ReactComponent as ChristmasLogoIcon } from '../../assets/logos/holidays/christmas.svg';
+export { TealLogo, TealLogoIcon, BlackLogo, BlackLogoIcon, WhiteLogo, WhiteLogoIcon, NewYearsLogoIcon, ValentinesLogoIcon, StPatricksLogoIcon, Easter1LogoIcon, Easter2LogoIcon, Easter3LogoIcon, Easter4LogoIcon, Easter5LogoIcon, Easter6LogoIcon, MothersDayLogoIcon, MemorialDayLogoIcon, HalloweenLogoIcon, ThanksgivingLogoIcon, ChristmasLogoIcon, };

package/build/components/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+export * from './textarea.component';
+export * from './textarea.types';
+export * from './textarea.config';

package/build/components/Textarea/textarea.component.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEventHandler } from 'react';
+import { TextareaResizeOrientation, TextareaSize } from './textarea.types';
+export interface TextareaProps {
+    value: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    placeholder?: string;
+    size?: TextareaSize;
+    resize?: TextareaResizeOrientation;
+}
+export declare const Textarea: (props: TextareaProps) => JSX.Element;

package/build/components/Textarea/textarea.config.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from '@chakra-ui/react';
+export declare const TextareaConfig: ComponentStyleConfig;

package/build/components/Textarea/textarea.types.d.ts

@@ -0,0 +1,2 @@
+export declare type TextareaSize = 'sm' | 'md' | 'lg';
+export declare type TextareaResizeOrientation = 'horizontal' | 'vertical' | 'none';

package/build/components/Tooltip/tooltip.component.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Placement, TooltipProps as ChakraTooltipProps } from '@chakra-ui/react';
+export interface TooltipProps extends ChakraTooltipProps {
+    children: ReactNode;
+    label: string;
+    placement: Placement;
+}
+export declare const Tooltip: ({ children, label, placement, isOpen, defaultIsOpen, ...rest }: TooltipProps) => JSX.Element;

package/build/components/Tooltip/tooltip.model.d.ts

@@ -0,0 +1,4 @@
+import { AdaptiveColor } from '../../theme/tokens/colors';
+export interface TooltipStyleConfig {
+    color: AdaptiveColor;
+}

package/build/hooks/useAdaptiveColor.d.ts

@@ -1,2 +1,2 @@
-import { AdaptiveColorMap } from '../theme/tokens/colors';
-export declare const useAdaptiveColor: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T) => string;
+import { AdaptiveColor } from '../theme/tokens/colors';
+export declare const useAdaptiveColor: (color: AdaptiveColor) => string;

package/build/hooks/useAdaptiveColorMap.d.ts

@@ -0,0 +1,2 @@
+import { AdaptiveColorMap } from '../theme/tokens/colors';
+export declare const useAdaptiveColorMap: <T extends string | number | symbol>(map: AdaptiveColorMap<T>, token: T) => string;

package/build/index.d.ts

@@ -1,5 +1,6 @@
 import theme, { ITheme } from './theme';
 import KibbleThemeProvider from './providers/ThemeProvider';
-import Button from './components/Button';
-import Banner from './components/Banner';
-export { theme, ITheme, KibbleThemeProvider, Button, Banner };
+import { Button } from './components/Button';
+import { Icon } from './components/Icon';
+import Logo from './components/Logo';
+export { theme, ITheme, KibbleThemeProvider, Icon, Logo, Button };