@everlywell/ui-kit 0.0.1-alpha.1

package/lib/theme/index.d.ts

@@ -0,0 +1,659 @@
+export declare const theme: {
+    breakpoints: {
+        mobile: string;
+        tablet: string;
+        largeTablet: string;
+        desktop: string;
+        largeDesktop: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontWeights: {
+        thin: string;
+        xlight: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semiBold: string;
+        bold: string;
+        xbold: string;
+        black: string;
+    };
+    fontSizes: {
+        '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;
+        '9xl': string;
+        '10xl': string;
+        '11xl': string;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    lineHeights: {
+        body: number;
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+    };
+    sizes: {
+        max: string;
+        min: string;
+        full: string;
+    };
+    space: {
+        /**
+         * Base unit: 4px
+         * 1 rem = 16px
+         *
+         * Mental model:
+         *
+         * If you need a spacing of 40px, divide it by 4.
+         * That'll give you 10. Then use it in your component.
+         */
+        0: number;
+        0.5: string;
+        1: string;
+        1.5: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        outline: string;
+        inner: string;
+        none: string;
+        'dark-lg': string;
+        dialog: string;
+    };
+    zIndices: {
+        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;
+    };
+    colors: {
+        white: {
+            base: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        tints: {
+            black: string;
+            darkGrey: string;
+            uiGrey: string;
+            medGrey: string;
+            lightGrey: string;
+            darkCream: string;
+            cream: string;
+            lightCream: string;
+            white: string;
+        };
+        viridian: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        sunshine: {
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        terracotta: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        violet: {
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        eggplant: {
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        moonlight: {
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        sky: {
+            dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+    };
+    components: {
+        Button: {
+            baseStyle?: {
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
+                borderRadius: string;
+                _disabled: {
+                    span: {
+                        display: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: ("md" | "lg")[];
+                    px: number[];
+                    py: number[];
+                    '&:has(> svg:only-child)': {
+                        px: number;
+                        py: number;
+                        svg: {
+                            fontSize: string;
+                        };
+                    };
+                    svg: {
+                        fontSize: string;
+                    };
+                };
+                md: {
+                    fontSize: ("lg" | "xl")[];
+                    px: number[];
+                    py: number[];
+                    '&:has(> svg:only-child)': {
+                        px: number[];
+                        py: number[];
+                    };
+                    svg: {
+                        fontSize: ("1.5rem" | "1.25rem")[];
+                    };
+                };
+                wide: {
+                    fontSize: string;
+                    px: number;
+                    py: number;
+                    width: string;
+                    '&:has(> svg:only-child)': {
+                        px: number;
+                        py: number;
+                    };
+                    svg: {
+                        fontSize: string;
+                    };
+                };
+            } | undefined;
+            variants?: {
+                primary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                    bg: string;
+                    color: string;
+                    ':hover, &.hover': {
+                        bg: string;
+                    };
+                    ':active, &.active': {
+                        bg: string;
+                    };
+                    ':disabled': {
+                        bg: string;
+                        color: string;
+                    };
+                };
+                secondary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                    color: string;
+                    boxShadow: (theme: Record<string, any>) => string;
+                    ':hover, &.hover': {
+                        color: string;
+                        boxShadow: (theme: Record<string, any>) => string;
+                    };
+                    ':active, &.active': {
+                        color: string;
+                        boxShadow: (theme: Record<string, any>) => string;
+                    };
+                    ':disabled': {
+                        color: string;
+                        boxShadow: (theme: Record<string, any>) => string;
+                        opacity: number;
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: "wide" | "sm" | "md" | undefined;
+                variant?: "primary" | "secondary" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Drawer: {
+            baseStyle?: {
+                overlay: {
+                    zIndex: string;
+                    bg: (theme: Record<string, any>) => string;
+                };
+                dialogContainer: {
+                    zIndex: string;
+                };
+                dialog: {
+                    bg: string;
+                    pt: number[];
+                    display: string;
+                    flexDirection: string;
+                    alignItems: string;
+                    gap: number;
+                    boxShadow: string;
+                };
+                header: {
+                    px: number;
+                    display: string;
+                    flexDirection: string;
+                    justifyContent: string;
+                    alignItems: string;
+                };
+                closeButton: {
+                    bg: string;
+                    borderRadius: string;
+                    p: number;
+                    _hover: {
+                        bg: string;
+                    };
+                    '& .chakra-icon': {
+                        p: number;
+                    };
+                };
+                body: {
+                    px: number;
+                    flexGrow: number;
+                };
+                footer: {
+                    py: number;
+                    px: number;
+                };
+            } | undefined;
+            sizes?: {
+                partial: {
+                    dialog: {
+                        maxW: number;
+                    };
+                };
+                full: {
+                    dialog: {
+                        maxW: string;
+                        minH: string;
+                        borderRadius: number;
+                    };
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                    keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: "full" | "partial" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+        };
+        Heading: {
+            baseStyle?: {
+                fontFamily: string;
+                fontWeight: string;
+                color: string;
+            } | undefined;
+            sizes?: {
+                '3xl': {
+                    fontSize: ("6xl" | "11xl")[];
+                    lineHeight: string;
+                };
+                '2xl': {
+                    fontSize: ("6xl" | "9xl")[];
+                    lineHeight: string;
+                };
+                xl: {
+                    fontSize: ("4xl" | "7xl")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: ("3xl" | "6xl")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: ("2xl" | "4xl")[];
+                    lineHeight: string;
+                };
+                sm: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: ("lg" | "3xl")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Icon: {
+            baseStyle?: {} | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Link: {
+            baseStyle?: {
+                color: string;
+                fontWeight: string;
+                _hover: {
+                    textDecoration: string;
+                    cursor: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: ("xs" | "sm")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontSize: ("sm" | "md")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontSize: ("md" | "lg")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Text: {
+            baseStyle?: {
+                fontFamily: string;
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontSize: string;
+                p: number;
+            } | undefined;
+            sizes?: {
+                xs: {
+                    fontSize: ("2xs" | "xs")[];
+                };
+                sm: {
+                    fontSize: ("xs" | "sm")[];
+                };
+                md: {
+                    fontSize: ("sm" | "md")[];
+                };
+                lg: {
+                    fontSize: ("md" | "lg")[];
+                };
+                xl: {
+                    fontSize: ("lg" | "2xl")[];
+                    lineHeight: ("shorter" | "short")[];
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Menu: {
+            baseStyle?: {
+                button: {};
+                list: {
+                    boxShadow: string;
+                    backgroundColor: string;
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                };
+                item: {
+                    fontWeight: string;
+                    lineHeight: string;
+                    color: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _disabled: {
+                        backgroundColor: string;
+                        color: string;
+                        cursor: string;
+                    };
+                    _first: {
+                        borderTopRadius: string;
+                    };
+                    _last: {
+                        borderBottomRadius: string;
+                    };
+                };
+                groupTitle: {
+                    color: string;
+                    letterSpacing: string;
+                };
+                command: {
+                    color: string;
+                };
+                divider: {
+                    borderColor: string;
+                    borderBottom: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    button: {};
+                    item: {
+                        fontSize: ("2xs" | "sm")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("md" | "lg")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    divider: {
+                        marginY: string;
+                    };
+                };
+                md: {
+                    item: {
+                        fontSize: ("3xs" | "lg")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("lg" | "xl")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                };
+                lg: {
+                    item: {
+                        fontSize: ("xl" | "2xl")[];
+                        paddingX: string;
+                        paddingY: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("3xl" | "4xl")[];
+                        paddingX: string;
+                        paddingY: string;
+                    };
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("button" | "list" | "item" | "groupTitle" | "command" | "divider")[];
+        };
+    };
+    styles: import("@chakra-ui/theme-tools/dist/component").Styles;
+    config: import("@chakra-ui/theme/dist/theme.types").ThemeConfig;
+    borders: {
+        none: number;
+        "1px": string;
+        "2px": string;
+        "4px": string;
+        "8px": string;
+    };
+    transition: {
+        property: {
+            common: string;
+            colors: string;
+            dimensions: string;
+            position: string;
+            background: string;
+        };
+        easing: {
+            "ease-in": string;
+            "ease-out": string;
+            "ease-in-out": string;
+        };
+        duration: {
+            "ultra-fast": string;
+            faster: string;
+            fast: string;
+            normal: string;
+            slow: string;
+            slower: string;
+            "ultra-slow": string;
+        };
+    };
+    radii: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        full: string;
+    };
+    blur: {
+        none: number;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    direction: "ltr";
+};
+export default theme;

package/lib/theme/layout/Box/Box.d.ts

@@ -0,0 +1,3 @@
+import { Box, BoxProps as ChakraButtonProps } from '@chakra-ui/react';
+export type BoxProps = ChakraButtonProps;
+export default Box;

package/lib/theme/layout/Grid/Grid.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FlexProps } from '@chakra-ui/react';
+type Spacing = number | Array<number>;
+type NumberFrom1To12 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Columns = NumberFrom1To12 | NumberFrom1To12[];
+type GridContextType = {
+    spacing: Spacing;
+    columns: Columns;
+};
+export declare const GridContext: React.Context<GridContextType>;
+export type GridProps = {
+    /**
+     * Aligns the grid items within the container to the edges.
+     * Essentially removing the spacing around the container
+     */
+    alignEdges?: boolean;
+    /**
+     * Define the spacing between elements using the spacing values defined
+     * in the design system. Default is the theme horizontal page spacing defined
+     * in the app's theme.
+     */
+    spacing?: Spacing;
+    /**
+     * Indicates the number of columns
+    */
+    columns?: Columns;
+} & FlexProps;
+/**
+ * Flexbox Grid component
+ */
+declare const Grid: React.ForwardRefExoticComponent<{
+    /**
+     * Aligns the grid items within the container to the edges.
+     * Essentially removing the spacing around the container
+     */
+    alignEdges?: boolean | undefined;
+    /**
+     * Define the spacing between elements using the spacing values defined
+     * in the design system. Default is the theme horizontal page spacing defined
+     * in the app's theme.
+     */
+    spacing?: Spacing | undefined;
+    /**
+     * Indicates the number of columns
+    */
+    columns?: Columns | undefined;
+} & FlexProps & React.RefAttributes<unknown>>;
+export default Grid;

package/lib/theme/layout/Grid/GridItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BoxProps } from '../Box/Box';
+export type GridItemProps = BoxProps;
+declare const GridItem: React.ForwardRefExoticComponent<import("@chakra-ui/layout/dist/box").BoxProps & React.RefAttributes<unknown>>;
+export default GridItem;