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

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

@@ -0,0 +1,136 @@
+interface BaseStyleProps {
+    columnHeadersTextColor?: string;
+    showRowDividers?: boolean;
+    useRowHeaders?: boolean;
+}
+export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: string) => {
+    border: string;
+    borderBottom: string;
+    color: string;
+    fontSize: string;
+    fontWeight: string;
+    letterSpacing: string;
+    paddingLeft: number;
+    paddingRight: string;
+    textTransform: string;
+    _first: {
+        paddingLeft: string;
+    };
+    _last: {
+        paddingRight: string;
+    };
+};
+export declare const baseTDStyles: (showRowDividers?: boolean, useRowHeaders?: boolean) => {
+    border: string;
+    borderBottom: string;
+    letterSpacing: string;
+    paddingLeft: number;
+    paddingRight: string;
+    _first: {
+        paddingLeft: string;
+    };
+    _last: {
+        paddingRight: string;
+    };
+};
+export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+    tbody: {
+        th: {
+            color: 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;
+        };
+    };
+    td: {
+        border: string;
+        borderBottom: string;
+        letterSpacing: string;
+        paddingLeft: number;
+        paddingRight: string;
+        _first: {
+            paddingLeft: string;
+        };
+        _last: {
+            paddingRight: string;
+        };
+    };
+    caption: {
+        captionSide: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        marginBottom: string;
+        marginLeft: string;
+        marginRight: string;
+        marginTop: string;
+        padding: string;
+        textAlign: string;
+    };
+};
+declare const CustomTable: {
+    baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+        tbody: {
+            th: {
+                color: 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;
+            };
+        };
+        td: {
+            border: string;
+            borderBottom: string;
+            letterSpacing: string;
+            paddingLeft: number;
+            paddingRight: string;
+            _first: {
+                paddingLeft: string;
+            };
+            _last: {
+                paddingRight: string;
+            };
+        };
+        caption: {
+            captionSide: string;
+            color: string;
+            fontSize: string;
+            fontWeight: string;
+            marginBottom: string;
+            marginLeft: string;
+            marginRight: string;
+            marginTop: string;
+            padding: string;
+            textAlign: string;
+        };
+    };
+};
+export default CustomTable;

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

@@ -0,0 +1,16 @@
+/**
+ * Note: these styles are only used when the
+ * DatePicker is in "date range" mode.
+ */
+declare const DatePicker: {
+    parts: string[];
+    baseStyle: {
+        subLabels: {
+            label: {
+                fontSize: string;
+                marginBottom: string;
+            };
+        };
+    };
+};
+export default DatePicker;

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

@@ -0,0 +1,20 @@
+interface FieldSetProps {
+    isLegendHidden?: boolean;
+}
+declare const Fieldset: {
+    baseStyle: ({ isLegendHidden }: FieldSetProps) => {
+        border: number;
+        padding: number;
+        legend: {
+            display: string;
+            fontSize: string;
+            fontWeight: string;
+            marginBottom: string;
+            width: string;
+            span: {
+                fontWeight: string;
+            };
+        };
+    };
+};
+export default Fieldset;

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

@@ -0,0 +1,73 @@
+/** Export "mixin" styles. */
+export { wrapperStyles } from "./globalMixins";
+/** Reusable component styles. */
+declare const activeFocus: (darkMode?: boolean) => {
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: string;
+    zIndex: string;
+};
+declare const checkboxRadioLabelStyles: {
+    userSelect: string;
+    fontWeight: string;
+    marginBottom: string;
+    marginLeft: string;
+    width: string;
+    _disabled: {
+        color: string;
+        opacity: number;
+        fontStyle: string;
+    };
+    _invalid: {
+        color: string;
+    };
+};
+declare const checkboxRadioControlSize: {
+    h: string;
+    w: string;
+};
+declare const checkboxRadioHelperErrorTextStyle: {
+    marginLeft: string;
+    _disabled: {
+        color: string;
+        fontStyle: string;
+    };
+};
+declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
+    helperErrorText: {
+        marginTop: string;
+    };
+    label: {
+        width: string;
+    };
+};
+declare const labelLegendText: {
+    display: string;
+    fontSize: string;
+    fontWeight: string;
+    marginBottom: string;
+    width: string;
+    span: {
+        fontWeight: string;
+    };
+};
+declare const selectTextInputDisabledStyles: {
+    bg: string;
+    borderColor: string;
+    color: string;
+    opacity: string;
+};
+declare const selectTextInputFocusStyles: {
+    borderColor: string;
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: string;
+    zIndex: string;
+};
+declare const textMargin: {
+    margin: string;
+    marginBottom: string;
+};
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

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

@@ -0,0 +1,23 @@
+/**
+ * These objects are also SCSS mixins but are now JS objects in the
+ * context of css-in-js and the custom NYPL-theme.
+ */
+declare const screenreaderOnly: {
+    clip: string;
+    height: string;
+    overflow: string;
+    position: string;
+    width: string;
+    wordWrap: string;
+};
+declare const wrapperStyles: {
+    marginY: string;
+    marginX: string;
+    maxWidth: string;
+    paddingTop: string;
+    paddingBottom: string;
+    paddingRight: string;
+    paddingLeft: string;
+    width: string;
+};
+export { screenreaderOnly, wrapperStyles };

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

@@ -0,0 +1,160 @@
+export declare const headings: {
+    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;
+    };
+};
+declare const Heading: {
+    baseStyle: ({ noSpace }: {
+        noSpace: any;
+    }) => {
+        a: {
+            color: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+            };
+        };
+        marginBottom: string;
+    };
+    variants: {
+        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;
+        };
+        h5: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h6: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        primary: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+        secondary: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        tertiary: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        callout: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+    };
+    defaultProps: {
+        variant: string;
+    };
+};
+export default Heading;

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

@@ -0,0 +1,12 @@
+interface HelperErrorTextBaseStyle {
+    isInvalid: boolean;
+}
+declare const helperErrorText: {
+    baseStyle: ({ isInvalid }: HelperErrorTextBaseStyle) => {
+        marginTop: string;
+        marginBottom: string;
+        fontSize: string;
+        color: string;
+    };
+};
+export default helperErrorText;