@nypl/design-system-react-components 0.25.0 → 0.25.4

package/dist/theme/components/notification.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    Notification: {
+        parts: string[];
+        baseStyle: ({ centered, noMargin, notificationType }: {
+            centered: any;
+            noMargin: any;
+            notificationType: any;
+        }) => {
+            bg: string;
+            display: string;
+            fontSize: string;
+            padding: string;
+            position: string;
+            textAlign: string;
+            borderRadius: string;
+            margin: string;
+            container: {
+                margin: string;
+                width: string;
+                maxWidth: string;
+            };
+            dismissibleButton: {
+                border: string;
+                alignItems: string;
+                bgColor: string;
+                color: string;
+                display: string;
+                height: string;
+                width: string;
+                minWidth: string;
+                position: string;
+                right: string;
+                top: string;
+                _hover: {
+                    bg: string;
+                };
+            };
+            icon: {
+                flexShrink: string;
+                marginRight: string;
+            };
+        };
+    };
+    NotificationContent: {
+        parts: string[];
+        baseStyle: ({ alignText, notificationType }: {
+            alignText: any;
+            notificationType: any;
+        }) => {
+            display: string;
+            justifyContent: string;
+            content: {
+                width: string;
+                paddingLeft: string;
+                color: string;
+            };
+        };
+    };
+    NotificationHeading: {
+        parts: string[];
+        baseStyle: ({ centered, notificationType }: {
+            centered: any;
+            notificationType: any;
+        }) => {
+            display: string;
+            marginBottom: string;
+            justifyContent: string;
+            heading: {
+                marginBottom: string;
+                color: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/components/pagination.d.ts

@@ -0,0 +1,19 @@
+declare const Pagination: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        alignItems: string;
+        display: string;
+        width: string;
+        link: {
+            lineHeight: string;
+            textDecoration: string;
+        };
+        li: {
+            _first: {
+                marginTop: string;
+            };
+        };
+    };
+};
+export default Pagination;

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

@@ -0,0 +1,50 @@
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: {
+        darkMode: any;
+        size: any;
+    }) => {
+        color: string;
+        circular: {
+            svg: {
+                height: string;
+                width: string;
+                display: string;
+                circle: {
+                    _first: {
+                        stroke: string;
+                    };
+                    _last: {
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        circularContainer: {
+            alignItems: string;
+            display: string;
+            flexDirection: string;
+            width: string;
+        };
+        linear: {
+            "> div": {
+                bg: string;
+            };
+            flex: number;
+            bg: string;
+            height: {
+                base: string;
+                md: string;
+            };
+        };
+        linearContainer: {
+            display: string;
+            alignItems: string;
+        };
+        linearPercentage: {
+            padding: string;
+            flex: number;
+        };
+    };
+};
+export default ProgressIndicator;

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

@@ -1,4 +1,5 @@
 declare const Radio: {
+    parts: string[];
     baseStyle: {
         control: {
             verticalAlign: string;
@@ -36,8 +37,8 @@ declare const Radio: {
                 _before: {
                     content: string;
                     display: string;
-                    w: number;
-                    h: number;
+                    w: string;
+                    h: string;
                     borderRadius: string;
                     bg: string;
                 };
@@ -56,10 +57,10 @@ declare const Radio: {
         };
         label: {
             userSelect: string;
-            fontSize: number;
+            fontSize: string;
             fontWeight: string;
-            marginBottom: number;
-            marginLeft: number;
+            marginBottom: string;
+            marginLeft: string;
             verticalAlign: string;
             _disabled: {
                 color: string;
@@ -71,12 +72,12 @@ declare const Radio: {
             };
         };
         helper: {
-            marginTop: number;
-            marginBottom: number;
             marginLeft: string;
             _disabled: {
                 fontStyle: string;
             };
+            marginTop: string;
+            marginBottom: string;
         };
     };
     sizes: {

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

@@ -0,0 +1,12 @@
+declare const RadioGroup: {
+    parts: string[];
+    baseStyle: {
+        helper: {
+            marginTop: string;
+        };
+        stack: {
+            width: string;
+        };
+    };
+};
+export default RadioGroup;

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

@@ -0,0 +1,20 @@
+declare const SearchBar: {
+    parts: string[];
+    baseStyle: {
+        topRow: {
+            display: string;
+            marginBottom: {
+                base: string;
+                md: string;
+            };
+            flexFlow: {
+                base: string;
+                md: string;
+            };
+        };
+        button: {
+            marginBottom: string;
+        };
+    };
+};
+export default SearchBar;

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

@@ -0,0 +1,67 @@
+declare const Select: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        select: {
+            borderRadius: string;
+            borderColor: string;
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            _hover: {
+                borderColor: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _disabled: {
+                color: string;
+                bg: string;
+                opacity: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchbar: {
+            select: {
+                flex: string;
+                borderRightColor: {
+                    md: string;
+                };
+                borderRightRadius: {
+                    md: string;
+                };
+                _hover: {
+                    borderRightColor: {
+                        md: string;
+                    };
+                };
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Select;

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

@@ -0,0 +1,98 @@
+declare const SkeletonLoader: {
+    parts: string[];
+    baseStyle: ({ border, imageAspectRatio }: {
+        border: any;
+        imageAspectRatio: any;
+    }) => {
+        section: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+        image: {
+            boxSizing: string;
+            flexShrink: string;
+            height: string;
+            overflow: string;
+            paddingBottom: any;
+            position: string;
+            width: string;
+            borderRadius: string;
+            marginBottom: string;
+        };
+        container: {
+            marginTop: string;
+            width: string;
+        };
+        heading: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        content: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        button: {
+            height: string;
+            margin: string;
+            maxWidth: string;
+            width: string;
+        };
+        margin: string;
+        width: string;
+    };
+    variants: {
+        row: ({ imageAspectRatio, showImage }: {
+            imageAspectRatio: any;
+            showImage: any;
+        }) => {
+            alignItems: string;
+            display: {
+                md: string;
+            };
+            image: {
+                overflow: {
+                    md: string;
+                };
+                paddingBottom: {
+                    md: string;
+                };
+                position: {
+                    md: string;
+                };
+                width: {
+                    md: string;
+                };
+                height: {
+                    md: any;
+                };
+            };
+            container: {
+                marginLeft: {
+                    md: string;
+                };
+                marginTop: {
+                    md: string;
+                };
+            };
+            button: {
+                margin: {
+                    md: string;
+                };
+            };
+        };
+    };
+};
+declare const Skeleton: {
+    baseStyle: {
+        borderRadius: string;
+        background: string;
+        animation: string;
+    };
+};
+export { Skeleton, SkeletonLoader };

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

@@ -0,0 +1,51 @@
+declare const CustomSlider: {
+    parts: string[];
+    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+        isDisabled: any;
+        isInvalid: any;
+        isRangeSlider: any;
+        showBoxes: any;
+    }) => {
+        container: {
+            display: string;
+            alignItems: string;
+        };
+        helper: {
+            marginTop: string;
+        };
+        leftValue: {
+            marginLeft: string;
+            marginTop: string;
+            marginBottom: string;
+            marginRight: string;
+        };
+        rightValue: {
+            marginRight: string;
+            marginTop: string;
+            marginBottom: string;
+            marginLeft: string;
+        };
+        textInput: {
+            minWidth: string;
+            color: string;
+        };
+        filledTrack: {
+            bgColor: string;
+        };
+        track: {
+            bgColor: string;
+            _disabled: {
+                bgColor: string;
+            };
+        };
+        thumb: {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            _active: {
+                transform: string;
+            };
+        };
+    };
+};
+export default CustomSlider;

package/dist/theme/components/statusBadge.d.ts

@@ -0,0 +1,25 @@
+declare const StatusBadge: {
+    baseStyle: {
+        borderRadius: string;
+        color: string;
+        display: string;
+        fontSize: string;
+        fontStyle: string;
+        py: string;
+        px: string;
+        textAlign: string;
+        width: string;
+    };
+    variants: {
+        low: {
+            bg: string;
+        };
+        medium: {
+            bg: string;
+        };
+        high: {
+            bg: string;
+        };
+    };
+};
+export default StatusBadge;

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

@@ -1,27 +1,33 @@
 declare const CustomTabs: {
+    parts: string[];
     baseStyle: {
-        tablist: {};
+        tablist: {
+            borderColor: string;
+        };
         tab: {
             color: string;
-            paddingInlineStart: number;
-            paddingLeft: number;
+            paddingInlineStart: string;
+            paddingLeft: string;
             background: string;
             border: string;
             borderBottom: string;
             borderColor: string;
+            height: {
+                base: string;
+            };
             marginRight: {
                 base: string;
                 md: string;
             };
             paddingRight: {
-                base: number;
-                md: number;
-                lg: number;
+                base: string;
+                md: string;
+                lg: string;
             };
             whiteSpace: string;
             _hover: {
                 bg: string;
-                borderTopRadius: number;
+                borderTopRadius: string;
                 borderBottom: string;
                 borderBottomColor: string;
             };
@@ -29,23 +35,29 @@ declare const CustomTabs: {
                 fontWeight: string;
                 bg: string;
                 border: string;
-                borderTopRadius: number;
+                borderTopRadius: string;
                 borderBottom: string;
                 borderBottomColor: string;
                 paddingBottom: string;
             };
             _focus: {
-                boxShadow: number;
+                boxShadow: string;
             };
         };
         buttonArrows: {
             border: string;
+            borderRadius: string;
             display: {
-                base: string;
                 md: string;
             };
             height: string;
             width: string;
+            top: string;
+            marginLeft: string;
+            marginRight: string;
+            pos: string;
+            transition: string;
+            zIndex: string;
         };
         tablistWrapper: {
             display: string;
@@ -54,10 +66,11 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            margin: {
+            height: {
                 base: string;
                 md: string;
             };
+            margin: string;
             overflowX: {
                 base: string;
                 md: string;
@@ -78,8 +91,46 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
+            position: string;
+        };
+        tabpanels: {
+            paddingTop: string;
+        };
+        carouselParent: {
+            position: {
+                base: string;
+                md: string;
+            };
+            left: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+            paddingRight: string;
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            right: {
+                base: string;
+                md: string;
+            };
+            top: {
+                base: string;
+                md: string;
+            };
+            overflowX: {
+                base: string;
+                md: string;
+            };
         };
     };
-    defaultProps: {};
 };
 export default CustomTabs;

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

@@ -0,0 +1,105 @@
+declare const _default: {
+    Template: {
+        baseStyle: {
+            boxSizing: string;
+            color: string;
+            overflowX: string;
+            "*": {
+                boxSizing: string;
+            };
+            "*::after": {
+                boxSizing: string;
+            };
+            "*::before": {
+                boxSizing: string;
+            };
+        };
+        sizes: {};
+        defaultProps: {};
+    };
+    TemplateHeader: {
+        baseStyle: {
+            marginBottom: number;
+        };
+    };
+    TemplateBreakout: {
+        baseStyle: {
+            width: string;
+            marginBottom: number;
+            marginLeft: string;
+            marginRight: string;
+        };
+    };
+    TemplateContent: {
+        baseStyle: {
+            display: string;
+            marginBottom: number;
+            marginY: number;
+            marginX: string;
+            maxWidth: string;
+            paddingTop: number;
+            paddingBottom: number;
+            paddingRight: number;
+            paddingLeft: number;
+            width: string;
+        };
+        variants: {
+            sidebar: {
+                display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentTop: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+    };
+    TemplateContentPrimary: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                display: string;
+                flexFlow: string;
+                order: string;
+                marginRight: {
+                    md: number;
+                };
+                minWidth: {
+                    md: number;
+                };
+            };
+        };
+    };
+    TemplateContentSidebar: {
+        baseStyle: {
+            flex: string;
+            order: {
+                md: string;
+            };
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                marginRight: {
+                    base: number;
+                    md: number;
+                };
+            };
+            right: {
+                marginLeft: {
+                    base: number;
+                    md: number;
+                };
+            };
+        };
+    };
+};
+export default _default;