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

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

@@ -0,0 +1,120 @@
+declare const Button: {
+    baseStyle: {
+        borderRadius: string;
+        lineHeight: string;
+        display: string;
+        cursor: string;
+        color: string;
+        justifyContent: string;
+        maxHeight: string;
+        py: string;
+        px: string;
+        textDecoration: string;
+        wordWrap: string;
+        fontWeight: string;
+        svg: {
+            fill: string;
+            marginTop: string;
+        };
+        _hover: {
+            bg: string;
+        };
+        _visited: {
+            color: string;
+        };
+        _disabled: {
+            bg: string;
+            color: string;
+            pointerEvents: string;
+            opacity: string;
+        };
+    };
+    variants: {
+        primary: {
+            bg: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        secondary: {
+            bg: string;
+            border: string;
+            borderColor: string;
+            color: string;
+            fontSize: string;
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            _disabled: {
+                bg: string;
+            };
+        };
+        link: {
+            bg: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            _disabled: {
+                bg: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+            };
+        };
+        pill: {
+            bg: string;
+            border: string;
+            borderColor: string;
+            color: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            fontSize: string;
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            _disabled: {
+                bg: string;
+            };
+        };
+        iconOnly: {
+            bg: string;
+            border: string;
+            borderColor: string;
+            color: string;
+            _hover: {
+                bg: string;
+                borderColor: string;
+            };
+            paddingInlineStart: string;
+            paddingInlineEnd: string;
+        };
+        callout: {
+            bg: string;
+            fontSize: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        noBrand: {
+            bg: string;
+            color: string;
+            _hover: {
+                bg: string;
+            };
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+    };
+    defaultProps: {
+        variant: string;
+    };
+};
+export default Button;

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

@@ -0,0 +1,11 @@
+declare const ButtonGroup: {
+    baseStyle: ({ buttonWidth }: {
+        buttonWidth: any;
+    }) => {
+        width: string;
+        button: {
+            flexGrow: string;
+        };
+    };
+};
+export default ButtonGroup;

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

@@ -0,0 +1,381 @@
+interface CardBaseStyleProps {
+    hasImage: boolean;
+    imageIsAtEnd: boolean;
+    isAlignedRightActions: boolean;
+    isBordered: boolean;
+    isCentered: boolean;
+    layout: string;
+    mainActionLink: boolean;
+}
+interface CardImageBaseStyleProps {
+    imageIsAtEnd: boolean;
+    isCentered: boolean;
+    size: keyof typeof imageSizes;
+    layout: string;
+}
+interface CardActionsBaseStyleProps {
+    bottomBorder: boolean;
+    isCentered: boolean;
+    layout: string;
+    topBorder: boolean;
+}
+declare const imageSizes: {
+    xxsmall: {
+        flex: {
+            base: string;
+            md: string;
+        };
+        width: string;
+    };
+    xsmall: {
+        flex: {
+            md: string;
+        };
+    };
+    small: {
+        flex: {
+            md: string;
+        };
+    };
+    medium: {
+        flex: {
+            md: string;
+        };
+    };
+    large: {
+        flex: {
+            md: string;
+        };
+    };
+};
+declare const _default: {
+    Card: {
+        parts: string[];
+        baseStyle: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
+            display: string;
+            flexFlow: {
+                base: string;
+                md: string;
+            };
+            maxWidth: string;
+            textAlign: string;
+            alignItems: string;
+            border: string;
+            borderColor: string;
+            actions: {
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
+            };
+            body: {
+                display: {
+                    md: string;
+                };
+                flexBasis: {
+                    sm: string;
+                };
+                flexFlow: {
+                    md: string;
+                };
+                margin: any;
+                padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
+            };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
+        } | {
+            display: string;
+            flexFlow: string;
+            maxWidth?: undefined;
+            textAlign: string;
+            alignItems: string;
+            border: string;
+            borderColor: string;
+            actions: {
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
+            };
+            body: {
+                display: {
+                    md: string;
+                };
+                flexBasis: {
+                    sm: string;
+                };
+                flexFlow: {
+                    md: string;
+                };
+                margin: any;
+                padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
+            };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
+        } | {
+            display: string;
+            flexFlow: {
+                base: string;
+                md: string;
+            };
+            maxWidth: string;
+            textAlign: string;
+            alignItems: string;
+            border?: undefined;
+            borderColor?: undefined;
+            actions: {
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
+            };
+            body: {
+                display: {
+                    md: string;
+                };
+                flexBasis: {
+                    sm: string;
+                };
+                flexFlow: {
+                    md: string;
+                };
+                margin: any;
+                padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
+            };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
+        } | {
+            display: string;
+            flexFlow: string;
+            maxWidth?: undefined;
+            textAlign: string;
+            alignItems: string;
+            border?: undefined;
+            borderColor?: undefined;
+            actions: {
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
+            };
+            body: {
+                display: {
+                    md: string;
+                };
+                flexBasis: {
+                    sm: string;
+                };
+                flexFlow: {
+                    md: string;
+                };
+                margin: any;
+                padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
+            };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
+        };
+    };
+    CardActions: {
+        baseStyle: ({ bottomBorder, isCentered, layout, topBorder, }: CardActionsBaseStyleProps) => {
+            justifyContent: any;
+            borderColor: string;
+            borderBottom: string;
+            paddingBottom: string;
+            borderTop: string;
+            paddingTop: string;
+            marginBottom: string;
+            columnGap: string;
+            display: string;
+            _last: {
+                marginBottom: string;
+            };
+        } | {
+            justifyContent: any;
+            borderColor: string;
+            borderBottom?: undefined;
+            paddingBottom?: undefined;
+            borderTop: string;
+            paddingTop: string;
+            marginBottom: string;
+            columnGap: string;
+            display: string;
+            _last: {
+                marginBottom: string;
+            };
+        } | {
+            justifyContent: any;
+            borderColor: string;
+            borderBottom: string;
+            paddingBottom: string;
+            borderTop?: undefined;
+            paddingTop?: undefined;
+            marginBottom: string;
+            columnGap: string;
+            display: string;
+            _last: {
+                marginBottom: string;
+            };
+        } | {
+            justifyContent: any;
+            borderColor: string;
+            borderBottom?: undefined;
+            paddingBottom?: undefined;
+            borderTop?: undefined;
+            paddingTop?: undefined;
+            marginBottom: string;
+            columnGap: string;
+            display: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+    };
+    CardContent: {
+        baseStyle: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+    };
+    CardImage: {
+        baseStyle: ({ imageIsAtEnd, isCentered, layout, size, }: CardImageBaseStyleProps) => {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
+            textAlign: string;
+            alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
+            marginBottom: string[];
+            marginTop: string;
+            order: string;
+        } | {
+            marginBottom: string;
+            width: string;
+            marginTop: string;
+            order: string;
+        } | {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
+            textAlign: string;
+            alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
+            marginBottom: string[];
+            marginTop?: undefined;
+            order?: undefined;
+        } | {
+            marginBottom: string;
+            width: string;
+            marginTop?: undefined;
+            order?: undefined;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,95 @@
+declare const Checkbox: {
+    parts: string[];
+    baseStyle: {
+        icon: {
+            transitionProperty: string;
+            transitionDuration: string;
+            width: string;
+            height: string;
+        };
+        control: {
+            border: string;
+            borderRadius: string;
+            borderColor: string;
+            color: string;
+            outline: string;
+            transitionProperty: string;
+            transitionDuration: string;
+            _checked: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                _hover: {
+                    bg: string;
+                };
+                _disabled: {
+                    bg: string;
+                    borderColor: string;
+                    svg: {
+                        color: string;
+                    };
+                };
+                _indeterminate: {
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            _indeterminate: {
+                color: string;
+                borderColor: string;
+            };
+            _disabled: {
+                bg: string;
+                borderColor: string;
+            };
+            _focus: {
+                borderColor: string;
+                boxShadow: string;
+                outlineColor: string;
+            };
+            _invalid: {
+                borderColor: string;
+                color: 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;
+            };
+        };
+    };
+    sizes: {
+        lg: {
+            control: {
+                borderRadius: string;
+                h: string;
+                w: string;
+            };
+            label: {
+                fontSize: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+        colorScheme: string;
+    };
+};
+export default Checkbox;

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

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

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

@@ -0,0 +1,12 @@
+interface ComponentWrapperProps {
+    hasChildren: boolean;
+}
+declare const ComponentWrapper: {
+    parts: string[];
+    baseStyle: ({ hasChildren }: ComponentWrapperProps) => {
+        helperErrorText: {
+            marginTop: string;
+        };
+    };
+};
+export default ComponentWrapper;