@bikdotai/bik-component-library 0.0.5 → 0.0.6-beta

package/dist/esm/constants/Theme.d.ts

@@ -1,587 +0,0 @@
-export declare const BASE_COLORS: {
-    brand: {
-        900: string;
-        800: string;
-        500: string;
-        50: string;
-    };
-    grayscale: {
-        900: string;
-        700: string;
-        500: string;
-        400: string;
-        200: string;
-        100: string;
-        50: string;
-        white: string;
-        alpha: string;
-    };
-    negative: {
-        900: string;
-        700: string;
-        100: string;
-        50: string;
-    };
-    warning: {
-        900: string;
-        500: string;
-        100: string;
-        50: string;
-    };
-    positive: {
-        900: string;
-        700: string;
-        100: string;
-        50: string;
-    };
-};
-export declare const COLORS: {
-    background: {
-        inactive: string;
-        base: string;
-        inverse: string;
-        inverseLight: string;
-        brand: string;
-        brandLight: string;
-        negative: {
-            vibrant: string;
-            light: string;
-        };
-        warning: {
-            vibrant: string;
-            light: string;
-        };
-        positive: {
-            vibrant: string;
-            light: string;
-        };
-        blue: {
-            light: string;
-        };
-    };
-    scrim: {
-        standard: string;
-    };
-    surface: {
-        standard: string;
-        subdued: string;
-        hovered: string;
-    };
-    content: {
-        primary: string;
-        secondary: string;
-        placeholder: string;
-        inactive: string;
-        brand: string;
-        primaryInverse: string;
-        secondaryInverse: string;
-        negative: string;
-        warning: string;
-        positive: string;
-        blue: string;
-    };
-    stroke: {
-        primary: string;
-        brand: string;
-        negative: {
-            lightAlt: string;
-            vibrant: string;
-        };
-        warning: {
-            lightAlt: string;
-        };
-        positive: {
-            lightAlt: string;
-        };
-        brandLightAlt: string;
-        blue: {
-            lightAlt: string;
-        };
-    };
-    special: {
-        whatsapp: {
-            brand: string;
-            gradient: string;
-            dark: string;
-            gradientArr: string[];
-        };
-        brand: {
-            google: string;
-            facebook: string;
-        };
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        placeholder: string;
-        disabled: string;
-        white: string;
-        brand: string;
-        altPrimary: string;
-        altSecondary: string;
-    };
-};
-export declare const FONTS: {
-    display: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    titleXLarge: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    titleLarge: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    titleMedium: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    titleRegular: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    titleSmall: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodyPrimary: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodyLarge: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodySecondary: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    caption: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    tiny: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    subHeading: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title1: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title1Mobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title2: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title2Mobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title3: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title3Mobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title4: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    textPlaceholder: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    title4Mobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodyRegularMobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodyRegular: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    bodySmall: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    buttonLarge: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    buttonRegular: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    captionMobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    captionBold: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    text1Bold: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    toast: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-    toastMobile: {
-        fontWeight: string;
-        fontSize: number;
-        lineHeight: number;
-        letterSpacing: number;
-    };
-};
-export declare const DEFAULT_THEME: {
-    colorsV2: {
-        background: {
-            inactive: string;
-            base: string;
-            inverse: string;
-            inverseLight: string;
-            brand: string;
-            brandLight: string;
-            negative: {
-                vibrant: string;
-                light: string;
-            };
-            warning: {
-                vibrant: string;
-                light: string;
-            };
-            positive: {
-                vibrant: string;
-                light: string;
-            };
-            blue: {
-                light: string;
-            };
-        };
-        scrim: {
-            standard: string;
-        };
-        surface: {
-            standard: string;
-            subdued: string;
-            hovered: string;
-        };
-        content: {
-            primary: string;
-            secondary: string;
-            placeholder: string;
-            inactive: string;
-            brand: string;
-            primaryInverse: string;
-            secondaryInverse: string;
-            negative: string;
-            warning: string;
-            positive: string;
-            blue: string;
-        };
-        stroke: {
-            primary: string;
-            brand: string;
-            negative: {
-                lightAlt: string;
-                vibrant: string;
-            };
-            warning: {
-                lightAlt: string;
-            };
-            positive: {
-                lightAlt: string;
-            };
-            brandLightAlt: string;
-            blue: {
-                lightAlt: string;
-            };
-        };
-        special: {
-            whatsapp: {
-                brand: string;
-                gradient: string;
-                dark: string;
-                gradientArr: string[];
-            };
-            brand: {
-                google: string;
-                facebook: string;
-            };
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            placeholder: string;
-            disabled: string;
-            white: string;
-            brand: string;
-            altPrimary: string;
-            altSecondary: string;
-        };
-    };
-    fonts: {
-        display: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        titleXLarge: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        titleLarge: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        titleMedium: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        titleRegular: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        titleSmall: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodyPrimary: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodyLarge: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodySecondary: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        caption: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        tiny: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        subHeading: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title1: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title1Mobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title2: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title2Mobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title3: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title3Mobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title4: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        textPlaceholder: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        title4Mobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodyRegularMobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodyRegular: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        bodySmall: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        buttonLarge: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        buttonRegular: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        captionMobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        captionBold: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        text1Bold: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        toast: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-        toastMobile: {
-            fontWeight: string;
-            fontSize: number;
-            lineHeight: number;
-            letterSpacing: number;
-        };
-    };
-};

package/dist/esm/constants/Theme.js

@@ -1 +0,0 @@
-const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F"},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100]},positive:{lightAlt:e.positive[100]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:32,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};export{e as BASE_COLORS,t as COLORS,n as DEFAULT_THEME,i as FONTS};

package/dist/esm/constants/breakpoints.d.ts

@@ -1,6 +0,0 @@
-export declare const SCREEN_XS = 480;
-export declare const SCREEN_SM = 640;
-export declare const SCREEN_XM = 736;
-export declare const SCREEN_MD = 768;
-export declare const SCREEN_LG = 1088;
-export declare const SCREEN_XL = 1280;

package/dist/esm/constants/colors.d.ts

@@ -1,7 +0,0 @@
-export declare const BLACK = "#000000";
-export declare const WHITE = "#ffffff";
-export declare const PRIMARY: string;
-export declare const SECONDARY = "#4b5563";
-export declare const SUCCESS = "#16a34a";
-export declare const ERROR = "#dc2626";
-export declare const WARN = "#eab308";

package/dist/esm/constants/spacing.d.ts

@@ -1,2 +0,0 @@
-export declare const COLUMN_WIDTH = 56;
-export declare const GUTTER = 16;

package/dist/esm/index.d.ts

@@ -1,12 +0,0 @@
-export * from './constants/Theme';
-export * from './components/checkBox';
-export * from './components/list-item';
-export * from './components/pagination';
-export * from './components/radioButton';
-export * from './components/toaster';
-export * from './components/tooltips';
-export * from './components/spinner';
-export * from './components/stepper';
-export * from './components/tag';
-export * from './components/pagination';
-export * from './components/icon-button';

package/dist/esm/index.js

@@ -1 +0,0 @@
-export{BASE_COLORS,COLORS,DEFAULT_THEME,FONTS}from"./constants/Theme.js";export{CheckBox}from"./components/checkBox/CheckBox.js";export{ListItem}from"./components/list-item/ListItem.js";export{Pagination}from"./components/pagination/Pagination.js";export{RadioButton}from"./components/radioButton/RadioButton.js";export{Toaster}from"./components/toaster/Toaster.js";export{Tooltip}from"./components/tooltips/Tooltip.js";export{Spinner}from"./components/spinner/Spinner.js";export{Stepper}from"./components/stepper/Stepper.js";export{Tag}from"./components/tag/Tag.js";export{IconButton}from"./components/icon-button/IconButton.js";

package/dist/esm/utils/classNames.d.ts

@@ -1,7 +0,0 @@
-/**
- * Conditionally joining classNames together.
- *
- * @param names list names that need to be concat.
- * @returns a concat classNames string.
- */
-export declare const classNames: (...names: (string | undefined)[]) => string;

package/dist/esm/utils/rgba.d.ts

@@ -1,8 +0,0 @@
-/**
- * Convert hex string to RGBA color.
- *
- * @see https://gist.github.com/danieliser/b4b24c9f772066bcf0a6
- * @example
- * rgba('#000', 0.5) // rgba(0, 0, 0, 0.5)
- */
-export declare const rgba: (hexCode: string, opacity?: number) => string;