@sebgroup/green-react 1.0.0-beta.3 → 1.0.0-beta.4

package/index.d.ts

@@ -3,3 +3,6 @@ export * from './lib/layout';
 export * from './lib/card/card';
 export * from './lib/alert/alert';
 export * from './lib/form';
+export * from './lib/list/list';
+export * from './lib/navbar/navbar';
+export * from './lib/link/link';

package/{react.esm.js → index.esm.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ModalRole, randomId } from '@sebgroup/extract';
-import { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -301,7 +301,7 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.19.0',
+  version: '3.19.3',
   mode: 'global',
   copyright: '© 2021 Denis Pushkarev (zloirock.ru)'
 });
@@ -1097,15 +1097,16 @@ const ModalFooter = ({
 
 const Modal = _a => {
   var {
-    type = 'default'
+    type = 'default',
+    isOpen
   } = _a,
-      props = __rest(_a, ["type"]);
+      props = __rest(_a, ["type", "isOpen"]);
 
-  return jsxs("section", Object.assign({
+  return isOpen ? jsxs("section", Object.assign({
     role: ModalRole[type]
   }, {
     children: [jsx(ModalHeader, Object.assign({}, props), void 0), jsx(ModalBody, Object.assign({}, props), void 0), jsx(ModalFooter, Object.assign({}, props), void 0)]
-  }), void 0);
+  }), void 0) : null;
 };
 
 var DESCRIPTORS = descriptors;
@@ -1335,9 +1336,9 @@ var Iterators$2 = iterators;
 
 var returnThis$1 = function () { return this; };
 
-var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next) {
+var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next, ENUMERABLE_NEXT) {
   var TO_STRING_TAG = NAME + ' Iterator';
-  IteratorConstructor.prototype = create(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
+  IteratorConstructor.prototype = create(IteratorPrototype$1, { next: createPropertyDescriptor(+!ENUMERABLE_NEXT, next) });
   setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
   Iterators$2[TO_STRING_TAG] = returnThis$1;
   return IteratorConstructor;
@@ -1658,29 +1659,26 @@ function Group({
 
 function Card({
   children,
-  headline,
-  buttons
+  header,
+  footer
 }) {
-  return jsx("section", Object.assign({
+  return jsxs("section", Object.assign({
     className: "card"
   }, {
-    children: jsxs("div", Object.assign({
-      className: "card-body"
-    }, {
-      children: [headline && jsx("h2", {
-        children: headline
-      }, void 0), jsx("p", {
-        children: children
-      }, void 0), buttons && jsx("footer", {
-        children: buttons
-      }, void 0)]
-    }), void 0)
+    children: [jsx("header", {
+      children: header
+    }, void 0), jsx("p", {
+      children: children
+    }, void 0), jsx("footer", {
+      children: footer
+    }, void 0)]
   }), void 0);
 }
 
 function Alert({
   type,
-  heading,
+  header,
+  footer,
   children,
   closeText,
   isCloseable = true
@@ -1690,9 +1688,15 @@ function Alert({
     if (!isCloseable) {
       setCloseButton(null);
     } else {
-      if (closeText) setCloseButton(jsx(Button, {
-        children: closeText
-      }, void 0));else setCloseButton(jsx("button", {
+      if (closeText) setCloseButton(jsx(Button, Object.assign({
+        variant: "ghost"
+      }, {
+        children: jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: closeText
+        }), void 0)
+      }), void 0));else setCloseButton(jsx("button", {
         className: "close"
       }, void 0));
     }
@@ -1701,11 +1705,15 @@ function Alert({
     role: "alert",
     className: type
   }, {
-    children: [heading && jsx("h3", {
-      children: heading
+    children: [header && jsxs("header", {
+      children: [/*#__PURE__*/React.isValidElement(header) ? header : jsx("h3", {
+        children: header
+      }, void 0), closeButton]
     }, void 0), jsx("p", {
       children: children
-    }, void 0), closeButton]
+    }, void 0), footer && jsx("footer", {
+      children: footer
+    }, void 0)]
   }), void 0);
 }
 
@@ -1740,10 +1748,10 @@ const ButtonGroup = ({
 function Form({
   children,
   direction = 'vertical',
-  size = 'md'
+  formSize = 'md'
 }) {
   return jsx("form", Object.assign({
-    className: [direction, `size-${size}`].join(' ')
+    className: [direction, `size-${formSize}`].join(' ')
   }, {
     children: children
   }), void 0);
@@ -1980,4 +1988,154 @@ const Checkbox = _a => {
   }), void 0);
 };
 
-export { Alert, Button, ButtonGroup, Card, Checkbox, EmailInput, Flexbox, Form, Group, Modal, NumberInput, TextInput };
+const Text = ({
+  children
+}) => jsx("span", Object.assign({
+  className: "form-text"
+}, {
+  children: children
+}), void 0);
+
+const ListItem = _a => {
+  var {
+    listType,
+    tableRowData,
+    children
+  } = _a,
+      props = __rest(_a, ["listType", "tableRowData", "children"]);
+
+  if (listType === 'table') {
+    return jsx("dl", {
+      children: jsxs("div", {
+        children: [jsx("dt", {
+          children: tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.title
+        }, void 0), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.definition.map((item, index) => jsx("dd", {
+          children: item
+        }, index))]
+      }, void 0)
+    }, void 0);
+  } else {
+    return jsx("li", Object.assign({}, props, {
+      children: children
+    }), void 0);
+  }
+};
+
+const List = _a => {
+  var {
+    listType,
+    tableCaption,
+    tableData,
+    children
+  } = _a,
+      props = __rest(_a, ["listType", "tableCaption", "tableData", "children"]);
+
+  if (listType === 'ordered') {
+    return jsx("ol", Object.assign({}, props, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+        children: child
+      }, index))
+    }), void 0);
+  } else if (listType !== 'table') {
+    return jsx("ul", Object.assign({}, props, {
+      className: listType
+    }, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+        children: child
+      }, index))
+    }), void 0);
+  } else {
+    return jsxs("figure", {
+      children: [jsx("figcaption", Object.assign({
+        className: "table-list-caption"
+      }, {
+        children: tableCaption
+      }), void 0), jsx("dl", {
+        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem, {
+          listType: listType,
+          tableRowData: data
+        }, index))
+      }, void 0)]
+    }, void 0);
+  }
+};
+
+const Link = _a => {
+  var {
+    button,
+    children
+  } = _a,
+      props = __rest(_a, ["button", "children"]);
+
+  const [anchorProps, setAnchorProps] = useState({});
+  useEffect(() => {
+    const className = button ? typeof button === 'string' ? `button ${button}` : 'button' : undefined;
+    const newProps = Object.assign({
+      role: button ? 'button' : undefined,
+      className: className
+    }, props);
+    setAnchorProps(newProps);
+  }, [button]);
+  return jsx("a", Object.assign({}, anchorProps, {
+    children: children
+  }), void 0);
+};
+
+const Navbar = ({
+  children,
+  variant,
+  title,
+  titleLink,
+  brandLink: _brandLink = 'https://www.seb.se',
+  brandAriaLabel: _brandAriaLabel = 'Open seb.se in new tab'
+}) => {
+  const [props, setProps] = useState({});
+  useEffect(() => {
+    const classNames = [];
+    if (variant) classNames.push(variant);
+    setProps(Object.assign(Object.assign({}, props), {
+      className: classNames.join(' ')
+    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [variant]);
+  return jsxs("nav", Object.assign({
+    role: "navigation"
+  }, props, {
+    children: [jsx(Link, {
+      "aria-label": _brandAriaLabel,
+      href: _brandLink,
+      target: "_blank",
+      className: "brand"
+    }, void 0), jsx("div", Object.assign({
+      className: "container-fluid"
+    }, {
+      children: jsxs("div", Object.assign({
+        className: "row justify-content-between align-items-center"
+      }, {
+        children: [jsx("div", Object.assign({
+          className: "col-auto"
+        }, {
+          children: titleLink ? jsx(Link, Object.assign({
+            className: "mx-4",
+            href: titleLink
+          }, {
+            children: jsx("h1", {
+              children: title
+            }, void 0)
+          }), void 0) : jsx("h1", {
+            children: title
+          }, void 0)
+        }), void 0), jsx("div", Object.assign({
+          className: "col-auto"
+        }, {
+          children: jsx("div", Object.assign({
+            className: "group size-sm"
+          }, {
+            children: children
+          }), void 0)
+        }), void 0)]
+      }), void 0)
+    }), void 0)]
+  }), void 0);
+};
+
+export { Alert, Button, ButtonGroup, Card, Checkbox, EmailInput, Flexbox, Form, Group, Link, List, Modal, Navbar, NumberInput, Text, TextInput };

package/{react.umd.js → index.umd.js}

@@ -2,7 +2,11 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@sebgroup/extract'), require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@sebgroup/extract', 'react'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.jsxRuntime, global.extract, global.React));
-})(this, (function (exports, jsxRuntime, extract, react) { 'use strict';
+})(this, (function (exports, jsxRuntime, extract, React) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -136,13 +140,14 @@
     var Modal = function Modal(_a) {
       var _b = _a.type,
           type = _b === void 0 ? 'default' : _b,
-          props = __rest(_a, ["type"]);
+          isOpen = _a.isOpen,
+          props = __rest(_a, ["type", "isOpen"]);
 
-      return jsxRuntime.jsxs("section", __assign({
+      return isOpen ? jsxRuntime.jsxs("section", __assign({
         role: extract.ModalRole[type]
       }, {
         children: [jsxRuntime.jsx(ModalHeader, __assign({}, props), void 0), jsxRuntime.jsx(ModalBody, __assign({}, props), void 0), jsxRuntime.jsx(ModalFooter, __assign({}, props), void 0)]
-      }), void 0);
+      }), void 0) : null;
     };
 
     var Flexbox = function Flexbox(_a) {
@@ -152,26 +157,26 @@
           children = _a.children,
           justifyContent = _a.justifyContent;
 
-      var _b = react.useState(['d-flex']),
+      var _b = React.useState(['d-flex']),
           classes = _b[0],
           setClasses = _b[1];
 
-      var _c = react.useState('d-flex'),
+      var _c = React.useState('d-flex'),
           className = _c[0],
           setClassName = _c[1]; // update className when classes change
 
 
-      react.useEffect(function () {
+      React.useEffect(function () {
         var newClassName = classes.join(' ');
         if (newClassName !== className) setClassName(newClassName);
       }, [classes, className]); // update classes when props change
 
-      react.useEffect(function () {
+      React.useEffect(function () {
         var newClasses = ['d-flex'];
-        if (alignItems) newClasses.push("align-items-" + alignItems);
-        if (alignContent) newClasses.push("align-content-" + alignContent);
-        if (alignSelf) newClasses.push("align-content-" + alignSelf);
-        if (justifyContent) newClasses.push("justify-content-" + justifyContent);
+        if (alignItems) newClasses.push("align-items-".concat(alignItems));
+        if (alignContent) newClasses.push("align-content-".concat(alignContent));
+        if (alignSelf) newClasses.push("align-content-".concat(alignSelf));
+        if (justifyContent) newClasses.push("justify-content-".concat(justifyContent));
         setClasses(newClasses);
       }, [alignContent, alignItems, alignSelf, justifyContent]);
       return jsxRuntime.jsx("div", __assign({
@@ -192,44 +197,47 @@
 
     function Card(_a) {
       var children = _a.children,
-          headline = _a.headline,
-          buttons = _a.buttons;
-      return jsxRuntime.jsx("section", __assign({
+          header = _a.header,
+          footer = _a.footer;
+      return jsxRuntime.jsxs("section", __assign({
         className: "card"
       }, {
-        children: jsxRuntime.jsxs("div", __assign({
-          className: "card-body"
-        }, {
-          children: [headline && jsxRuntime.jsx("h2", {
-            children: headline
-          }, void 0), jsxRuntime.jsx("p", {
-            children: children
-          }, void 0), buttons && jsxRuntime.jsx("footer", {
-            children: buttons
-          }, void 0)]
-        }), void 0)
+        children: [jsxRuntime.jsx("header", {
+          children: header
+        }, void 0), jsxRuntime.jsx("p", {
+          children: children
+        }, void 0), jsxRuntime.jsx("footer", {
+          children: footer
+        }, void 0)]
       }), void 0);
     }
 
     function Alert(_a) {
       var type = _a.type,
-          heading = _a.heading,
+          header = _a.header,
+          footer = _a.footer,
           children = _a.children,
           closeText = _a.closeText,
           _b = _a.isCloseable,
           isCloseable = _b === void 0 ? true : _b;
 
-      var _c = react.useState(),
+      var _c = React.useState(),
           closeButton = _c[0],
           setCloseButton = _c[1];
 
-      react.useEffect(function () {
+      React.useEffect(function () {
         if (!isCloseable) {
           setCloseButton(null);
         } else {
-          if (closeText) setCloseButton(jsxRuntime.jsx(Button, {
-            children: closeText
-          }, void 0));else setCloseButton(jsxRuntime.jsx("button", {
+          if (closeText) setCloseButton(jsxRuntime.jsx(Button, __assign({
+            variant: "ghost"
+          }, {
+            children: jsxRuntime.jsx("span", __assign({
+              className: "sr-only"
+            }, {
+              children: closeText
+            }), void 0)
+          }), void 0));else setCloseButton(jsxRuntime.jsx("button", {
             className: "close"
           }, void 0));
         }
@@ -238,11 +246,15 @@
         role: "alert",
         className: type
       }, {
-        children: [heading && jsxRuntime.jsx("h3", {
-          children: heading
+        children: [header && jsxRuntime.jsxs("header", {
+          children: [/*#__PURE__*/React__default["default"].isValidElement(header) ? header : jsxRuntime.jsx("h3", {
+            children: header
+          }, void 0), closeButton]
         }, void 0), jsxRuntime.jsx("p", {
           children: children
-        }, void 0), closeButton]
+        }, void 0), footer && jsxRuntime.jsx("footer", {
+          children: footer
+        }, void 0)]
       }), void 0);
     }
 
@@ -251,15 +263,15 @@
           selectedIndex = _a.selectedIndex,
           variant = _a.variant;
 
-      var _b = react.useState(selectedIndex),
+      var _b = React.useState(selectedIndex),
           selected = _b[0],
           setSelected = _b[1];
 
-      var _c = react.useState([]),
+      var _c = React.useState([]),
           buttons = _c[0],
           setButtons = _c[1];
 
-      react.useEffect(function () {
+      React.useEffect(function () {
         var buttonProps = (children instanceof Array ? children : [children]).filter(function (b) {
           return b && b.props;
         }).map(function (b, ix) {
@@ -267,7 +279,7 @@
 
           var props = __assign(__assign({}, bp), {
             variant: variant,
-            key: bp.key || "btn_" + ix,
+            key: bp.key || "btn_".concat(ix),
             active: ix === selected,
             onClick: function (e) {
               setSelected(ix);
@@ -290,10 +302,10 @@
       var children = _a.children,
           _b = _a.direction,
           direction = _b === void 0 ? 'vertical' : _b,
-          _c = _a.size,
-          size = _c === void 0 ? 'md' : _c;
+          _c = _a.formSize,
+          formSize = _c === void 0 ? 'md' : _c;
       return jsxRuntime.jsx("form", __assign({
-        className: [direction, "size-" + size].join(' ')
+        className: [direction, "size-".concat(formSize)].join(' ')
       }, {
         children: children
       }), void 0);
@@ -598,7 +610,7 @@
     (shared$3.exports = function (key, value) {
       return store$2[key] || (store$2[key] = value !== undefined ? value : {});
     })('versions', []).push({
-      version: '3.19.0',
+      version: '3.19.3',
       mode: 'global',
       copyright: '© 2021 Denis Pushkarev (zloirock.ru)'
     });
@@ -1317,20 +1329,20 @@
     });
 
     var useInput = function useInput(props, evaluator, notify) {
-      var id = react.useMemo(function () {
+      var id = React.useMemo(function () {
         return props.id || extract.randomId();
       }, [props.id]);
-      var ref = react.useRef(null);
+      var ref = React.useRef(null);
 
-      var _a = react.useState(props.value),
+      var _a = React.useState(props.value),
           value = _a[0],
           setValue = _a[1];
 
-      var _b = react.useState(props.checked),
+      var _b = React.useState(props.checked),
           checked = _b[0],
           setChecked = _b[1];
 
-      react.useEffect(function () {
+      React.useEffect(function () {
         if (ref.current && ref.current.form) {
           var resetListener_1 = function resetListener_1() {
             setValue(props.value);
@@ -1369,7 +1381,7 @@
           inputProps = __rest(_a, ["value"]);
 
       var propsWithDescription = info ? __assign(__assign({}, inputProps), {
-        'aria-describedby': inputProps.id + "_info"
+        'aria-describedby': "".concat(inputProps.id, "_info")
       }) : inputProps;
       return jsxRuntime.jsxs("div", __assign({
         className: "form-field"
@@ -1438,6 +1450,169 @@
       }), void 0);
     };
 
+    var Text = function Text(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("span", __assign({
+        className: "form-text"
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var ListItem = function ListItem(_a) {
+      var listType = _a.listType,
+          tableRowData = _a.tableRowData,
+          children = _a.children,
+          props = __rest(_a, ["listType", "tableRowData", "children"]);
+
+      if (listType === 'table') {
+        return jsxRuntime.jsx("dl", {
+          children: jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx("dt", {
+              children: tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.title
+            }, void 0), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.definition.map(function (item, index) {
+              return jsxRuntime.jsx("dd", {
+                children: item
+              }, index);
+            })]
+          }, void 0)
+        }, void 0);
+      } else {
+        return jsxRuntime.jsx("li", __assign({}, props, {
+          children: children
+        }), void 0);
+      }
+    };
+
+    var List = function List(_a) {
+      var listType = _a.listType,
+          tableCaption = _a.tableCaption,
+          tableData = _a.tableData,
+          children = _a.children,
+          props = __rest(_a, ["listType", "tableCaption", "tableData", "children"]);
+
+      if (listType === 'ordered') {
+        return jsxRuntime.jsx("ol", __assign({}, props, {
+          children: children === null || children === void 0 ? void 0 : children.map(function (child, index) {
+            return jsxRuntime.jsx(ListItem, {
+              children: child
+            }, index);
+          })
+        }), void 0);
+      } else if (listType !== 'table') {
+        return jsxRuntime.jsx("ul", __assign({}, props, {
+          className: listType
+        }, {
+          children: children === null || children === void 0 ? void 0 : children.map(function (child, index) {
+            return jsxRuntime.jsx(ListItem, {
+              children: child
+            }, index);
+          })
+        }), void 0);
+      } else {
+        return jsxRuntime.jsxs("figure", {
+          children: [jsxRuntime.jsx("figcaption", __assign({
+            className: "table-list-caption"
+          }, {
+            children: tableCaption
+          }), void 0), jsxRuntime.jsx("dl", {
+            children: tableData === null || tableData === void 0 ? void 0 : tableData.map(function (data, index) {
+              return jsxRuntime.jsx(ListItem, {
+                listType: listType,
+                tableRowData: data
+              }, index);
+            })
+          }, void 0)]
+        }, void 0);
+      }
+    };
+
+    var Link = function Link(_a) {
+      var button = _a.button,
+          children = _a.children,
+          props = __rest(_a, ["button", "children"]);
+
+      var _b = React.useState({}),
+          anchorProps = _b[0],
+          setAnchorProps = _b[1];
+
+      React.useEffect(function () {
+        var className = button ? typeof button === 'string' ? "button ".concat(button) : 'button' : undefined;
+
+        var newProps = __assign({
+          role: button ? 'button' : undefined,
+          className: className
+        }, props);
+
+        setAnchorProps(newProps);
+      }, [button]);
+      return jsxRuntime.jsx("a", __assign({}, anchorProps, {
+        children: children
+      }), void 0);
+    };
+
+    var Navbar = function Navbar(_a) {
+      var children = _a.children,
+          variant = _a.variant,
+          title = _a.title,
+          titleLink = _a.titleLink,
+          _b = _a.brandLink,
+          brandLink = _b === void 0 ? 'https://www.seb.se' : _b,
+          _c = _a.brandAriaLabel,
+          brandAriaLabel = _c === void 0 ? 'Open seb.se in new tab' : _c;
+
+      var _d = React.useState({}),
+          props = _d[0],
+          setProps = _d[1];
+
+      React.useEffect(function () {
+        var classNames = [];
+        if (variant) classNames.push(variant);
+        setProps(__assign(__assign({}, props), {
+          className: classNames.join(' ')
+        })); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [variant]);
+      return jsxRuntime.jsxs("nav", __assign({
+        role: "navigation"
+      }, props, {
+        children: [jsxRuntime.jsx(Link, {
+          "aria-label": brandAriaLabel,
+          href: brandLink,
+          target: "_blank",
+          className: "brand"
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: "container-fluid"
+        }, {
+          children: jsxRuntime.jsxs("div", __assign({
+            className: "row justify-content-between align-items-center"
+          }, {
+            children: [jsxRuntime.jsx("div", __assign({
+              className: "col-auto"
+            }, {
+              children: titleLink ? jsxRuntime.jsx(Link, __assign({
+                className: "mx-4",
+                href: titleLink
+              }, {
+                children: jsxRuntime.jsx("h1", {
+                  children: title
+                }, void 0)
+              }), void 0) : jsxRuntime.jsx("h1", {
+                children: title
+              }, void 0)
+            }), void 0), jsxRuntime.jsx("div", __assign({
+              className: "col-auto"
+            }, {
+              children: jsxRuntime.jsx("div", __assign({
+                className: "group size-sm"
+              }, {
+                children: children
+              }), void 0)
+            }), void 0)]
+          }), void 0)
+        }), void 0)]
+      }), void 0);
+    };
+
     exports.Alert = Alert;
     exports.Button = Button;
     exports.ButtonGroup = ButtonGroup;
@@ -1447,8 +1622,12 @@
     exports.Flexbox = Flexbox;
     exports.Form = Form;
     exports.Group = Group;
+    exports.Link = Link;
+    exports.List = List;
     exports.Modal = Modal;
+    exports.Navbar = Navbar;
     exports.NumberInput = NumberInput;
+    exports.Text = Text;
     exports.TextInput = TextInput;
 
     Object.defineProperty(exports, '__esModule', { value: true });

package/lib/alert/alert.d.ts

@@ -3,9 +3,10 @@ import { ReactNode } from 'react';
 export interface AlertProps {
     children: ReactNode;
     type: AlertType;
-    heading?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
     isCloseable?: boolean;
     closeText?: string;
 }
-export declare function Alert({ type, heading, children, closeText, isCloseable, }: AlertProps): JSX.Element;
+export declare function Alert({ type, header, footer, children, closeText, isCloseable, }: AlertProps): JSX.Element;
 export default Alert;

package/lib/card/card.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
-import Button from '../form/button';
 export interface CardProps {
     children?: ReactNode;
-    headline?: string;
-    buttons?: typeof Button[];
+    header?: ReactNode;
+    footer?: ReactNode;
 }
-export declare function Card({ children, headline, buttons }: CardProps): JSX.Element;
+export declare function Card({ children, header, footer }: CardProps): JSX.Element;
 export default Card;

package/lib/form/{buttonGroup.d.ts → buttonGroup/buttonGroup.d.ts}

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
 import { ButtonVariant } from '@sebgroup/extract';
-import { ButtonProps } from './button';
+import { ButtonProps } from '../button/button';
 interface ButtonGroupProps {
     children: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
     selectedIndex?: number;
     variant?: ButtonVariant;
 }
-export declare const ButtonGroup: ({ children, selectedIndex, variant }: ButtonGroupProps) => JSX.Element;
+export declare const ButtonGroup: ({ children, selectedIndex, variant, }: ButtonGroupProps) => JSX.Element;
 export default ButtonGroup;

package/lib/form/form.d.ts

@@ -1,9 +1,9 @@
 import { FormDirection, Size } from '@sebgroup/extract';
-import { ReactNode } from 'react';
-export interface FormProps {
+import { HTMLProps, ReactNode } from 'react';
+export interface FormProps extends HTMLProps<HTMLFormElement> {
     children?: ReactNode;
     direction?: FormDirection;
-    size?: Size;
+    formSize?: Size;
 }
-export declare function Form({ children, direction, size, }: FormProps): JSX.Element;
+export declare function Form({ children, direction, formSize, }: FormProps): JSX.Element;
 export default Form;

package/lib/form/index.d.ts

@@ -1,5 +1,5 @@
-export * from './button';
-export * from './buttonGroup';
+export * from './button/button';
+export * from './buttonGroup/buttonGroup';
 export * from './form';
-export * from './input';
-export * from './text';
+export * from './input/input';
+export * from './text/text';

package/lib/form/{input.d.ts → input/input.d.ts}

@@ -1,4 +1,4 @@
-import { CheckboxProps, TextInputProps } from './types';
+import { CheckboxProps, TextInputProps } from '../types';
 export declare const TextInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
 export declare const EmailInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
 export declare const NumberInput: ({ label, info, onChangeText, ...props }: TextInputProps<number>) => JSX.Element;

package/lib/form/{text.d.ts → text/text.d.ts}

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface TextProps {
     children: ReactNode;
 }
-declare const Text: ({ children }: TextProps) => JSX.Element;
+export declare const Text: ({ children }: TextProps) => JSX.Element;
 export default Text;

package/lib/layout/index.d.ts

@@ -1,2 +1,2 @@
-export * from './flexbox';
-export * from './group';
+export * from './flexbox/flexbox';
+export * from './group/group';

package/lib/link/link.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PropsWithChildren } from 'react';
+import { ButtonVariant } from '@sebgroup/extract';
+interface LinkProps extends HTMLProps<HTMLAnchorElement> {
+    button?: boolean | ButtonVariant;
+}
+export declare const Link: ({ button, children, ...props }: PropsWithChildren<LinkProps>) => JSX.Element;
+export default Link;

package/lib/list/list.d.ts

@@ -0,0 +1,14 @@
+import { ListType } from '@sebgroup/extract';
+import { ReactNode, HTMLAttributes } from 'react';
+export interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
+    listType?: ListType;
+    tableCaption?: string;
+    tableData?: TableListProps[];
+    children?: ReactNode[];
+}
+export interface TableListProps {
+    title: string;
+    definition: string[];
+}
+export declare const List: ({ listType, tableCaption, tableData, children, ...props }: ListProps) => JSX.Element;
+export default List;

package/lib/list/listItem.d.ts

@@ -0,0 +1,10 @@
+import { ListType } from '@sebgroup/extract';
+import { HTMLAttributes, ReactNode } from 'react';
+import { TableListProps } from './list';
+interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    listType?: ListType;
+    tableRowData?: TableListProps;
+    children?: ReactNode;
+}
+declare const ListItem: ({ listType, tableRowData, children, ...props }: ListItemProps) => JSX.Element;
+export default ListItem;

package/lib/modal/modal.d.ts

@@ -8,9 +8,10 @@ export interface ModalProps {
     confirm?: string;
     dismiss?: string;
     size?: Size;
+    isOpen?: boolean;
     onClose?: ModalEventListener;
     onConfirm?: ModalEventListener;
     onDismiss?: ModalEventListener;
 }
-export declare const Modal: ({ type, ...props }: ModalProps) => JSX.Element;
+export declare const Modal: ({ type, isOpen, ...props }: ModalProps) => JSX.Element | null;
 export default Modal;

package/lib/navbar/navbar.d.ts

@@ -0,0 +1,12 @@
+import { NavbarVariant } from '@sebgroup/extract';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface NavProps extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    titleLink?: string;
+    brandLink?: string;
+    brandAriaLabel?: string;
+    variant?: NavbarVariant;
+    children?: ReactNode;
+}
+export declare const Navbar: ({ children, variant, title, titleLink, brandLink, brandAriaLabel, }: NavProps) => JSX.Element;
+export default Navbar;

package/lib/tabs/tabs.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface IList {
+    text?: string;
+    href?: string;
+}
+interface TabsProps {
+    list?: IList[];
+    disabled?: boolean;
+    children?: ReactNode[];
+}
+export declare const Tabs: ({ list, disabled, children, ...props }: TabsProps) => JSX.Element;
+export default Tabs;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "merge": "^2.1.1",
     "@popperjs/core": "^2.11.0",
-    "rxjs": "^6.6.7",
-    "merge": "^2.1.1"
+    "rxjs": "^6.6.7"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.3",
-    "@sebgroup/extract": "^1.0.0-beta.3"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.4",
+    "@sebgroup/extract": "^1.0.0-beta.4"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {
@@ -28,7 +28,7 @@
     "url": "https://github.com/sebgroup/green/labels/react"
   },
   "homepage": "https://sebgroup.github.io/green/latest/react/",
-  "main": "./react.umd.js",
-  "module": "./react.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts"
 }