@televet/kibble-ui 1.2.3-beta.2p81ym7.3 → 1.3.0

package/build/theme/theme.types.d.ts

@@ -1,13 +1,14 @@
 import * as tokens from './tokens';
 import { ButtonStyleType, HeadingStyleConfig, TooltipStyleConfig } from '../components';
 import { ComponentStyleConfig } from '@chakra-ui/theme';
+import { Colors } from './tokens/colors/color.types';
 export interface ThemeProps {
     theme: Theme;
 }
 export interface Theme {
     blur: tokens.Blur;
     borders: tokens.Borders;
-    colors: tokens.Colors;
+    colors: Colors;
     radii: tokens.Radii;
     shadows: tokens.Shadows;
     sizes: tokens.Sizes;
@@ -32,5 +33,6 @@ export interface Theme {
         Text: ComponentStyleConfig;
         Button: ButtonStyleType;
         Tooltip: TooltipStyleConfig;
+        Avatar: ComponentStyleConfig;
     };
 }

package/build/theme/tokens/colors/color.types.d.ts

@@ -1,5 +1,5 @@
 import { ColorMode } from '@chakra-ui/react';
-import { IconColor, TextColor } from '../../../components';
+import { IconColor } from '../../../components';
 export declare type ColorValue = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
 export declare type ColorValueMap = Record<ColorValue, string>;
 export declare type AdaptiveColor = Record<ColorMode, string>;
@@ -23,6 +23,28 @@ export interface CoreColors {
     purple: ColorValueMap;
 }
 export interface SemanticColors {
+    text: {
+        light: {
+            default: string;
+            headline: string;
+            subtle: string;
+            link: string;
+            placeholder: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        dark: {
+            default: string;
+            headline: string;
+            subtle: string;
+            link: string;
+            placeholder: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+    };
     background: {
         light: string;
         grayLight: string;
@@ -79,6 +101,5 @@ export interface SemanticColors {
 }
 export interface AdaptiveColors {
     icon: AdaptiveColorMap<IconColor>;
-    text: AdaptiveColorMap<TextColor>;
 }
 export declare type Colors = CoreColors & SemanticColors & AdaptiveColors;

package/build/theme/tokens/fontWeights.d.ts

@@ -1,3 +1,12 @@
-export declare const fontWeights: Record<FontWeight, number>;
-export declare type FontWeight = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-export declare type FontWeights = Record<FontWeight, number>;
+export declare const fontWeights: FontWeights;
+export declare type FontWeights = {
+    hairline: number;
+    thin: number;
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+    black: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "1.2.3-beta.2p81ym7.3",
+  "version": "1.3.0",
   "description": "Kibble Design System by Televet",
   "author": "TeleVet",
   "main": "build/index.js",
@@ -43,6 +43,7 @@
     "@babel/runtime": "^7.15.3",
     "@chakra-ui/react": "^1.6.5",
     "@chakra-ui/storybook-addon": "^1.0.3",
+    "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -115,11 +116,12 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.6.5",
+    "@emotion/react": "^11.4.0",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1",
     "styled-components": ">=5.0.0"
   },
   "dependencies": {
-    "@televet/kibble-icons": "^0.1.10"
+    "@televet/kibble-icons": "^0.1.11"
   }
 }

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

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

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

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

package/build/components/Drawer/drawer.records.d.ts

@@ -1,13 +0,0 @@
-export declare const DrawerConfig: {
-    variants: {
-        alwaysOpen: {
-            parts: string[];
-            dialog: {
-                pointerEvents: string;
-            };
-            dialogContainer: {
-                pointerEvents: string;
-            };
-        };
-    };
-};

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

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

package/build/components/Modal/modal-section.component.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface props {
-    children: ReactNode;
-    alignContent?: 'left' | 'right';
-}
-export declare const ModalSection: ({ children, alignContent }: props) => JSX.Element;
-export {};

package/build/components/Modal/modal.component.d.ts

@@ -1,24 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
-import { BlurAmount } from '../../theme/tokens';
-import { FocusableElement } from '@chakra-ui/utils';
-import { ModalSize } from './modal.types';
-declare type ResponsiveBreakpoints = 'base' | 'md';
-export interface ModalProps extends ChakraModalProps {
-    title?: string;
-    children: ReactNode;
-    footer?: ReactNode;
-    isOpen: boolean;
-    onClose: () => void;
-    modalSize?: Partial<Record<ResponsiveBreakpoints, ModalSize>>;
-    allowEscape?: boolean;
-    useDefaultCloseButton?: boolean;
-    overlayBlur?: BlurAmount;
-    overlayHueShift?: number;
-    overlayBase?: 'whiteAlpha' | 'blackAlpha';
-    darkMode?: boolean;
-    initialFocusRef: React.RefObject<FocusableElement>;
-    scrollBehavior?: 'inside' | 'outside';
-}
-export declare const Modal: ({ title, children, footer, isOpen, onClose, modalSize, overlayBlur, allowEscape, useDefaultCloseButton, initialFocusRef, scrollBehavior, overlayHueShift, overlayBase, darkMode, ...rest }: ModalProps) => JSX.Element;
-export {};

package/build/components/Modal/modal.types.d.ts

@@ -1 +0,0 @@
-export declare type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';

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

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

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

@@ -1,9 +0,0 @@
-import { TooltipStyleConfig } from './tooltip.model';
-export declare const TooltipGlobalStyle: {
-    '[id^=tooltip]': {
-        padding: string;
-        borderRadius: string;
-        textTransform: string;
-    };
-};
-export declare const TooltipConfig: TooltipStyleConfig;

package/build/components/Typography/Heading/heading.records.d.ts

@@ -1,2 +0,0 @@
-import { HeadingStyleConfig } from './heading.types';
-export declare const HeadingConfig: HeadingStyleConfig;

package/build/components/Typography/Text/text.records.d.ts

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

package/build/components/Typography/typography.types.d.ts

@@ -1 +0,0 @@
-export declare type TextColor = 'default' | 'headline' | 'subtle' | 'link' | 'placeholder' | 'success' | 'warning' | 'error';

package/build/hocs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './withDarkMode';
-export * from './withTheme';

package/build/hocs/withDarkMode.d.ts

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

package/build/hocs/withTheme.d.ts

@@ -1,3 +0,0 @@
-import { ReactNode } from 'react';
-import { Theme } from '../theme';
-export declare const withTheme: (children: ReactNode, theme: Theme) => JSX.Element;

package/build/theme/theme.model.d.ts

@@ -1,37 +0,0 @@
-import * as tokens from './tokens';
-import { ButtonStyleConfig, HeadingStyleConfig, TooltipStyleConfig } from '../components';
-import { ComponentStyleConfig } from '@chakra-ui/theme';
-import { FontWeight } from './tokens';
-export interface ThemeProps {
-    theme: Theme;
-}
-export interface Theme {
-    blur: tokens.Blur;
-    borders: tokens.Borders;
-    colors: tokens.Colors;
-    radii: tokens.Radii;
-    shadows: tokens.Shadows;
-    sizes: tokens.Sizes;
-    fonts: tokens.Fonts;
-    fontSizes: tokens.FontSizes;
-    fontWeights: Record<FontWeight, number>;
-    lineHeights: tokens.LineHeights;
-    space: tokens.Space;
-    transition: tokens.Transition;
-    zIndices: tokens.ZIndices;
-    semanticTokens: tokens.SemanticTokens;
-    initialColorMode: string;
-    useSystemColorMode: boolean;
-    config: {
-        initialColorMode: string;
-        useSystemColorMode: boolean;
-    };
-    components: {
-        Drawer: ComponentStyleConfig;
-        Textarea: ComponentStyleConfig;
-        Heading: HeadingStyleConfig;
-        Text: ComponentStyleConfig;
-        Button: ButtonStyleConfig;
-        Tooltip: TooltipStyleConfig;
-    };
-}

package/build/theme/theme.record.d.ts

@@ -1,2 +0,0 @@
-import { ITheme } from './theme.model';
-export declare const theme: ITheme;

package/build/theme/tokens/colors/color.model.d.ts

@@ -1,64 +0,0 @@
-import { IconColor } from '../../../components';
-import { AdaptiveColorMap, ColorValueMap, SemanticTextToken } from './color.type';
-export interface BaseColors {
-    transparent: string;
-    current: string;
-    black: string;
-    white: string;
-    whiteAlpha: ColorValueMap;
-    blackAlpha: ColorValueMap;
-    gray: ColorValueMap;
-    red: ColorValueMap;
-    orange: ColorValueMap;
-    yellow: ColorValueMap;
-    green: ColorValueMap;
-    teal: ColorValueMap;
-    blue: ColorValueMap;
-    comet: ColorValueMap;
-}
-export interface SemanticTokens {
-    text: Record<SemanticTextToken, string>;
-    background: {
-        light: string;
-        grayLight: string;
-        grayDark: string;
-        tealLight: string;
-        dark: string;
-        table: string;
-        overlay: string;
-        info: string;
-        error: string;
-        warning: string;
-        success: string;
-    };
-    border: {
-        default: string;
-        dark: string;
-        focus: string;
-        info: string;
-        error: string;
-        warning: string;
-        success: string;
-    };
-    divider: {
-        onLight: string;
-    };
-    status: {
-        open: string;
-        confirmed: string;
-        success: string;
-        warning: string;
-        action: string;
-        negative: string;
-        error: string;
-        archived: string;
-        closed: string;
-    };
-    general: {
-        brand: string;
-        error: string;
-    };
-}
-export interface AdaptiveColorTokens {
-    icon: AdaptiveColorMap<IconColor>;
-}

package/build/theme/tokens/colors/color.type.d.ts

@@ -1,9 +0,0 @@
-import { ColorMode } from '@chakra-ui/react';
-import { AdaptiveColorTokens, BaseColors, SemanticTokens } from './color.model';
-export declare type ColorValue = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-export declare type ColorValueMap = Record<ColorValue, string>;
-export declare type AdaptiveColor = Record<ColorMode, string>;
-export declare type AdaptiveColorMap<T extends keyof any> = Record<ColorMode, Record<T, string>>;
-export declare type AdaptiveColorConfig<K extends keyof any, T extends keyof any> = Record<K, AdaptiveColorMap<T>>;
-export declare type SemanticTextToken = 'onLight' | 'linkOnLight' | 'onLightSubtle' | 'onDark' | 'headline' | 'placeholder' | 'success' | 'warning' | 'error';
-export declare type Colors = BaseColors & SemanticTokens & AdaptiveColorTokens;