@nypl/design-system-react-components 2.2.0-react-chakra-rc → 3.0.0-react-chakra-rc

package/dist/src/theme/components/card.d.ts

@@ -1,4 +1,5 @@
-interface CardBaseStyleProps {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface CardBaseStyleProps extends StyleFunctionProps {
     hasImage: boolean;
     imageIsAtEnd: boolean;
     isAlignedRightActions: boolean;
@@ -7,13 +8,13 @@ interface CardBaseStyleProps {
     layout: string;
     mainActionLink: boolean;
 }
-interface CardImageBaseStyleProps {
+interface CardImageBaseStyleProps extends StyleFunctionProps {
     imageIsAtEnd: boolean;
     isCentered: boolean;
     size: keyof typeof imageSizes;
     layout: string;
 }
-interface CardActionsBaseStyleProps {
+interface CardActionsBaseStyleProps extends StyleFunctionProps {
     bottomBorder: boolean;
     isCentered: boolean;
     layout: string;
@@ -49,165 +50,55 @@ declare const imageSizes: {
     };
 };
 declare const _default: {
-    Card: {
-        parts: string[];
-        baseStyle: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
-            display: string;
-            flexFlow: {
-                base: string;
-                md: string;
-            };
-            maxWidth: string;
-            textAlign: string;
-            alignItems: string;
-            border: string;
-            borderColor: string;
-            _dark: {
-                borderColor: string;
-            };
-            actions: {
-                flexShrink: {
-                    base: string;
-                    md: string;
-                };
-                marginStart: {
-                    base: string;
-                    md: string;
-                };
-                marginTop: {
-                    base: string;
-                    md: string;
-                };
-                maxWidth: {
-                    base: string;
-                    md: string;
-                };
-                width: string;
-            };
-            body: {
-                display: {
-                    md: string;
-                };
-                flexBasis: {
-                    sm: string;
-                };
+    ReservoirCard: {
+        baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
+            base: {
+                display: string;
                 flexFlow: {
-                    md: string;
-                };
-                margin: any;
-                padding: any;
-                width: {
                     base: string;
                     md: string;
                 };
-            };
-            heading: {
-                marginBottom: string;
-                a: {
-                    textDecoration: string;
-                    base: {
-                        color: string;
-                        textDecoration: string;
-                        textDecorationStyle: string;
-                        textDecorationThickness: string;
-                        textUnderlineOffset: string;
-                        _dark: {
-                            color: string;
-                        };
-                        _hover: {
-                            color: string;
-                            textDecorationStyle: string;
-                            textDecorationThickness: string;
-                            _dark: {
-                                color: string;
-                            };
-                        };
-                    };
-                };
-            };
-        } | {
-            display: string;
-            flexFlow: string;
-            maxWidth?: undefined;
-            textAlign: string;
-            alignItems: string;
-            border: string;
-            borderColor: string;
-            _dark: {
+                maxWidth: string;
+                textAlign: string;
+                alignItems: string;
+                border: string;
                 borderColor: string;
-            };
-            actions: {
-                flexShrink: {
-                    base: string;
-                    md: string;
-                };
-                marginStart: {
-                    base: string;
-                    md: string;
-                };
-                marginTop: {
-                    base: string;
-                    md: string;
-                };
-                maxWidth: {
-                    base: string;
-                    md: string;
-                };
-                width: string;
-            };
-            body: {
-                display: {
-                    md: string;
-                };
-                flexBasis: {
-                    sm: string;
+                _dark: {
+                    borderColor: string;
+                };
+            } | {
+                display: string;
+                flexFlow: string;
+                maxWidth?: undefined;
+                textAlign: string;
+                alignItems: string;
+                border: string;
+                borderColor: string;
+                _dark: {
+                    borderColor: string;
                 };
+            } | {
+                display: string;
                 flexFlow: {
-                    md: string;
-                };
-                margin: any;
-                padding: any;
-                width: {
                     base: string;
                     md: string;
                 };
+                maxWidth: string;
+                textAlign: string;
+                alignItems: string;
+                border?: undefined;
+                borderColor?: undefined;
+                _dark?: undefined;
+            } | {
+                display: string;
+                flexFlow: string;
+                maxWidth?: undefined;
+                textAlign: string;
+                alignItems: string;
+                border?: undefined;
+                borderColor?: undefined;
+                _dark?: undefined;
             };
-            heading: {
-                marginBottom: string;
-                a: {
-                    textDecoration: string;
-                    base: {
-                        color: string;
-                        textDecoration: string;
-                        textDecorationStyle: string;
-                        textDecorationThickness: string;
-                        textUnderlineOffset: string;
-                        _dark: {
-                            color: string;
-                        };
-                        _hover: {
-                            color: string;
-                            textDecorationStyle: string;
-                            textDecorationThickness: string;
-                            _dark: {
-                                color: string;
-                            };
-                        };
-                    };
-                };
-            };
-        } | {
-            display: string;
-            flexFlow: {
-                base: string;
-                md: string;
-            };
-            maxWidth: string;
-            textAlign: string;
-            alignItems: string;
-            border?: undefined;
-            borderColor?: undefined;
-            _dark?: undefined;
             actions: {
                 flexShrink: {
                     base: string;
@@ -229,118 +120,63 @@ declare const _default: {
             };
             body: {
                 display: {
-                    md: string;
+                    md: "block";
                 };
                 flexBasis: {
                     sm: string;
                 };
                 flexFlow: {
-                    md: string;
+                    md: "row nowrap";
                 };
                 margin: any;
                 padding: any;
                 width: {
-                    base: string;
-                    md: string;
+                    base: "100%";
+                    md: "auto";
                 };
             };
             heading: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    base: {
+                    color: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    textUnderlineOffset: string;
+                    _dark: {
                         color: string;
-                        textDecoration: string;
-                        textDecorationStyle: string;
-                        textDecorationThickness: string;
-                        textUnderlineOffset: string;
-                        _dark: {
-                            color: string;
-                        };
-                        _hover: {
-                            color: string;
-                            textDecorationStyle: string;
-                            textDecorationThickness: string;
-                            _dark: {
-                                color: string;
-                            };
-                        };
                     };
-                };
-            };
-        } | {
-            display: string;
-            flexFlow: string;
-            maxWidth?: undefined;
-            textAlign: string;
-            alignItems: string;
-            border?: undefined;
-            borderColor?: undefined;
-            _dark?: undefined;
-            actions: {
-                flexShrink: {
-                    base: string;
-                    md: string;
-                };
-                marginStart: {
-                    base: string;
-                    md: string;
-                };
-                marginTop: {
-                    base: string;
-                    md: string;
-                };
-                maxWidth: {
-                    base: string;
-                    md: string;
-                };
-                width: string;
-            };
-            body: {
-                display: {
-                    md: string;
-                };
-                flexBasis: {
-                    sm: string;
-                };
-                flexFlow: {
-                    md: string;
-                };
-                margin: any;
-                padding: any;
-                width: {
-                    base: string;
-                    md: string;
-                };
-            };
-            heading: {
-                marginBottom: string;
-                a: {
-                    textDecoration: string;
-                    base: {
+                    _hover: {
                         color: string;
                         textDecoration: string;
                         textDecorationStyle: string;
                         textDecorationThickness: string;
-                        textUnderlineOffset: string;
                         _dark: {
                             color: string;
                         };
-                        _hover: {
-                            color: string;
-                            textDecorationStyle: string;
-                            textDecorationThickness: string;
-                            _dark: {
-                                color: string;
-                            };
-                        };
                     };
                 };
             };
         };
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("base" | "body" | "heading" | "action")[];
+            }>;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("base" | "body" | "heading" | "action")[];
+            }>;
+        };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
+        parts: ("base" | "body" | "heading" | "action")[];
     };
     CardActions: {
-        baseStyle: ({ bottomBorder, isCentered, layout, topBorder, }: CardActionsBaseStyleProps) => {
+        baseStyle?: ({ bottomBorder, isCentered, layout, topBorder, }: CardActionsBaseStyleProps) => {
             justifyContent: any;
             borderColor: string;
             _dark: {
@@ -405,17 +241,39 @@ declare const _default: {
                 marginBottom: string;
             };
         };
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
     };
     CardContent: {
-        baseStyle: {
+        baseStyle?: {
             marginBottom: string;
             _last: {
                 marginBottom: string;
             };
         };
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
     };
     CardImage: {
-        baseStyle: ({ imageIsAtEnd, isCentered, layout, size, }: CardImageBaseStyleProps) => {
+        baseStyle?: ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => {
             flex: {
                 md: string;
             };
@@ -468,6 +326,17 @@ declare const _default: {
             marginTop?: undefined;
             order?: undefined;
         };
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
     };
 };
 export default _default;

package/dist/src/theme/components/checkbox.d.ts

@@ -1,22 +1,19 @@
 declare const Checkbox: {
-    parts: string[];
-    baseStyle: {
-        _hover: {
-            span: {
-                _first: {
-                    borderColor: string;
-                };
-                _checked: {
-                    borderColor: string;
-                };
-                _disabled: {
-                    borderColor: string;
-                };
-                _invalid: {
-                    borderColor: string;
-                };
+    baseStyle?: {
+        helperErrorText: {
+            marginStart: string;
+            _disabled: {
+                color: string;
+                fontStyle: string;
             };
-            _dark: {
+        };
+        icon: {
+            animation: any;
+            width: string;
+            height: string;
+        };
+        base: {
+            _hover: {
                 span: {
                     _first: {
                         borderColor: string;
@@ -31,20 +28,31 @@ declare const Checkbox: {
                         borderColor: string;
                     };
                 };
+                _dark: {
+                    span: {
+                        _first: {
+                            borderColor: string;
+                        };
+                        _checked: {
+                            borderColor: string;
+                        };
+                        _disabled: {
+                            borderColor: string;
+                        };
+                        _invalid: {
+                            borderColor: string;
+                        };
+                    };
+                };
             };
         };
-        icon: {
-            transitionProperty: string;
-            transitionDuration: string;
-            width: string;
-            height: string;
-        };
         control: {
             border: string;
             borderRadius: string;
             borderColor: string;
             backgroundColor: string;
             color: string;
+            cursor: string;
             outline: string;
             transitionProperty: string;
             transitionDuration: string;
@@ -149,16 +157,11 @@ declare const Checkbox: {
                     color: string;
                 };
             };
-        };
-        helperErrorText: {
-            marginStart: string;
-            _disabled: {
-                color: string;
-                fontStyle: string;
-            };
+            cursor: string;
+            verticalAlign: string;
         };
     };
-    sizes: {
+    sizes?: {
         lg: {
             control: {
                 borderRadius: string;
@@ -170,9 +173,16 @@ declare const Checkbox: {
             };
         };
     };
-    defaultProps: {
-        size: string;
-        colorScheme: string;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "label" | "container" | "icon" | "helperErrorText" | "control")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: "lg";
+        variant?: string | number;
+        colorScheme?: string;
     };
+    parts: ("base" | "label" | "container" | "icon" | "helperErrorText" | "control")[];
 };
 export default Checkbox;

package/dist/src/theme/components/checkboxGroup.d.ts

@@ -1,14 +1,28 @@
 declare const CheckboxGroup: {
-    parts: string[];
-    baseStyle: ({ isFullWidth }: {
-        isFullWidth?: boolean;
-    }) => {
+    baseStyle?: ({ isFullWidth }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
         helperErrorText: {
             marginTop: string;
         };
         label: {
+            display: string;
             width: string;
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "helperErrorText"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "helperErrorText"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "helperErrorText"[];
 };
 export default CheckboxGroup;

package/dist/src/theme/components/datePicker.d.ts

@@ -1,10 +1,5 @@
-/**
- * Note: these styles are only used when the
- * DatePicker is in "date range" mode.
- */
 declare const DatePicker: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         subLabels: {
             label: {
                 fontSize: string;
@@ -13,5 +8,21 @@ declare const DatePicker: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "subLabels"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "subLabels"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "subLabels"[];
 };
 export default DatePicker;