groovinads-ui 1.0.7 → 1.0.9

package/README (test).md

@@ -0,0 +1,141 @@
+<img src="assets/groovinads-logo.png" alt="Groovinads logo" width="200">
+
+---
+
+# Groovinads UI
+Groovinads UI is a React component library that provides ready-to-use UI elements based on the Groovinads UI kit. This library is designed to facilitate the implementation of common UI elements in Groovinads applications.
+
+## Included Components (v 1.0.9)
+
+The library includes the following components:
+
+- **Buttons**: For user actions.
+- **Checkbox**: For multiple option selections.
+- **Input**: For user data entry.
+- **Radio**: For exclusive selections.
+- **Switch**: For toggle states.
+- **Textarea**: For multiline text input.
+
+## Requirements
+- The component styles must be included from: `https://ui.groovinads.com/styles.min.css`.
+- **npm** (v18 or higher).
+- [Font Awesome](https://fontawesome.com/) icons must be included in the project.
+
+## Installation
+
+To use the Groovinads UI library in your project, run the following command:
+
+```bash
+yarn add groovinads-ui
+```
+
+## Usage
+Here are examples of how to use the components included in the Groovinads UI library:
+
+### Button
+```jsx
+<Button
+  variant={'primary | secondary | tertiary | outline'}
+  size={'xs | md | lg'}
+  onClick={function}
+  icon?={FontAwesome Icon string}
+  iconPosition={'start | end'}
+  className={string}
+  processing={boolean}
+>
+  children
+</Button>
+```
+
+| Prop name | Description | Options | Default values | Type |
+|--------------|--------------|--------------|--------------|--------------|
+| ```variant``` | Fila 1, Col 2 | ``` primary ``` ``` secondary ``` ``` terciary ``` ``` outline ```| ``` primary ```| String |
+
+
+
+### Checkbox
+```jsx
+<Checkbox
+  className={string}
+  id={string}
+  name={id}
+  status={boolean}
+  setStatus={function}
+>
+  children
+</Checkbox>
+```
+### Input
+```jsx
+<Input
+  className={string}
+  disabled={boolean}
+  helpText={string}
+  icon={string}
+  label={string}
+  name={string}
+  onChange={function}
+  prefix={string}
+  requiredText={string}
+  showError={boolean}
+  setShowError={function}
+  size={'xs | md | xl'}
+  suffix={string}
+  type={'color | date | datetime-local | email | file | image | month | number | password | tel | text | time | url | week'}
+  value={string | number}
+/>
+```
+
+### Radio
+```jsx
+<Radio
+  className={string}
+  id={string}
+  name={string}
+  setStatus={function}
+  status={boolean}
+>
+  children
+</Radio>
+```
+
+### Switch
+```jsx
+<Switch
+  className={string}
+  icon={boolean}
+  id={string}
+  name={string}
+  size={'xs | md | xl'}
+  setStatus={function}
+  status={boolean}
+  switchPosition={'start | end'}
+>
+  children
+</Switch>
+```
+
+### Textarea
+```jsx
+<Textarea
+  className={string}
+  helpText={string}
+  label={string}
+  name={string}
+  onChange={function}
+  requiredText={string}
+  showError={boolean}
+  setShowError={function}
+  size={'xs | md | xl'}
+/>
+```
+
+## Customization
+Currently, the components are not customizable.
+
+## Contributions
+This library is for internal use by Groovinads and is not open to external contributions.
+
+---
+
+For more information or support, contact the [Groovinads development team](mailto:helpdesk@groovinads.com).

package/dist/index.es.js

@@ -1 +1,14 @@
-import e from"react";const n=({variant:n,size:t,onClick:a,children:l,icon:r,iconPosition:s,className:i,style:c,processing:m})=>{let o=`btn ${i}`;"default"!==n&&(o+=` btn-${n}`),"md"!==t&&(o+=` btn-${t}`),"default"!==c&&(o+=` btn-${c}`),m&&(o+=" btn-processing");const d=m?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),l&&e.createElement("span",null,l,"…")):r?"end"===s?e.createElement(e.Fragment,null,l&&e.createElement("span",null,l),e.createElement("i",{className:`fa-solid ${r}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${r}`,"aria-hidden":"true"}),l&&e.createElement("span",null,l)):l&&e.createElement("span",null,l);return e.createElement("button",{className:o,onClick:a},d)};n.propTypes={},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1};export{n as Button};
+import e,{useCallback as t,useEffect as r}from"react";function n(e,t){return e(t={exports:{}},t.exports),t.exports
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */}var o="function"==typeof Symbol&&Symbol.for,a=o?Symbol.for("react.element"):60103,i=o?Symbol.for("react.portal"):60106,s=o?Symbol.for("react.fragment"):60107,c=o?Symbol.for("react.strict_mode"):60108,l=o?Symbol.for("react.profiler"):60114,u=o?Symbol.for("react.provider"):60109,f=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.async_mode"):60111,m=o?Symbol.for("react.concurrent_mode"):60111,d=o?Symbol.for("react.forward_ref"):60112,y=o?Symbol.for("react.suspense"):60113,b=o?Symbol.for("react.suspense_list"):60120,g=o?Symbol.for("react.memo"):60115,h=o?Symbol.for("react.lazy"):60116,v=o?Symbol.for("react.block"):60121,E=o?Symbol.for("react.fundamental"):60117,x=o?Symbol.for("react.responder"):60118,S=o?Symbol.for("react.scope"):60119;function w(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case a:switch(e=e.type){case p:case m:case s:case l:case c:case y:return e;default:switch(e=e&&e.$$typeof){case f:case d:case h:case g:case u:return e;default:return t}}case i:return t}}}function O(e){return w(e)===m}var N={AsyncMode:p,ConcurrentMode:m,ContextConsumer:f,ContextProvider:u,Element:a,ForwardRef:d,Fragment:s,Lazy:h,Memo:g,Portal:i,Profiler:l,StrictMode:c,Suspense:y,isAsyncMode:function(e){return O(e)||w(e)===p},isConcurrentMode:O,isContextConsumer:function(e){return w(e)===f},isContextProvider:function(e){return w(e)===u},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===a},isForwardRef:function(e){return w(e)===d},isFragment:function(e){return w(e)===s},isLazy:function(e){return w(e)===h},isMemo:function(e){return w(e)===g},isPortal:function(e){return w(e)===i},isProfiler:function(e){return w(e)===l},isStrictMode:function(e){return w(e)===c},isSuspense:function(e){return w(e)===y},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===s||e===m||e===l||e===c||e===y||e===b||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===g||e.$$typeof===u||e.$$typeof===f||e.$$typeof===d||e.$$typeof===E||e.$$typeof===x||e.$$typeof===S||e.$$typeof===v)},typeOf:w},$=n((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,n=e?Symbol.for("react.portal"):60106,o=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,s=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,l=e?Symbol.for("react.async_mode"):60111,u=e?Symbol.for("react.concurrent_mode"):60111,f=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,m=e?Symbol.for("react.suspense_list"):60120,d=e?Symbol.for("react.memo"):60115,y=e?Symbol.for("react.lazy"):60116,b=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,h=e?Symbol.for("react.responder"):60118,v=e?Symbol.for("react.scope"):60119;function E(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:var m=e.type;switch(m){case l:case u:case o:case i:case a:case p:return m;default:var b=m&&m.$$typeof;switch(b){case c:case f:case y:case d:case s:return b;default:return t}}case n:return t}}}var x=l,S=u,w=c,O=s,N=r,$=f,C=o,T=y,P=d,k=n,j=i,_=a,I=p,M=!1;function R(e){return E(e)===u}t.AsyncMode=x,t.ConcurrentMode=S,t.ContextConsumer=w,t.ContextProvider=O,t.Element=N,t.ForwardRef=$,t.Fragment=C,t.Lazy=T,t.Memo=P,t.Portal=k,t.Profiler=j,t.StrictMode=_,t.Suspense=I,t.isAsyncMode=function(e){return M||(M=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),R(e)||E(e)===l},t.isConcurrentMode=R,t.isContextConsumer=function(e){return E(e)===c},t.isContextProvider=function(e){return E(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return E(e)===f},t.isFragment=function(e){return E(e)===o},t.isLazy=function(e){return E(e)===y},t.isMemo=function(e){return E(e)===d},t.isPortal=function(e){return E(e)===n},t.isProfiler=function(e){return E(e)===i},t.isStrictMode=function(e){return E(e)===a},t.isSuspense=function(e){return E(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===u||e===i||e===a||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===s||e.$$typeof===c||e.$$typeof===f||e.$$typeof===g||e.$$typeof===h||e.$$typeof===v||e.$$typeof===b)},t.typeOf=E}()}));$.AsyncMode,$.ConcurrentMode,$.ContextConsumer,$.ContextProvider,$.Element,$.ForwardRef,$.Fragment,$.Lazy,$.Memo,$.Portal,$.Profiler,$.StrictMode,$.Suspense,$.isAsyncMode,$.isConcurrentMode,$.isContextConsumer,$.isContextProvider,$.isElement,$.isForwardRef,$.isFragment,$.isLazy,$.isMemo,$.isPortal,$.isProfiler,$.isStrictMode,$.isSuspense,$.isValidElementType,$.typeOf;var C=n((function(e){"production"===process.env.NODE_ENV?e.exports=N:e.exports=$})),T=Object.getOwnPropertySymbols,P=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var j=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map((function(e){return t[e]}));if("0123456789"!==n.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,o=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),a=1;a<arguments.length;a++){for(var i in r=Object(arguments[a]))P.call(r,i)&&(o[i]=r[i]);if(T){n=T(r);for(var s=0;s<n.length;s++)k.call(r,n[s])&&(o[n[s]]=r[n[s]])}}return o},_="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",I=Function.call.bind(Object.prototype.hasOwnProperty),M=function(){};if("production"!==process.env.NODE_ENV){var R=_,A={},F=I;M=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function V(e,t,r,n,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(F(e,a)){var i;try{if("function"!=typeof e[a]){var s=Error((n||"React class")+": "+r+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw s.name="Invariant Violation",s}i=e[a](t,a,n,r,null,R)}catch(e){i=e}if(!i||i instanceof Error||M((n||"React class")+": type specification of "+r+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in A)){A[i.message]=!0;var c=o?o():"";M("Failed "+r+" type: "+i.message+(null!=c?c:""))}}}V.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(A={})};var z=V,q=function(){};function D(){return null}"production"!==process.env.NODE_ENV&&(q=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}});var L=function(e,t){var r="function"==typeof Symbol&&Symbol.iterator,n="@@iterator";var o="<<anonymous>>",a={array:l("array"),bigint:l("bigint"),bool:l("boolean"),func:l("function"),number:l("number"),object:l("object"),string:l("string"),symbol:l("symbol"),any:c(D),arrayOf:function(e){return c((function(t,r,n,o,a){if("function"!=typeof e)return new s("Property `"+a+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var i=t[r];if(!Array.isArray(i))return new s("Invalid "+o+" `"+a+"` of type `"+p(i)+"` supplied to `"+n+"`, expected an array.");for(var c=0;c<i.length;c++){var l=e(i,c,n,o,a+"["+c+"]",_);if(l instanceof Error)return l}return null}))},element:c((function(t,r,n,o,a){var i=t[r];return e(i)?null:new s("Invalid "+o+" `"+a+"` of type `"+p(i)+"` supplied to `"+n+"`, expected a single ReactElement.")})),elementType:c((function(e,t,r,n,o){var a=e[t];return C.isValidElementType(a)?null:new s("Invalid "+n+" `"+o+"` of type `"+p(a)+"` supplied to `"+r+"`, expected a single ReactElement type.")})),instanceOf:function(e){return c((function(t,r,n,a,i){if(!(t[r]instanceof e)){var c=e.name||o;return new s("Invalid "+a+" `"+i+"` of type `"+(((l=t[r]).constructor&&l.constructor.name?l.constructor.name:o)+"` supplied to `")+n+"`, expected instance of `"+c+"`.")}var l;return null}))},node:c((function(e,t,r,n,o){return f(e[t])?null:new s("Invalid "+n+" `"+o+"` supplied to `"+r+"`, expected a ReactNode.")})),objectOf:function(e){return c((function(t,r,n,o,a){if("function"!=typeof e)return new s("Property `"+a+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected an object.");for(var l in i)if(I(i,l)){var u=e(i,l,n,o,a+"."+l,_);if(u instanceof Error)return u}return null}))},oneOf:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&q(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),D;return c((function(t,r,n,o,a){for(var c=t[r],l=0;l<e.length;l++)if(i(c,e[l]))return null;var u=JSON.stringify(e,(function(e,t){return"symbol"===m(t)?String(t):t}));return new s("Invalid "+o+" `"+a+"` of value `"+String(c)+"` supplied to `"+n+"`, expected one of "+u+".")}))},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&q("Invalid argument supplied to oneOfType, expected an instance of array."),D;for(var t=0;t<e.length;t++){var r=e[t];if("function"!=typeof r)return q("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+d(r)+" at index "+t+"."),D}return c((function(t,r,n,o,a){for(var i=[],c=0;c<e.length;c++){var l=(0,e[c])(t,r,n,o,a,_);if(null==l)return null;l.data&&I(l.data,"expectedType")&&i.push(l.data.expectedType)}return new s("Invalid "+o+" `"+a+"` supplied to `"+n+"`"+(i.length>0?", expected one of type ["+i.join(", ")+"]":"")+".")}))},shape:function(e){return c((function(t,r,n,o,a){var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");for(var l in e){var f=e[l];if("function"!=typeof f)return u(n,o,a,l,m(f));var d=f(i,l,n,o,a+"."+l,_);if(d)return d}return null}))},exact:function(e){return c((function(t,r,n,o,a){var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");var l=j({},t[r],e);for(var f in l){var d=e[f];if(I(e,f)&&"function"!=typeof d)return u(n,o,a,f,m(d));if(!d)return new s("Invalid "+o+" `"+a+"` key `"+f+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(t[r],null,"  ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null,"  "));var y=d(i,f,n,o,a+"."+f,_);if(y)return y}return null}))}};function i(e,t){return e===t?0!==e||1/e==1/t:e!=e&&t!=t}function s(e,t){this.message=e,this.data=t&&"object"==typeof t?t:{},this.stack=""}function c(e){if("production"!==process.env.NODE_ENV)var r={},n=0;function a(a,i,c,l,u,f,p){if(l=l||o,f=f||c,p!==_){if(t){var m=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw m.name="Invariant Violation",m}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var d=l+":"+c;!r[d]&&n<3&&(q("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+l+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),r[d]=!0,n++)}}return null==i[c]?a?null===i[c]?new s("The "+u+" `"+f+"` is marked as required in `"+l+"`, but its value is `null`."):new s("The "+u+" `"+f+"` is marked as required in `"+l+"`, but its value is `undefined`."):null:e(i,c,l,u,f)}var i=a.bind(null,!1);return i.isRequired=a.bind(null,!0),i}function l(e){return c((function(t,r,n,o,a,i){var c=t[r];return p(c)!==e?new s("Invalid "+o+" `"+a+"` of type `"+m(c)+"` supplied to `"+n+"`, expected `"+e+"`.",{expectedType:e}):null}))}function u(e,t,r,n,o){return new s((e||"React class")+": "+t+" type `"+r+"."+n+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function f(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(f);if(null===t||e(t))return!0;var o=function(e){var t=e&&(r&&e[r]||e[n]);if("function"==typeof t)return t}(t);if(!o)return!1;var a,i=o.call(t);if(o!==t.entries){for(;!(a=i.next()).done;)if(!f(a.value))return!1}else for(;!(a=i.next()).done;){var s=a.value;if(s&&!f(s[1]))return!1}return!0;default:return!1}}function p(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function m(e){if(null==e)return""+e;var t=p(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function d(e){var t=m(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return s.prototype=Error.prototype,a.checkPropTypes=z,a.resetWarningCache=z.resetWarningCache,a.PropTypes=a,a};function W(){}function U(){}U.resetWarningCache=W;var Y=n((function(e){if("production"!==process.env.NODE_ENV){var t=C;e.exports=L(t.isElement,!0)}else e.exports=function(){function e(e,t,r,n,o,a){if(a!==_){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:U,resetWarningCache:W};return r.PropTypes=r,r}()}));const J=({variant:t="primary",size:r="md",onClick:n,children:o,icon:a,iconPosition:i="start",className:s,style:c="default",processing:l=!1})=>{let u=`btn ${s}`;"default"!==t&&(u+=` btn-${t}`),"md"!==r&&(u+=` btn-${r}`),"default"!==c&&(u+=` btn-${c}`),l&&(u+=" btn-processing");const f=l?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),o&&e.createElement("span",null,o,"…")):a?"end"===i?e.createElement(e.Fragment,null,o&&e.createElement("span",null,o),e.createElement("i",{className:`fa-solid ${a}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${a}`,"aria-hidden":"true"}),o&&e.createElement("span",null,o)):o&&e.createElement("span",null,o);return e.createElement("button",{className:u,onClick:n},f)};J.propTypes={variant:Y.oneOf(["primary","secondary","terciary","outline"]),size:Y.oneOf(["xs","md","lg"]),onClick:Y.func,children:Y.node,icon:Y.string,iconPosition:Y.oneOf(["start","end"]),className:Y.string,style:Y.oneOf(["default","success","danger","warning","link"]),processing:Y.bool};const B=()=>({toCamelCase:t((e=>{let t=e?.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(function(e,t){return 0==+e?"":0===t?e?.toLowerCase():e?.toUpperCase()}));return t=t?.replace(/^\d+/,""),t=t?.replace(/[^a-zA-Z0-9_]/g,""),t}),[])}),Z=({children:t,className:r,id:n,name:o,status:a=!1,setStatus:i})=>{const{toCamelCase:s}=B();let c=n;n||"string"!=typeof t||(c=s(t));return e.createElement("div",{className:`form-group form-check ${r}`},e.createElement("label",{className:"checkbox"},e.createElement("input",{type:"checkbox",checked:a,onChange:e=>{i(e.target.checked)},minLength:"1",id:c,name:o}),e.createElement("span",{className:"outer"},e.createElement("span",{className:"inner"})),t))};Z.propTypes={className:Y.string,id:Y.string,name:Y.string,status:Y.bool,setStatus:Y.func};const H=({className:t,disabled:n,helpText:o,icon:a,label:i="Label",name:s,onChange:c,prefix:l,requiredText:u,showError:f,setShowError:p,size:m="md",suffix:d,type:y="text",value:b})=>{const{toCamelCase:g}=B(),h="lg"===m?"form-control-lg":"xs"===m?"form-control-xs":"",v=g(i);return r((()=>{f&&setTimeout((()=>{p(!1)}),3e3)}),[f]),e.createElement("div",{className:`position-relative ${t}`},l||d||a?e.createElement("div",{className:"input-group "+(f?"not-validated":""),"data-error":u},a&&e.createElement("span",{className:"input-group-text"},e.createElement("i",{className:`fa-solid ${a}`})),l&&e.createElement("span",{className:"input-group-text"},l),e.createElement("div",{className:"form-floating"},e.createElement("input",{type:y,className:`form-control ${h}`,value:b,id:v,name:s,placeholder:i,onChange:c,required:!!u}),e.createElement("label",{htmlFor:v},i)),d&&e.createElement("span",{className:"input-group-text"},d)):e.createElement("div",{className:"form-floating "+(f?"not-validated":""),"data-error":u},e.createElement("input",{type:y,className:`form-control ${h}`,value:b,id:v,placeholder:i,onChange:c,required:!!u,name:s,disabled:n}),e.createElement("label",{htmlFor:v},i)),o&&e.createElement("small",{className:"form-text text-muted"},o))};H.propTypes={className:Y.string,disabled:Y.bool,helpText:Y.string,icon:Y.string,label:Y.string,name:Y.string,onChange:Y.func,prefix:Y.string,requiredText:Y.string,size:Y.oneOf(["xs","md","lg"]),showError:Y.bool,setShowError:Y.func,suffix:Y.string,type:Y.oneOf(["color","date","datetime-local","email","file","image","month","number","password","tel","text","time","url","week"]),value:Y.oneOfType([Y.string,Y.number])};const G=({children:t,className:r,id:n,name:o,setStatus:a,status:i=!1})=>{const{toCamelCase:s}=B();let c=n;n||"string"!=typeof t||(c=s(t));return e.createElement("div",{className:`form-group form-check ${r}`},e.createElement("label",{className:"radio"},e.createElement("input",{type:"radio",checked:i,onChange:e=>{a(e.target.checked)},minLength:"1",id:c,name:o}),e.createElement("span",{className:"outer"},e.createElement("span",{className:"inner"})),t))};G.propTypes={className:Y.string,id:Y.string,name:Y.string,setStatus:Y.func,status:Y.bool};const K=({children:t,className:r,icon:n=!1,id:o,name:a,size:i,setStatus:s,status:c=!1,switchPosition:l="start"})=>{const{toCamelCase:u}=B(),f="lg"===i?"form-switch-lg":"xs"===i?"form-switch-xs":"",p=o||u(t);return e.createElement("div",{className:`form-check form-switch ${f} ${r} ${"end"===l?"switch-end":""} ${n?"switch-icon":""}`},e.createElement("input",{className:"form-check-input",type:"checkbox",role:"switch",onChange:e=>{s(e.target.checked)},id:p,name:a,checked:c}),t&&e.createElement("label",{className:"form-check-label",htmlFor:p},t))};K.propTypes={className:Y.string,icon:Y.bool,id:Y.string,name:Y.string,setStatus:Y.func,status:Y.bool,switchPosition:Y.oneOf(["start","end"])};const Q=({className:t,helpText:n,label:o="Label",name:a,onChange:i,requiredText:s,showError:c,setShowError:l,size:u="md"})=>{const{toCamelCase:f}=B(),p="lg"===u?"form-control-lg":"xs"===u?"form-control-xs":"",m=f(o);return r((()=>{c&&setTimeout((()=>{l(!1)}),3e3)}),[c]),e.createElement("div",{className:`position-relative ${t}`},e.createElement("div",{className:"form-floating "+(c?"not-validated":""),"data-error":s},e.createElement("textarea",{className:`form-control ${p}`,onChange:i,placeholder:o,id:m,name:a,required:!!s}),e.createElement("label",{htmlFor:m},o),n&&e.createElement("small",{className:"form-text text-muted"},n)))};Q.propTypes={className:Y.string,helpText:Y.string,label:Y.string,name:Y.string,onChange:Y.func,requiredText:Y.string,showError:Y.bool,size:Y.oneOf(["xs","md","lg"])};export{J as Button,Z as Checkbox,H as Input,G as Radio,K as Switch,Q as Textarea};

package/dist/index.js

@@ -1 +1,14 @@
-"use strict";var e=require("react");const n=({variant:n,size:t,onClick:a,children:l,icon:r,iconPosition:s,className:i,style:c,processing:o})=>{let m=`btn ${i}`;"default"!==n&&(m+=` btn-${n}`),"md"!==t&&(m+=` btn-${t}`),"default"!==c&&(m+=` btn-${c}`),o&&(m+=" btn-processing");const u=o?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),l&&e.createElement("span",null,l,"…")):r?"end"===s?e.createElement(e.Fragment,null,l&&e.createElement("span",null,l),e.createElement("i",{className:`fa-solid ${r}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${r}`,"aria-hidden":"true"}),l&&e.createElement("span",null,l)):l&&e.createElement("span",null,l);return e.createElement("button",{className:m,onClick:a},u)};n.propTypes={},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1},exports.Button=n;
+"use strict";var e=require("react");function t(e,t){return e(t={exports:{}},t.exports),t.exports
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */}var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,a=r?Symbol.for("react.fragment"):60107,i=r?Symbol.for("react.strict_mode"):60108,s=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,l=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.async_mode"):60111,f=r?Symbol.for("react.concurrent_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,m=r?Symbol.for("react.suspense"):60113,d=r?Symbol.for("react.suspense_list"):60120,y=r?Symbol.for("react.memo"):60115,b=r?Symbol.for("react.lazy"):60116,g=r?Symbol.for("react.block"):60121,h=r?Symbol.for("react.fundamental"):60117,v=r?Symbol.for("react.responder"):60118,E=r?Symbol.for("react.scope"):60119;function x(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case u:case f:case a:case s:case i:case m:return e;default:switch(e=e&&e.$$typeof){case l:case p:case b:case y:case c:return e;default:return t}}case o:return t}}}function S(e){return x(e)===f}var w={AsyncMode:u,ConcurrentMode:f,ContextConsumer:l,ContextProvider:c,Element:n,ForwardRef:p,Fragment:a,Lazy:b,Memo:y,Portal:o,Profiler:s,StrictMode:i,Suspense:m,isAsyncMode:function(e){return S(e)||x(e)===u},isConcurrentMode:S,isContextConsumer:function(e){return x(e)===l},isContextProvider:function(e){return x(e)===c},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},isForwardRef:function(e){return x(e)===p},isFragment:function(e){return x(e)===a},isLazy:function(e){return x(e)===b},isMemo:function(e){return x(e)===y},isPortal:function(e){return x(e)===o},isProfiler:function(e){return x(e)===s},isStrictMode:function(e){return x(e)===i},isSuspense:function(e){return x(e)===m},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===a||e===f||e===s||e===i||e===m||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===b||e.$$typeof===y||e.$$typeof===c||e.$$typeof===l||e.$$typeof===p||e.$$typeof===h||e.$$typeof===v||e.$$typeof===E||e.$$typeof===g)},typeOf:x},O=t((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,n=e?Symbol.for("react.portal"):60106,o=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,s=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,l=e?Symbol.for("react.async_mode"):60111,u=e?Symbol.for("react.concurrent_mode"):60111,f=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,m=e?Symbol.for("react.suspense_list"):60120,d=e?Symbol.for("react.memo"):60115,y=e?Symbol.for("react.lazy"):60116,b=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,h=e?Symbol.for("react.responder"):60118,v=e?Symbol.for("react.scope"):60119;function E(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:var m=e.type;switch(m){case l:case u:case o:case i:case a:case p:return m;default:var b=m&&m.$$typeof;switch(b){case c:case f:case y:case d:case s:return b;default:return t}}case n:return t}}}var x=l,S=u,w=c,O=s,N=r,$=f,C=o,T=y,k=d,P=n,j=i,_=a,I=p,M=!1;function R(e){return E(e)===u}t.AsyncMode=x,t.ConcurrentMode=S,t.ContextConsumer=w,t.ContextProvider=O,t.Element=N,t.ForwardRef=$,t.Fragment=C,t.Lazy=T,t.Memo=k,t.Portal=P,t.Profiler=j,t.StrictMode=_,t.Suspense=I,t.isAsyncMode=function(e){return M||(M=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),R(e)||E(e)===l},t.isConcurrentMode=R,t.isContextConsumer=function(e){return E(e)===c},t.isContextProvider=function(e){return E(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return E(e)===f},t.isFragment=function(e){return E(e)===o},t.isLazy=function(e){return E(e)===y},t.isMemo=function(e){return E(e)===d},t.isPortal=function(e){return E(e)===n},t.isProfiler=function(e){return E(e)===i},t.isStrictMode=function(e){return E(e)===a},t.isSuspense=function(e){return E(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===u||e===i||e===a||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===s||e.$$typeof===c||e.$$typeof===f||e.$$typeof===g||e.$$typeof===h||e.$$typeof===v||e.$$typeof===b)},t.typeOf=E}()}));O.AsyncMode,O.ConcurrentMode,O.ContextConsumer,O.ContextProvider,O.Element,O.ForwardRef,O.Fragment,O.Lazy,O.Memo,O.Portal,O.Profiler,O.StrictMode,O.Suspense,O.isAsyncMode,O.isConcurrentMode,O.isContextConsumer,O.isContextProvider,O.isElement,O.isForwardRef,O.isFragment,O.isLazy,O.isMemo,O.isPortal,O.isProfiler,O.isStrictMode,O.isSuspense,O.isValidElementType,O.typeOf;var N=t((function(e){"production"===process.env.NODE_ENV?e.exports=w:e.exports=O})),$=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var k=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map((function(e){return t[e]}));if("0123456789"!==n.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,o=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),a=1;a<arguments.length;a++){for(var i in r=Object(arguments[a]))C.call(r,i)&&(o[i]=r[i]);if($){n=$(r);for(var s=0;s<n.length;s++)T.call(r,n[s])&&(o[n[s]]=r[n[s]])}}return o},P="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",j=Function.call.bind(Object.prototype.hasOwnProperty),_=function(){};if("production"!==process.env.NODE_ENV){var I=P,M={},R=j;_=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function A(e,t,r,n,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(R(e,a)){var i;try{if("function"!=typeof e[a]){var s=Error((n||"React class")+": "+r+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw s.name="Invariant Violation",s}i=e[a](t,a,n,r,null,I)}catch(e){i=e}if(!i||i instanceof Error||_((n||"React class")+": type specification of "+r+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in M)){M[i.message]=!0;var c=o?o():"";_("Failed "+r+" type: "+i.message+(null!=c?c:""))}}}A.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(M={})};var F=A,V=function(){};function z(){return null}"production"!==process.env.NODE_ENV&&(V=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}});var q=function(e,t){var r="function"==typeof Symbol&&Symbol.iterator,n="@@iterator";var o="<<anonymous>>",a={array:l("array"),bigint:l("bigint"),bool:l("boolean"),func:l("function"),number:l("number"),object:l("object"),string:l("string"),symbol:l("symbol"),any:c(z),arrayOf:function(e){return c((function(t,r,n,o,a){if("function"!=typeof e)return new s("Property `"+a+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var i=t[r];if(!Array.isArray(i))return new s("Invalid "+o+" `"+a+"` of type `"+p(i)+"` supplied to `"+n+"`, expected an array.");for(var c=0;c<i.length;c++){var l=e(i,c,n,o,a+"["+c+"]",P);if(l instanceof Error)return l}return null}))},element:c((function(t,r,n,o,a){var i=t[r];return e(i)?null:new s("Invalid "+o+" `"+a+"` of type `"+p(i)+"` supplied to `"+n+"`, expected a single ReactElement.")})),elementType:c((function(e,t,r,n,o){var a=e[t];return N.isValidElementType(a)?null:new s("Invalid "+n+" `"+o+"` of type `"+p(a)+"` supplied to `"+r+"`, expected a single ReactElement type.")})),instanceOf:function(e){return c((function(t,r,n,a,i){if(!(t[r]instanceof e)){var c=e.name||o;return new s("Invalid "+a+" `"+i+"` of type `"+(((l=t[r]).constructor&&l.constructor.name?l.constructor.name:o)+"` supplied to `")+n+"`, expected instance of `"+c+"`.")}var l;return null}))},node:c((function(e,t,r,n,o){return f(e[t])?null:new s("Invalid "+n+" `"+o+"` supplied to `"+r+"`, expected a ReactNode.")})),objectOf:function(e){return c((function(t,r,n,o,a){if("function"!=typeof e)return new s("Property `"+a+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected an object.");for(var l in i)if(j(i,l)){var u=e(i,l,n,o,a+"."+l,P);if(u instanceof Error)return u}return null}))},oneOf:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&V(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),z;return c((function(t,r,n,o,a){for(var c=t[r],l=0;l<e.length;l++)if(i(c,e[l]))return null;var u=JSON.stringify(e,(function(e,t){return"symbol"===m(t)?String(t):t}));return new s("Invalid "+o+" `"+a+"` of value `"+String(c)+"` supplied to `"+n+"`, expected one of "+u+".")}))},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&V("Invalid argument supplied to oneOfType, expected an instance of array."),z;for(var t=0;t<e.length;t++){var r=e[t];if("function"!=typeof r)return V("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+d(r)+" at index "+t+"."),z}return c((function(t,r,n,o,a){for(var i=[],c=0;c<e.length;c++){var l=(0,e[c])(t,r,n,o,a,P);if(null==l)return null;l.data&&j(l.data,"expectedType")&&i.push(l.data.expectedType)}return new s("Invalid "+o+" `"+a+"` supplied to `"+n+"`"+(i.length>0?", expected one of type ["+i.join(", ")+"]":"")+".")}))},shape:function(e){return c((function(t,r,n,o,a){var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");for(var l in e){var f=e[l];if("function"!=typeof f)return u(n,o,a,l,m(f));var d=f(i,l,n,o,a+"."+l,P);if(d)return d}return null}))},exact:function(e){return c((function(t,r,n,o,a){var i=t[r],c=p(i);if("object"!==c)return new s("Invalid "+o+" `"+a+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");var l=k({},t[r],e);for(var f in l){var d=e[f];if(j(e,f)&&"function"!=typeof d)return u(n,o,a,f,m(d));if(!d)return new s("Invalid "+o+" `"+a+"` key `"+f+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(t[r],null,"  ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null,"  "));var y=d(i,f,n,o,a+"."+f,P);if(y)return y}return null}))}};function i(e,t){return e===t?0!==e||1/e==1/t:e!=e&&t!=t}function s(e,t){this.message=e,this.data=t&&"object"==typeof t?t:{},this.stack=""}function c(e){if("production"!==process.env.NODE_ENV)var r={},n=0;function a(a,i,c,l,u,f,p){if(l=l||o,f=f||c,p!==P){if(t){var m=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw m.name="Invariant Violation",m}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var d=l+":"+c;!r[d]&&n<3&&(V("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+l+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),r[d]=!0,n++)}}return null==i[c]?a?null===i[c]?new s("The "+u+" `"+f+"` is marked as required in `"+l+"`, but its value is `null`."):new s("The "+u+" `"+f+"` is marked as required in `"+l+"`, but its value is `undefined`."):null:e(i,c,l,u,f)}var i=a.bind(null,!1);return i.isRequired=a.bind(null,!0),i}function l(e){return c((function(t,r,n,o,a,i){var c=t[r];return p(c)!==e?new s("Invalid "+o+" `"+a+"` of type `"+m(c)+"` supplied to `"+n+"`, expected `"+e+"`.",{expectedType:e}):null}))}function u(e,t,r,n,o){return new s((e||"React class")+": "+t+" type `"+r+"."+n+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function f(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(f);if(null===t||e(t))return!0;var o=function(e){var t=e&&(r&&e[r]||e[n]);if("function"==typeof t)return t}(t);if(!o)return!1;var a,i=o.call(t);if(o!==t.entries){for(;!(a=i.next()).done;)if(!f(a.value))return!1}else for(;!(a=i.next()).done;){var s=a.value;if(s&&!f(s[1]))return!1}return!0;default:return!1}}function p(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function m(e){if(null==e)return""+e;var t=p(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function d(e){var t=m(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return s.prototype=Error.prototype,a.checkPropTypes=F,a.resetWarningCache=F.resetWarningCache,a.PropTypes=a,a};function D(){}function L(){}L.resetWarningCache=D;var W=t((function(e){if("production"!==process.env.NODE_ENV){var t=N;e.exports=q(t.isElement,!0)}else e.exports=function(){function e(e,t,r,n,o,a){if(a!==P){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:L,resetWarningCache:D};return r.PropTypes=r,r}()}));const U=({variant:t="primary",size:r="md",onClick:n,children:o,icon:a,iconPosition:i="start",className:s,style:c="default",processing:l=!1})=>{let u=`btn ${s}`;"default"!==t&&(u+=` btn-${t}`),"md"!==r&&(u+=` btn-${r}`),"default"!==c&&(u+=` btn-${c}`),l&&(u+=" btn-processing");const f=l?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),o&&e.createElement("span",null,o,"…")):a?"end"===i?e.createElement(e.Fragment,null,o&&e.createElement("span",null,o),e.createElement("i",{className:`fa-solid ${a}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${a}`,"aria-hidden":"true"}),o&&e.createElement("span",null,o)):o&&e.createElement("span",null,o);return e.createElement("button",{className:u,onClick:n},f)};U.propTypes={variant:W.oneOf(["primary","secondary","terciary","outline"]),size:W.oneOf(["xs","md","lg"]),onClick:W.func,children:W.node,icon:W.string,iconPosition:W.oneOf(["start","end"]),className:W.string,style:W.oneOf(["default","success","danger","warning","link"]),processing:W.bool};const Y=()=>({toCamelCase:e.useCallback((e=>{let t=e?.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(function(e,t){return 0==+e?"":0===t?e?.toLowerCase():e?.toUpperCase()}));return t=t?.replace(/^\d+/,""),t=t?.replace(/[^a-zA-Z0-9_]/g,""),t}),[])}),B=({children:t,className:r,id:n,name:o,status:a=!1,setStatus:i})=>{const{toCamelCase:s}=Y();let c=n;n||"string"!=typeof t||(c=s(t));return e.createElement("div",{className:`form-group form-check ${r}`},e.createElement("label",{className:"checkbox"},e.createElement("input",{type:"checkbox",checked:a,onChange:e=>{i(e.target.checked)},minLength:"1",id:c,name:o}),e.createElement("span",{className:"outer"},e.createElement("span",{className:"inner"})),t))};B.propTypes={className:W.string,id:W.string,name:W.string,status:W.bool,setStatus:W.func};const J=({className:t,disabled:r,helpText:n,icon:o,label:a="Label",name:i,onChange:s,prefix:c,requiredText:l,showError:u,setShowError:f,size:p="md",suffix:m,type:d="text",value:y})=>{const{toCamelCase:b}=Y(),g="lg"===p?"form-control-lg":"xs"===p?"form-control-xs":"",h=b(a);return e.useEffect((()=>{u&&setTimeout((()=>{f(!1)}),3e3)}),[u]),e.createElement("div",{className:`position-relative ${t}`},c||m||o?e.createElement("div",{className:"input-group "+(u?"not-validated":""),"data-error":l},o&&e.createElement("span",{className:"input-group-text"},e.createElement("i",{className:`fa-solid ${o}`})),c&&e.createElement("span",{className:"input-group-text"},c),e.createElement("div",{className:"form-floating"},e.createElement("input",{type:d,className:`form-control ${g}`,value:y,id:h,name:i,placeholder:a,onChange:s,required:!!l}),e.createElement("label",{htmlFor:h},a)),m&&e.createElement("span",{className:"input-group-text"},m)):e.createElement("div",{className:"form-floating "+(u?"not-validated":""),"data-error":l},e.createElement("input",{type:d,className:`form-control ${g}`,value:y,id:h,placeholder:a,onChange:s,required:!!l,name:i,disabled:r}),e.createElement("label",{htmlFor:h},a)),n&&e.createElement("small",{className:"form-text text-muted"},n))};J.propTypes={className:W.string,disabled:W.bool,helpText:W.string,icon:W.string,label:W.string,name:W.string,onChange:W.func,prefix:W.string,requiredText:W.string,size:W.oneOf(["xs","md","lg"]),showError:W.bool,setShowError:W.func,suffix:W.string,type:W.oneOf(["color","date","datetime-local","email","file","image","month","number","password","tel","text","time","url","week"]),value:W.oneOfType([W.string,W.number])};const Z=({children:t,className:r,id:n,name:o,setStatus:a,status:i=!1})=>{const{toCamelCase:s}=Y();let c=n;n||"string"!=typeof t||(c=s(t));return e.createElement("div",{className:`form-group form-check ${r}`},e.createElement("label",{className:"radio"},e.createElement("input",{type:"radio",checked:i,onChange:e=>{a(e.target.checked)},minLength:"1",id:c,name:o}),e.createElement("span",{className:"outer"},e.createElement("span",{className:"inner"})),t))};Z.propTypes={className:W.string,id:W.string,name:W.string,setStatus:W.func,status:W.bool};const H=({children:t,className:r,icon:n=!1,id:o,name:a,size:i,setStatus:s,status:c=!1,switchPosition:l="start"})=>{const{toCamelCase:u}=Y(),f="lg"===i?"form-switch-lg":"xs"===i?"form-switch-xs":"",p=o||u(t);return e.createElement("div",{className:`form-check form-switch ${f} ${r} ${"end"===l?"switch-end":""} ${n?"switch-icon":""}`},e.createElement("input",{className:"form-check-input",type:"checkbox",role:"switch",onChange:e=>{s(e.target.checked)},id:p,name:a,checked:c}),t&&e.createElement("label",{className:"form-check-label",htmlFor:p},t))};H.propTypes={className:W.string,icon:W.bool,id:W.string,name:W.string,setStatus:W.func,status:W.bool,switchPosition:W.oneOf(["start","end"])};const G=({className:t,helpText:r,label:n="Label",name:o,onChange:a,requiredText:i,showError:s,setShowError:c,size:l="md"})=>{const{toCamelCase:u}=Y(),f="lg"===l?"form-control-lg":"xs"===l?"form-control-xs":"",p=u(n);return e.useEffect((()=>{s&&setTimeout((()=>{c(!1)}),3e3)}),[s]),e.createElement("div",{className:`position-relative ${t}`},e.createElement("div",{className:"form-floating "+(s?"not-validated":""),"data-error":i},e.createElement("textarea",{className:`form-control ${f}`,onChange:a,placeholder:n,id:p,name:o,required:!!i}),e.createElement("label",{htmlFor:p},n),r&&e.createElement("small",{className:"form-text text-muted"},r)))};G.propTypes={className:W.string,helpText:W.string,label:W.string,name:W.string,onChange:W.func,requiredText:W.string,showError:W.bool,size:W.oneOf(["xs","md","lg"])},exports.Button=U,exports.Checkbox=B,exports.Input=J,exports.Radio=Z,exports.Switch=H,exports.Textarea=G;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groovinads-ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "repository": "git@bitbucket.org:groovinads/react-components.git",
@@ -22,10 +22,10 @@
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
     "rollup": "^4.14.0",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
@@ -44,5 +44,8 @@
     "sb": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-lib": "rollup -c"
+  },
+  "dependencies": {
+    "react-router-dom": "^6.23.0"
   }
 }

package/rollup.config.mjs

@@ -3,6 +3,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import external from 'rollup-plugin-peer-deps-external';
 import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
+import commonjs from 'rollup-plugin-commonjs';
 // import typescript from 'rollup-plugin-typescript2';
 
 export default [
@@ -20,6 +21,9 @@ export default [
       }
     ],
     plugins: [
+      commonjs({
+        include: 'node_modules/**',  // incluye todos los módulos de node_modules
+      }),
       postcss({
         plugins: [],
         minimize: true,

package/src/components/Button/Button.jsx

@@ -1,89 +1,78 @@
 import React from 'react';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 const Button = ({
-	variant,
-	size,
-	onClick,
-	children,
-	icon,
-	iconPosition,
-	className,
-	style,
-	processing,
+  variant = 'primary',
+  size = 'md',
+  onClick,
+  children,
+  icon,
+  iconPosition = 'start',
+  className,
+  style = 'default',
+  processing = false,
 }) => {
-	let classes = `btn ${className}`;
+  let classes = `btn ${className}`;
 
-	// Variant
-	if (variant !== 'default') {
-		classes += ` btn-${variant}`;
-	}
+  // Variant
+  if (variant !== 'default') {
+    classes += ` btn-${variant}`;
+  }
 
-	// Size
-	if (size !== 'md') {
-		classes += ` btn-${size}`;
-	}
+  // Size
+  if (size !== 'md') {
+    classes += ` btn-${size}`;
+  }
 
-	// Style
-	if (style !== 'default') {
-		classes += ` btn-${style}`;
-	}
+  // Style
+  if (style !== 'default') {
+    classes += ` btn-${style}`;
+  }
 
-	// Processing
-	if (processing) {
-		classes += ` btn-processing`;
-	}
+  // Processing
+  if (processing) {
+    classes += ` btn-processing`;
+  }
 
-	// Icon
-    const content = processing ? (
-        <>
-            <i className='fa-solid fa-spinner-third fa-spin' aria-hidden='true'></i>
-            {children && <span>{children}…</span>}
-        </>
-    ) : icon ? (
-        iconPosition === 'end' ? (
-            <>
-                {children && <span>{children}</span>}
-                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
-            </>
-        ) : (
-            <>
-                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
-                {children && <span>{children}</span>}
-            </>
-        )
+  // Icon
+  const content = processing ? (
+    <>
+      <i className='fa-solid fa-spinner-third fa-spin' aria-hidden='true'></i>
+      {children && <span>{children}…</span>}
+    </>
+  ) : icon ? (
+    iconPosition === 'end' ? (
+      <>
+        {children && <span>{children}</span>}
+        <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+      </>
     ) : (
-        children && <span>{children}</span>
-    );
+      <>
+        <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+        {children && <span>{children}</span>}
+      </>
+    )
+  ) : (
+    children && <span>{children}</span>
+  );
 
-	return (
-		<button className={classes} onClick={onClick}>
-			{content}
-		</button>
-	);
+  return (
+    <button className={classes} onClick={onClick}>
+      {content}
+    </button>
+  );
 };
 
 Button.propTypes = {
-	// variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
-	// size: PropTypes.oneOf(['xs', 'md', 'lg']),
-	// onClick: PropTypes.func,
-	// children: PropTypes.node,
-	// icon: PropTypes.node,
-	// iconPosition: PropTypes.oneOf(['start', 'end']),
-	// className: PropTypes.string,
-	// style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
-	// processing: PropTypes.bool,
-};
-
-Button.defaultProps = {
-	variant: 'primary',
-	size: 'md',
-	onClick: null,
-	icon: null,
-	iconPosition: 'start',
-	className: '',
-	style: 'default',
-	processing: false,
+  variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
+  size: PropTypes.oneOf(['xs', 'md', 'lg']),
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  icon: PropTypes.string,
+  iconPosition: PropTypes.oneOf(['start', 'end']),
+  className: PropTypes.string,
+  style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
+  processing: PropTypes.bool,
 };
 
 export default Button;

package/src/components/Button/index.js

@@ -1,3 +1,3 @@
 import Button from "./Button";
 
-export default Button;
+export { Button };

package/src/components/Inputs/Checkbox.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// HOOKS
+import useTextFormatter from '../../hooks/textFormatter';
+
+// Checkbox
+const Checkbox = ({
+	children,
+	className,
+	id,
+	name,
+	status = false,
+	setStatus
+}) => {
+  	const { toCamelCase } = useTextFormatter();
+
+	let checkboxId = id;
+		if (!id && typeof children === 'string') {
+		checkboxId = toCamelCase(children);
+	}
+
+	const handleChange = (event) => {
+		setStatus(event.target.checked);
+	};
+
+	return (
+		<div className={`form-group form-check ${className}`}>
+			<label className='checkbox'>
+				<input
+					type='checkbox'
+					checked={status}
+					onChange={handleChange}
+					minLength='1'
+					id={checkboxId}
+					name={name}
+				/>
+				<span className='outer'>
+					<span className='inner'></span>
+				</span>
+				{children}
+			</label>
+		</div>
+	);
+};
+
+Checkbox.propTypes = {
+	className: PropTypes.string,
+	id: PropTypes.string,
+	name: PropTypes.string,
+	status: PropTypes.bool,
+	setStatus: PropTypes.func,
+};
+
+export default Checkbox;

package/src/components/Inputs/Input.jsx

@@ -0,0 +1,124 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+// HOOKS
+import useTextFormatter from '../../hooks/textFormatter';
+
+// Input
+const Input = ({
+	className,
+	disabled,
+	helpText,
+	icon,
+	label = 'Label',
+	name,
+	onChange,
+	prefix,
+	requiredText,
+	showError,
+	setShowError,
+	size = 'md',
+	suffix,
+	type = 'text',
+	value
+}) => {
+	const { toCamelCase } = useTextFormatter();
+
+	const sizeClass =
+		size === 'lg' ? 'form-control-lg' : size === 'xs' ? 'form-control-xs' : '';
+	const id = toCamelCase(label);
+
+	useEffect(() => {
+		if (showError) {
+			setTimeout(() => {
+				setShowError(false);
+			}, 3000);
+		}
+	}, [showError]);
+
+	return (
+		<div className={`position-relative ${className}`}>
+			{prefix || suffix || icon ? (
+				<div
+					className={`input-group ${showError ? 'not-validated' : ''}`}
+					data-error={requiredText}
+				>
+					{icon && (
+						<span className='input-group-text'>
+							<i className={`fa-solid ${icon}`}></i>
+						</span>
+					)}
+					{prefix && <span className='input-group-text'>{prefix}</span>}
+					<div className='form-floating'>
+						<input
+							type={type}
+							className={`form-control ${sizeClass}`}
+							value={value}
+							id={id}
+							name={name}
+							placeholder={label}
+							onChange={onChange}
+							required={!!requiredText}
+						/>
+						<label htmlFor={id}>{label}</label>
+					</div>
+					{suffix && <span className='input-group-text'>{suffix}</span>}
+				</div>
+			) : (
+				<div
+					className={`form-floating ${showError ? 'not-validated' : ''}`}
+					data-error={requiredText}
+				>
+					<input
+						type={type}
+						className={`form-control ${sizeClass}`}
+						value={value}
+						id={id}
+						placeholder={label}
+						onChange={onChange}
+						required={!!requiredText}
+						name={name}
+						disabled={disabled}
+					/>
+					<label htmlFor={id}>{label}</label>
+				</div>
+			)}
+			{helpText && <small className='form-text text-muted'>{helpText}</small>}
+		</div>
+	);
+};
+
+Input.propTypes = {
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	helpText: PropTypes.string,
+	icon: PropTypes.string,
+	label: PropTypes.string,
+	name: PropTypes.string,
+	onChange: PropTypes.func,
+	prefix: PropTypes.string,
+	requiredText: PropTypes.string,
+	size: PropTypes.oneOf(['xs', 'md', 'lg']),
+	showError: PropTypes.bool,
+	setShowError: PropTypes.func,
+	suffix: PropTypes.string,
+	type: PropTypes.oneOf([
+		'color',
+		'date',
+		'datetime-local',
+		'email',
+		'file',
+		'image',
+		'month',
+		'number',
+		'password',
+		'tel',
+		'text',
+		'time',
+		'url',
+		'week',
+	]),
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default Input;

package/src/components/Inputs/Radio.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// HOOKS
+import useTextFormatter from '../../hooks/textFormatter';
+
+// Radio
+const Radio = ({
+	children,
+	className,
+	id,
+	name,
+	setStatus,
+	status = false
+}) => {
+	const { toCamelCase } = useTextFormatter();
+
+	let RadioId = id;
+	if (!id && typeof children === 'string') {
+		RadioId = toCamelCase(children);
+	}
+
+	const handleChange = (event) => {
+		setStatus(event.target.checked);
+	};
+
+	return (
+		<div className={`form-group form-check ${className}`}>
+			<label className='radio'>
+				<input
+					type='radio'
+					checked={status}
+					onChange={handleChange}
+					minLength='1'
+					id={RadioId}
+					name={name}
+				/>
+				<span className='outer'>
+					<span className='inner'></span>
+				</span>
+				{children}
+			</label>
+		</div>
+	);
+};
+
+Radio.propTypes = {
+	className: PropTypes.string,
+	id: PropTypes.string,
+	name: PropTypes.string,
+	setStatus: PropTypes.func,
+	status: PropTypes.bool,
+};
+
+export default Radio;

package/src/components/Inputs/Switch.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// HOOKS
+import useTextFormatter from '../../hooks/textFormatter';
+
+const Switch = ({
+	children,
+	className,
+	icon = false,
+	id,
+	name,
+	size,
+	setStatus,
+	status = false,
+	switchPosition = 'start'
+}) => {
+	const { toCamelCase } = useTextFormatter();
+
+	const sizeClass =
+		size === 'lg' ? 'form-switch-lg' : size === 'xs' ? 'form-switch-xs' : '';
+
+	const inputId = id ? id : toCamelCase(children);
+
+	const handleChange = (event) => {
+		setStatus(event.target.checked);
+	};
+
+	return (
+		<div
+			className={`form-check form-switch ${sizeClass} ${className} ${
+				switchPosition === 'end' ? 'switch-end' : ''
+			} ${icon ? 'switch-icon' : ''}`}
+		>
+			<input
+				className='form-check-input'
+				type='checkbox'
+				role='switch'
+				onChange={handleChange}
+				id={inputId}
+				name={name}
+				checked={status}
+			/>
+			{children && (
+				<label className='form-check-label' htmlFor={inputId}>
+					{children}
+				</label>
+			)}
+		</div>
+	);
+};
+
+Switch.propTypes = {
+	className: PropTypes.string,
+	icon: PropTypes.bool,
+	id: PropTypes.string,
+	name: PropTypes.string,
+	setStatus: PropTypes.func,
+	status: PropTypes.bool,
+	switchPosition: PropTypes.oneOf(['start', 'end']),
+};
+
+export default Switch;

package/src/components/Inputs/Textarea.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+// HOOKS
+import useTextFormatter from '../../hooks/textFormatter';
+
+const Textarea = ({
+	className,
+	helpText,
+	label = 'Label',
+	name,
+	onChange,
+	requiredText,
+	showError,
+	setShowError,
+	size = 'md'
+}) => {
+	const { toCamelCase } = useTextFormatter();
+
+	const sizeClass =
+		size === 'lg' ? 'form-control-lg' : size === 'xs' ? 'form-control-xs' : '';
+	const id = toCamelCase(label);
+
+	useEffect(() => {
+		if (showError) {
+			setTimeout(() => {
+				setShowError(false);
+			}, 3000);
+		}
+	}, [showError]);
+
+	return (
+		<div className={`position-relative ${className}`}>
+			<div
+				className={`form-floating ${showError ? 'not-validated' : ''}`}
+				data-error={requiredText}
+			>
+				<textarea
+					className={`form-control ${sizeClass}`}
+					onChange={onChange}
+					placeholder={label}
+					id={id}
+					name={name}
+					required={!!requiredText}
+				/>
+				<label htmlFor={id}>{label}</label>
+				{helpText && <small className='form-text text-muted'>{helpText}</small>}
+			</div>
+		</div>
+	);
+};
+
+Textarea.propTypes = {
+	className: PropTypes.string,
+	helpText: PropTypes.string,
+	label: PropTypes.string,
+	name: PropTypes.string,
+	onChange: PropTypes.func,
+	requiredText: PropTypes.string,
+	showError: PropTypes.bool,
+	size: PropTypes.oneOf(['xs', 'md', 'lg']),
+};
+
+export default Textarea;

package/src/components/Inputs/index.js

@@ -0,0 +1,7 @@
+import Checkbox from './Checkbox';
+import Input from './Input';
+import Radio from './Radio';
+import Switch from './Switch';
+import Textarea from './Textarea';
+
+export { Checkbox, Input, Radio, Switch, Textarea }

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+import textFormatter from './textFormatter';
+
+export { textFormatter };

package/src/hooks/textFormatter.jsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+const useTextFormatter = () => {
+	const toCamelCase = useCallback((str) => {
+		let s = str?.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+			if (+match === 0) return ''; // or if (/\s+/.test(match)) for white spaces
+			return index === 0 ? match?.toLowerCase() : match?.toUpperCase();
+		});
+
+		// Ensure the string doesn't start with a number
+		s = s?.replace(/^\d+/, '');
+
+		// Remove any remaining non-alphanumeric characters (excluding underscores)
+		s = s?.replace(/[^a-zA-Z0-9_]/g, '');
+
+		return s;
+	}, []);
+
+	// Additional methods can be added here
+
+	return { toCamelCase };
+};
+
+export default useTextFormatter;

package/src/index.js

@@ -1,3 +1,9 @@
 import Button from "./components/Button/Button";
 
-export { Button };
+import Checkbox from './components/Inputs/Checkbox';
+import Input from './components/Inputs/Input';
+import Radio from './components/Inputs/Radio';
+import Switch from './components/Inputs/Switch';
+import Textarea from './components/Inputs/Textarea';
+
+export { Button, Checkbox, Input, Radio, Switch, Textarea }

package/src/stories/Button.stories.jsx

@@ -1,11 +1,11 @@
-import React from "react";
-import Button from "../components/Button/Button";
+import React from 'react';
+import Button from '../components/Button/Button';
 
 export default {
-  title: "Example/Button",
+  title: 'Buttons/Button',
   component: Button,
 };
 
 const Template = (args) => <Button {...args}>Button</Button>;
 
-export const Primary = Template.bind({});
+export const Default = Template.bind({});

package/src/stories/Checkbox.stories.jsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Checkbox from '../components/Inputs/Checkbox';
+
+export default {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+};
+
+const Template = (args) => {
+  const [status, setStatus] = useState(false);
+
+  return (
+    <Checkbox {...args} status={status} setStatus={setStatus}>Checkbox</Checkbox>
+  )
+};
+
+export const Default = Template.bind({});

package/src/stories/Input.stories.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import Input from '../components/Inputs/Input';
+
+export default {
+  title: 'Inputs/Input',
+  component: Input,
+};
+
+const Template = (args) => {
+    const [showError, setShowError] = useState(false);
+
+    return (
+        <>
+            <button onClick={()=>setShowError(true)}>False</button>
+            <Input {...args} setShowError={setShowError} showError={showError} />
+        </>
+    )
+};
+
+export const Default = Template.bind({});

package/src/stories/Radio.stories.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import Radio from '../components/Inputs/Radio';
+
+export default {
+  title: 'Inputs/Radio',
+  component: Radio,
+};
+
+const Template = (args) => {
+  const [status, setStatus] = useState(false);
+
+  return (
+    <Radio {...args} status={status} setStatus={setStatus}>Radio</Radio>
+  )
+};
+
+export const Default = Template.bind({});
+

package/src/stories/Switch.stories.jsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Switch from '../components/Inputs/Switch';
+
+export default {
+  title: 'Inputs/Switch',
+  component: Switch,
+};
+
+const Template = (args) => {
+  const [status, setStatus] = useState(false);
+
+  return (
+    <Switch {...args} status={status} setStatus={setStatus}>Switch</Switch>
+  )
+};
+
+export const Default = Template.bind({});

package/src/stories/Textarea.stories.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import Textarea from '../components/Inputs/Textarea';
+
+export default {
+  title: 'Inputs/Textarea',
+  component: Textarea,
+};
+
+const Template = (args) => {
+  const [showError, setShowError] = useState(false);
+
+  return (
+      <>
+          <button onClick={()=>setShowError(true)}>False</button>
+          <Textarea {...args} setShowError={setShowError} showError={showError} />
+      </>
+  )
+};
+
+export const Default = Template.bind({});