@sebgroup/green-react 1.0.0-beta.18 → 1.0.0-beta.20

package/index.d.ts

@@ -7,4 +7,5 @@ export * from './lib/list/list';
 export * from './lib/navbar/navbar';
 export * from './lib/link/link';
 export * from './lib/badge/badge';
+export * from './lib/stepper/stepper';
 export * from './lib/dropdown/dropdown';

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, createDropdown } from '@sebgroup/extract';
+import { randomId, validateClassName, createStepper, createDropdown } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2526,13 +2526,29 @@ function Badge(_a) {
     children,
     badgeType,
     isCloseable,
-    closeText
+    closeText,
+    customColor,
+    customBackgroundColor
   } = _a,
-      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText"]);
+      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
 
   const [isClosed, setIsClosed] = React.useState(false);
+  const [type, setType] = React.useState('');
+  React.useEffect(() => {
+    if (badgeType) {
+      setType(badgeType);
+    }
+
+    if (!!customColor || !!customBackgroundColor) {
+      setType('');
+    }
+  }, []);
   return !isClosed ? jsxs("span", Object.assign({}, props, {
-    className: `badge ${badgeType}`
+    className: `badge ${type}`,
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    }
   }, {
     children: [jsx("strong", {
       children: children
@@ -2546,6 +2562,113 @@ function Badge(_a) {
   })) : null;
 }
 
+const noop = () => {};
+
+const useStepper = ({
+  min,
+  max,
+  value: _value = 0,
+  step: _step = 1,
+  id: _id = randomId()
+}) => {
+  const pStepper = {
+    down: noop,
+    setMax: noop,
+    setMin: noop,
+    setStep: noop,
+    setValue: noop,
+    up: noop
+  };
+  const [stepper, setStepper] = useState(pStepper);
+  const [data, setData] = useState({
+    id: _id,
+    value: _value,
+    min,
+    max,
+    step: _step
+  });
+  useEffect(() => {
+    if (max !== data.max) stepper.setMax(max);
+  }, [stepper, max]);
+  useEffect(() => {
+    if (min !== data.min) stepper.setMin(min);
+  }, [stepper, min]);
+  useEffect(() => {
+    if (_step !== data.step) stepper.setStep(_step || 1);
+  }, [stepper, _step]);
+  useEffect(() => {
+    if (_value !== data.value) stepper.setValue(_value || 0);
+  }, [stepper, _value]);
+  useEffect(() => {
+    setStepper(createStepper({
+      id: _id,
+      value: _value,
+      min,
+      max,
+      step: _step
+    }, setData));
+  }, []);
+  return [stepper, data];
+};
+
+function Stepper(_a) {
+  var {
+    label,
+    description,
+    statusMessage,
+    onChange
+  } = _a,
+      props = __rest(_a, ["label", "description", "statusMessage", "onChange"]);
+
+  const [stepper, data] = useStepper(props);
+  useEffect(() => {
+    if (onChange && data.value) onChange(data.value);
+  }, [data.value]);
+
+  const onChangeEvent = e => {
+    stepper.setValue(e.target.valueAsNumber);
+  };
+
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [label && jsx("label", Object.assign({
+      htmlFor: data.id
+    }, {
+      children: label
+    })), description && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: description
+    })), jsxs("div", Object.assign({
+      className: "group group-border group-stepper"
+    }, {
+      children: [jsx("button", Object.assign({
+        onClick: () => stepper.down()
+      }, {
+        children: "-"
+      })), jsx("input", {
+        id: data.id,
+        type: "number",
+        onChange: onChangeEvent,
+        onFocus: ({
+          target
+        }) => target.select(),
+        placeholder: "0",
+        value: data.value
+      }), jsx("button", Object.assign({
+        onClick: () => stepper.up()
+      }, {
+        children: "+"
+      }))]
+    })), statusMessage && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: statusMessage
+    }))]
+  }));
+}
+
 const useDropdown = ({
   id,
   texts,
@@ -2770,4 +2893,4 @@ const Dropdown = ({
   }));
 };
 
-export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Text, TextInput };
+export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };

package/index.umd.js

@@ -2532,13 +2532,29 @@
 	    children,
 	    badgeType,
 	    isCloseable,
-	    closeText
+	    closeText,
+	    customColor,
+	    customBackgroundColor
 	  } = _a,
-	      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText"]);
+	      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
 
 	  const [isClosed, setIsClosed] = React__default["default"].useState(false);
+	  const [type, setType] = React__default["default"].useState('');
+	  React__default["default"].useEffect(() => {
+	    if (badgeType) {
+	      setType(badgeType);
+	    }
+
+	    if (!!customColor || !!customBackgroundColor) {
+	      setType('');
+	    }
+	  }, []);
 	  return !isClosed ? jsxRuntime.jsxs("span", Object.assign({}, props, {
-	    className: `badge ${badgeType}`
+	    className: `badge ${type}`,
+	    style: {
+	      color: customColor,
+	      backgroundColor: customBackgroundColor
+	    }
 	  }, {
 	    children: [jsxRuntime.jsx("strong", {
 	      children: children
@@ -2552,6 +2568,113 @@
 	  })) : null;
 	}
 
+	const noop = () => {};
+
+	const useStepper = ({
+	  min,
+	  max,
+	  value: _value = 0,
+	  step: _step = 1,
+	  id: _id = extract.randomId()
+	}) => {
+	  const pStepper = {
+	    down: noop,
+	    setMax: noop,
+	    setMin: noop,
+	    setStep: noop,
+	    setValue: noop,
+	    up: noop
+	  };
+	  const [stepper, setStepper] = React.useState(pStepper);
+	  const [data, setData] = React.useState({
+	    id: _id,
+	    value: _value,
+	    min,
+	    max,
+	    step: _step
+	  });
+	  React.useEffect(() => {
+	    if (max !== data.max) stepper.setMax(max);
+	  }, [stepper, max]);
+	  React.useEffect(() => {
+	    if (min !== data.min) stepper.setMin(min);
+	  }, [stepper, min]);
+	  React.useEffect(() => {
+	    if (_step !== data.step) stepper.setStep(_step || 1);
+	  }, [stepper, _step]);
+	  React.useEffect(() => {
+	    if (_value !== data.value) stepper.setValue(_value || 0);
+	  }, [stepper, _value]);
+	  React.useEffect(() => {
+	    setStepper(extract.createStepper({
+	      id: _id,
+	      value: _value,
+	      min,
+	      max,
+	      step: _step
+	    }, setData));
+	  }, []);
+	  return [stepper, data];
+	};
+
+	function Stepper(_a) {
+	  var {
+	    label,
+	    description,
+	    statusMessage,
+	    onChange
+	  } = _a,
+	      props = __rest(_a, ["label", "description", "statusMessage", "onChange"]);
+
+	  const [stepper, data] = useStepper(props);
+	  React.useEffect(() => {
+	    if (onChange && data.value) onChange(data.value);
+	  }, [data.value]);
+
+	  const onChangeEvent = e => {
+	    stepper.setValue(e.target.valueAsNumber);
+	  };
+
+	  return jsxRuntime.jsxs("div", Object.assign({
+	    className: "form-group"
+	  }, {
+	    children: [label && jsxRuntime.jsx("label", Object.assign({
+	      htmlFor: data.id
+	    }, {
+	      children: label
+	    })), description && jsxRuntime.jsx("span", Object.assign({
+	      className: "form-info"
+	    }, {
+	      children: description
+	    })), jsxRuntime.jsxs("div", Object.assign({
+	      className: "group group-border group-stepper"
+	    }, {
+	      children: [jsxRuntime.jsx("button", Object.assign({
+	        onClick: () => stepper.down()
+	      }, {
+	        children: "-"
+	      })), jsxRuntime.jsx("input", {
+	        id: data.id,
+	        type: "number",
+	        onChange: onChangeEvent,
+	        onFocus: ({
+	          target
+	        }) => target.select(),
+	        placeholder: "0",
+	        value: data.value
+	      }), jsxRuntime.jsx("button", Object.assign({
+	        onClick: () => stepper.up()
+	      }, {
+	        children: "+"
+	      }))]
+	    })), statusMessage && jsxRuntime.jsx("span", Object.assign({
+	      className: "form-info"
+	    }, {
+	      children: statusMessage
+	    }))]
+	  }));
+	}
+
 	const useDropdown = ({
 	  id,
 	  texts,
@@ -2796,6 +2919,7 @@
 	exports.RadioButton = RadioButton;
 	exports.RadioGroup = RadioGroup;
 	exports.RenderInput = RenderInput;
+	exports.Stepper = Stepper;
 	exports.Text = Text;
 	exports.TextInput = TextInput;
 

package/lib/badge/badge.d.ts

@@ -5,6 +5,8 @@ export interface BadgeProps extends HTMLProps<HTMLSpanElement> {
     badgeType?: BadgeType;
     isCloseable?: boolean;
     closeText?: string;
+    customColor?: string;
+    customBackgroundColor?: string;
 }
-export declare function Badge({ children, badgeType, isCloseable, closeText, ...props }: BadgeProps): JSX.Element | null;
+export declare function Badge({ children, badgeType, isCloseable, closeText, customColor, customBackgroundColor, ...props }: BadgeProps): JSX.Element | null;
 export default Badge;

package/package.json

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