@televet/kibble-ui 4.0.0-beta.2 → 4.0.0-beta.20

package/dist/types/patterns/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { IconProps } from '../../../../components/Icon/icon.component';
+import { TextProps } from '../../../../components/Text/text.component';
+export interface ConversationCardFooterProps {
+    iconProps?: IconProps;
+    content: React.ReactNode;
+    contentProps?: Omit<TextProps, "children">;
+}
+export declare const ConversationCardFooter: ({ iconProps, content, contentProps, }: ConversationCardFooterProps) => React.JSX.Element;

package/dist/types/patterns/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TimestampProps } from '../../../Timestamp/timestamp.component';
+import { ConversationCardAvatarGroupProps } from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';
+export interface ConversationCardHeaderProps {
+    avatarGroupProps?: ConversationCardAvatarGroupProps;
+    showNotificationIndicator?: boolean;
+    isCardPinned?: boolean;
+    isHoveringCard?: boolean;
+    subtitle?: string;
+    timestampProps: TimestampProps;
+    title: string;
+}
+export declare const ConversationCardHeader: ({ avatarGroupProps, timestampProps, isHoveringCard, isCardPinned, title, showNotificationIndicator, subtitle, }: ConversationCardHeaderProps) => React.JSX.Element;

package/dist/types/patterns/ConversationCard/components/ConversationCardTags/conversationCardTags.component.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TagProps } from '../../../../components/Tag/tag.component';
+export type ConversationCardTag = TagProps & {
+    tooltipContent?: string;
+};
+export interface ConversationCardTagsProps {
+    tags: ConversationCardTag[];
+}
+export declare const ConversationCardTags: ({ tags, }: ConversationCardTagsProps) => React.JSX.Element;

package/dist/types/patterns/ConversationCard/conversationCard.component.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { MenuProps } from '../../components/Menu/menu.component';
+import { ConversationCardHeaderProps } from './components/ConversationCardHeader/conversationCardHeader.component';
+import { ConversationCardOverlayProps, ConversationCardPinProps } from './components/ConversationCardButtons/conversationCardButtons.component';
+import { ConversationCardTag } from './components/ConversationCardTags/conversationCardTags.component';
+import { ConversationCardFooterProps } from './components/ConversationCardFooter/conversationCardFooter.component';
+import { ConversationCardContentProps } from './components/ConversationCardContent/conversationCardContent.component';
+import { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';
+export interface ConversationCardProps extends ConversationCardContentProps {
+    allowHoverActions?: boolean;
+    avatarGroupProps?: ConversationCardAvatarGroupProps;
+    footerProps?: ConversationCardFooterProps;
+    headerMenuProps?: MenuProps;
+    headerProps: ConversationCardHeaderProps;
+    active?: boolean;
+    onClick?: () => void;
+    overlayProps?: ConversationCardOverlayProps;
+    pinProps?: ConversationCardPinProps;
+    shouldPreservePosition?: boolean;
+    showNotificationIndicator?: boolean;
+    tags?: ConversationCardTag[];
+}
+export declare const ConversationCard: ({ allowHoverActions, avatarGroupProps, content, contentProps, contentMenu, footerProps, headerMenuProps, headerProps, active, onClick, overlayProps, pinProps, shouldPreservePosition, showNotificationIndicator, tags, }: ConversationCardProps) => React.JSX.Element;

package/dist/types/patterns/ConversationCard/index.d.ts

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

package/dist/types/patterns/ConversationCard.d.ts

@@ -0,0 +1,2 @@
+export * from './ConversationCard/index'
+export {}

package/dist/types/patterns/StyledAvatar/index.d.ts

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

package/dist/types/patterns/StyledAvatar/styledAvatar.component.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { AvatarProps } from '../../components/Avatar/avatar.component';
+import { StyledAvatarType } from './styledAvatar.types';
+export interface StyledAvatarProps extends AvatarProps {
+    type?: StyledAvatarType;
+}
+export declare const StyledAvatar: ({ type, ...rest }: StyledAvatarProps) => React.JSX.Element;

package/dist/types/patterns/StyledAvatar/styledAvatar.types.d.ts

@@ -0,0 +1,2 @@
+export declare const styledAvatarTypes: readonly ["Client", "SMS", "TestClient", "Automated", "Clinic"];
+export type StyledAvatarType = (typeof styledAvatarTypes)[number];

package/dist/types/patterns/StyledAvatar.d.ts

@@ -0,0 +1,2 @@
+export * from './StyledAvatar/index'
+export {}

package/dist/types/patterns/TagBlock/index.d.ts

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

package/dist/types/patterns/TagBlock/tagBlock.component.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { MenuProps } from '../../components/Menu/menu.component';
+import { TagBlockTag } from './tagBlock.types';
+interface BaseTagBlockProps {
+    displayTagsInGroups?: boolean;
+    errorText?: string;
+    hasError?: boolean;
+    loading?: boolean;
+    menuProps?: MenuProps;
+    onClearAll?: () => void;
+    onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;
+    tags: TagBlockTag[];
+    title?: string;
+}
+interface DefaultTagBlockProps extends BaseTagBlockProps {
+    canBeDeleted?: false;
+    onDelete?: never;
+}
+interface DeletableTagBlockProps extends BaseTagBlockProps {
+    canBeDeleted: true;
+    onDelete: () => void;
+}
+export type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;
+export declare const TagBlock: ({ title, menuProps, tags, canBeDeleted, onClearAll, onRemoveTag, onDelete, hasError, errorText, displayTagsInGroups, loading, }: TagBlockProps) => React.JSX.Element;
+export {};

package/dist/types/patterns/TagBlock/tagBlock.types.d.ts

@@ -0,0 +1,9 @@
+export declare enum TagDisabledState {
+    Inactive = "Inactive",
+    Deleted = "Deleted"
+}
+export interface TagBlockTag {
+    label: string;
+    value: string;
+    groupLabel?: string;
+}

package/dist/types/patterns/TagBlock.d.ts

@@ -0,0 +1,2 @@
+export * from './TagBlock/index'
+export {}

package/dist/types/patterns/Timestamp/index.d.ts

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

package/dist/types/patterns/Timestamp/timestamp.component.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TextProps } from '../../components/Text/text.component';
+export interface TimestampProps {
+    date: Date;
+    timeFormat?: string;
+    dateFormat?: string;
+    shouldTodayDisplayTimeOnly?: boolean;
+    tooltipLabel?: string;
+    textProps?: Omit<TextProps, "children">;
+}
+export declare const Timestamp: ({ date, timeFormat, dateFormat, shouldTodayDisplayTimeOnly, tooltipLabel, textProps, }: TimestampProps) => React.JSX.Element;

package/dist/types/patterns/Timestamp.d.ts

@@ -0,0 +1,2 @@
+export * from './Timestamp/index'
+export {}

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

@@ -0,0 +1,4 @@
+export * from './ConversationCard';
+export * from './StyledAvatar';
+export * from './TagBlock';
+export * from './Timestamp';

package/dist/types/patterns.d.ts

@@ -0,0 +1,2 @@
+export * from './patterns/index'
+export {}

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const WithVariantStory: ({ children, variant, onContrast, }: {
+    variant?: string;
+    onContrast?: boolean;
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/shared/records/typography.d.ts

@@ -0,0 +1,5 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { TypographyVariant } from '../types/typography';
+import { FontWeight } from '../../theme/tokens/typography';
+export declare const typographyVariantStyles: Record<TypographyVariant, SystemStyleObject>;
+export declare const fontWeightStyles: Record<FontWeight, SystemStyleObject>;

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

@@ -0,0 +1,4 @@
+export declare const alignments: readonly ["start", "end", "center"];
+export type Alignment = (typeof alignments)[number];
+export declare const flexDirections: readonly ["row", "column", "row-reverse", "column-reverse"];
+export type FlexDirection = (typeof flexDirections)[number];

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

@@ -0,0 +1,5 @@
+export * from './alignment';
+export * from './placement';
+export * from './status';
+export * from './theme';
+export * from './typography';

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

@@ -0,0 +1,2 @@
+export declare const placements: readonly ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"];
+export type Placement = (typeof placements)[number];

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

@@ -0,0 +1,2 @@
+export declare const statuses: readonly ["info", "success", "warning", "error", "default"];
+export type Status = (typeof statuses)[number];

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

@@ -0,0 +1,2 @@
+import { ArgTypes } from 'storybook/internal/types';
+export type KibbleArgTypes<K> = ArgTypes<K>;

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

@@ -0,0 +1 @@
+export type ColorMode = "light" | "dark";

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

@@ -0,0 +1,2 @@
+export declare const typographyVariants: readonly ["accent", "accentSubtle", "brand", "brandOnContrast", "danger", "dangerOnContrast", "default", "info", "interactive", "interactiveOnContrast", "onContrast", "placeholder", "placeholderOnContrast", "subtle", "subtleOnContrast", "success", "warning"];
+export type TypographyVariant = (typeof typographyVariants)[number];

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

@@ -0,0 +1,2 @@
+export * from './types/index'
+export {}

package/dist/types/shared/utils/argTypes.d.ts

@@ -0,0 +1,6 @@
+import { KibbleArgTypes } from '../types/storybook';
+export declare const addCategoryToArgTypes: <T>({ argTypes, category, omittedProps, }: {
+    argTypes: KibbleArgTypes<T>;
+    category: string;
+    omittedProps?: Array<keyof KibbleArgTypes<T>>;
+}) => KibbleArgTypes<T>;

package/dist/types/shared/utils/colors.d.ts

@@ -0,0 +1,14 @@
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare const isRGB: (color: string) => boolean;
+export declare const isDark: (color: string) => boolean;
+/**
+ * Darken or lighten a color hex value.
+ * @param colorHex
+ * @param amount Provide positive integer to lighten, negative integer to darken
+ */
+export declare const colorLightenDarken: (colorHex: string, amount: number) => string;
+export declare const getRgbValue: (color: string) => string;

package/dist/types/shared/utils/sizes.d.ts

@@ -0,0 +1,9 @@
+import { AvatarSize } from '../../components/Avatar/avatar.types';
+import { IconSize } from '../../components/Icon/icon.types';
+interface GetNextIconSizeProps {
+    currentSize: IconSize | AvatarSize;
+    larger: boolean;
+    delta: number;
+}
+export declare const getNextIconSize: ({ currentSize, larger, delta, }: GetNextIconSizeProps) => IconSize;
+export {};

package/dist/types/shared/utils/strings.d.ts

@@ -0,0 +1,2 @@
+export declare const camelCaseToLabel: (s: string) => string;
+export declare const toTitleCase: (s: string) => string;

package/dist/types/shared/utils/tokens.d.ts

@@ -0,0 +1 @@
+export declare const isOnContrastVariant: (variant?: string) => boolean;

package/dist/types/shared/utils/units.d.ts

@@ -0,0 +1 @@
+export declare const remToPx: (rem: string) => number;

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

@@ -0,0 +1,2 @@
+export { KibbleThemeProvider } from './providers/theme.provider';
+export { system } from './theme.config';

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ThemeProviderProps } from 'next-themes';
+export type ColorModeProviderProps = ThemeProviderProps;
+export declare const ColorModeProvider: (props: ColorModeProviderProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+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"> {
+    customTheme?: SystemContext;
+}
+export declare const KibbleThemeProvider: ({ customTheme, children, ...rest }: KibbleThemeProviderProps) => React.JSX.Element;
+export {};

package/dist/types/theme/semanticTokens/index.d.ts

@@ -0,0 +1 @@
+export * from './semanticTokens.types';

package/dist/types/theme/semanticTokens/semanticTokens.config.d.ts

@@ -0,0 +1,192 @@
+export declare const semanticColorTokens: {
+    background: {
+        DEFAULT: any;
+        accent: {
+            DEFAULT: any;
+            subtle: any;
+        };
+        ai: {
+            DEFAULT: any;
+            hover: any;
+            pressed: any;
+        };
+        alpha: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        backdrop: any;
+        brand: any;
+        contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        danger: {
+            DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+            contrast: any;
+        };
+        default: any;
+        destructive: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: any;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        destructiveAlpha: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        info: any;
+        note: {
+            DEFAULT: any;
+            hover: any;
+        };
+        overlay: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
+        primary: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        primaryAlpha: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        secondary: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        secondaryAlpha: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+                pressed: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+            pressed: any;
+        };
+        subtle: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+            less: any;
+            more: import('./semanticTokens.types').SemanticTokenDefinition;
+            most: any;
+        };
+        success: {
+            DEFAULT: any;
+            contrast: any;
+        };
+        warning: {
+            DEFAULT: any;
+            contrast: any;
+        };
+    };
+    border: {
+        DEFAULT: any;
+        accent: {
+            DEFAULT: any;
+            subtle: any;
+        };
+        brand: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
+        contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        danger: {
+            DEFAULT: any;
+            contrast: any;
+        };
+        default: any;
+        focus: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
+        info: any;
+        strong: {
+            DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+            contrast: any;
+        };
+        subtle: any;
+        "subtle.contrast": import('./semanticTokens.types').SemanticTokenDefinition;
+        success: any;
+        warning: any;
+    };
+    divider: {
+        DEFAULT: any;
+        default: any;
+    };
+    text: {
+        DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+        accent: {
+            DEFAULT: any;
+            subtle: any;
+        };
+        brand: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+        };
+        contrast: any;
+        danger: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: any;
+            };
+        };
+        default: import('./semanticTokens.types').SemanticTokenDefinition;
+        info: any;
+        interactive: {
+            DEFAULT: any;
+            contrast: {
+                DEFAULT: import('./semanticTokens.types').SemanticTokenDefinition;
+                hover: import('./semanticTokens.types').SemanticTokenDefinition;
+            };
+            hover: any;
+        };
+        placeholder: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
+        subtle: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
+        success: any;
+        warning: any;
+    };
+};