@nypl/design-system-react-components 2.0.0 → 2.1.0-rc

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

@@ -0,0 +1,137 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+interface NotificationBaseStyle {
+    isCentered: boolean;
+    noMargin: boolean;
+    notificationHeading: string;
+    notificationType: NotificationTypes;
+    showIcon: boolean;
+}
+interface NotificationContentBaseStyle {
+    alignText: boolean;
+    isCentered: boolean;
+    notificationHeading: string;
+    notificationType: NotificationTypes;
+    showIcon: boolean;
+}
+interface NotificationHeadingBaseStyle {
+    icon: boolean;
+    isCentered: boolean;
+    notificationType: NotificationTypes;
+}
+declare const _default: {
+    Notification: {
+        parts: string[];
+        baseStyle: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+            bg: string;
+            borderRadius: string;
+            display: string;
+            fontSize: string;
+            m: string;
+            position: string;
+            p: string;
+            textAlign: string;
+            _dark: {
+                bg: string;
+            };
+            container: {
+                display: string;
+                flexDirection: string;
+                m: string;
+                maxWidth: string;
+                paddingEnd: string;
+                paddingStart: string;
+                w: string;
+            };
+            dismissibleButton: {
+                border: string;
+                bgColor: string;
+                alignItems: string;
+                color: string;
+                display: string;
+                h: string;
+                w: string;
+                minWidth: string;
+                position: string;
+                right: string;
+                top: string;
+                svg: {
+                    marginTop: string;
+                };
+                _dark: {
+                    color: string;
+                };
+                _hover: {
+                    bg: string;
+                };
+            };
+        };
+    };
+    NotificationContent: {
+        parts: string[];
+        baseStyle: ({ isCentered, notificationHeading, notificationType, showIcon, }: NotificationContentBaseStyle) => {
+            display: string;
+            justifyContent: string;
+            content: {
+                color: string;
+                marginTop: string;
+                paddingStart: string;
+                pt: string;
+                w: string;
+                _dark: {
+                    borderLeftColor: string;
+                    borderLeftStyle: string;
+                    borderLeftWidth: string;
+                    marginTop: string;
+                    paddingStart: string;
+                    color: string;
+                    ml: string;
+                };
+                a: {
+                    color: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                        _hover: {
+                            color: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+    NotificationHeading: {
+        parts: string[];
+        baseStyle: ({ icon, isCentered, notificationType, }: NotificationHeadingBaseStyle) => {
+            display: string;
+            flexDirection: string;
+            m: string;
+            mb: string;
+            px: string;
+            w: string;
+            _dark: {
+                borderBottomColor: string;
+                borderBottomStyle: string;
+                borderBottomWidth: string;
+                color: string;
+                paddingBottom: string;
+            };
+            heading: {
+                color: string;
+                ml: string;
+                mt: string;
+                _dark: {
+                    borderLeftColor: string;
+                    borderLeftStyle: string;
+                    borderLeftWidth: string;
+                    paddingLeft: string;
+                };
+            };
+            svg: {
+                mx: string;
+                mb: string;
+                mt: string;
+            };
+        };
+    };
+};
+export default _default;

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

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

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

@@ -0,0 +1,69 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+interface ProgressIndicatorBaseStyle {
+    darkMode: boolean;
+    size: ProgressIndicatorSizes;
+}
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
+        color: string;
+        fontSize: string;
+        _dark: {
+            color: string;
+        };
+        circular: {
+            svg: {
+                height: string;
+                width: string;
+                display: string;
+                circle: {
+                    _first: {
+                        stroke: string;
+                        _dark: {
+                            stroke: string;
+                        };
+                    };
+                    _last: {
+                        stroke: string;
+                        _dark: {
+                            stroke: string;
+                        };
+                    };
+                };
+            };
+        };
+        circularContainer: {
+            alignItems: string;
+            display: string;
+            flexDirection: string;
+            width: string;
+        };
+        linear: {
+            "> div": {
+                bg: string;
+                _dark: {
+                    bg: string;
+                };
+            };
+            flex: number;
+            bg: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            _dark: {
+                bg: string;
+                color: string;
+            };
+        };
+        linearContainer: {
+            display: string;
+            alignItems: string;
+        };
+        linearPercentage: {
+            padding: string;
+            flex: number;
+        };
+    };
+};
+export default ProgressIndicator;

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

@@ -0,0 +1,202 @@
+declare const Radio: {
+    parts: string[];
+    baseStyle: {
+        control: {
+            verticalAlign: string;
+            transitionProperty: string;
+            transitionDuration: string;
+            border: string;
+            borderRadius: string;
+            borderColor: string;
+            backgroundColor: 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;
+                _dark: {
+                    outlineColor: string;
+                };
+            };
+            _invalid: {
+                borderColor: string;
+            };
+            _dark: {
+                borderColor: string;
+                backgroundColor: string;
+                _checked: {
+                    borderColor: string;
+                    _disabled: {
+                        borderColor: string;
+                        _before: {
+                            bg: string;
+                        };
+                    };
+                    _invalid: {
+                        borderColor: string;
+                        _before: {
+                            borderColor: string;
+                            bg: string;
+                        };
+                    };
+                };
+                _disabled: {
+                    borderColor: string;
+                    _before: {
+                        bg: string;
+                    };
+                };
+                _focus: {
+                    boxShadow: string;
+                    outlineColor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                };
+                _before: {
+                    bg: string;
+                };
+            };
+        };
+        label: {
+            userSelect: string;
+            fontWeight: string;
+            marginBottom: string;
+            marginStart: string;
+            width: string;
+            _disabled: {
+                color: string;
+                opacity: number;
+                fontStyle: string;
+            };
+            _invalid: {
+                color: string;
+            };
+            _dark: {
+                _disabled: {
+                    color: string;
+                };
+                _invalid: {
+                    color: string;
+                };
+            };
+        };
+        helperErrorText: {
+            marginStart: string;
+            _disabled: {
+                color: string;
+                fontStyle: string;
+            };
+        };
+        hiddenLabel: {
+            clip: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            overflow: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            wordWrap: string;
+        };
+    };
+    sizes: {
+        md: {
+            control: {
+                h: string;
+                w: string;
+            };
+            label: {
+                fontSize: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export declare const RadioWrapper: {
+    baseStyle: {
+        label: {
+            _hover: {
+                span: {
+                    _first: {
+                        borderColor: string;
+                    };
+                    _checked: {
+                        borderColor: string;
+                    };
+                    _disabled: {
+                        borderColor: string;
+                    };
+                    _invalid: {
+                        borderColor: string;
+                    };
+                };
+                _dark: {
+                    span: {
+                        _first: {
+                            borderColor: string;
+                        };
+                        _checked: {
+                            borderColor: string;
+                        };
+                        _disabled: {
+                            borderColor: string;
+                        };
+                        _invalid: {
+                            borderColor: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};
+export default Radio;

package/dist/src/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/src/theme/components/searchBar.d.ts

@@ -0,0 +1,34 @@
+declare const SearchBar: {
+    parts: string[];
+    baseStyle: {
+        display: string;
+        marginBottom: {
+            base: string;
+            md: string;
+        };
+        flexFlow: {
+            base: string;
+            md: string;
+        };
+        select: {
+            flexShrink: string;
+            marginBottom: {
+                base: string;
+                md: string;
+            };
+            maxWidth: {
+                base: any;
+                md: string;
+            };
+            textOverflow: string;
+            marginRight: {
+                base: any;
+                md: string;
+            };
+            _hover: {
+                zIndex: string;
+            };
+        };
+    };
+};
+export default SearchBar;

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

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

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

@@ -0,0 +1,105 @@
+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: {
+                marginStart: {
+                    md: string;
+                };
+                marginTop: {
+                    md: string;
+                };
+            };
+            button: {
+                margin: {
+                    md: string;
+                };
+            };
+        };
+    };
+};
+declare const Skeleton: {
+    baseStyle: {
+        borderRadius: string;
+        bg: string;
+        animation: string;
+        _dark: {
+            bg: string;
+        };
+    };
+};
+export { Skeleton, SkeletonLoader };