@televet/kibble-ui 0.1.0-beta.22 → 0.1.0-beta.3

package/build/providers/ThemeProvider/ThemeProvider.d.ts

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

package/build/theme/breakpoints.d.ts

@@ -0,0 +1,9 @@
+declare const breakpoints: Tbreakpoints;
+export declare type Tbreakpoints = {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export default breakpoints;

package/build/theme/{tokens/colors.d.ts → colors.d.ts}

@@ -1,10 +1,11 @@
-export declare const baseColors: IBaseColors;
-export declare const semanticTokens: ISemanticTokens;
-interface IBaseColors {
+interface IPallette {
     transparent: string;
     current: string;
     black: string;
     white: string;
+    televet: {
+        100: string;
+    };
     whiteAlpha: {
         50: string;
         100: string;
@@ -126,50 +127,54 @@ interface IBaseColors {
         900: string;
     };
 }
-export interface ISemanticTokens {
+interface ISemanticTokens {
     text: {
         onLight: string;
-        linkOnLight: string;
         onLightSubtle: string;
         onDark: string;
         headline: string;
-        placeholder: string;
-        success: string;
-        warning: string;
-        error: string;
     };
     background: {
         light: string;
-        grayLight: string;
-        grayDark: string;
-        tealLight: string;
+        gray: string;
+        info: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    border: {
+        default: string;
         dark: string;
-        table: string;
-        overlay: string;
         info: string;
         error: string;
         warning: string;
         success: string;
     };
+    button: {
+        primaryDefault: string;
+        primaryHover: string;
+        primaryActive: string;
+        secondaryDefault: string;
+        secondaryHover: string;
+        secondaryActive: string;
+        tertiaryDefault: string;
+        tertiaryHover: string;
+        tertiaryActive: string;
+        ghostDefault: string;
+        ghostHover: string;
+        ghostActive: string;
+    };
+    link: {
+        onLight: string;
+    };
     icon: {
         onLight: string;
-        onLightSubtle: string;
         onDark: string;
-        inactive: string;
         active: string;
         success: string;
         warning: string;
         error: string;
     };
-    border: {
-        default: string;
-        dark: string;
-        focus: string;
-        info: string;
-        error: string;
-        warning: string;
-        success: string;
-    };
     divider: {
         onLight: string;
     };
@@ -181,14 +186,8 @@ export interface ISemanticTokens {
         action: string;
         negative: string;
         error: string;
-        archived: string;
-        closed: string;
-    };
-    general: {
-        brand: string;
-        error: string;
     };
 }
-export declare type TColors = IBaseColors & ISemanticTokens;
+export declare type TColors = IPallette & ISemanticTokens;
 declare const colors: TColors;
 export default colors;

package/build/theme/index.d.ts

@@ -1,20 +1,22 @@
-import { ISemanticTokens, TColors } from './tokens/colors';
-import { Tblur } from './tokens/blur';
-import { Tborders } from './tokens/borders';
-import { TRadii } from './tokens/radii';
-import { TShadows } from './tokens/shadows';
-import { TSpace } from './tokens/space';
-import { TSizes } from './tokens/sizes';
-import { TTransition } from './tokens/transition';
-import { TFonts } from './tokens/fonts';
-import { TFontSizes } from './tokens/fontSizes';
-import { TFontWeights } from './tokens/fontWeights';
-import { TLineHeights } from './tokens/lineHeights';
-import { TZIndices } from './tokens/zIndeces';
+import { TColors } from './colors';
+import { Tblur } from './blur';
+import { Tbreakpoints } from './breakpoints';
+import { Tborders } from './borders';
+import { TRadii } from './radii';
+import { TShadows } from './shadows';
+import { TSpace } from './space';
+import { TSizes } from './sizes';
+import { TTransition } from './transition';
+import { TFonts } from './fonts';
+import { TFontSizes } from './fontSizes';
+import { TFontWeights } from './fontWeights';
+import { TLineHeights } from './lineHeights';
+import { TZIndices } from './zIndeces';
 declare const theme: ITheme;
 export interface ITheme {
     blur: Tblur;
     borders: Tborders;
+    breakpoints: Tbreakpoints;
     colors: TColors;
     radii: TRadii;
     shadows: TShadows;
@@ -26,8 +28,5 @@ export interface ITheme {
     space: TSpace;
     transition: TTransition;
     zIndices: TZIndices;
-    semanticTokens: ISemanticTokens;
-    initialColorMode: string;
-    useSystemColorMode: boolean;
 }
 export default theme;

package/build/theme/theme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeConfig } from '@chakra-ui/react';
+declare const theme: ThemeConfig;
+export default theme;

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

@@ -0,0 +1,190 @@
+declare const colors: {
+    pallette: {
+        comet: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        teal: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        blue: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        yellow: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        transparent: string;
+        current: string;
+        black: string;
+        white: string;
+        whiteAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        blackAlpha: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    semanticTokens: {
+        text: {
+            onLight: string;
+            onLightSubtle: string;
+            onDark: string;
+            headline: string;
+        };
+        background: {
+            light: string;
+            gray: string;
+            info: string;
+            error: string;
+            warning: string;
+            success: string;
+        };
+        border: {
+            default: string;
+            dark: string;
+            info: string;
+            error: string;
+            warning: string;
+            success: string;
+        };
+        button: {
+            primaryDefault: string;
+            primaryHover: string;
+            primaryActive: string;
+            secondaryDefault: string;
+            secondaryHover: string;
+            secondaryActive: string;
+            tertiaryDefault: string;
+            tertiaryHover: string;
+            tertiaryActive: string;
+            ghostDefault: string;
+            ghostHover: string;
+            ghostActive: string;
+        };
+        link: {
+            onLight: string;
+        };
+        icon: {
+            onLight: string;
+            onDark: string;
+            active: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        divider: {
+            onLight: string;
+        };
+        status: {
+            open: string;
+            confirmed: string;
+            success: string;
+            warning: string;
+            action: string;
+            negative: string;
+            error: string;
+        };
+    };
+};
+export default colors;

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

@@ -0,0 +1,6 @@
+declare const fonts: {
+    body: string;
+    heading: string;
+    mono: string;
+};
+export default fonts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "0.1.0-beta.22",
+  "version": "0.1.0-beta.3",
   "description": "Kibble Design System by Televet",
   "author": "TeleVet",
   "main": "build/index.js",
@@ -11,10 +11,16 @@
   "scripts": {
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "fix": "npx eslint --fix ./src/ && npx stylelint ./src/ --fix",
-    "lint": "npx eslint ./src/ && npx stylelint ./src/",
+    "build:lib": "npx rollup -c",
+    "fix:js": "npx eslint --fix ./src/",
+    "lint:js": "npx eslint ./src/",
+    "lint:style": "npx stylelint ./src/",
+    "fix:style": "npx stylelint ./src/ --fix",
     "start": "start-storybook -p 6006 && npx rollup -c --watch",
-    "build": "build-storybook -o docs && npx rollup -c"
+    "build:docs": "build-storybook -o docs",
+    "build": "npm run build:docs && npm run build:lib",
+    "start:localDev": "npx rollup -c --watch",
+    "prepare": "husky install"
   },
   "browserslist": {
     "production": [
@@ -38,12 +44,9 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.15.3",
-    "@chakra-ui/icons": "^1.0.14",
-    "@chakra-ui/react": "^1.6.5",
-    "@chakra-ui/theme-tools": "^1.3.6",
     "@chakra-ui/storybook-addon": "^1.0.3",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
@@ -51,19 +54,13 @@
     "@storybook/addon-docs": "^6.4.19",
     "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-links": "6.4.17",
-    "@storybook/addons": "^6.4.22",
     "@storybook/node-logger": "6.4.19",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.3.8",
-    "@storybook/theming": "^6.4.22",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
     "@types/styled-components": "^5.1.24",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
@@ -87,8 +84,6 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.3.2",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-scripts": "^4.0.3",
     "recursive-copy": "^2.0.13",
     "rimraf": "^3.0.2",
@@ -105,20 +100,27 @@
     "rollup-plugin-typescript2": "^0.27.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "stylelint-order": "^4.1.0",
+    "stylelint-order": "^4.1.0"
+  },
+  "dependencies": {
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@chakra-ui/icons": "^1.1.7",
+    "@chakra-ui/react": "^1.8.6",
+    "@chakra-ui/theme-tools": "^1.3.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "styled-components": "^5.3.3",
     "typescript": "^4.6.2"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=1.6.5",
-    "@chakra-ui/icons": ">=1.0.14",
-    "@chakra-ui/theme-tools": "^1.3.6",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "prop-types": ">=15.0.0",
-    "react": ">=16.13.1",
-    "react-dom": ">=16.13.1",
+    "@chakra-ui/react": "^1.8.6",
+    "styled-components": ">=5.0.0",
     "react-hook-form": ">=5.7.0",
-    "styled-components": ">=5.0.0"
+    "prop-types": ">=15.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const Banner: () => JSX.Element;
-export default Banner;

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const KInput: () => JSX.Element;
-export default KInput;