@televet/kibble-ui 4.0.0-beta.13 → 4.0.0-beta.131

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

@@ -1,7 +1,9 @@
 import { default as React } from 'react';
-import { Tooltip as CTooltip } from '@chakra-ui/react/tooltip';
+import { HoverCard } from '@chakra-ui/react/hover-card';
 import { Placement } from '../../shared/types/placement';
-export interface TooltipProps extends CTooltip.RootProps {
+export interface TooltipProps extends Omit<HoverCard.RootProps, 'children'> {
+    children?: React.ReactNode;
+    disabled?: boolean;
     label: string;
     placement?: Placement;
     portalled?: boolean;

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

@@ -0,0 +1 @@
+export declare const tooltipRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "arrow" | "arrowTip", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "trigger" | "content" | "arrow" | "arrowTip">>;

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

@@ -7,27 +7,35 @@ export * from './Card';
 export * from './CharacterCounter';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './ConversationCard';
+export * from './DatePicker';
+export * from './Divider';
 export * from './Heading';
 export * from './Icon';
 export * from './Link';
+export * from './Logo';
 export * from './Menu';
 export * from './Modal';
 export * from './NotificationCounter';
 export * from './Picture';
+export * from './PinInput';
 export * from './Popover';
 export * from './RadioGroup';
 export * from './RatingDots';
 export * from './Select';
 export * from './SortableList';
 export * from './Spinner';
+export * from './StyledAvatar';
 export * from './Swatch';
 export * from './Switch';
 export * from './Tabs';
 export * from './Tag';
+export * from './TagBlock';
 export * from './Text';
 export * from './TextInput';
 export * from './Textarea';
 export * from './TimePicker';
 export * from './TimeRange';
+export * from './Timestamp';
+export * from './Toast';
 export * from './Tooltip';
-export * from './DatePicker';

package/dist/types/hocs/withDarkMode/index.d.ts

@@ -1,2 +1 @@
-import { default as React } from 'react';
-export declare const withDarkMode: (children: React.ReactNode) => React.JSX.Element;
+export * from './withDarkMode';

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const withDarkMode: (children: React.ReactNode) => React.JSX.Element;

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

@@ -6,6 +6,7 @@ export interface WithFormControlProps {
     disabled?: boolean;
     errorText?: string;
     formControlStyle?: SystemStyleObject;
+    fullWidth?: boolean;
     helperText?: string;
     inlineField?: boolean;
     invalid?: boolean;
@@ -16,7 +17,7 @@ export interface WithFormControlProps {
     onContrast?: boolean;
     readOnly?: boolean;
     required?: boolean;
-    showRequiredElement?: boolean;
+    showOptionalElement?: boolean;
     size?: FormControlSize;
     useInvalidIcon?: boolean;
     useInvalidText?: boolean;

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

@@ -2,4 +2,4 @@ export declare const formControlLabelPositions: readonly ["start", "end"];
 export type FormControlLabelPosition = (typeof formControlLabelPositions)[number];
 export declare const formControlSizes: readonly ["sm", "md", "lg"];
 export type FormControlSize = (typeof formControlSizes)[number];
-export type FormVariant = "default" | "onContrast";
+export type FormVariant = 'default' | 'onContrast';

package/dist/types/hocs/withLightMode/index.d.ts

@@ -1,2 +1 @@
-import { default as React } from 'react';
-export declare const withLightMode: (children: React.ReactNode) => React.JSX.Element;
+export * from './withLightMode';

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const withLightMode: (children: React.ReactNode) => React.JSX.Element;

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

@@ -3,7 +3,7 @@ import { TooltipProps } from '../components/Tooltip';
 export interface WithTruncationProps {
     truncated?: boolean;
     noOfLines?: number;
-    tooltipProps?: Omit<TooltipProps, "disabled">;
+    tooltipProps?: Omit<TooltipProps, 'disabled'>;
     children?: ReactNode | string;
 }
 export declare const withTruncation: <P extends WithTruncationProps>(Component: React.ComponentType<P>) => React.FC<P>;

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

@@ -1,2 +1,4 @@
+export * from './useBreakpoint';
 export * from './useColorMode';
 export * from './useColorModeValue';
+export * from './useDeviceType';

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

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

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

@@ -1,8 +1,10 @@
 import { ColorMode } from '../../shared/types/theme';
 export interface UseColorModeReturn {
     colorMode: ColorMode;
-    setColorMode: (colorMode: ColorMode) => void;
+    colorModeThemeKey: string;
+    forcedColorMode?: ColorMode;
+    setColorMode: (colorMode: ColorMode | 'system') => void;
+    systemColorMode: ColorMode;
     toggleColorMode: () => void;
-    forcedTheme?: ColorMode;
 }
 export declare const useColorMode: () => UseColorModeReturn;

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

@@ -0,0 +1,3 @@
+type DeviceType = 'mobile' | 'desktop' | 'tablet';
+export declare const useDeviceType: () => DeviceType;
+export {};

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

@@ -0,0 +1,6 @@
+interface PortalContextType {
+    contentRef: React.RefObject<HTMLDivElement> | null;
+}
+export declare const PortalContext: import('react').Context<PortalContextType | undefined>;
+export declare const usePortalContentRef: () => PortalContextType;
+export {};

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components';
+export * from './hocs';
 export * from './hooks';
+export * from './shared';
 export * from './theme';

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { IconName } from '../../components/Icon/icon.types';
+import { Status } from '../types/status';
+import { TypographyVariant } from '../types/typography';
+export declare const StatusIconMap: Record<Status, IconName>;
+export declare const StatusTypographyMap: Record<Status, TypographyVariant>;

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

@@ -1 +1,2 @@
-export type ColorMode = "light" | "dark";
+export type ColorMode = 'light' | 'dark';
+export declare const colorModeThemeKey = "kibble-theme";

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

@@ -5,5 +5,5 @@ interface GetNextIconSizeProps {
     larger: boolean;
     delta: number;
 }
-export declare const getNextIconSize: ({ currentSize, larger, delta, }: GetNextIconSizeProps) => IconSize;
+export declare const getNextIconSize: ({ currentSize, larger, delta }: GetNextIconSizeProps) => IconSize;
 export {};

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

@@ -1,5 +1,2 @@
-export * from './providers/theme.provider';
-export { system } from './theme.config';
-export type { Tokens } from './tokens/generated/token.gen';
-export type { SystemProperties } from './tokens/generated/system.gen';
-export * from './theme.types.d';
+export { KibbleThemeProvider } from './providers/theme.provider';
+export { system, kibbleThemeConfig } from './theme.config';

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

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
-import { ChakraProviderProps, SystemContext } from '@chakra-ui/react/styled-system';
+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"> {
+interface KibbleThemeProviderProps extends Omit<ChakraProviderProps, 'value'>, Omit<ColorModeProviderProps, 'children' | 'storageKey'> {
     customTheme?: SystemContext;
 }
-export declare const KibbleThemeProvider: ({ customTheme, children, ...rest }: KibbleThemeProviderProps) => React.JSX.Element;
+export declare const KibbleThemeProvider: ({ customTheme, children, enableSystem, ...rest }: KibbleThemeProviderProps) => React.JSX.Element;
 export {};

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

@@ -1 +1,2 @@
 export * from './semanticTokens.types';
+export { invertToken } from './utils/invertToken';

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

@@ -139,7 +139,7 @@ export declare const semanticColorTokens: {
             contrast: any;
         };
         subtle: any;
-        "subtle.contrast": import('./semanticTokens.types').SemanticTokenDefinition;
+        'subtle.contrast': import('./semanticTokens.types').SemanticTokenDefinition;
         success: any;
         warning: any;
     };
@@ -178,6 +178,10 @@ export declare const semanticColorTokens: {
             };
             hover: any;
         };
+        logo: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
         placeholder: {
             DEFAULT: any;
             contrast: import('./semanticTokens.types').SemanticTokenDefinition;

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

@@ -29,6 +29,10 @@ export declare const semanticTextColorTokens: {
         };
         hover: any;
     };
+    logo: {
+        DEFAULT: any;
+        contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+    };
     placeholder: {
         DEFAULT: any;
         contrast: import('./semanticTokens.types').SemanticTokenDefinition;
@@ -70,7 +74,7 @@ export declare const semanticBorderColorTokens: {
         contrast: any;
     };
     subtle: any;
-    "subtle.contrast": import('./semanticTokens.types').SemanticTokenDefinition;
+    'subtle.contrast': import('./semanticTokens.types').SemanticTokenDefinition;
     success: any;
     warning: any;
 };
@@ -329,7 +333,7 @@ export declare const semanticColorTokenRecord: {
             contrast: any;
         };
         subtle: any;
-        "subtle.contrast": import('./semanticTokens.types').SemanticTokenDefinition;
+        'subtle.contrast': import('./semanticTokens.types').SemanticTokenDefinition;
         success: any;
         warning: any;
     };
@@ -368,6 +372,10 @@ export declare const semanticColorTokenRecord: {
             };
             hover: any;
         };
+        logo: {
+            DEFAULT: any;
+            contrast: import('./semanticTokens.types').SemanticTokenDefinition;
+        };
         placeholder: {
             DEFAULT: any;
             contrast: import('./semanticTokens.types').SemanticTokenDefinition;

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

@@ -1,5 +1,5 @@
-export type SemanticProperty = "text" | "background" | "border" | "divider";
-export type SemanticColorScheme = "primary" | "secondary" | "danger" | "warning" | "success" | "neutral" | "primaryAlpha" | "secondaryAlpha" | "dangerAlpha" | "neutralAlpha" | "ai";
+export type SemanticProperty = 'text' | 'background' | 'border' | 'divider';
+export type SemanticColorScheme = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'neutral' | 'primaryAlpha' | 'secondaryAlpha' | 'dangerAlpha' | 'neutralAlpha' | 'ai';
 export type SemanticTokenDefinition = {
     value: {
         _light: string | number;

package/dist/types/theme/semanticTokens/utils/getSemanticColorToken.d.ts

@@ -1,6 +1,6 @@
 import { SemanticProperty } from '../semanticTokens.types';
 import { FlatSemanticTokenRecord } from './flattenSemanticTokenRecord';
-export type KibbleThemeMode = "light" | "dark";
-export declare const getSemanticColorTokenRecord: ({ property, }: {
+export type KibbleThemeMode = 'light' | 'dark';
+export declare const getSemanticColorTokenRecord: ({ property }: {
     property: SemanticProperty;
 }) => FlatSemanticTokenRecord;

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

@@ -1 +1,2 @@
+export declare const kibbleThemeConfig: import('@chakra-ui/react').SystemConfig;
 export declare const system: import('@chakra-ui/react').SystemContext;

package/dist/types/theme/tokens/blurs/blurs.types.d.ts

@@ -1 +1 @@
-export type Blur = "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type Blur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';

package/dist/types/theme/tokens/borders/borders.types.d.ts

@@ -1,2 +1,2 @@
-export type Border = "none" | "1px" | "2px" | "4px" | "8px";
-export type Radius = "none" | "xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+export type Border = 'none' | '1px' | '2px' | '4px' | '8px';
+export type Radius = 'none' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';

package/dist/types/theme/tokens/colors/colors.types.d.ts

@@ -1,2 +1,2 @@
-export type ColorValue = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-export type CoreColor = "primary" | "secondary" | "tertiary" | "neutral" | "danger" | "warning" | "success" | "primaryAlpha" | "secondaryAlpha" | "dangerAlpha" | "primaryAlphaInverse" | "secondaryAlphaInverse" | "blackAlpha" | "whiteAlpha" | "dangerAlphaInverse";
+export type ColorValue = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export type CoreColor = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'danger' | 'warning' | 'success' | 'primaryAlpha' | 'secondaryAlpha' | 'dangerAlpha' | 'primaryAlphaInverse' | 'secondaryAlphaInverse' | 'blackAlpha' | 'whiteAlpha' | 'dangerAlphaInverse';

package/dist/types/theme/tokens/shadows/shadows.config.d.ts

@@ -26,9 +26,6 @@ export declare const shadowTokens: {
     outline: {
         value: string;
     };
-    active: {
-        value: string;
-    };
     xsR: {
         value: string;
     };
@@ -56,6 +53,9 @@ export declare const shadowTokens: {
     "hover.contrast": {
         value: string;
     };
+    active: {
+        value: string;
+    };
     "active.contrast": {
         value: string;
     };

package/dist/types/theme/tokens/shadows/shadows.types.d.ts

@@ -1,2 +1,2 @@
-export type Shadow = "xs" | "xsR" | "sm" | "smR" | "base" | "baseR" | "md" | "mdR" | "lg" | "lgR" | "xl" | "xlR" | "2xl" | "2xlR" | "outline" | "hover" | "hover.contrast" | "active" | "active.contrast" | "inner" | "none" | "dark-lg";
-export type ShadowType = "base" | "reverse" | "misc";
+export type Shadow = 'xs' | 'xsR' | 'sm' | 'smR' | 'base' | 'baseR' | 'md' | 'mdR' | 'lg' | 'lgR' | 'xl' | 'xlR' | '2xl' | '2xlR' | 'outline' | 'hover' | 'hover.contrast' | 'active' | 'active.contrast' | 'inner' | 'none' | 'dark-lg';
+export type ShadowType = 'base' | 'reverse' | 'misc';

package/dist/types/theme/tokens/sizes/sizes.config.d.ts

@@ -52,16 +52,30 @@ export declare const sizeTokens: {
     "2xs": {
         value: string;
     };
-    max: {
+    full: {
         value: string;
     };
     "3xs": {
         value: string;
     };
+    max: {
+        value: string;
+    };
     min: {
         value: string;
     };
-    full: {
+};
+export declare const breakpointTokens: {
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
         value: string;
     };
 };

package/dist/types/theme/tokens/sizes/sizes.types.d.ts

@@ -1,2 +1,2 @@
-export type BreakpointSize = "sm" | "md" | "lg" | "xl";
-export type Size = "max" | "min" | "full" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
+export type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl';
+export type Size = 'max' | 'min' | 'full' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';

package/dist/types/theme/tokens/spacing/spacing.config.d.ts

@@ -23,9 +23,6 @@ export declare const spacingTokens: {
     10: {
         value: string;
     };
-    px: {
-        value: string;
-    };
     1: {
         value: string;
     };
@@ -98,4 +95,7 @@ export declare const spacingTokens: {
     3.5: {
         value: string;
     };
+    px: {
+        value: string;
+    };
 };

package/dist/types/theme/tokens/spacing/spacing.types.d.ts

@@ -1 +1 @@
-export type Space = "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";
+export type Space = 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52' | '56' | '60' | '64' | '72' | '80' | '96';

package/dist/types/theme/tokens/transitions/transitions.config.d.ts

@@ -25,10 +25,10 @@ export declare const transitionEasingTokens: {
     "ease-in": {
         value: string;
     };
-    "ease-in-out": {
+    "ease-out": {
         value: string;
     };
-    "ease-out": {
+    "ease-in-out": {
         value: string;
     };
 };

package/dist/types/theme/tokens/transitions/transitions.types.d.ts

@@ -1,2 +1,2 @@
-export type TransitionDuration = "ultra-fast" | "faster" | "fast" | "normal" | "slow" | "slower" | "ultra-slow";
-export type TransitionEasing = "ease-in" | "ease-out" | "ease-in-out";
+export type TransitionDuration = 'ultra-fast' | 'faster' | 'fast' | 'normal' | 'slow' | 'slower' | 'ultra-slow';
+export type TransitionEasing = 'ease-in' | 'ease-out' | 'ease-in-out';

package/dist/types/theme/tokens/typography/typography.config.d.ts

@@ -51,125 +51,80 @@ export declare const fontSizeTokens: {
     };
 };
 export declare const fontWeightTokens: {
-    xs: {
-        value: string;
-    };
-    sm: {
-        value: string;
-    };
-    md: {
+    normal: {
         value: string;
     };
-    lg: {
+    semibold: {
         value: string;
     };
-    xl: {
-        value: string;
-    };
-    "2xl": {
-        value: string;
-    };
-    "3xl": {
-        value: string;
-    };
-    "4xl": {
-        value: string;
-    };
-    "5xl": {
-        value: string;
-    };
-    "6xl": {
-        value: string;
-    };
-    "7xl": {
-        value: string;
-    };
-    "8xl": {
-        value: string;
-    };
-    "9xl": {
+    bold: {
         value: string;
     };
 };
 export declare const lineHeightTokens: {
-    xs: {
+    normal: {
         value: string;
     };
-    sm: {
+    none: {
         value: string;
     };
-    md: {
+    shorter: {
         value: string;
     };
-    lg: {
+    short: {
         value: string;
     };
-    xl: {
-        value: string;
-    };
-    "2xl": {
-        value: string;
-    };
-    "3xl": {
-        value: string;
-    };
-    "4xl": {
+    base: {
         value: string;
     };
-    "5xl": {
-        value: string;
-    };
-    "6xl": {
+    tall: {
         value: string;
     };
-    "7xl": {
-        value: string;
-    };
-    "8xl": {
+    taller: {
         value: string;
     };
-    "9xl": {
+    3: {
         value: string;
     };
-};
-export declare const letterSpacingTokens: {
-    xs: {
+    4: {
         value: string;
     };
-    sm: {
+    5: {
         value: string;
     };
-    md: {
+    6: {
         value: string;
     };
-    lg: {
+    7: {
         value: string;
     };
-    xl: {
+    8: {
         value: string;
     };
-    "2xl": {
+    9: {
         value: string;
     };
-    "3xl": {
+    10: {
         value: string;
     };
-    "4xl": {
+};
+export declare const letterSpacingTokens: {
+    normal: {
         value: string;
     };
-    "5xl": {
+    tighter: {
         value: string;
     };
-    "6xl": {
+    tight: {
         value: string;
     };
-    "7xl": {
+    wide: {
         value: string;
     };
-    "8xl": {
+    wider: {
         value: string;
     };
-    "9xl": {
+    widest: {
         value: string;
     };
 };

package/dist/types/theme/tokens/typography/typography.types.d.ts

@@ -1,5 +1,5 @@
-export type Font = "heading" | "body" | "mono";
-export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
-export type FontWeight = "normal" | "semibold" | "bold";
-export type LineHeight = "normal" | "none" | "shorter" | "short" | "base" | "tall" | "taller" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
-export type LetterSpacing = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest";
+export type Font = 'heading' | 'body' | 'mono';
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+export type FontWeight = 'normal' | 'semibold' | 'bold';
+export type LineHeight = 'normal' | 'none' | 'shorter' | 'short' | 'base' | 'tall' | 'taller' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
+export type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';