@everlywell/ui-kit 0.0.2 → 0.1.0

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;

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

@@ -0,0 +1,2 @@
+export { default as Grid, type GridProps } from './Grid';
+export { default as GridItem, type GridItemProps } from './GridItem';

package/lib/theme/layout/Show-Hide/Show-Hide.d.ts

@@ -0,0 +1,5 @@
+import { Show as ChakraShow, ShowProps as ChakraShowProps, Hide as ChakraHide, HideProps as ChakraHideProps } from '@chakra-ui/react';
+export type ShowProps = ChakraShowProps;
+export type HideProps = ChakraHideProps;
+export declare const Show: typeof ChakraShow;
+export declare const Hide: typeof ChakraHide;

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

@@ -0,0 +1,21 @@
+declare const _default: {
+    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;
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+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 [];
+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'> & {
+    icon: IconKey;
+    isFilled?: boolean;
+};
+declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default Icon;

package/lib/theme/navigation/Link/Link.config.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    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;
+};
+export default _default;

package/lib/theme/navigation/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+export type LinkProps = ChakraLinkProps;
+export default ChakraLink;

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

@@ -0,0 +1,72 @@
+declare const _default: {
+    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")[];
+};
+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/lib/theme/typography/Heading/Heading.config.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+    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;
+};
+export default _default;

package/lib/theme/typography/Heading/Heading.d.ts

@@ -0,0 +1,3 @@
+import { Heading, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
+export type HeadingProps = ChakraHeadingProps;
+export default Heading;

package/lib/theme/typography/Text/Text.config.d.ts

@@ -0,0 +1,37 @@
+declare const _default: {
+    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;
+};
+export default _default;

package/lib/theme/typography/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
+export type TextProps = ChakraTextProps;
+export default ChakraText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everlywell/ui-kit",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -8,5 +8,16 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "dependencies": {
+    "@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"
   }
 }