@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -1,4 +1,5 @@
 declare const Radio: {
+    parts: string[];
     baseStyle: {
         control: {
             verticalAlign: string;
@@ -36,8 +37,8 @@ declare const Radio: {
                 _before: {
                     content: string;
                     display: string;
-                    w: number;
-                    h: number;
+                    w: string;
+                    h: string;
                     borderRadius: string;
                     bg: string;
                 };
@@ -56,10 +57,10 @@ declare const Radio: {
         };
         label: {
             userSelect: string;
-            fontSize: number;
+            fontSize: string;
             fontWeight: string;
-            marginBottom: number;
-            marginLeft: number;
+            marginBottom: string;
+            marginLeft: string;
             verticalAlign: string;
             _disabled: {
                 color: string;
@@ -71,12 +72,12 @@ declare const Radio: {
             };
         };
         helper: {
-            marginTop: number;
-            marginBottom: number;
             marginLeft: string;
             _disabled: {
                 fontStyle: string;
             };
+            marginTop: string;
+            marginBottom: string;
         };
     };
     sizes: {

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

@@ -0,0 +1,20 @@
+declare const SearchBar: {
+    parts: string[];
+    baseStyle: {
+        topRow: {
+            display: string;
+            marginBottom: {
+                base: string;
+                md: string;
+            };
+            flexFlow: {
+                base: string;
+                md: string;
+            };
+        };
+        button: {
+            marginBottom: string;
+        };
+    };
+};
+export default SearchBar;

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

@@ -0,0 +1,58 @@
+declare const Select: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        select: {
+            borderRadius: string;
+            borderColor: string;
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            _hover: {
+                borderColor: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _disabled: {
+                color: string;
+                bg: string;
+                opacity: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchbar: {
+            select: {
+                flex: string;
+                borderRight: string;
+                borderRightRadius: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Select;

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

@@ -0,0 +1,25 @@
+declare const StatusBadge: {
+    baseStyle: {
+        borderRadius: string;
+        color: string;
+        display: string;
+        fontSize: string;
+        fontStyle: string;
+        py: string;
+        px: string;
+        textAlign: string;
+        width: string;
+    };
+    variants: {
+        low: {
+            bg: string;
+        };
+        medium: {
+            bg: string;
+        };
+        high: {
+            bg: string;
+        };
+    };
+};
+export default StatusBadge;

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

@@ -1,10 +1,10 @@
 declare const CustomTabs: {
+    parts: string[];
     baseStyle: {
-        tablist: {};
         tab: {
             color: string;
-            paddingInlineStart: number;
-            paddingLeft: number;
+            paddingInlineStart: string;
+            paddingLeft: string;
             background: string;
             border: string;
             borderBottom: string;
@@ -14,14 +14,14 @@ declare const CustomTabs: {
                 md: string;
             };
             paddingRight: {
-                base: number;
-                md: number;
-                lg: number;
+                base: string;
+                md: string;
+                lg: string;
             };
             whiteSpace: string;
             _hover: {
                 bg: string;
-                borderTopRadius: number;
+                borderTopRadius: string;
                 borderBottom: string;
                 borderBottomColor: string;
             };
@@ -29,13 +29,13 @@ declare const CustomTabs: {
                 fontWeight: string;
                 bg: string;
                 border: string;
-                borderTopRadius: number;
+                borderTopRadius: string;
                 borderBottom: string;
                 borderBottomColor: string;
                 paddingBottom: string;
             };
             _focus: {
-                boxShadow: number;
+                boxShadow: string;
             };
         };
         buttonArrows: {

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

@@ -0,0 +1,105 @@
+declare const _default: {
+    Template: {
+        baseStyle: {
+            boxSizing: string;
+            color: string;
+            overflowX: string;
+            "*": {
+                boxSizing: string;
+            };
+            "*::after": {
+                boxSizing: string;
+            };
+            "*::before": {
+                boxSizing: string;
+            };
+        };
+        sizes: {};
+        defaultProps: {};
+    };
+    TemplateHeader: {
+        baseStyle: {
+            marginBottom: number;
+        };
+    };
+    TemplateBreakout: {
+        baseStyle: {
+            width: string;
+            marginBottom: number;
+            marginLeft: string;
+            marginRight: string;
+        };
+    };
+    TemplateContent: {
+        baseStyle: {
+            display: string;
+            marginBottom: number;
+            marginY: number;
+            marginX: string;
+            maxWidth: string;
+            paddingTop: number;
+            paddingBottom: number;
+            paddingRight: number;
+            paddingLeft: number;
+            width: string;
+        };
+        variants: {
+            sidebar: {
+                display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentTop: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+    };
+    TemplateContentPrimary: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                display: string;
+                flexFlow: string;
+                order: string;
+                marginRight: {
+                    md: number;
+                };
+                minWidth: {
+                    md: number;
+                };
+            };
+        };
+    };
+    TemplateContentSidebar: {
+        baseStyle: {
+            flex: string;
+            order: {
+                md: string;
+            };
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                marginRight: {
+                    base: number;
+                    md: number;
+                };
+            };
+            right: {
+                marginLeft: {
+                    base: number;
+                    md: number;
+                };
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,20 @@
+declare const Text: {
+    baseStyle: (props: any) => {
+        fontStyle: string;
+        fontWeight: string;
+        marginBottom: string;
+    };
+    variants: {
+        default: {};
+        caption: {
+            fontSize: string;
+        };
+        tag: {
+            fontSize: string;
+        };
+        mini: {
+            fontSize: string;
+        };
+    };
+};
+export default Text;

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

@@ -0,0 +1,105 @@
+declare const TextInput: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        input: {
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+        textarea: {
+            lineheight: string;
+            minHeight: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchBar: {
+            flex: string;
+            input: {
+                borderRightRadius: string;
+            };
+        };
+        searchBarSelect: {
+            flex: string;
+            input: {
+                borderRadius: string;
+            };
+        };
+    };
+};
+export default TextInput;

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

@@ -9,6 +9,9 @@ declare const global: {
         bg: string;
         color: string;
         fontFamily: string;
+        fontSize: number;
+        fontWeight: string;
+        lineHeight: string;
     };
     a: {
         color: string;

package/dist/theme/foundations/shadows.d.ts

@@ -0,0 +1,4 @@
+declare const shadows: {
+    outline: string;
+};
+export default shadows;

package/dist/utils/utils.d.ts

@@ -4,3 +4,9 @@
  * `step` between values.
  */
 export declare const range: (start: number, stop: number, step?: number) => number[];
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
+export declare const getVariant: (variant: any, collection: any, fallback?: any) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -38,7 +38,8 @@
     "stylelint": "stylelint \"**/*.scss\""
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.6",
+    "@chakra-ui/react": "1.6.8",
+    "@chakra-ui/system": "1.7.3",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mdx-js/react": "^1.6.22",