@nypl/design-system-react-components 1.0.1 → 1.0.3

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

@@ -0,0 +1,95 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+interface NotificationBaseStyle {
+    dismissible: boolean;
+    isCentered: boolean;
+    noMargin: boolean;
+    notificationType: NotificationTypes;
+}
+interface NotificationContentBaseStyle {
+    alignText: boolean;
+    icon: boolean;
+    notificationType: NotificationTypes;
+}
+interface NotificationHeadingBaseStyle {
+    icon: boolean;
+    isCentered: boolean;
+    notificationType: NotificationTypes;
+}
+declare const _default: {
+    Notification: {
+        parts: string[];
+        baseStyle: ({ dismissible, isCentered, noMargin, notificationType, }: NotificationBaseStyle) => {
+            bg: string;
+            display: string;
+            fontSize: string;
+            position: string;
+            textAlign: string;
+            borderRadius: string;
+            margin: string;
+            container: {
+                margin: string;
+                maxWidth: string;
+                padding: string;
+                paddingRight: string;
+                paddingLeft: string;
+                width: string;
+            };
+            dismissibleButton: {
+                border: string;
+                bgColor: string;
+                alignItems: string;
+                color: string;
+                display: string;
+                height: string;
+                width: string;
+                minWidth: string;
+                position: string;
+                right: string;
+                top: string;
+                svg: {
+                    marginTop: string;
+                };
+                _hover: {
+                    bg: string;
+                };
+            };
+            icon: {
+                flexShrink: string;
+                marginRight: string;
+            };
+        };
+    };
+    NotificationContent: {
+        parts: string[];
+        baseStyle: ({ alignText, icon, notificationType, }: NotificationContentBaseStyle) => {
+            display: string;
+            justifyContent: string;
+            content: {
+                color: string;
+                marginTop: string;
+                paddingLeft: string;
+                width: string;
+                a: {
+                    color: string;
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+    NotificationHeading: {
+        parts: string[];
+        baseStyle: ({ icon, isCentered, notificationType, }: NotificationHeadingBaseStyle) => {
+            display: string;
+            marginBottom: string;
+            justifyContent: string;
+            heading: {
+                marginBottom: string;
+                marginTop: string;
+                color: string;
+            };
+        };
+    };
+};
+export default _default;

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

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

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

@@ -0,0 +1,52 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+interface ProgressIndicatorBaseStyle {
+    darkMode: boolean;
+    size: ProgressIndicatorSizes;
+}
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
+        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

@@ -0,0 +1,107 @@
+declare const Radio: {
+    parts: string[];
+    baseStyle: {
+        control: {
+            verticalAlign: string;
+            transitionProperty: string;
+            transitionDuration: string;
+            border: string;
+            borderRadius: string;
+            borderColor: string;
+            color: string;
+            outline: string;
+            _checked: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                _disabled: {
+                    borderColor: string;
+                    bg: string;
+                    _before: {
+                        bg: string;
+                    };
+                };
+                _invalid: {
+                    _hover: {
+                        borderColor: string;
+                    };
+                    _before: {
+                        borderColor: string;
+                        bg: string;
+                    };
+                };
+                _hover: {
+                    bg: string;
+                };
+                _before: {
+                    content: string;
+                    display: string;
+                    w: string;
+                    h: string;
+                    borderRadius: string;
+                    bg: string;
+                };
+            };
+            _disabled: {
+                borderColor: string;
+                bg: string;
+            };
+            _focus: {
+                boxShadow: string;
+                borderColor: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _invalid: {
+                borderColor: string;
+            };
+        };
+        label: {
+            userSelect: string;
+            fontWeight: string;
+            marginBottom: string;
+            marginLeft: string;
+            width: string;
+            _disabled: {
+                color: string;
+                opacity: number;
+                fontStyle: string;
+            };
+            _invalid: {
+                color: string;
+            };
+        };
+        helperErrorText: {
+            marginLeft: string;
+            _disabled: {
+                color: string;
+                fontStyle: string;
+            };
+        };
+        hiddenLabel: {
+            clip: string;
+            height: string;
+            overflow: string;
+            position: string;
+            width: string;
+            wordWrap: string;
+        };
+    };
+    sizes: {
+        md: {
+            control: {
+                h: string;
+                w: string;
+            };
+            label: {
+                fontSize: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Radio;

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

@@ -0,0 +1,14 @@
+declare const RadioGroup: {
+    parts: string[];
+    baseStyle: ({ isFullWidth }: {
+        isFullWidth?: boolean;
+    }) => {
+        helperErrorText: {
+            marginTop: string;
+        };
+        label: {
+            width: string;
+        };
+    };
+};
+export default RadioGroup;

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

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

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

@@ -0,0 +1,82 @@
+interface SelectBaseStyle {
+    labelPosition: string;
+}
+declare const Select: {
+    parts: string[];
+    baseStyle: ({ labelPosition }: SelectBaseStyle) => {
+        ".chakra-select__icon-wrapper": {
+            zIndex: string;
+        };
+        inline: {
+            display: {
+                md: string;
+            };
+            gap: {
+                md: string;
+            };
+            alignItems: {
+                md: string;
+            };
+        };
+        select: {
+            flex: {
+                md: string;
+            };
+            backgroundColor: string;
+            borderRadius: string;
+            borderColor: string;
+            fontSize: string;
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            _hover: {
+                borderColor: string;
+            };
+            _active: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _disabled: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                opacity: string;
+            };
+            _focus: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchbar: {
+            select: {
+                flex: string;
+                borderRightColor: {
+                    md: string;
+                };
+                borderRightRadius: {
+                    md: string;
+                };
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Select;

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

@@ -0,0 +1,102 @@
+interface SkeletonLoaderBaseStyle {
+    imageAspectRatio: keyof typeof imagePaddingBottomStyles;
+    isBordered: boolean;
+    showImage?: boolean;
+}
+declare const imagePaddingBottomStyles: {
+    landscape: string;
+    portrait: string;
+    square: string;
+};
+declare const SkeletonLoader: {
+    parts: string[];
+    baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
+        section: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+        image: {
+            boxSizing: string;
+            flexShrink: string;
+            height: string;
+            overflow: string;
+            paddingBottom: string;
+            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 }: SkeletonLoaderBaseStyle) => {
+            alignItems: string;
+            display: {
+                md: string;
+            };
+            image: {
+                overflow: {
+                    md: string;
+                };
+                paddingBottom: {
+                    md: string;
+                };
+                position: {
+                    md: string;
+                };
+                width: {
+                    md: string;
+                };
+                height: {
+                    md: string;
+                };
+            };
+            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/skipNavigation.d.ts

@@ -0,0 +1,25 @@
+declare const SkipNavigation: {
+    baseStyle: {
+        ul: {
+            margin: string;
+        };
+        a: {
+            backgroundColor: string;
+            height: string;
+            left: string;
+            overflow: string;
+            position: string;
+            top: string;
+            width: string;
+            _focus: {
+                border: string;
+                height: string;
+                left: string;
+                padding: string;
+                top: string;
+                width: string;
+            };
+        };
+    };
+};
+export default SkipNavigation;

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

@@ -0,0 +1,59 @@
+interface CustomSliderBaseStyle {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    showBoxes: boolean;
+    showValues: boolean;
+}
+declare const CustomSlider: {
+    parts: string[];
+    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
+        container: {
+            display: string;
+            alignItems: string;
+        };
+        leftValue: {
+            color: string;
+            marginTop: string;
+            marginBottom: string;
+            marginRight: string;
+            marginLeft: string;
+        };
+        rightValue: {
+            marginLeft: string;
+            marginRight: string;
+            color: string;
+            marginTop: string;
+            marginBottom: string;
+        };
+        textInput: {
+            minWidth: string;
+            color: string;
+        };
+        sliderContainer: {
+            marginLeft: string;
+            marginRight: string;
+        };
+        filledTrack: {
+            bgColor: string;
+        };
+        track: {
+            bgColor: string;
+            _disabled: {
+                bgColor: string;
+            };
+        };
+        thumb: {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            _active: {
+                transform: string;
+            };
+            _disabled: {
+                bgColor: string;
+                borderColor: 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;