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

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

@@ -1,6 +1,10 @@
 declare const CustomTabs: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
+        tabpanel: {};
+        root: {};
+        tabpanels: {
+            paddingTop: string;
+        };
         tablist: {
             borderColor: string;
         };
@@ -126,9 +130,6 @@ declare const CustomTabs: {
                 borderColor: string;
             };
         };
-        tabpanels: {
-            paddingTop: string;
-        };
         carouselParent: {
             position: {
                 base: string;
@@ -142,14 +143,10 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            paddingStart: {
-                base: string;
-                md: string;
-            };
+            paddingStart: string;
             paddingEnd: string;
             paddingTop: {
                 base: string;
-                md: string;
             };
             right: {
                 base: string;
@@ -157,16 +154,33 @@ declare const CustomTabs: {
             };
             top: {
                 base: string;
-                md: string;
             };
+            scrollbarWidth: string;
+            "::-webkit-scrollbar": {
+                display: string;
+            };
+            overflowY: string;
             overflowX: {
                 base: string;
                 md: string;
             };
         };
     };
-    defaultProps: {
-        colorScheme: string;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
     };
+    parts: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
 };
 export default CustomTabs;

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

@@ -1,13 +1,28 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface TagSetFilterProps extends StyleFunctionProps {
+    isDismissible: boolean;
+}
 declare const _default: {
     TagSet: {
-        baseStyle: () => {
+        baseStyle?: {
             display: string;
             flexWrap: string;
             gap: 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;
+        };
     };
     TagSetExplore: {
-        baseStyle: {
+        baseStyle?: {
             display: string;
             alignItems: string;
             justifyContent: string;
@@ -19,8 +34,8 @@ declare const _default: {
             cursor: string;
             fontSize: string;
             height: {
-                base: string;
-                md: string;
+                base: "32px";
+                md: "22px";
             };
             minHeight: string;
             maxWidth: string;
@@ -89,58 +104,68 @@ declare const _default: {
                 };
             };
         };
+        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;
+        };
     };
     TagSetFilter: {
-        parts: string[];
-        baseStyle: ({ isDismissible }: {
-            isDismissible: boolean;
-        }) => {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            bg: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
-            color: string;
-            cursor: string;
-            height: {
-                base: string;
-                md: string;
-            };
-            minHeight: string;
-            maxWidth: string;
-            py: string;
-            paddingLeft: string;
-            paddingRight: string | {
-                base: string;
-                md: string;
-            };
-            fontSize: string;
-            "> span": {
+        baseStyle?: ({ isDismissible }: TagSetFilterProps) => {
+            base: {
                 display: string;
-                overflow: string;
-                textOverflow: string;
-                whiteSpace: string;
-            };
-            _hover: {
-                bg: string;
-                borderColor: string;
-            };
-            _dark: {
+                alignItems: string;
+                justifyContent: string;
                 bg: string;
+                border: string;
                 borderColor: string;
+                borderRadius: string;
                 color: string;
+                cursor: string;
+                height: {
+                    base: "32px";
+                    md: "22px";
+                };
+                minHeight: string;
+                maxWidth: string;
+                py: string;
+                paddingLeft: string;
+                paddingRight: string | {
+                    base: "8px";
+                    md: "6px";
+                };
+                fontSize: string;
+                "> span": {
+                    display: string;
+                    overflow: string;
+                    textOverflow: string;
+                    whiteSpace: string;
+                };
                 _hover: {
                     bg: string;
                     borderColor: string;
                 };
+                _dark: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    _hover: {
+                        bg: string;
+                        borderColor: string;
+                    };
+                };
             };
             clearAll: {
                 color: string;
                 height: {
-                    base: string;
-                    md: string;
+                    base: "32px";
+                    md: "22px";
                 };
                 fontSize: string;
                 minHeight: string;
@@ -149,6 +174,22 @@ declare const _default: {
                 };
             };
         };
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("base" | "clearAll")[];
+            }>;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("base" | "clearAll")[];
+            }>;
+        };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
+        parts: ("base" | "clearAll")[];
     };
 };
 export default _default;

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

@@ -1,9 +1,6 @@
-/**
- * Grid layout based on https://www.joshwcomeau.com/css/full-bleed/
- */
 declare const _default: {
     Template: {
-        baseStyle: {
+        baseStyle?: {
             boxSizing: string;
             color: string;
             display: string;
@@ -13,17 +10,35 @@ declare const _default: {
                 color: string;
             };
         };
-        sizes: {};
-        defaultProps: {};
+        sizes?: {};
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        defaultProps?: {
+            size?: never;
+            variant?: string | number;
+            colorScheme?: string;
+        };
     };
     TemplateBreakout: {
-        baseStyle: {
+        baseStyle?: {
             width: string;
             gridColumn: 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;
+        };
     };
     TemplateContent: {
-        baseStyle: {
+        baseStyle?: {
             gridColumn: string;
             display: string;
             gridTemplateColumns: string;
@@ -31,40 +46,62 @@ declare const _default: {
             paddingX: string;
             gap: string;
         };
-        variants: {
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
             left: {
                 gridTemplateColumns: {
-                    md: string;
+                    md: "255px 1fr";
                 };
             };
             right: {
                 gridTemplateColumns: {
-                    md: string;
+                    md: "1fr 255px";
                 };
             };
         };
+        defaultProps?: {
+            size?: string | number;
+            variant?: "left" | "right";
+            colorScheme?: string;
+        };
     };
     TemplateContentTopBottom: {
-        baseStyle: {
+        baseStyle?: {
             gridColumn: {
-                base: string;
-                md: string;
+                base: "1";
+                md: "1 / span 2";
             };
             height: 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;
+        };
     };
     TemplateContentPrimary: {
-        baseStyle: {
+        baseStyle?: {
             gridColumn: {
-                base: string;
-                md: string;
+                base: "1";
+                md: "1 / span 2";
             };
         };
-        variants: {
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
             left: {
                 gridColumn: {
-                    base: string;
-                    md: string;
+                    base: "1";
+                    md: "2";
                 };
                 marginEnd: {
                     md: number;
@@ -75,24 +112,38 @@ declare const _default: {
             };
             right: {
                 gridColumn: {
-                    base: string;
-                    md: string;
+                    base: "1";
+                    md: "1";
                 };
             };
         };
+        defaultProps?: {
+            size?: string | number;
+            variant?: "left" | "right";
+            colorScheme?: string;
+        };
     };
     TemplateContentSidebar: {
-        variants: {
+        baseStyle?: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        };
+        variants?: {
             left: {
                 gridColumn: string;
             };
             right: {
                 gridColumn: {
-                    base: string;
-                    md: string;
+                    base: "1";
+                    md: "2";
                 };
             };
         };
+        defaultProps?: {
+            size?: string | number;
+            variant?: "left" | "right";
+            colorScheme?: string;
+        };
     };
 };
 export default _default;

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

@@ -1,20 +1,24 @@
-interface TextBaseStyle {
-    isBold: boolean;
-    isItalic: boolean;
-    isCapitalized: boolean;
-    isUppercase: boolean;
-    isLowercase: boolean;
-    noSpace: boolean;
-    variant: string;
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface TextBaseStyle extends Partial<StyleFunctionProps> {
+    isBold?: boolean;
+    isItalic?: boolean;
+    isCapitalized?: boolean;
+    isUppercase?: boolean;
+    isLowercase?: boolean;
+    noSpace?: boolean;
+    variant?: string;
 }
 declare const Text: {
-    baseStyle: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
+    baseStyle?: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
         fontStyle: string;
         fontWeight: string;
         textTransform: string;
         marginBottom: string;
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
         default: {};
         body1: {};
         body2: {
@@ -37,12 +41,18 @@ declare const Text: {
             textTransform: string;
         };
         subtitle1: {
-            fontSize: string;
+            fontSize: {
+                base: "mobile.subtitle.subtitle1";
+                md: "desktop.subtitle.subtitle1";
+            };
             fontWeight: string;
             lineHeight: number;
         };
         subtitle2: {
-            fontSize: string;
+            fontSize: {
+                base: "mobile.subtitle.subtitle2";
+                md: "desktop.subtitle.subtitle2";
+            };
             fontWeight: string;
             lineHeight: number;
         };
@@ -55,5 +65,10 @@ declare const Text: {
             fontWeight: string;
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "caption" | "default" | "tag" | "mini" | "body1" | "body2" | "overline1" | "overline2" | "subtitle1" | "subtitle2";
+        colorScheme?: string;
+    };
 };
 export default Text;

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

@@ -1,9 +1,41 @@
 declare const TextInput: {
-    parts: string[];
-    baseStyle: ({ showLabel }: {
-        showLabel: any;
-    }) => {
+    baseStyle?: ({ showLabel }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
         position: string;
+        clearButton: {
+            borderRadius: string;
+            minHeight: {
+                base: "42px";
+                md: "auto";
+            };
+            height: string;
+            position: string;
+            top: string;
+            px: string;
+            right: string;
+            span: {
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+            zIndex: string;
+            _dark: {
+                svg: {
+                    fill: string;
+                };
+            };
+        };
         input: {
             bgColor: string;
             border: string;
@@ -298,43 +330,13 @@ declare const TextInput: {
                 };
             };
         };
-        clearButton: {
-            borderRadius: string;
-            minHeight: {
-                base: string;
-                md: string;
-            };
-            height: string;
-            position: string;
-            top: string;
-            px: string;
-            right: string;
-            span: {
-                clip: string;
-                height: {
-                    base: string;
-                    md: string;
-                };
-                overflow: string;
-                position: {
-                    base: string;
-                    md: string;
-                };
-                width: {
-                    base: string;
-                    md: string;
-                };
-                wordWrap: string;
-            };
-            zIndex: string;
-            _dark: {
-                svg: {
-                    fill: string;
-                };
-            };
-        };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("input" | "textarea" | "clearButton")[];
+        }>;
+    };
+    variants?: {
         searchBar: {
             flex: string;
             input: {
@@ -346,15 +348,21 @@ declare const TextInput: {
             input: {
                 borderRadius: string;
                 borderTopLeftRadius: {
-                    base: string;
-                    md: string;
+                    base: "sm";
+                    md: "none";
                 };
                 borderTopRightRadius: {
-                    base: string;
-                    md: string;
+                    base: "sm";
+                    md: "none";
                 };
             };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "searchBar" | "searchBarSelect";
+        colorScheme?: string;
+    };
+    parts: ("input" | "textarea" | "clearButton")[];
 };
 export default TextInput;

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

@@ -1,12 +1,15 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
 import { ToggleSizes } from "../../components/Toggle/Toggle";
-interface ToggleBaseStyle {
+interface ToggleBaseStyle extends StyleFunctionProps {
     isDisabled: boolean;
     size: ToggleSizes;
 }
+interface SwitchStyleProps extends StyleFunctionProps {
+    size: string;
+}
 declare const _default: {
     Toggle: {
-        parts: string[];
-        baseStyle: ({ isDisabled, size }: ToggleBaseStyle) => {
+        baseStyle?: ({ isDisabled, size }: ToggleBaseStyle) => {
             label: {
                 alignItems: string;
                 display: string;
@@ -17,14 +20,25 @@ declare const _default: {
                 fontStyle: string;
             };
         };
-        defaultProps: {
-            size: string;
+        sizes?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("label" | "helperErrorText")[];
+            }>;
+        };
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("label" | "helperErrorText")[];
+            }>;
         };
+        defaultProps?: {
+            size?: string | number;
+            variant?: string | number;
+            colorScheme?: string;
+        };
+        parts: ("label" | "helperErrorText")[];
     };
     Switch: {
-        baseStyle: ({ size }: {
-            size: string;
-        }) => {
+        baseStyle?: ({ size }: SwitchStyleProps) => {
             alignItems: string;
             track: {
                 backgroundColor: string;
@@ -109,7 +123,7 @@ declare const _default: {
                 };
             };
         };
-        sizes: {
+        sizes?: {
             sm: {
                 container: {
                     [x: string]: string;
@@ -121,9 +135,17 @@ declare const _default: {
                 };
             };
         };
-        defaultProps: {
-            colorScheme: string;
+        variants?: {
+            [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                keys: ("label" | "track" | "container" | "thumb")[];
+            }>;
+        };
+        defaultProps?: {
+            size?: "sm" | "lg";
+            variant?: string | number;
+            colorScheme?: string;
         };
+        parts: ("label" | "track" | "container" | "thumb")[];
     };
 };
 export default _default;