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

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

@@ -0,0 +1,226 @@
+interface StructuredContentBaseStyle {
+    hasFigureImage: boolean;
+    imageAspectRatio: string;
+    imagePosition: string;
+}
+declare const StructuredContent: {
+    parts: string[];
+    baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
+        h1: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+        h2: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h3: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h4: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        fallback: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        imageFigure: {
+            marginBottom: string;
+            maxWidth?: string;
+            float: string[];
+            marginLeft: string[];
+            marginRight: string[];
+            width: string;
+        };
+        imageWrapper: {
+            marginBottom: string;
+            maxWidth?: string;
+            float: string[];
+            marginLeft: string[];
+            marginRight: string[];
+            width: string;
+        };
+        image: {
+            maxWidth?: string;
+            float: string[];
+            marginLeft: string[];
+            marginRight: string[];
+            marginBottom: string;
+        };
+        /** The following styles are meant to target HTML elements that are
+         * not rendered from the Reservoir DS. Typically, these HTML elements
+         * are added from an API response.
+         */
+        ".structuredcontent-body > div": {
+            marginTop: string;
+            marginInlineEnd: string;
+            marginBottom: string;
+            marginInlineStart: string;
+        };
+        a: {
+            color: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+            };
+        };
+        ul: {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginLeft: string;
+                    width: string;
+                };
+            };
+            margin: string;
+            marginBottom: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
+            listStyle: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+            li: {
+                marginRight: string;
+                listStyleType: string;
+                _notFirst: {
+                    marginTop: string;
+                };
+            };
+        };
+        section: {
+            borderBottom: string;
+            borderColor: string;
+            paddingLeft: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+            };
+        };
+        dl: {
+            display: string;
+            gridTemplateColumns: {
+                base: string;
+                md: string;
+            };
+            gridTemplateRows: string;
+            margin: string;
+        };
+        dt: {
+            borderTop: string;
+            borderColor: string;
+            fontWeight: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingTop: string;
+            paddingRight: {
+                md: string;
+            };
+        };
+        dd: {
+            margin: string;
+            paddingBottom: string;
+            borderTop: {
+                base: string;
+                md: string;
+            };
+            borderColor: {
+                md: string;
+            };
+            paddingTop: {
+                md: string;
+            };
+        };
+        table: {
+            width: string;
+            th: {
+                border: string;
+                borderBottom: string;
+                color: string;
+                fontSize: string;
+                fontWeight: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                textTransform: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+            td: {
+                border: string;
+                borderBottom: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+        };
+    };
+};
+export default StructuredContent;

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

@@ -0,0 +1,136 @@
+declare const CustomTabs: {
+    parts: string[];
+    baseStyle: {
+        tablist: {
+            borderColor: string;
+        };
+        tab: {
+            color: string;
+            paddingInlineStart: string;
+            paddingLeft: string;
+            background: string;
+            border: string;
+            borderBottom: string;
+            borderColor: string;
+            height: {
+                base: string;
+            };
+            marginRight: {
+                base: string;
+                md: string;
+            };
+            paddingRight: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            whiteSpace: string;
+            _hover: {
+                bg: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            _selected: {
+                fontWeight: string;
+                bg: string;
+                border: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                paddingBottom: string;
+            };
+            _focus: {
+                boxShadow: string;
+            };
+        };
+        buttonArrows: {
+            border: string;
+            borderRadius: string;
+            display: {
+                md: string;
+            };
+            height: string;
+            width: string;
+            top: string;
+            marginLeft: string;
+            marginRight: string;
+            pos: string;
+            transition: string;
+            zIndex: string;
+        };
+        tablistWrapper: {
+            display: string;
+            alignItems: string;
+            borderBottom: {
+                base: string;
+                md: string;
+            };
+            height: {
+                base: string;
+                md: string;
+            };
+            margin: string;
+            overflowX: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+            paddingRight: {
+                base: string;
+                md: string;
+            };
+            paddingTop: {
+                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;
+            };
+        };
+    };
+};
+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: string;
+        };
+    };
+    TemplateBreakout: {
+        baseStyle: {
+            width: string;
+            marginBottom: string;
+            marginLeft: string;
+            marginRight: string;
+        };
+    };
+    TemplateContent: {
+        baseStyle: {
+            display: string;
+            marginBottom: string;
+            marginY: number;
+            marginX: string;
+            maxWidth: string;
+            paddingTop: number;
+            paddingBottom: number;
+            paddingRight: string;
+            paddingLeft: string;
+            width: string;
+        };
+        variants: {
+            sidebar: {
+                display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentTop: {
+        baseStyle: {
+            flex: string;
+            marginBottom: string;
+        };
+    };
+    TemplateContentPrimary: {
+        baseStyle: {
+            flex: string;
+            marginBottom: string;
+        };
+        variants: {
+            left: {
+                display: string;
+                flexFlow: string;
+                order: string;
+                marginRight: {
+                    md: number;
+                };
+                minWidth: {
+                    md: number;
+                };
+            };
+        };
+    };
+    TemplateContentSidebar: {
+        baseStyle: {
+            flex: string;
+            order: {
+                md: string;
+            };
+            marginBottom: string;
+        };
+        variants: {
+            left: {
+                marginRight: {
+                    base: number;
+                    md: string;
+                };
+            };
+            right: {
+                marginLeft: {
+                    base: number;
+                    md: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,26 @@
+interface TextBaseStyle {
+    isBold: boolean;
+    isItalic: boolean;
+    noSpace: boolean;
+    variant: string;
+}
+declare const Text: {
+    baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
+        fontStyle: string;
+        fontWeight: string;
+        marginBottom: string;
+    };
+    variants: {
+        default: {};
+        caption: {
+            fontSize: string;
+        };
+        tag: {
+            fontSize: string;
+        };
+        mini: {
+            fontSize: string;
+        };
+    };
+};
+export default Text;

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

@@ -0,0 +1,124 @@
+declare const TextInput: {
+    parts: string[];
+    baseStyle: {
+        input: {
+            bgColor: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            fontSize: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _focus: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+        textarea: {
+            lineheight: string;
+            minHeight: string;
+            bgColor: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            fontSize: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _focus: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchBar: {
+            flex: string;
+            input: {
+                borderRightRadius: string;
+            };
+        };
+        searchBarSelect: {
+            flex: string;
+            input: {
+                borderRadius: string;
+                borderTopLeftRadius: {
+                    base: string;
+                    md: string;
+                };
+                borderTopRightRadius: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+};
+export default TextInput;

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

@@ -0,0 +1,92 @@
+import { ToggleSizes } from "../../components/Toggle/Toggle";
+interface ToggleBaseStyle {
+    isDisabled: boolean;
+    size: ToggleSizes;
+}
+declare const _default: {
+    Toggle: {
+        parts: string[];
+        baseStyle: ({ isDisabled, size }: ToggleBaseStyle) => {
+            label: {
+                alignItems: string;
+                display: string;
+                width: string;
+            };
+            helperErrorText: {
+                marginLeft: string;
+                fontStyle: string;
+            };
+        };
+        defaultProps: {
+            size: string;
+        };
+    };
+    Switch: {
+        baseStyle: ({ size }: {
+            size: string;
+        }) => {
+            alignItems: string;
+            opacity: number;
+            track: {
+                border: string;
+                borderColor: string;
+                p: string;
+                _checked: {
+                    bg: string;
+                    borderColor: string;
+                    opacity: number;
+                };
+                _invalid: {
+                    bg: string;
+                    borderColor: string;
+                    "> span": {
+                        bg: string;
+                    };
+                };
+                _disabled: {
+                    bg: string;
+                    borderColor: string;
+                    _checked: {
+                        opacity: number;
+                    };
+                };
+                _focus: {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    zIndex: string;
+                };
+            };
+            label: {
+                fontSize: string;
+                marginLeft: string;
+                marginTop: string;
+                _disabled: {
+                    color: string;
+                    fontStyle: string;
+                };
+            };
+            thumb: {
+                _disabled: {
+                    bg: string;
+                };
+            };
+        };
+        sizes: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        };
+        defaultProps: {
+            colorScheme: string;
+        };
+    };
+};
+export default _default;