@sebgroup/green-react 1.0.0-beta.42 → 1.0.0-beta.44

package/index.d.ts

@@ -9,3 +9,4 @@ export * from './lib/link/link';
 export * from './lib/badge/badge';
 export * from './lib/stepper/stepper';
 export * from './lib/dropdown/dropdown';
+export * from './lib/datepicker/datepicker';

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
-import { randomId, validateClassName, createStepper, createDropdown, dropdownValues } from '@sebgroup/extract';
+import { randomId, validateClassName, createStepper, createDropdown, dropdownValues, createDatepicker, months, years } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1094,15 +1094,15 @@ const ModalHeader = ({
   }, {
     children: [jsx("h3", {
       children: _header
-    }), jsx("button", Object.assign({
+    }), jsxs("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
-      children: jsx("span", Object.assign({
+      children: [jsx("span", Object.assign({
         className: "sr-only"
       }, {
         children: "Close"
-      }))
+      })), jsx("i", {})]
     }))]
   }));
 };
@@ -1780,17 +1780,23 @@ function Alert({
     if (!isCloseable) {
       setCloseButton(null);
     } else {
-      if (closeText) setCloseButton(jsx(Button, Object.assign({
-        variant: "ghost"
+      if (closeText) setCloseButton(jsxs("button", Object.assign({
+        className: "close"
       }, {
-        children: jsx("span", Object.assign({
+        children: [jsx("span", Object.assign({
           className: "sr-only"
         }, {
           children: closeText
-        }))
-      })));else setCloseButton(jsx("button", {
+        })), jsx("i", {})]
+      })));else setCloseButton(jsxs("button", Object.assign({
         className: "close"
-      }));
+      }, {
+        children: [jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: "Close"
+        })), jsx("i", {})]
+      })));
     }
   }, [isCloseable, closeText]);
   return jsxs("div", Object.assign({
@@ -1837,6 +1843,7 @@ const ButtonGroup = ({
   });
 };
 
+/* eslint-disable-next-line */
 const validateInputValue = (target, rules, setError) => {
   const errorMessage = validateInputValueErrors(rules, target);
   errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
@@ -1854,17 +1861,24 @@ const validateInputValueErrors = (rules, target) => {
 
   return validateTextInputValues(value, rules);
 };
+/* eslint-disable-next-line */
+
 
 const setErrorInsert = (setError, name) => {
+  /* eslint-disable-next-line */
   setError(errors => {
     return Object.assign(Object.assign({}, errors), {
       [name]: true
     });
   });
 };
+/* eslint-disable-next-line */
+
 
 const setErrorRemove = (setError, name) => {
+  /* eslint-disable-next-line */
   setError(errors => {
+    /* eslint-disable-next-line */
     const newError = Object.assign({}, errors);
     delete newError[name];
     return newError;
@@ -1898,9 +1912,15 @@ const FormProvider = _a => {
     onFormSubmit
   } = _a,
       props = __rest(_a, ["children", "direction", "formSize", "onSubmit", "onFormSubmit"]);
+  /* eslint-disable-next-line */
+
 
   const [values, setValues] = React.useState();
+  /* eslint-disable-next-line */
+
   const [errors, setErrors] = React.useState();
+  /* eslint-disable-next-line */
+
   const [fields, setFields] = React.useState({});
 
   const formSubmit = event => {
@@ -1960,21 +1980,29 @@ const FormItems = ({
     errors
   } = useFormContext();
   React.useEffect(() => {
+    /* eslint-disable-next-line */
     setFields(fields => Object.assign(Object.assign({}, fields), {
       [name]: validate === null || validate === void 0 ? void 0 : validate.rules
     }));
+    /* eslint-disable-next-line */
 
     const removeValues = values => {
+      /* eslint-disable-next-line */
       const newValues = Object.assign({}, values);
       delete newValues[name];
       return newValues;
     };
 
     return () => {
+      /* eslint-disable-next-line */
       setFields(fields => removeValues(fields));
+      /* eslint-disable-next-line */
+
       setValues(values => removeValues(values));
+      /* eslint-disable-next-line */
+
       setErrors(errors => removeValues(errors));
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onChange = event => {
@@ -1989,6 +2017,8 @@ const FormItems = ({
 
     if (type === 'checkbox') {
       inputValue = checked ? value : null;
+      /* eslint-disable-next-line */
+
       checked ? setValues(values => Object.assign(Object.assign({}, values), {
         [name]: value
       })) : setValues(values => Object.assign(Object.assign({}, values), {
@@ -1996,6 +2026,8 @@ const FormItems = ({
       }));
     } else {
       inputValue = value;
+      /* eslint-disable-next-line */
+
       setValues(values => Object.assign(Object.assign({}, values), {
         [name]: value
       }));
@@ -2008,6 +2040,8 @@ const FormItems = ({
       checked
     }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
   };
+  /* eslint-disable-next-line */
+
 
   return /*#__PURE__*/React.cloneElement(children, {
     validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
@@ -2160,26 +2194,24 @@ const Checkbox = _a => {
 
   const inputProps = useInput(props, onChange);
   const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
-  return jsx(Fragment, {
-    children: jsxs("div", Object.assign({
-      className: "form-group"
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [jsxs("label", Object.assign({
+      htmlFor: inputProps.id,
+      className: `form-control ${validatorClassName}`
     }, {
-      children: [jsxs("label", Object.assign({
-        htmlFor: inputProps.id,
-        className: `form-control ${validatorClassName}`
-      }, {
-        children: [label, jsx("input", Object.assign({
-          type: "checkbox"
-        }, inputProps, {
-          className: validatorClassName
-        })), jsx("i", {})]
-      })), validator && jsx("span", Object.assign({
-        className: "form-info"
-      }, {
-        children: validator.message
-      }))]
-    }))
-  });
+      children: [label, jsx("input", Object.assign({
+        type: "checkbox"
+      }, inputProps, {
+        className: validatorClassName
+      })), jsx("i", {})]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator.message
+    }))]
+  }));
 };
 const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
@@ -2358,7 +2390,8 @@ const RadioGroup = ({
     } else {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
   return jsxs("div", Object.assign({
     className: "form-group"
@@ -2469,7 +2502,7 @@ const Link = _a => {
       role: button ? 'button' : undefined,
       className: className
     }, props);
-    setAnchorProps(newProps);
+    setAnchorProps(newProps); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [button]);
   return jsx("a", Object.assign({}, anchorProps, {
     children: children
@@ -2554,7 +2587,7 @@ function Badge(_a) {
     if (!!customColor || !!customBackgroundColor) {
       setType('');
     }
-  }, []);
+  }, [badgeType, customColor, customBackgroundColor]);
   return !isClosed ? jsxs("span", Object.assign({}, props, {
     className: `badge ${type}`,
     style: {
@@ -2564,12 +2597,12 @@ function Badge(_a) {
   }, {
     children: [jsx("strong", {
       children: children
-    }), isCloseable && jsx("button", Object.assign({
+    }), isCloseable && jsxs("button", Object.assign({
       type: "button",
       className: "close",
       onClick: () => setIsClosed(true)
     }, {
-      children: closeText
+      children: [closeText, jsx("i", {})]
     }))]
   })) : null;
 }
@@ -2599,16 +2632,20 @@ const useStepper = ({
     min,
     max,
     step: _step
-  });
+  }); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (max !== data.max) stepper.setMax(max);
-  }, [stepper, max]);
+  }, [stepper, max]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (min !== data.min) stepper.setMin(min);
-  }, [stepper, min]);
+  }, [stepper, min]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (_step !== data.step) stepper.setStep(_step || 1);
-  }, [stepper, _step]);
+  }, [stepper, _step]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (_value !== data.value) stepper.setValue(_value || 0, false);
   }, [stepper, _value]);
@@ -2620,7 +2657,7 @@ const useStepper = ({
       max,
       step: _step,
       onChange
-    }, setData));
+    }, setData)); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return [stepper, data];
 };
@@ -2935,4 +2972,176 @@ const Dropdown = ({
   }));
 };
 
-export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };
+const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+  const dataStub = {
+    formattedSelectedDate: '',
+    calendar: {
+      headers: [],
+      calendarGrid: []
+    }
+  };
+  const [data, setData] = useState(dataStub);
+  const [state, setState] = useState({
+    isActive: false
+  });
+  const datepickerStub = {};
+  const [datepicker, setDatepicker] = useState(datepickerStub);
+  useEffect(() => {
+    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+      setDatepicker(createDatepicker((data, state) => {
+        if (data) setData(data);
+        if (state) setState(state);
+      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
+    }
+  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options]);
+  return {
+    datepicker,
+    data,
+    state
+  };
+};
+
+const Datepicker = (options = {}) => {
+  const [uuid] = useState(randomId());
+  const id = `sgr-datepicker-${uuid}`;
+  const datepickerRef = useRef(null);
+  const datepickerTriggerRef = useRef(null);
+  const datepickerDialogRef = useRef(null);
+  const dateInputRef = useRef(null);
+  const {
+    datepicker,
+    data,
+    state
+  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+  useEffect(() => {
+    var _a;
+
+    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+  }, [datepicker, options]);
+
+  const classNames = day => Object.entries({
+    disabled: !day.currentMonth,
+    'sg-date-today': day.today // 'sg-date-holiday': day.holiday,
+
+  }).map(([className, add]) => add ? className : '').join(' ');
+
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: "form-group"
+    }, {
+      children: [jsx("label", Object.assign({
+        htmlFor: id
+      }, {
+        children: "Date"
+      })), jsxs("div", Object.assign({
+        className: "group",
+        ref: datepickerRef
+      }, {
+        children: [jsx("input", {
+          ref: dateInputRef,
+          id: id,
+          type: "text",
+          placeholder: "yyyy-mm-dd",
+          value: data.formattedSelectedDate,
+          onChange: e => datepicker.select(e.target.value)
+        }), jsx("button", Object.assign({
+          ref: datepickerTriggerRef,
+          type: "button",
+          className: "primary",
+          onClick: () => datepicker.toggle()
+        }, {
+          children: jsx("i", Object.assign({
+            className: "sg-icon sg-icon-calendar"
+          }, {
+            children: "Select date"
+          }))
+        }))]
+      })), jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: "Select a date"
+      }))]
+    })), jsx("div", Object.assign({
+      ref: datepickerDialogRef,
+      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Choose Date"
+    }, {
+      children: state.isActive && jsxs("div", Object.assign({
+        className: "sg-date"
+      }, {
+        children: [jsxs("header", {
+          children: [jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.sub(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-previous"
+            }, {
+              children: "Previous month"
+            }))
+          })), jsx(Dropdown, {
+            options: months({}),
+            texts: {
+              placeholder: data.monthName
+            }
+          }), jsx(Dropdown, {
+            options: years({}),
+            texts: {
+              placeholder: data.year + ''
+            }
+          }), jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.add(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-next"
+            }, {
+              children: "Next month"
+            }))
+          }))]
+        }), jsx("main", {
+          children: jsxs("table", Object.assign({
+            role: "grid"
+          }, {
+            children: [jsx("thead", {
+              children: jsx("tr", {
+                children: data.calendar.headers.map((header, ix) => jsx("th", Object.assign({
+                  scope: "col",
+                  abbr: header.abbr,
+                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+                }, {
+                  children: header.displayText
+                }), `week_${ix}`))
+              })
+            }), jsx("tbody", {
+              children: data.calendar.calendarGrid.map((week, ix) => jsxs("tr", {
+                children: [data.calendar.weekNumbers ? jsx("th", Object.assign({
+                  className: "sg-week-number"
+                }, {
+                  children: data.calendar.weekNumbers[ix]
+                })) : '', week.map(day => jsx("td", Object.assign({
+                  "data-date": day.formattedDate,
+                  className: classNames(day),
+                  title: day.today ? 'Today' : '',
+                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+                  role: day.selected ? 'gridcell' : undefined,
+                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+                  onClick: () => {
+                    day.currentMonth && datepicker.select(day.date);
+                  }
+                }, {
+                  children: day.day
+                }), day.day))]
+              }, `week_${ix}`))
+            })]
+          }))
+        })]
+      }))
+    }))]
+  });
+};
+
+export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };

package/index.umd.js

@@ -1100,15 +1100,15 @@
 	  }, {
 	    children: [jsxRuntime.jsx("h3", {
 	      children: _header
-	    }), jsxRuntime.jsx("button", Object.assign({
+	    }), jsxRuntime.jsxs("button", Object.assign({
 	      className: "close",
 	      onClick: handleClose
 	    }, {
-	      children: jsxRuntime.jsx("span", Object.assign({
+	      children: [jsxRuntime.jsx("span", Object.assign({
 	        className: "sr-only"
 	      }, {
 	        children: "Close"
-	      }))
+	      })), jsxRuntime.jsx("i", {})]
 	    }))]
 	  }));
 	};
@@ -1786,17 +1786,23 @@
 	    if (!isCloseable) {
 	      setCloseButton(null);
 	    } else {
-	      if (closeText) setCloseButton(jsxRuntime.jsx(Button, Object.assign({
-	        variant: "ghost"
+	      if (closeText) setCloseButton(jsxRuntime.jsxs("button", Object.assign({
+	        className: "close"
 	      }, {
-	        children: jsxRuntime.jsx("span", Object.assign({
+	        children: [jsxRuntime.jsx("span", Object.assign({
 	          className: "sr-only"
 	        }, {
 	          children: closeText
-	        }))
-	      })));else setCloseButton(jsxRuntime.jsx("button", {
+	        })), jsxRuntime.jsx("i", {})]
+	      })));else setCloseButton(jsxRuntime.jsxs("button", Object.assign({
 	        className: "close"
-	      }));
+	      }, {
+	        children: [jsxRuntime.jsx("span", Object.assign({
+	          className: "sr-only"
+	        }, {
+	          children: "Close"
+	        })), jsxRuntime.jsx("i", {})]
+	      })));
 	    }
 	  }, [isCloseable, closeText]);
 	  return jsxRuntime.jsxs("div", Object.assign({
@@ -1843,6 +1849,7 @@
 	  });
 	};
 
+	/* eslint-disable-next-line */
 	const validateInputValue = (target, rules, setError) => {
 	  const errorMessage = validateInputValueErrors(rules, target);
 	  errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
@@ -1860,17 +1867,24 @@
 
 	  return validateTextInputValues(value, rules);
 	};
+	/* eslint-disable-next-line */
+
 
 	const setErrorInsert = (setError, name) => {
+	  /* eslint-disable-next-line */
 	  setError(errors => {
 	    return Object.assign(Object.assign({}, errors), {
 	      [name]: true
 	    });
 	  });
 	};
+	/* eslint-disable-next-line */
+
 
 	const setErrorRemove = (setError, name) => {
+	  /* eslint-disable-next-line */
 	  setError(errors => {
+	    /* eslint-disable-next-line */
 	    const newError = Object.assign({}, errors);
 	    delete newError[name];
 	    return newError;
@@ -1904,9 +1918,15 @@
 	    onFormSubmit
 	  } = _a,
 	      props = __rest(_a, ["children", "direction", "formSize", "onSubmit", "onFormSubmit"]);
+	  /* eslint-disable-next-line */
+
 
 	  const [values, setValues] = React__default["default"].useState();
+	  /* eslint-disable-next-line */
+
 	  const [errors, setErrors] = React__default["default"].useState();
+	  /* eslint-disable-next-line */
+
 	  const [fields, setFields] = React__default["default"].useState({});
 
 	  const formSubmit = event => {
@@ -1966,21 +1986,29 @@
 	    errors
 	  } = useFormContext();
 	  React__default["default"].useEffect(() => {
+	    /* eslint-disable-next-line */
 	    setFields(fields => Object.assign(Object.assign({}, fields), {
 	      [name]: validate === null || validate === void 0 ? void 0 : validate.rules
 	    }));
+	    /* eslint-disable-next-line */
 
 	    const removeValues = values => {
+	      /* eslint-disable-next-line */
 	      const newValues = Object.assign({}, values);
 	      delete newValues[name];
 	      return newValues;
 	    };
 
 	    return () => {
+	      /* eslint-disable-next-line */
 	      setFields(fields => removeValues(fields));
+	      /* eslint-disable-next-line */
+
 	      setValues(values => removeValues(values));
+	      /* eslint-disable-next-line */
+
 	      setErrors(errors => removeValues(errors));
-	    };
+	    }; // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
 
 	  const onChange = event => {
@@ -1995,6 +2023,8 @@
 
 	    if (type === 'checkbox') {
 	      inputValue = checked ? value : null;
+	      /* eslint-disable-next-line */
+
 	      checked ? setValues(values => Object.assign(Object.assign({}, values), {
 	        [name]: value
 	      })) : setValues(values => Object.assign(Object.assign({}, values), {
@@ -2002,6 +2032,8 @@
 	      }));
 	    } else {
 	      inputValue = value;
+	      /* eslint-disable-next-line */
+
 	      setValues(values => Object.assign(Object.assign({}, values), {
 	        [name]: value
 	      }));
@@ -2014,6 +2046,8 @@
 	      checked
 	    }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
 	  };
+	  /* eslint-disable-next-line */
+
 
 	  return /*#__PURE__*/React__default["default"].cloneElement(children, {
 	    validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
@@ -2166,26 +2200,24 @@
 
 	  const inputProps = useInput(props, onChange);
 	  const validatorClassName = extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
-	  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-	    children: jsxRuntime.jsxs("div", Object.assign({
-	      className: "form-group"
+	  return jsxRuntime.jsxs("div", Object.assign({
+	    className: "form-group"
+	  }, {
+	    children: [jsxRuntime.jsxs("label", Object.assign({
+	      htmlFor: inputProps.id,
+	      className: `form-control ${validatorClassName}`
 	    }, {
-	      children: [jsxRuntime.jsxs("label", Object.assign({
-	        htmlFor: inputProps.id,
-	        className: `form-control ${validatorClassName}`
-	      }, {
-	        children: [label, jsxRuntime.jsx("input", Object.assign({
-	          type: "checkbox"
-	        }, inputProps, {
-	          className: validatorClassName
-	        })), jsxRuntime.jsx("i", {})]
-	      })), validator && jsxRuntime.jsx("span", Object.assign({
-	        className: "form-info"
-	      }, {
-	        children: validator.message
-	      }))]
-	    }))
-	  });
+	      children: [label, jsxRuntime.jsx("input", Object.assign({
+	        type: "checkbox"
+	      }, inputProps, {
+	        className: validatorClassName
+	      })), jsxRuntime.jsx("i", {})]
+	    })), validator && jsxRuntime.jsx("span", Object.assign({
+	      className: "form-info"
+	    }, {
+	      children: validator.message
+	    }))]
+	  }));
 	};
 	const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_a, ref) => {
 	  var {
@@ -2364,7 +2396,8 @@
 	    } else {
 	      // eslint-disable-next-line @typescript-eslint/no-empty-function
 	      return () => {};
-	    }
+	    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
 	  }, []);
 	  return jsxRuntime.jsxs("div", Object.assign({
 	    className: "form-group"
@@ -2475,7 +2508,7 @@
 	      role: button ? 'button' : undefined,
 	      className: className
 	    }, props);
-	    setAnchorProps(newProps);
+	    setAnchorProps(newProps); // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, [button]);
 	  return jsxRuntime.jsx("a", Object.assign({}, anchorProps, {
 	    children: children
@@ -2560,7 +2593,7 @@
 	    if (!!customColor || !!customBackgroundColor) {
 	      setType('');
 	    }
-	  }, []);
+	  }, [badgeType, customColor, customBackgroundColor]);
 	  return !isClosed ? jsxRuntime.jsxs("span", Object.assign({}, props, {
 	    className: `badge ${type}`,
 	    style: {
@@ -2570,12 +2603,12 @@
 	  }, {
 	    children: [jsxRuntime.jsx("strong", {
 	      children: children
-	    }), isCloseable && jsxRuntime.jsx("button", Object.assign({
+	    }), isCloseable && jsxRuntime.jsxs("button", Object.assign({
 	      type: "button",
 	      className: "close",
 	      onClick: () => setIsClosed(true)
 	    }, {
-	      children: closeText
+	      children: [closeText, jsxRuntime.jsx("i", {})]
 	    }))]
 	  })) : null;
 	}
@@ -2605,16 +2638,20 @@
 	    min,
 	    max,
 	    step: _step
-	  });
+	  }); // eslint-disable-next-line react-hooks/exhaustive-deps
+
 	  React.useEffect(() => {
 	    if (max !== data.max) stepper.setMax(max);
-	  }, [stepper, max]);
+	  }, [stepper, max]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
 	  React.useEffect(() => {
 	    if (min !== data.min) stepper.setMin(min);
-	  }, [stepper, min]);
+	  }, [stepper, min]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
 	  React.useEffect(() => {
 	    if (_step !== data.step) stepper.setStep(_step || 1);
-	  }, [stepper, _step]);
+	  }, [stepper, _step]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
 	  React.useEffect(() => {
 	    if (_value !== data.value) stepper.setValue(_value || 0, false);
 	  }, [stepper, _value]);
@@ -2626,7 +2663,7 @@
 	      max,
 	      step: _step,
 	      onChange
-	    }, setData));
+	    }, setData)); // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
 	  return [stepper, data];
 	};
@@ -2941,12 +2978,185 @@
 	  }));
 	};
 
+	const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+	  const dataStub = {
+	    formattedSelectedDate: '',
+	    calendar: {
+	      headers: [],
+	      calendarGrid: []
+	    }
+	  };
+	  const [data, setData] = React.useState(dataStub);
+	  const [state, setState] = React.useState({
+	    isActive: false
+	  });
+	  const datepickerStub = {};
+	  const [datepicker, setDatepicker] = React.useState(datepickerStub);
+	  React.useEffect(() => {
+	    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+	      setDatepicker(extract.createDatepicker((data, state) => {
+	        if (data) setData(data);
+	        if (state) setState(state);
+	      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
+	    }
+	  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options]);
+	  return {
+	    datepicker,
+	    data,
+	    state
+	  };
+	};
+
+	const Datepicker = (options = {}) => {
+	  const [uuid] = React.useState(extract.randomId());
+	  const id = `sgr-datepicker-${uuid}`;
+	  const datepickerRef = React.useRef(null);
+	  const datepickerTriggerRef = React.useRef(null);
+	  const datepickerDialogRef = React.useRef(null);
+	  const dateInputRef = React.useRef(null);
+	  const {
+	    datepicker,
+	    data,
+	    state
+	  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+	  React.useEffect(() => {
+	    var _a;
+
+	    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+	    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+	  }, [datepicker, options]);
+
+	  const classNames = day => Object.entries({
+	    disabled: !day.currentMonth,
+	    'sg-date-today': day.today // 'sg-date-holiday': day.holiday,
+
+	  }).map(([className, add]) => add ? className : '').join(' ');
+
+	  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	    children: [jsxRuntime.jsxs("div", Object.assign({
+	      className: "form-group"
+	    }, {
+	      children: [jsxRuntime.jsx("label", Object.assign({
+	        htmlFor: id
+	      }, {
+	        children: "Date"
+	      })), jsxRuntime.jsxs("div", Object.assign({
+	        className: "group",
+	        ref: datepickerRef
+	      }, {
+	        children: [jsxRuntime.jsx("input", {
+	          ref: dateInputRef,
+	          id: id,
+	          type: "text",
+	          placeholder: "yyyy-mm-dd",
+	          value: data.formattedSelectedDate,
+	          onChange: e => datepicker.select(e.target.value)
+	        }), jsxRuntime.jsx("button", Object.assign({
+	          ref: datepickerTriggerRef,
+	          type: "button",
+	          className: "primary",
+	          onClick: () => datepicker.toggle()
+	        }, {
+	          children: jsxRuntime.jsx("i", Object.assign({
+	            className: "sg-icon sg-icon-calendar"
+	          }, {
+	            children: "Select date"
+	          }))
+	        }))]
+	      })), jsxRuntime.jsx("span", Object.assign({
+	        className: "form-info"
+	      }, {
+	        children: "Select a date"
+	      }))]
+	    })), jsxRuntime.jsx("div", Object.assign({
+	      ref: datepickerDialogRef,
+	      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+	      role: "dialog",
+	      "aria-modal": "true",
+	      "aria-label": "Choose Date"
+	    }, {
+	      children: state.isActive && jsxRuntime.jsxs("div", Object.assign({
+	        className: "sg-date"
+	      }, {
+	        children: [jsxRuntime.jsxs("header", {
+	          children: [jsxRuntime.jsx("button", Object.assign({
+	            className: "link",
+	            onClick: () => datepicker.sub(1, 'months')
+	          }, {
+	            children: jsxRuntime.jsx("i", Object.assign({
+	              className: "sg-icon sg-icon-previous"
+	            }, {
+	              children: "Previous month"
+	            }))
+	          })), jsxRuntime.jsx(Dropdown, {
+	            options: extract.months({}),
+	            texts: {
+	              placeholder: data.monthName
+	            }
+	          }), jsxRuntime.jsx(Dropdown, {
+	            options: extract.years({}),
+	            texts: {
+	              placeholder: data.year + ''
+	            }
+	          }), jsxRuntime.jsx("button", Object.assign({
+	            className: "link",
+	            onClick: () => datepicker.add(1, 'months')
+	          }, {
+	            children: jsxRuntime.jsx("i", Object.assign({
+	              className: "sg-icon sg-icon-next"
+	            }, {
+	              children: "Next month"
+	            }))
+	          }))]
+	        }), jsxRuntime.jsx("main", {
+	          children: jsxRuntime.jsxs("table", Object.assign({
+	            role: "grid"
+	          }, {
+	            children: [jsxRuntime.jsx("thead", {
+	              children: jsxRuntime.jsx("tr", {
+	                children: data.calendar.headers.map((header, ix) => jsxRuntime.jsx("th", Object.assign({
+	                  scope: "col",
+	                  abbr: header.abbr,
+	                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+	                }, {
+	                  children: header.displayText
+	                }), `week_${ix}`))
+	              })
+	            }), jsxRuntime.jsx("tbody", {
+	              children: data.calendar.calendarGrid.map((week, ix) => jsxRuntime.jsxs("tr", {
+	                children: [data.calendar.weekNumbers ? jsxRuntime.jsx("th", Object.assign({
+	                  className: "sg-week-number"
+	                }, {
+	                  children: data.calendar.weekNumbers[ix]
+	                })) : '', week.map(day => jsxRuntime.jsx("td", Object.assign({
+	                  "data-date": day.formattedDate,
+	                  className: classNames(day),
+	                  title: day.today ? 'Today' : '',
+	                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+	                  role: day.selected ? 'gridcell' : undefined,
+	                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+	                  onClick: () => {
+	                    day.currentMonth && datepicker.select(day.date);
+	                  }
+	                }, {
+	                  children: day.day
+	                }), day.day))]
+	              }, `week_${ix}`))
+	            })]
+	          }))
+	        })]
+	      }))
+	    }))]
+	  });
+	};
+
 	exports.Alert = Alert;
 	exports.Badge = Badge;
 	exports.Button = Button;
 	exports.ButtonGroup = ButtonGroup;
 	exports.Card = Card;
 	exports.Checkbox = Checkbox;
+	exports.Datepicker = Datepicker;
 	exports.Dropdown = Dropdown;
 	exports.EmailInput = EmailInput;
 	exports.Flexbox = Flexbox;

package/lib/accordion/accordion-item.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface AccordionItemProps {
+    item: AccordionItemInterface;
+    index: number;
+    uuid: string;
+}
+export interface AccordionItemInterface {
+    label: string;
+    labelElementLevel: 2 | 3 | 4 | 5 | 6;
+    subLabel?: string;
+    content: JSX.Element;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+declare const AccordionItem: ({ item, index, uuid }: AccordionItemProps) => JSX.Element;
+export default AccordionItem;

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+import { AccordionItemInterface } from './accordion-item';
+export interface AccordionInterface {
+    items: AccordionItemInterface[];
+}
+declare const Accordion: ({ items }: AccordionInterface) => JSX.Element;
+export default Accordion;

package/lib/alert/alert.d.ts

@@ -1,5 +1,5 @@
-import { AlertType } from '@sebgroup/extract';
 import { ReactNode } from 'react';
+import { AlertType } from '@sebgroup/extract';
 export interface AlertProps {
     children: ReactNode;
     type: AlertType;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.44",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.43",
-    "@sebgroup/extract": "^1.0.0-beta.42"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.45",
+    "@sebgroup/extract": "^1.0.0-beta.44"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {