@televet/kibble-ui 0.1.0 → 1.0.0

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

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

package/build/theme/index.d.ts

@@ -0,0 +1,33 @@
+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';
+declare const theme: ITheme;
+export interface ITheme {
+    blur: Tblur;
+    borders: Tborders;
+    colors: TColors;
+    radii: TRadii;
+    shadows: TShadows;
+    sizes: TSizes;
+    fonts: TFonts;
+    fontSizes: TFontSizes;
+    fontWeights: TFontWeights;
+    lineHeights: TLineHeights;
+    space: TSpace;
+    transition: TTransition;
+    zIndices: TZIndices;
+    semanticTokens: ISemanticTokens;
+    initialColorMode: string;
+    useSystemColorMode: boolean;
+}
+export default theme;

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

@@ -0,0 +1,12 @@
+declare const blur: Tblur;
+export declare type Tblur = {
+    none: number;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+};
+export default blur;

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

@@ -0,0 +1,15 @@
+declare const borders: {
+    none: number;
+    '1px': string;
+    '2px': string;
+    '4px': string;
+    '8px': string;
+};
+export declare type Tborders = {
+    none: number;
+    '1px': string;
+    '2px': string;
+    '4px': string;
+    '8px': string;
+};
+export default borders;

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

@@ -0,0 +1,194 @@
+export declare const baseColors: IBaseColors;
+export declare const semanticTokens: ISemanticTokens;
+interface IBaseColors {
+    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;
+    };
+    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;
+    };
+    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;
+    };
+    comet: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+}
+export 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;
+        dark: string;
+        table: string;
+        overlay: string;
+        info: string;
+        error: string;
+        warning: string;
+        success: 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;
+    };
+    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 declare type TColors = IBaseColors & ISemanticTokens;
+declare const colors: TColors;
+export default colors;

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

@@ -0,0 +1,17 @@
+declare const fontSizes: TFontSizes;
+export declare type TFontSizes = {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+export default fontSizes;

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

@@ -0,0 +1,13 @@
+declare const fontWeights: TFontWeights;
+export declare type TFontWeights = {
+    hairline: number;
+    thin: number;
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+    black: number;
+};
+export default fontWeights;

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

@@ -0,0 +1,7 @@
+declare const fonts: TFonts;
+export declare type TFonts = {
+    heading: string;
+    body: string;
+    mono: string;
+};
+export default fonts;

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

@@ -0,0 +1,17 @@
+declare const letterSpacings: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+};
+export declare type TLetterSpacings = {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+};
+export default letterSpacings;

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

@@ -0,0 +1,19 @@
+declare const lineHeights: TLineHeights;
+export declare type TLineHeights = {
+    normal: string;
+    none: number;
+    shorter: number;
+    short: number;
+    base: number;
+    tall: number;
+    taller: string;
+    '3': string;
+    '4': string;
+    '5': string;
+    '6': string;
+    '7': string;
+    '8': string;
+    '9': string;
+    '10': string;
+};
+export default lineHeights;

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

@@ -0,0 +1,13 @@
+declare const radii: TRadii;
+export declare type TRadii = {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+};
+export default radii;

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

@@ -0,0 +1,27 @@
+declare const shadows: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    outline: string;
+    inner: string;
+    none: string;
+    'dark-lg': string;
+};
+export declare type TShadows = {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    outline: string;
+    inner: string;
+    none: string;
+    'dark-lg': string;
+};
+export default shadows;

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

@@ -0,0 +1,27 @@
+declare const sizes: TSizes;
+export declare type TSizes = {
+    max: string;
+    min: string;
+    full: string;
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    container: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export default sizes;

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

@@ -0,0 +1,37 @@
+declare const space: TSpace;
+export declare type TSpace = {
+    px: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+};
+export default space;

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

@@ -0,0 +1,28 @@
+interface ITransitionProperty {
+    common: string;
+    colors: string;
+    dimensions: string;
+    position: string;
+    background: string;
+}
+interface ITransitionTimingFunction {
+    'ease-in': string;
+    'ease-out': string;
+    'ease-in-out': string;
+}
+interface ITransitionDuration {
+    'ultra-fast': string;
+    faster: string;
+    fast: string;
+    normal: string;
+    slow: string;
+    slower: string;
+    'ultra-slow': string;
+}
+declare const transition: TTransition;
+export declare type TTransition = {
+    property: ITransitionProperty;
+    easing: ITransitionTimingFunction;
+    duration: ITransitionDuration;
+};
+export default transition;

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

@@ -0,0 +1,17 @@
+declare const zIndices: TZIndices;
+export declare type TZIndices = {
+    hide: number;
+    auto: string;
+    base: number;
+    docked: number;
+    dropdown: number;
+    sticky: number;
+    banner: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    skipLink: number;
+    toast: number;
+    tooltip: number;
+};
+export default zIndices;

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Kibble Design System by Televet",
   "author": "TeleVet",
   "main": "build/index.js",
-  "module": "build/index.es.js",
+  "types": "build/index.d.ts",
   "files": [
     "build"
   ],
   "scripts": {
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "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:docs": "start-storybook -p 6006 -s public",
-    "build:docs": "build-storybook -s public",
-    "prepare": "husky install"
+    "fix": "npx eslint --fix ./src/ && npx stylelint ./src/ --fix",
+    "lint": "npx eslint ./src/ && npx stylelint ./src/",
+    "start": "start-storybook -p 6006 && npx rollup -c --watch",
+    "build": "build-storybook -o docs && npx rollup -c"
   },
   "browserslist": {
     "production": [
@@ -42,13 +38,12 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.15.3",
-    "@chakra-ui/cli": "^1.9.0",
-    "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.6",
+    "@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.8.1",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
@@ -56,13 +51,20 @@
     "@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",
     "autoprefixer": "^9.8.6",
@@ -85,36 +87,38 @@
     "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",
     "rollup": "^2.56.3",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-includepaths": "^0.2.4",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-stylelint": "^1.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-typescript2": "^0.27.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "rollup-plugin-typescript2": "^0.27.1"
-  },
-  "dependencies": {
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "styled-components": "^5.3.3",
     "typescript": "^4.6.2"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "prop-types": ">=15.0.0"
+    "@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",
+    "react-hook-form": ">=5.7.0",
+    "styled-components": ">=5.0.0"
   }
 }