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

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

@@ -1,11 +1,11 @@
 import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
-interface ProgressIndicatorBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface ProgressIndicatorBaseStyle extends StyleFunctionProps {
     darkMode: boolean;
     size: ProgressIndicatorSizes;
 }
 declare const ProgressIndicator: {
-    parts: string[];
-    baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
+    baseStyle?: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
         color: string;
         fontSize: string;
         _dark: {
@@ -48,8 +48,8 @@ declare const ProgressIndicator: {
             flex: number;
             bg: string;
             height: {
-                base: string;
-                md: string;
+                base: "4px";
+                md: "4px" | "8px";
             };
             _dark: {
                 bg: string;
@@ -65,5 +65,21 @@ declare const ProgressIndicator: {
             flex: number;
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("linear" | "circular" | "circularLabel" | "linearContainer" | "linearPercentage")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("linear" | "circular" | "circularLabel" | "linearContainer" | "linearPercentage")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("linear" | "circular" | "circularLabel" | "linearContainer" | "linearPercentage")[];
 };
 export default ProgressIndicator;

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

@@ -1,6 +1,5 @@
 declare const Radio: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         control: {
             verticalAlign: string;
             transitionProperty: string;
@@ -121,6 +120,7 @@ declare const Radio: {
                 };
             };
         };
+        container: {};
         helperErrorText: {
             marginStart: string;
             _disabled: {
@@ -146,7 +146,7 @@ declare const Radio: {
             wordWrap: string;
         };
     };
-    sizes: {
+    sizes?: {
         md: {
             control: {
                 h: string;
@@ -157,12 +157,20 @@ declare const Radio: {
             };
         };
     };
-    defaultProps: {
-        size: string;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("label" | "container" | "helperErrorText" | "control" | "hiddenLabel")[];
+        }>;
     };
+    defaultProps?: {
+        size?: "md";
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("label" | "container" | "helperErrorText" | "control" | "hiddenLabel")[];
 };
 export declare const RadioWrapper: {
-    baseStyle: {
+    baseStyle?: {
         label: {
             _hover: {
                 span: {
@@ -198,5 +206,16 @@ export declare const RadioWrapper: {
             };
         };
     };
+    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 Radio;

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

@@ -1,14 +1,28 @@
 declare const RadioGroup: {
-    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" | "stack")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("helperErrorText" | "stack")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("helperErrorText" | "stack")[];
 };
 export default RadioGroup;

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

@@ -1,6 +1,5 @@
 declare const SearchBar: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         display: string;
         marginBottom: {
             base: string;
@@ -10,20 +9,23 @@ declare const SearchBar: {
             base: string;
             md: string;
         };
+        ".textInput": {
+            flexGrow: string;
+        };
         select: {
             flexShrink: string;
             marginBottom: {
-                base: string;
-                md: string;
+                base: "-1px";
+                md: "0";
             };
             maxWidth: {
                 base: any;
-                md: string;
+                md: "255px";
             };
             textOverflow: string;
             marginRight: {
                 base: any;
-                md: string;
+                md: "-1px";
             };
             _hover: {
                 zIndex: string;
@@ -33,5 +35,21 @@ declare const SearchBar: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "select"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "select"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "select"[];
 };
 export default SearchBar;

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

@@ -1,24 +1,21 @@
-interface SelectBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface SelectBaseStyle extends StyleFunctionProps {
     labelPosition: string;
 }
 declare const Select: {
-    parts: string[];
-    baseStyle: ({ labelPosition }: SelectBaseStyle) => {
+    baseStyle?: ({ labelPosition }: SelectBaseStyle) => {
         inline: {
             display: {
-                md: string;
+                md: "flex";
             };
             gap: {
                 md: string;
             };
             alignItems: {
-                md: string;
+                md: "flex-end";
             };
         };
         select: {
-            flex: {
-                md: string;
-            };
             backgroundColor: string;
             borderRadius: string;
             borderColor: string;
@@ -31,6 +28,9 @@ declare const Select: {
             paddingEnd: string;
             paddingBottom: string;
             paddingStart: string;
+            flex: {
+                md: string;
+            };
             _hover: {
                 borderColor: string;
             };
@@ -106,21 +106,29 @@ declare const Select: {
             };
         };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("select" | "inline" | "helperText")[];
+        }>;
+    };
+    variants?: {
         searchbar: {
             select: {
                 flex: string;
                 borderRightColor: {
-                    md: string;
+                    md: "transparent";
                 };
                 borderRightRadius: {
-                    md: string;
+                    md: "none";
                 };
             };
         };
     };
-    defaultProps: {
-        size: string;
+    defaultProps?: {
+        size?: string | number;
+        variant?: "searchbar";
+        colorScheme?: string;
     };
+    parts: ("select" | "inline" | "helperText")[];
 };
 export default Select;

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

@@ -1,4 +1,5 @@
-interface SkeletonLoaderBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface SkeletonLoaderBaseStyle extends StyleFunctionProps {
     imageAspectRatio: keyof typeof imagePaddingBottomStyles;
     isBordered: boolean;
     showImage?: boolean;
@@ -9,8 +10,7 @@ declare const imagePaddingBottomStyles: {
     square: string;
 };
 declare const SkeletonLoader: {
-    parts: string[];
-    baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
+    baseStyle?: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
         section: {
             marginBottom: string;
             _last: {
@@ -53,7 +53,12 @@ declare const SkeletonLoader: {
         margin: string;
         width: string;
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("button" | "section" | "content" | "container" | "image" | "heading")[];
+        }>;
+    };
+    variants?: {
         row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => {
             alignItems: string;
             display: {
@@ -61,16 +66,16 @@ declare const SkeletonLoader: {
             };
             image: {
                 overflow: {
-                    md: string;
+                    md: "visible";
                 };
                 paddingBottom: {
-                    md: string;
+                    md: "0";
                 };
                 position: {
-                    md: string;
+                    md: "relative";
                 };
                 width: {
-                    md: string;
+                    md: "220px";
                 };
                 height: {
                     md: string;
@@ -78,22 +83,28 @@ declare const SkeletonLoader: {
             };
             container: {
                 marginStart: {
-                    md: string;
+                    md: "m";
                 };
                 marginTop: {
-                    md: string;
+                    md: "0";
                 };
             };
             button: {
                 margin: {
-                    md: string;
+                    md: "0";
                 };
             };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "row";
+        colorScheme?: string;
+    };
+    parts: ("button" | "section" | "content" | "container" | "image" | "heading")[];
 };
 declare const Skeleton: {
-    baseStyle: {
+    baseStyle?: {
         borderRadius: string;
         bg: string;
         animation: string;
@@ -101,5 +112,16 @@ declare const Skeleton: {
             bg: 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;
+    };
 };
 export { Skeleton, SkeletonLoader };

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

@@ -1,5 +1,5 @@
 declare const SkipNavigation: {
-    baseStyle: {
+    baseStyle?: {
         ul: {
             margin: string;
         };
@@ -24,5 +24,16 @@ declare const SkipNavigation: {
             };
         };
     };
+    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 SkipNavigation;

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

@@ -1,4 +1,5 @@
-interface CustomSliderBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface CustomSliderBaseStyle extends StyleFunctionProps {
     isDarkMode: boolean;
     isDisabled: boolean;
     isInvalid: boolean;
@@ -6,42 +7,11 @@ interface CustomSliderBaseStyle {
     showValues: boolean;
 }
 declare const CustomSlider: {
-    parts: string[];
-    baseStyle: ({ isDarkMode, isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
+    baseStyle?: ({ isDarkMode, isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
         container: {
             display: string;
             alignItems: string;
         };
-        leftValue: {
-            color: string;
-            _dark: {
-                color: string;
-            };
-            marginTop: string;
-            marginBottom: string;
-            marginEnd: string;
-            marginStart: string;
-        };
-        rightValue: {
-            marginStart: string;
-            marginEnd: string;
-            color: string;
-            _dark: {
-                color: string;
-            };
-            marginTop: string;
-            marginBottom: string;
-        };
-        textInput: {
-            minWidth: string;
-        };
-        sliderContainer: {
-            marginStart: string;
-            marginEnd: string;
-        };
-        filledTrack: {
-            bgColor: string;
-        };
         track: {
             bgColor: string;
             _disabled: {
@@ -73,6 +43,52 @@ declare const CustomSlider: {
                 };
             };
         };
+        filledTrack: {
+            bgColor: string;
+        };
+        leftValue: {
+            color: string;
+            _dark: {
+                color: string;
+            };
+            marginTop: string;
+            marginBottom: string;
+            marginEnd: string;
+            marginStart: string;
+        };
+        rightValue: {
+            marginStart: string;
+            marginEnd: string;
+            color: string;
+            _dark: {
+                color: string;
+            };
+            marginTop: string;
+            marginBottom: string;
+        };
+        textInput: {
+            minWidth: string;
+        };
+        sliderContainer: {
+            marginStart: string;
+            marginEnd: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
     };
+    parts: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
 };
 export default CustomSlider;

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

@@ -1,20 +1,20 @@
-import { StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { StyleFunctionProps } from "@chakra-ui/react";
 declare const SocialMediaLinks: {
-    baseStyle: {
+    baseStyle?: {
         display: string;
         alignItems: string;
         gap: string;
         width: {
-            base: string;
-            md: string;
+            base: "100%";
+            md: "unset";
         };
         marginBottom: string;
         li: {
             marginInlineEnd: string;
             marginTop: string;
             width: {
-                base: string;
-                md: string;
+                base: "100%";
+                md: "unset";
             };
             _notFirst: {
                 marginTop: string;
@@ -26,12 +26,12 @@ declare const SocialMediaLinks: {
             alignContent: string;
             flexWrap: string;
             minWidth: {
-                base: string;
-                md: string;
+                base: "44px";
+                md: "unset";
             };
             minHeight: {
-                base: string;
-                md: string;
+                base: "44px";
+                md: "unset";
             };
             fontStyle: string;
             fontSize: string;
@@ -39,6 +39,7 @@ declare const SocialMediaLinks: {
             color: string;
             _hover: {
                 color: string;
+                textDecoration: string;
             };
             _visited: {
                 color: string;
@@ -69,10 +70,13 @@ declare const SocialMediaLinks: {
             };
         };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
         straight(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             gap: string;
@@ -115,7 +119,7 @@ declare const SocialMediaLinks: {
         };
         circular(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             gap: string;
@@ -156,7 +160,7 @@ declare const SocialMediaLinks: {
         };
         none(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             a: {
@@ -185,8 +189,10 @@ declare const SocialMediaLinks: {
             };
         };
     };
-    defaultProps: {
-        variant: string;
+    defaultProps?: {
+        size?: string | number;
+        variant?: "none" | "circular" | "straight";
+        colorScheme?: string;
     };
 };
 export default SocialMediaLinks;