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

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

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

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

@@ -0,0 +1,100 @@
+declare const FeedbackBox: {
+    parts: string[];
+    baseStyle: {
+        closeButton: {
+            /** This is overriding the default min-height value in order to keep the
+             * button spacing symmetrical. */
+            minHeight: string;
+            right: string;
+            p: string;
+            position: string;
+            span: {
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+            top: string;
+            _dark: {
+                svg: {
+                    fill: string;
+                };
+            };
+        };
+        drawerBody: {
+            borderLeft: {
+                base: any;
+                md: string;
+            };
+            borderColor: {
+                base: any;
+                md: string;
+            };
+            paddingTop: string;
+            paddingBottom: string;
+            _dark: {
+                background: string;
+                borderColor: {
+                    base: any;
+                    md: string;
+                };
+            };
+        };
+        drawerContent: {
+            marginStart: string;
+            width: {
+                base: string;
+                md: string;
+            };
+            aside: {
+                color: string;
+                _dark: {
+                    color: string;
+                };
+            };
+        };
+        drawerHeader: {
+            alignItems: string;
+            background: string;
+            borderBottomWidth: string;
+            borderLeftWidth: {
+                base: any;
+                md: string;
+            };
+            borderTopWidth: string;
+            color: string;
+            display: string;
+            fontSize: string;
+            px: string;
+            paddingTop: string;
+            paddingBottom: string;
+            p: {
+                marginBottom: string;
+            };
+            _dark: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        openButton: {
+            position: string;
+            borderRadius: string;
+            bottom: string;
+            right: string;
+            zIndex: string;
+        };
+    };
+};
+export default FeedbackBox;

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

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

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

@@ -0,0 +1,46 @@
+export declare const filterBarWidth: {
+    default: {
+        width: {
+            base: string;
+            md: string;
+        };
+    };
+    full: {
+        width: string;
+    };
+};
+declare const FilterBar: {
+    parts: string[];
+    baseStyle: ({ width }: {
+        width: any;
+    }) => {
+        width: string;
+        modalBody: {
+            _dark: {
+                background: string;
+            };
+        };
+        modalHeader: {
+            bg: string;
+            _dark: {
+                background: string;
+                borderBottom: string;
+                borderColor: string;
+            };
+        };
+        modalFooter: {
+            bg: string;
+            _dark: {
+                background: string;
+                borderTop: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        modalCloseButton: {
+            mt: string;
+        };
+        globalButtonGroupWrapper: any;
+    };
+};
+export default FilterBar;

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

@@ -0,0 +1,141 @@
+/** Export "mixin" styles. */
+export { screenreaderOnly, wrapperStyles } from "./globalMixins";
+/** Reusable component styles. */
+declare const activeFocus: (darkMode?: boolean) => {
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: string;
+    zIndex: string;
+    _dark: {
+        outlineColor: string;
+    };
+};
+declare const checkboxRadioLabelStyles: {
+    userSelect: string;
+    fontWeight: string;
+    marginBottom: string;
+    marginStart: string;
+    width: string;
+    _disabled: {
+        color: string;
+        opacity: number;
+        fontStyle: string;
+    };
+    _invalid: {
+        color: string;
+    };
+    _dark: {
+        _disabled: {
+            color: string;
+        };
+        _invalid: {
+            color: string;
+        };
+    };
+};
+declare const checkboxRadioControlSize: {
+    h: string;
+    w: string;
+};
+declare const checkboxRadioHelperErrorTextStyle: {
+    marginStart: string;
+    _disabled: {
+        color: string;
+        fontStyle: string;
+    };
+};
+declare const checkboxRadioHoverStyles: {
+    _hover: {
+        span: {
+            _first: {
+                borderColor: string;
+            };
+            _checked: {
+                borderColor: string;
+            };
+            _disabled: {
+                borderColor: string;
+            };
+            _invalid: {
+                borderColor: string;
+            };
+        };
+        _dark: {
+            span: {
+                _first: {
+                    borderColor: string;
+                };
+                _checked: {
+                    borderColor: string;
+                };
+                _disabled: {
+                    borderColor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                };
+            };
+        };
+    };
+};
+declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
+    helperErrorText: {
+        marginTop: string;
+    };
+    label: {
+        width: string;
+    };
+};
+declare const defaultElementSizes: {
+    mobileFieldHeight: string;
+};
+declare const labelLegendText: {
+    color: string;
+    display: string;
+    fontSize: string;
+    fontWeight: string;
+    marginBottom: string;
+    width: string;
+    span: {
+        fontWeight: string;
+    };
+    _dark: {
+        color: string;
+    };
+};
+declare const selectTextInputDisabledStyles: {
+    bg: string;
+    borderColor: string;
+    color: string;
+    opacity: string;
+    _dark: {
+        bg: string;
+        borderColor: string;
+        color: string;
+    };
+};
+declare const selectTextInputFocusStyles: {
+    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;
+};
+declare const textMargin: {
+    margin: string;
+    marginBottom: string;
+};
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

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

@@ -0,0 +1,40 @@
+/**
+ * These objects are also SCSS mixins but are now JS objects in the
+ * context of css-in-js and the custom NYPL-theme.
+ */
+/**
+ * If the element that should be visually hidden should only be hidden on
+ * small screens, then pass in true for the `isMobileOnly` argument. Otherwise,
+ * this will set an element to always be visually hidden regardless of the
+ * screen size.
+ */
+declare const screenreaderOnly: (isMobileOnly?: boolean) => {
+    clip: string;
+    height: {
+        base: string;
+        md: string;
+    };
+    overflow: string;
+    position: {
+        base: string;
+        md: string;
+    };
+    width: {
+        base: string;
+        md: string;
+    };
+    wordWrap: string;
+};
+declare const displayScreenreaderOnly: {
+    position: string;
+    height: string;
+    width: string;
+};
+declare const wrapperStyles: {
+    marginY: string;
+    marginX: string;
+    maxWidth: string;
+    padding: string;
+    width: string;
+};
+export { displayScreenreaderOnly, screenreaderOnly, wrapperStyles };