@televet/kibble-ui 0.1.0-beta.8 → 0.1.0

package/build/theme/theme.d.ts

@@ -1,3 +1,2 @@
-import { ThemeConfig } from '@chakra-ui/react';
-declare const theme: ThemeConfig;
+declare const theme: import("@chakra-ui/utils").Dict<any>;
 export default theme;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "0.1.0-beta.8",
+  "version": "0.1.0",
   "description": "Kibble Design System by Televet",
   "author": "TeleVet",
   "main": "build/index.js",
-  "types": "build/index.d.ts",
+  "module": "build/index.es.js",
   "files": [
     "build"
   ],
@@ -16,10 +16,8 @@
     "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:docs": "build-storybook -o docs",
-    "build": "npm run build:docs && npm run build:lib",
-    "start:localDev": "npx rollup -c --watch",
+    "start:docs": "start-storybook -p 6006 -s public",
+    "build:docs": "build-storybook -s public",
     "prepare": "husky install"
   },
   "browserslist": {
@@ -44,7 +42,13 @@
     "@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/theme-tools": "^1.3.6",
     "@chakra-ui/storybook-addon": "^1.0.3",
+    "@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",
@@ -59,7 +63,6 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.2.1",
-    "@types/styled-components": "^5.1.24",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "autoprefixer": "^9.8.6",
@@ -86,38 +89,32 @@
     "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-typescript2": "^0.27.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "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",
-    "@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",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "typescript": "^4.6.2"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^1.8.6",
-    "@chakra-ui/icons": "^1.1.7",
-    "styled-components": ">=5.0.0",
-    "react-hook-form": ">=5.7.0",
-    "prop-types": ">=15.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "prop-types": ">=15.0.0"
   }
 }

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

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

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

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

package/build/theme/blur.d.ts

@@ -1,12 +0,0 @@
-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/borders.d.ts

@@ -1,15 +0,0 @@
-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/breakpoints.d.ts

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

package/build/theme/colors.d.ts

@@ -1,210 +0,0 @@
-interface IPallette {
-    transparent: string;
-    current: string;
-    black: string;
-    white: string;
-    televet: {
-        100: 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;
-    };
-}
-interface ISemanticTokens {
-    primaryLightest: string;
-    primaryLight: string;
-    primary: string;
-    primaryDark: string;
-    error: string;
-    errorLight: string;
-    errorSecondary: string;
-    errorSecondaryDark: string;
-    grayWhite: string;
-    graySecondary: string;
-    success: string;
-    grayLightest: string;
-    grayLight: string;
-    grayDark: string;
-    grayDarker: string;
-    grayDarkest: string;
-    warning: string;
-    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 declare type TColors = IPallette & ISemanticTokens;
-declare const colors: TColors;
-export default colors;

package/build/theme/fontSizes.d.ts

@@ -1,17 +0,0 @@
-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/fontWeights.d.ts

@@ -1,13 +0,0 @@
-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/fonts.d.ts

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

package/build/theme/index.d.ts

@@ -1,32 +0,0 @@
-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;
-    sizes: TSizes;
-    fonts: TFonts;
-    fontSizes: TFontSizes;
-    fontWeights: TFontWeights;
-    lineHeights: TLineHeights;
-    space: TSpace;
-    transition: TTransition;
-    zIndices: TZIndices;
-}
-export default theme;

package/build/theme/letterSpacings.d.ts

@@ -1,17 +0,0 @@
-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/lineHeights.d.ts

@@ -1,19 +0,0 @@
-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/radii.d.ts

@@ -1,13 +0,0 @@
-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/shadows.d.ts

@@ -1,27 +0,0 @@
-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/sizes.d.ts

@@ -1,27 +0,0 @@
-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/space.d.ts

@@ -1,37 +0,0 @@
-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/fonts/fonts.d.ts

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

package/build/theme/transition.d.ts

@@ -1,28 +0,0 @@
-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/zIndeces.d.ts

@@ -1,17 +0,0 @@
-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;