@everlywell/ui-kit 0.3.0-next → 0.3.1-next

package/lib/theme/index.d.ts

@@ -64,61 +64,71 @@ export declare const theme: {
     };
     space: {
         /**
-         * TODO: figure out best way to define spacing
-         * maybe do something like this?
-         * 0, 0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10
-         * 0,     2,    4,   8,   12,  16,  24,  32,  40,  48, 64, 80, 96, 128, 160
-         */
+         * 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;
-        7: string;
         8: string;
-        9: string;
         10: string;
-        11: 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;
-        };
-        black: {
-            base: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        grayscale: {
+        tints: {
+            black: string;
             darkGrey: string;
-            grey: string;
-            mediumGrey: string;
+            uiGrey: string;
+            medGrey: string;
             lightGrey: string;
             darkCream: string;
             cream: string;
             lightCream: string;
+            white: string;
         };
-        red: {
+        viridian: {
             50: string;
             100: string;
             200: string;
@@ -129,20 +139,20 @@ export declare const theme: {
             700: string;
             800: string;
             900: string;
-            wash: string;
-            lighter: string;
-            light: string;
-            base: string;
             dark: string;
-        };
-        yellow: {
-            wash: string;
-            lighter: string;
-            light: string;
             base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        sunshine: {
             dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
         };
-        green: {
+        terracotta: {
             50: string;
             100: string;
             200: string;
@@ -153,39 +163,39 @@ export declare const theme: {
             700: string;
             800: string;
             900: string;
-            wash: string;
-            lighter: string;
-            light: string;
-            base: string;
             dark: string;
-        };
-        lightBlue: {
-            wash: string;
-            lighter: string;
-            light: string;
             base: string;
-            dark: string;
-        };
-        blue: {
-            wash: string;
-            lighter: string;
             light: string;
-            base: string;
-            dark: string;
-        };
-        indigo: {
-            wash: string;
             lighter: string;
-            light: string;
-            base: string;
-            dark: string;
+            wash: string;
         };
         violet: {
-            wash: string;
+            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: {
@@ -206,18 +216,27 @@ export declare const theme: {
                     fontSize: ("md" | "lg")[];
                     px: number[];
                     py: number[];
-                    '.chakra-button__icon > svg': {
-                        width: string;
-                        height: string;
+                    '&: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: {
-                        width: ("1.25rem" | "1.5rem")[];
-                        height: ("1.25rem" | "1.5rem")[];
+                        fontSize: ("1.5rem" | "1.25rem")[];
                     };
                 };
                 wide: {
@@ -225,9 +244,12 @@ export declare const theme: {
                     px: number;
                     py: number;
                     width: string;
-                    '.chakra-button__icon > svg': {
-                        width: string;
-                        height: string;
+                    '&:has(> svg:only-child)': {
+                        px: number;
+                        py: number;
+                    };
+                    svg: {
+                        fontSize: string;
                     };
                 };
             } | undefined;
@@ -270,35 +292,76 @@ export declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
-        Link: {
+        Drawer: {
             baseStyle?: {
-                color: string;
-                fontWeight: string;
-                _hover: {
-                    textDecoration: string;
-                    cursor: string;
+                overlay: {
+                    bg: string;
+                    backgroundImage: 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?: {
-                sm: {
-                    fontSize: ("3xs" | "xs")[];
-                    lineHeight: string;
-                };
-                md: {
-                    fontSize: ("sm" | "2xs")[];
-                    lineHeight: string;
+                partial: {
+                    dialog: {
+                        maxW: number;
+                    };
                 };
-                lg: {
-                    fontSize: ("md" | "xs")[];
-                    lineHeight: string;
+                full: {
+                    dialog: {
+                        maxW: string;
+                        minH: string;
+                        borderRadius: number;
+                    };
                 };
             } | undefined;
-            variants?: {} | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                    keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+                }>;
+            } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | undefined;
-                variant?: undefined;
+                size?: "full" | "partial" | undefined;
+                variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
+            parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
         };
         Heading: {
             baseStyle?: {
@@ -346,6 +409,56 @@ export declare const theme: {
                 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: ("3xs" | "xs")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontSize: ("sm" | "2xs")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontSize: ("md" | "xs")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
         Text: {
             baseStyle?: {
                 fontWeight: string;
@@ -381,42 +494,9 @@ export declare const theme: {
                 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;
-        };
     };
     styles: import("@chakra-ui/theme-tools/dist/component").Styles;
     config: import("@chakra-ui/theme/dist/theme.types").ThemeConfig;
-    shadows: {
-        xs: string;
-        sm: string;
-        base: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        outline: string;
-        inner: string;
-        none: string;
-        "dark-lg": string;
-    };
     borders: {
         none: number;
         "1px": string;
@@ -447,21 +527,6 @@ export declare const theme: {
             "ultra-slow": 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;
-    };
     radii: {
         none: string;
         sm: string;

package/lib/theme/media/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ import { IconProps as ChakraIconProps, ThemingProps } from '@chakra-ui/react';
 import * as icons from '@phosphor-icons/react';
 declare const ICON_RED_LIST: readonly ["SSR", "Icon", "IconProps", "IconContext", "IconBase", "IconWeight"];
 declare const ICON_GREEN_LIST: readonly [];
-type IconKey = Exclude<keyof typeof icons, (typeof ICON_RED_LIST)[number]> | (typeof ICON_GREEN_LIST)[number];
+export type IconKey = Exclude<keyof typeof icons, (typeof ICON_RED_LIST)[number]> | (typeof ICON_GREEN_LIST)[number];
 type IconType = Record<IconKey, React.ElementType>;
 export declare const ICON_SET: IconType;
 export type IconProps = ChakraIconProps & ThemingProps<'Icon'> & {

package/lib/theme/overlay/Drawer/Drawer.config.d.ts

@@ -0,0 +1,72 @@
+declare const _default: {
+    baseStyle?: {
+        overlay: {
+            bg: string;
+            backgroundImage: 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")[];
+};
+export default _default;

package/lib/theme/overlay/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import { Drawer } from '@chakra-ui/react';
+export { DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, } from '@chakra-ui/react';
+export default Drawer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everlywell/ui-kit",
-  "version": "0.3.0-next",
+  "version": "0.3.1-next",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -8,12 +8,5 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
-  },
-  "peerDependencies": {
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "11.11.3",
-    "@emotion/styled": "11.11.0",
-    "@phosphor-icons/react": "2.0.15",
-    "framer-motion": "^10.16.4"
   }
 }