@dktunited-techoff/techoff-suite-ui 0.8.13 → 0.8.15

package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx

@@ -23,6 +23,10 @@ export const checkboxArgTypes = {
     description: 'Enable state of the checkbox.',
     table: { defaultValue: { summary: 'false' } },
   },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
 };
 
 # Checkbox
@@ -40,7 +44,6 @@ Checkboxes are applied when users can select all, several, or none of the option
         'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
       checked: false,
       disabled: false,
-      onChange: () => {},
     }}
     argTypes={checkboxArgTypes}
   >

package/esm/components/Inputs/BooleanInput/BooleanInput.css

@@ -12,6 +12,13 @@
   display: flex;
 }
 
+.boolean-input--disabled {
+  opacity: 0.5;
+}
+.boolean-input--disabled .boolean-input-content > div {
+  cursor: not-allowed;
+}
+
 /* ######## */
 /* INPUTS   */
 .boolean-input-content {

package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { BooleanInputProps } from './BooleanInput.types';
 import './BooleanInput.css';
-export declare const BooleanInput: ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => React.JSX.Element;
+export declare const BooleanInput: ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => React.JSX.Element;

package/esm/components/Inputs/BooleanInput/BooleanInput.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import './BooleanInput.css';
-export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }) => {
+export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }) => {
     // #########
     // Rendering
-    return (React.createElement("div", { className: "boolean-input" },
+    return (React.createElement("div", { className: `boolean-input ${disabled ? 'boolean-input--disabled' : ''}` },
         label && React.createElement("label", null, label),
         React.createElement("div", { className: "boolean-input-container" },
             React.createElement("div", { className: "boolean-input-content" },
-                React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue ?? 'Yes'),
-                React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse ?? 'No')))));
+                React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue),
+                React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse)))));
 };
 //# sourceMappingURL=BooleanInput.js.map

package/esm/components/Inputs/BooleanInput/BooleanInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC3B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,IAAI,KAAK,CACf;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,IAAI,IAAI,CACf,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7G,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,CACN;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,CACP,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Inputs/BooleanInput/BooleanInput.tsx

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { BooleanInputProps } from './BooleanInput.types';
 import './BooleanInput.css';
 
-export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
+export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
   // #########
   // Rendering
   return (
-    <div className="boolean-input">
+    <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
       <div className="boolean-input-container">
         <div className="boolean-input-content">
           <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
-            {labelTrue ?? 'Yes'}
+            {labelTrue}
           </div>
           <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
-            {labelFalse ?? 'No'}
+            {labelFalse}
           </div>
         </div>
       </div>

package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts

@@ -1,7 +1,8 @@
 export type BooleanInputProps = {
     label?: string;
-    labelFalse?: string;
-    labelTrue?: string;
+    labelFalse: string;
+    labelTrue: string;
+    disabled?: boolean;
     value?: boolean;
     onChange: (value: boolean) => void;
 };

package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts

@@ -1,7 +1,8 @@
 export type BooleanInputProps = {
   label?: string;
-  labelFalse?: string;
-  labelTrue?: string;
+  labelFalse: string;
+  labelTrue: string;
+  disabled?: boolean;
   value?: boolean;
   onChange: (value: boolean) => void;
 };

package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx

@@ -17,6 +17,11 @@ export const inputArgType = {
     control: 'text',
     description: 'Label of the TRUE value.',
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
   value: {
     control: 'boolean',
     description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
+  <Story
+    name="Overview"
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
+    argTypes={inputArgType}
+  >
     {args => <BooleanInput {...args} />}
   </Story>
 </Canvas>

package/esm/components/Inputs/TextInput/TextInput.css

@@ -8,6 +8,12 @@
   color: #012b49;
   font-weight: 700;
 }
+.text-input--disabled {
+  opacity: 0.5;
+}
+.text-input--disabled .boolean-input-container > div {
+  cursor: not-allowed;
+}
 .text-input-container {
   position: relative;
 }
@@ -30,6 +36,16 @@
   color: #4e5d6b;
   transform: translateY(-50%);
 }
+.text-input--error {
+  display: flex;
+  align-items: center;
+  color: #ed6a5e;
+  font-size: 12px;
+  font-weight: 600;
+}
+.text-input-container--error > input {
+  border: 2px solid #ed6a5e;
+}
 
 /* ######### */
 /* GLOBALS   */

package/esm/components/Inputs/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { TextInputProps } from './TextInput.types';
 import './TextInput.css';
-export declare const TextInput: ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => React.JSX.Element;
+export declare const TextInput: ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }: TextInputProps) => React.JSX.Element;

package/esm/components/Inputs/TextInput/TextInput.js

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { Icon } from '../../Icon/Icon';
 import './TextInput.css';
-export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }) => {
+export const TextInput = ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }) => {
     // ########
     // Handlers
     const handleChange = (e) => onChange(e.target.value);
     // #########
     // Rendering
-    return (React.createElement("div", { className: "text-input" },
+    return (React.createElement("div", { className: `text-input ${disabled ? 'text-input--disabled' : ''}` },
         label && React.createElement("label", null, label),
-        React.createElement("div", { className: "text-input-container" },
-            React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, onChange: handleChange }),
-            icon && React.createElement(Icon, { name: icon, size: "16" }))));
+        React.createElement("div", { className: `text-input-container ${errorLabel ? 'text-input-container--error' : ''}` },
+            React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, disabled: disabled, onBlur: onBlur, onChange: handleChange, onFocus: onFocus }),
+            icon && React.createElement(Icon, { name: icon, size: "16" })),
+        errorLabel && React.createElement("div", { className: "text-input--error" }, errorLabel)));
 };
 //# sourceMappingURL=TextInput.js.map

package/esm/components/Inputs/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,EAAE,EAAE;IACpG,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,sBAAsB;YACnC,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI;YAC1G,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,GACQ,EAAE,EAAE;IACnB,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE;QACnE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,wBAAwB,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,EAAE;YACvF,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB;YACD,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC;QAEL,UAAU,IAAI,6BAAK,SAAS,EAAC,mBAAmB,IAAE,UAAU,CAAO,CAChE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Inputs/TextInput/TextInput.tsx

@@ -4,7 +4,18 @@ import { Icon } from '../../Icon/Icon';
 import { TextInputProps } from './TextInput.types';
 import './TextInput.css';
 
-export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => {
+export const TextInput = ({
+  errorLabel,
+  icon,
+  label,
+  placeholder,
+  value,
+  autofocus,
+  disabled,
+  onBlur,
+  onChange,
+  onFocus,
+}: TextInputProps) => {
   // ########
   // Handlers
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
@@ -12,13 +23,24 @@ export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange
   // #########
   // Rendering
   return (
-    <div className="text-input">
+    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
-      <div className="text-input-container">
-        <input type="text" placeholder={placeholder} value={value} autoFocus={autofocus} onChange={handleChange} />
+      <div className={`text-input-container ${errorLabel ? 'text-input-container--error' : ''}`}>
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          autoFocus={autofocus}
+          disabled={disabled}
+          onBlur={onBlur}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
         {icon && <Icon name={icon} size="16" />}
       </div>
+
+      {errorLabel && <div className="text-input--error">{errorLabel}</div>}
     </div>
   );
 };

package/esm/components/Inputs/TextInput/TextInput.types.d.ts

@@ -1,8 +1,12 @@
 export type TextInputProps = {
+    errorLabel?: string;
     icon?: string;
     label?: string;
     placeholder?: string;
     value: string;
     autofocus?: boolean;
+    disabled?: boolean;
+    onBlur: () => void;
     onChange: (value: string) => void;
+    onFocus: () => void;
 };

package/esm/components/Inputs/TextInput/TextInput.types.ts

@@ -1,8 +1,12 @@
 export type TextInputProps = {
+  errorLabel?: string;
   icon?: string;
   label?: string;
   placeholder?: string;
   value: string;
   autofocus?: boolean;
+  disabled?: boolean;
+  onBlur: () => void;
   onChange: (value: string) => void;
+  onFocus: () => void;
 };

package/esm/components/Inputs/TextInput/__stories__/TextInput.stories.mdx

@@ -6,6 +6,7 @@ import { icons } from '../../../Icon/icons';
 <Meta title="Components/Inputs/TextInput" />
 
 export const inputArgTypes = {
+  errorLabel: { control: 'text', description: 'Show error on the input.' },
   icon: {
     control: 'select',
     options: Object.keys(icons),
@@ -28,10 +29,23 @@ export const inputArgTypes = {
     description: 'Auto focus the input once mounted',
     table: { defaultValue: { summary: 'false' } },
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Auto focus the input once mounted',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onBlur: {
+    control: 'function',
+    description: 'The handler called when the user blur the input.',
+  },
   onChange: {
     control: 'function',
     description: 'The handler called when the value of the input changes.',
   },
+  onFocus: {
+    control: 'function',
+    description: 'The handler called when the user focus the input.',
+  },
 };
 
 # Text Input
@@ -43,7 +57,14 @@ Text input allows the user to enter content and data when the expected user inpu
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', placeholder: 'This is a placeholder', autofocus: false, onChange: () => {} }}
+    args={{
+      errorLabel: '',
+      label: 'Label',
+      placeholder: 'This is a placeholder',
+      value: '',
+      autofocus: false,
+      disabled: false,
+    }}
     argTypes={inputArgTypes}
   >
     {args => <TextInput {...args} />}

package/lib/components/Checkbox/__stories__/Checkbox.stories.mdx

@@ -23,6 +23,10 @@ export const checkboxArgTypes = {
     description: 'Enable state of the checkbox.',
     table: { defaultValue: { summary: 'false' } },
   },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
 };
 
 # Checkbox
@@ -40,7 +44,6 @@ Checkboxes are applied when users can select all, several, or none of the option
         'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
       checked: false,
       disabled: false,
-      onChange: () => {},
     }}
     argTypes={checkboxArgTypes}
   >

package/lib/components/Inputs/BooleanInput/BooleanInput.css

@@ -12,6 +12,13 @@
   display: flex;
 }
 
+.boolean-input--disabled {
+  opacity: 0.5;
+}
+.boolean-input--disabled .boolean-input-content > div {
+  cursor: not-allowed;
+}
+
 /* ######## */
 /* INPUTS   */
 .boolean-input-content {

package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { BooleanInputProps } from './BooleanInput.types';
 import './BooleanInput.css';
-export declare const BooleanInput: ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => React.JSX.Element;
+export declare const BooleanInput: ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => React.JSX.Element;

package/lib/components/Inputs/BooleanInput/BooleanInput.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BooleanInput = void 0;
 const React = require("react");
 require("./BooleanInput.css");
-const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }) => {
+const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }) => {
     // #########
     // Rendering
-    return (React.createElement("div", { className: "boolean-input" },
+    return (React.createElement("div", { className: `boolean-input ${disabled ? 'boolean-input--disabled' : ''}` },
         label && React.createElement("label", null, label),
         React.createElement("div", { className: "boolean-input-container" },
             React.createElement("div", { className: "boolean-input-content" },
-                React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue ?? 'Yes'),
-                React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse ?? 'No')))));
+                React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue),
+                React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse)))));
 };
 exports.BooleanInput = BooleanInput;
 //# sourceMappingURL=BooleanInput.js.map

package/lib/components/Inputs/BooleanInput/BooleanInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC3B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,IAAI,KAAK,CACf;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,IAAI,IAAI,CACf,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}
+{"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7G,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,CACN;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,CACP,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}

package/lib/components/Inputs/BooleanInput/BooleanInput.tsx

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { BooleanInputProps } from './BooleanInput.types';
 import './BooleanInput.css';
 
-export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
+export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
   // #########
   // Rendering
   return (
-    <div className="boolean-input">
+    <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
       <div className="boolean-input-container">
         <div className="boolean-input-content">
           <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
-            {labelTrue ?? 'Yes'}
+            {labelTrue}
           </div>
           <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
-            {labelFalse ?? 'No'}
+            {labelFalse}
           </div>
         </div>
       </div>

package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts

@@ -1,7 +1,8 @@
 export type BooleanInputProps = {
     label?: string;
-    labelFalse?: string;
-    labelTrue?: string;
+    labelFalse: string;
+    labelTrue: string;
+    disabled?: boolean;
     value?: boolean;
     onChange: (value: boolean) => void;
 };

package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts

@@ -1,7 +1,8 @@
 export type BooleanInputProps = {
   label?: string;
-  labelFalse?: string;
-  labelTrue?: string;
+  labelFalse: string;
+  labelTrue: string;
+  disabled?: boolean;
   value?: boolean;
   onChange: (value: boolean) => void;
 };

package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx

@@ -17,6 +17,11 @@ export const inputArgType = {
     control: 'text',
     description: 'Label of the TRUE value.',
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
   value: {
     control: 'boolean',
     description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
+  <Story
+    name="Overview"
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
+    argTypes={inputArgType}
+  >
     {args => <BooleanInput {...args} />}
   </Story>
 </Canvas>

package/lib/components/Inputs/TextInput/TextInput.css

@@ -8,6 +8,12 @@
   color: #012b49;
   font-weight: 700;
 }
+.text-input--disabled {
+  opacity: 0.5;
+}
+.text-input--disabled .boolean-input-container > div {
+  cursor: not-allowed;
+}
 .text-input-container {
   position: relative;
 }
@@ -30,6 +36,16 @@
   color: #4e5d6b;
   transform: translateY(-50%);
 }
+.text-input--error {
+  display: flex;
+  align-items: center;
+  color: #ed6a5e;
+  font-size: 12px;
+  font-weight: 600;
+}
+.text-input-container--error > input {
+  border: 2px solid #ed6a5e;
+}
 
 /* ######### */
 /* GLOBALS   */

package/lib/components/Inputs/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { TextInputProps } from './TextInput.types';
 import './TextInput.css';
-export declare const TextInput: ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => React.JSX.Element;
+export declare const TextInput: ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }: TextInputProps) => React.JSX.Element;

package/lib/components/Inputs/TextInput/TextInput.js

@@ -4,17 +4,18 @@ exports.TextInput = void 0;
 const React = require("react");
 const Icon_1 = require("../../Icon/Icon");
 require("./TextInput.css");
-const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }) => {
+const TextInput = ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }) => {
     // ########
     // Handlers
     const handleChange = (e) => onChange(e.target.value);
     // #########
     // Rendering
-    return (React.createElement("div", { className: "text-input" },
+    return (React.createElement("div", { className: `text-input ${disabled ? 'text-input--disabled' : ''}` },
         label && React.createElement("label", null, label),
-        React.createElement("div", { className: "text-input-container" },
-            React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, onChange: handleChange }),
-            icon && React.createElement(Icon_1.Icon, { name: icon, size: "16" }))));
+        React.createElement("div", { className: `text-input-container ${errorLabel ? 'text-input-container--error' : ''}` },
+            React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, disabled: disabled, onBlur: onBlur, onChange: handleChange, onFocus: onFocus }),
+            icon && React.createElement(Icon_1.Icon, { name: icon, size: "16" })),
+        errorLabel && React.createElement("div", { className: "text-input--error" }, errorLabel)));
 };
 exports.TextInput = TextInput;
 //# sourceMappingURL=TextInput.js.map

package/lib/components/Inputs/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0CAAuC;AAEvC,2BAAyB;AAElB,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,EAAE,EAAE;IACpG,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,sBAAsB;YACnC,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI;YAC1G,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,SAAS,aAiBpB"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0CAAuC;AAEvC,2BAAyB;AAElB,MAAM,SAAS,GAAG,CAAC,EACxB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,GACQ,EAAE,EAAE;IACnB,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE;QACnE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,wBAAwB,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,EAAE;YACvF,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB;YACD,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC;QAEL,UAAU,IAAI,6BAAK,SAAS,EAAC,mBAAmB,IAAE,UAAU,CAAO,CAChE,CACP,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,SAAS,aAuCpB"}

package/lib/components/Inputs/TextInput/TextInput.tsx

@@ -4,7 +4,18 @@ import { Icon } from '../../Icon/Icon';
 import { TextInputProps } from './TextInput.types';
 import './TextInput.css';
 
-export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => {
+export const TextInput = ({
+  errorLabel,
+  icon,
+  label,
+  placeholder,
+  value,
+  autofocus,
+  disabled,
+  onBlur,
+  onChange,
+  onFocus,
+}: TextInputProps) => {
   // ########
   // Handlers
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
@@ -12,13 +23,24 @@ export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange
   // #########
   // Rendering
   return (
-    <div className="text-input">
+    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
-      <div className="text-input-container">
-        <input type="text" placeholder={placeholder} value={value} autoFocus={autofocus} onChange={handleChange} />
+      <div className={`text-input-container ${errorLabel ? 'text-input-container--error' : ''}`}>
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          autoFocus={autofocus}
+          disabled={disabled}
+          onBlur={onBlur}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
         {icon && <Icon name={icon} size="16" />}
       </div>
+
+      {errorLabel && <div className="text-input--error">{errorLabel}</div>}
     </div>
   );
 };

package/lib/components/Inputs/TextInput/TextInput.types.d.ts

@@ -1,8 +1,12 @@
 export type TextInputProps = {
+    errorLabel?: string;
     icon?: string;
     label?: string;
     placeholder?: string;
     value: string;
     autofocus?: boolean;
+    disabled?: boolean;
+    onBlur: () => void;
     onChange: (value: string) => void;
+    onFocus: () => void;
 };

package/lib/components/Inputs/TextInput/TextInput.types.ts

@@ -1,8 +1,12 @@
 export type TextInputProps = {
+  errorLabel?: string;
   icon?: string;
   label?: string;
   placeholder?: string;
   value: string;
   autofocus?: boolean;
+  disabled?: boolean;
+  onBlur: () => void;
   onChange: (value: string) => void;
+  onFocus: () => void;
 };

package/lib/components/Inputs/TextInput/__stories__/TextInput.stories.mdx

@@ -6,6 +6,7 @@ import { icons } from '../../../Icon/icons';
 <Meta title="Components/Inputs/TextInput" />
 
 export const inputArgTypes = {
+  errorLabel: { control: 'text', description: 'Show error on the input.' },
   icon: {
     control: 'select',
     options: Object.keys(icons),
@@ -28,10 +29,23 @@ export const inputArgTypes = {
     description: 'Auto focus the input once mounted',
     table: { defaultValue: { summary: 'false' } },
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Auto focus the input once mounted',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onBlur: {
+    control: 'function',
+    description: 'The handler called when the user blur the input.',
+  },
   onChange: {
     control: 'function',
     description: 'The handler called when the value of the input changes.',
   },
+  onFocus: {
+    control: 'function',
+    description: 'The handler called when the user focus the input.',
+  },
 };
 
 # Text Input
@@ -43,7 +57,14 @@ Text input allows the user to enter content and data when the expected user inpu
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', placeholder: 'This is a placeholder', autofocus: false, onChange: () => {} }}
+    args={{
+      errorLabel: '',
+      label: 'Label',
+      placeholder: 'This is a placeholder',
+      value: '',
+      autofocus: false,
+      disabled: false,
+    }}
     argTypes={inputArgTypes}
   >
     {args => <TextInput {...args} />}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/Checkbox/__stories__/Checkbox.stories.mdx

@@ -23,6 +23,10 @@ export const checkboxArgTypes = {
     description: 'Enable state of the checkbox.',
     table: { defaultValue: { summary: 'false' } },
   },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
 };
 
 # Checkbox
@@ -40,7 +44,6 @@ Checkboxes are applied when users can select all, several, or none of the option
         'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
       checked: false,
       disabled: false,
-      onChange: () => {},
     }}
     argTypes={checkboxArgTypes}
   >

package/src/components/Inputs/BooleanInput/BooleanInput.css

@@ -12,6 +12,13 @@
   display: flex;
 }
 
+.boolean-input--disabled {
+  opacity: 0.5;
+}
+.boolean-input--disabled .boolean-input-content > div {
+  cursor: not-allowed;
+}
+
 /* ######## */
 /* INPUTS   */
 .boolean-input-content {

package/src/components/Inputs/BooleanInput/BooleanInput.tsx

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { BooleanInputProps } from './BooleanInput.types';
 import './BooleanInput.css';
 
-export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
+export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
   // #########
   // Rendering
   return (
-    <div className="boolean-input">
+    <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
       <div className="boolean-input-container">
         <div className="boolean-input-content">
           <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
-            {labelTrue ?? 'Yes'}
+            {labelTrue}
           </div>
           <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
-            {labelFalse ?? 'No'}
+            {labelFalse}
           </div>
         </div>
       </div>

package/src/components/Inputs/BooleanInput/BooleanInput.types.ts

@@ -1,7 +1,8 @@
 export type BooleanInputProps = {
   label?: string;
-  labelFalse?: string;
-  labelTrue?: string;
+  labelFalse: string;
+  labelTrue: string;
+  disabled?: boolean;
   value?: boolean;
   onChange: (value: boolean) => void;
 };

package/src/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx

@@ -17,6 +17,11 @@ export const inputArgType = {
     control: 'text',
     description: 'Label of the TRUE value.',
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
   value: {
     control: 'boolean',
     description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
+  <Story
+    name="Overview"
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
+    argTypes={inputArgType}
+  >
     {args => <BooleanInput {...args} />}
   </Story>
 </Canvas>

package/src/components/Inputs/TextInput/TextInput.css

@@ -8,6 +8,12 @@
   color: #012b49;
   font-weight: 700;
 }
+.text-input--disabled {
+  opacity: 0.5;
+}
+.text-input--disabled .boolean-input-container > div {
+  cursor: not-allowed;
+}
 .text-input-container {
   position: relative;
 }
@@ -30,6 +36,16 @@
   color: #4e5d6b;
   transform: translateY(-50%);
 }
+.text-input--error {
+  display: flex;
+  align-items: center;
+  color: #ed6a5e;
+  font-size: 12px;
+  font-weight: 600;
+}
+.text-input-container--error > input {
+  border: 2px solid #ed6a5e;
+}
 
 /* ######### */
 /* GLOBALS   */

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -4,7 +4,18 @@ import { Icon } from '../../Icon/Icon';
 import { TextInputProps } from './TextInput.types';
 import './TextInput.css';
 
-export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => {
+export const TextInput = ({
+  errorLabel,
+  icon,
+  label,
+  placeholder,
+  value,
+  autofocus,
+  disabled,
+  onBlur,
+  onChange,
+  onFocus,
+}: TextInputProps) => {
   // ########
   // Handlers
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
@@ -12,13 +23,24 @@ export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange
   // #########
   // Rendering
   return (
-    <div className="text-input">
+    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
       {label && <label>{label}</label>}
 
-      <div className="text-input-container">
-        <input type="text" placeholder={placeholder} value={value} autoFocus={autofocus} onChange={handleChange} />
+      <div className={`text-input-container ${errorLabel ? 'text-input-container--error' : ''}`}>
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          autoFocus={autofocus}
+          disabled={disabled}
+          onBlur={onBlur}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
         {icon && <Icon name={icon} size="16" />}
       </div>
+
+      {errorLabel && <div className="text-input--error">{errorLabel}</div>}
     </div>
   );
 };

package/src/components/Inputs/TextInput/TextInput.types.ts

@@ -1,8 +1,12 @@
 export type TextInputProps = {
+  errorLabel?: string;
   icon?: string;
   label?: string;
   placeholder?: string;
   value: string;
   autofocus?: boolean;
+  disabled?: boolean;
+  onBlur: () => void;
   onChange: (value: string) => void;
+  onFocus: () => void;
 };

package/src/components/Inputs/TextInput/__stories__/TextInput.stories.mdx

@@ -6,6 +6,7 @@ import { icons } from '../../../Icon/icons';
 <Meta title="Components/Inputs/TextInput" />
 
 export const inputArgTypes = {
+  errorLabel: { control: 'text', description: 'Show error on the input.' },
   icon: {
     control: 'select',
     options: Object.keys(icons),
@@ -28,10 +29,23 @@ export const inputArgTypes = {
     description: 'Auto focus the input once mounted',
     table: { defaultValue: { summary: 'false' } },
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Auto focus the input once mounted',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onBlur: {
+    control: 'function',
+    description: 'The handler called when the user blur the input.',
+  },
   onChange: {
     control: 'function',
     description: 'The handler called when the value of the input changes.',
   },
+  onFocus: {
+    control: 'function',
+    description: 'The handler called when the user focus the input.',
+  },
 };
 
 # Text Input
@@ -43,7 +57,14 @@ Text input allows the user to enter content and data when the expected user inpu
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', placeholder: 'This is a placeholder', autofocus: false, onChange: () => {} }}
+    args={{
+      errorLabel: '',
+      label: 'Label',
+      placeholder: 'This is a placeholder',
+      value: '',
+      autofocus: false,
+      disabled: false,
+    }}
     argTypes={inputArgTypes}
   >
     {args => <TextInput {...args} />}