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

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

@@ -0,0 +1,590 @@
+interface CustomImageBaseStyle {
+    size: keyof typeof imageSizes;
+}
+interface CustomImageWrapperBaseStyle {
+    ratio: keyof typeof imageRatios;
+    size: keyof typeof imageSizes;
+}
+declare const imageSizes: {
+    default: {
+        maxWidth: string;
+    };
+    xxsmall: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    xsmall: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    small: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    medium: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    large: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+};
+declare const imageRatios: {
+    fourByThree: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    oneByTwo: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    original: {
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    sixteenByNine: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    square: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    threeByFour: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    threeByTwo: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    twoByOne: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+};
+declare const CustomImage: {
+    parts: string[];
+    variants: {
+        circle: {
+            img: {
+                borderRadius: string;
+            };
+        };
+    };
+    baseStyle: ({ size }: CustomImageBaseStyle) => {
+        figure: {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            margin: string;
+            width: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+            width: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+            width: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+            width: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+            width: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+            width: string;
+        };
+        figcaption: {
+            fontStyle: string;
+            fontSize: string;
+        };
+        img: {
+            maxWidth: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        };
+        captionWrappers: {
+            marginTop: string;
+        };
+    };
+};
+declare const CustomImageWrapper: {
+    parts: string[];
+    baseStyle: ({ ratio, size, }: CustomImageWrapperBaseStyle) => {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    };
+};
+export { CustomImage, CustomImageWrapper };

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

@@ -0,0 +1,18 @@
+interface LabelBaseStyle {
+    isInlined: boolean;
+}
+declare const Label: {
+    baseStyle: ({ isInlined }: LabelBaseStyle) => {
+        flex: string;
+        whiteSpace: string;
+        display: string;
+        fontSize: string;
+        fontWeight: string;
+        marginBottom: string;
+        width: string;
+        span: {
+            fontWeight: string;
+        };
+    };
+};
+export default Label;

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

@@ -0,0 +1,62 @@
+export declare const baseLinkStyles: {
+    color: string;
+    textDecoration: string;
+    _hover: {
+        color: string;
+    };
+};
+declare const Link: {
+    baseStyle: {
+        a: {
+            _hover: {
+                color: string;
+            };
+        };
+        color: string;
+        textDecoration: string;
+        _hover: {
+            color: string;
+        };
+    };
+    variants: {
+        link: {};
+        disabled: {
+            color: string;
+            pointerEvents: string;
+        };
+        moreLink: {
+            alignItems: string;
+            display: string;
+            svg: {
+                height: string;
+                width: string;
+                textDecoration: string;
+                fill: string;
+            };
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+        };
+        button: {
+            width: string;
+            borderRadius: string;
+            lineHeight: string;
+            display: string;
+            cursor: string;
+            color: string;
+            justifyContent: string;
+            py: string;
+            px: string;
+            textDecoration: string;
+            fontWeight: string;
+            bg: string;
+            _hover: {
+                color: string;
+                bg: string;
+                textDecoration: string;
+            };
+        };
+    };
+};
+export default Link;