@nypl/design-system-react-components 2.0.0 → 2.0.1

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

@@ -0,0 +1,154 @@
+declare const _default: {
+    TagSet: {
+        baseStyle: () => {
+            display: string;
+            flexWrap: string;
+            gap: string;
+        };
+    };
+    TagSetExplore: {
+        baseStyle: {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            color: string;
+            cursor: string;
+            fontSize: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            minHeight: string;
+            maxWidth: string;
+            py: string;
+            px: string;
+            textDecoration: string;
+            transition: string;
+            _focusWithin: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+                _dark: {
+                    outlineColor: string;
+                };
+            };
+            a: {
+                border: string;
+                _focus: {
+                    outline: string;
+                };
+            };
+            "> span": {
+                display: string;
+                overflow: string;
+                textOverflow: string;
+                whiteSpace: string;
+            };
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                bg: string;
+                a: {
+                    color: string;
+                };
+                svg: {
+                    fill: string;
+                };
+                "> span": {
+                    color: string;
+                };
+            };
+            _dark: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                a: {
+                    color: string;
+                };
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    bg: string;
+                    a: {
+                        color: string;
+                    };
+                    svg: {
+                        fill: string;
+                    };
+                    "> span": {
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+    TagSetFilter: {
+        parts: string[];
+        baseStyle: ({ isDismissible }: {
+            isDismissible: boolean;
+        }) => {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            color: string;
+            cursor: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            minHeight: string;
+            maxWidth: string;
+            py: string;
+            paddingLeft: string;
+            paddingRight: string | {
+                base: string;
+                md: string;
+            };
+            fontSize: string;
+            "> span": {
+                display: string;
+                overflow: string;
+                textOverflow: string;
+                whiteSpace: string;
+            };
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            _dark: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                _hover: {
+                    bg: string;
+                    borderColor: string;
+                };
+            };
+            clearAll: {
+                color: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                fontSize: string;
+                minHeight: string;
+                _dark: {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,98 @@
+/**
+ * Grid layout based on https://www.joshwcomeau.com/css/full-bleed/
+ */
+declare const _default: {
+    Template: {
+        baseStyle: {
+            boxSizing: string;
+            color: string;
+            display: string;
+            gridTemplateColumns: string;
+            rowGap: string;
+            _dark: {
+                color: string;
+            };
+        };
+        sizes: {};
+        defaultProps: {};
+    };
+    TemplateBreakout: {
+        baseStyle: {
+            width: string;
+            gridColumn: string;
+        };
+    };
+    TemplateContent: {
+        baseStyle: {
+            gridColumn: string;
+            display: string;
+            gridTemplateColumns: string;
+            paddingY: number;
+            paddingX: string;
+            gap: string;
+        };
+        variants: {
+            left: {
+                gridTemplateColumns: {
+                    md: string;
+                };
+            };
+            right: {
+                gridTemplateColumns: {
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentTopBottom: {
+        baseStyle: {
+            gridColumn: {
+                base: string;
+                md: string;
+            };
+            height: string;
+        };
+    };
+    TemplateContentPrimary: {
+        baseStyle: {
+            gridColumn: {
+                base: string;
+                md: string;
+            };
+        };
+        variants: {
+            left: {
+                gridColumn: {
+                    base: string;
+                    md: string;
+                };
+                marginEnd: {
+                    md: number;
+                };
+                minWidth: {
+                    md: number;
+                };
+            };
+            right: {
+                gridColumn: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentSidebar: {
+        variants: {
+            left: {
+                gridColumn: string;
+            };
+            right: {
+                gridColumn: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,59 @@
+interface TextBaseStyle {
+    isBold: boolean;
+    isItalic: boolean;
+    isCapitalized: boolean;
+    isUppercase: boolean;
+    isLowercase: boolean;
+    noSpace: boolean;
+    variant: string;
+}
+declare const Text: {
+    baseStyle: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
+        fontStyle: string;
+        fontWeight: string;
+        textTransform: string;
+        marginBottom: string;
+    };
+    variants: {
+        default: {};
+        body1: {};
+        body2: {
+            fontSize: string;
+        };
+        caption: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        overline1: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+            textTransform: string;
+        };
+        overline2: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+            textTransform: string;
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: number;
+        };
+        tag: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        mini: {
+            fontSize: string;
+            fontWeight: string;
+        };
+    };
+};
+export default Text;

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

@@ -0,0 +1,360 @@
+declare const TextInput: {
+    parts: string[];
+    baseStyle: ({ showLabel }: {
+        showLabel: any;
+    }) => {
+        position: string;
+        input: {
+            bgColor: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
+                color: string;
+                opacity: string;
+                _dark: {
+                    bg: string;
+                    borderColor: string;
+                    color: 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;
+            };
+            _focus: {
+                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;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+                color: string;
+                _focus: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+                _hover: {
+                    borderColor: string;
+                };
+                _disabled: {
+                    _placeholder: {
+                        color: string;
+                    };
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    opacity: string;
+                    _dark: {
+                        bg: string;
+                        borderColor: string;
+                        color: 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;
+                };
+                _focus: {
+                    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;
+                };
+                _placeholder: {
+                    color: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                    color: 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;
+                _dark: {
+                    bg: string;
+                    borderColor: string;
+                    color: 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;
+            };
+            _focus: {
+                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;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+                color: string;
+                _focus: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+                _hover: {
+                    borderColor: string;
+                };
+                _disabled: {
+                    _placeholder: {
+                        color: string;
+                    };
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                    opacity: string;
+                    _dark: {
+                        bg: string;
+                        borderColor: string;
+                        color: 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;
+                };
+                _focus: {
+                    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;
+                };
+                _placeholder: {
+                    color: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                    color: string;
+                };
+            };
+        };
+        clearButton: {
+            borderRadius: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
+            height: string;
+            position: string;
+            top: string;
+            px: string;
+            right: string;
+            span: {
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+            zIndex: string;
+            _dark: {
+                svg: {
+                    fill: 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;