@dktunited-techoff/techoff-suite-ui 0.8.14 → 0.9.0

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/__stories__/BooleanInput.stories.mdx

@@ -41,7 +41,7 @@ The Boolean input is used to quickly switch between two possible states. It is c
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
     argTypes={inputArgType}
   >
     {args => <BooleanInput {...args} />}

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/esm/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+export declare const Select: ({ label, options, onChange }: SelectProps) => React.JSX.Element;

package/esm/components/Select/Select.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './Select.css';
+export const Select = ({ label, options, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "select-container" },
+        label && React.createElement("label", null, label),
+        React.createElement("select", { onChange: handleChange },
+            React.createElement(React.Fragment, null,
+                React.createElement("option", null, "-"),
+                options))));
+};
+//# sourceMappingURL=Select.js.map

package/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAClE,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAErF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC9B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAChC,gCAAQ,QAAQ,EAAE,YAAY;YAC5B;gBACE,wCAAkB;gBACjB,OAAO,CACP,CACI,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Select/Select.types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SelectProps = {
+    label?: string;
+    options: ReactNode[];
+    onChange: (val: string) => void;
+};

package/esm/components/Select/Select.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Select.types.js.map

package/esm/components/Select/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />

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/__stories__/BooleanInput.stories.mdx

@@ -41,7 +41,7 @@ The Boolean input is used to quickly switch between two possible states. It is c
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
     argTypes={inputArgType}
   >
     {args => <BooleanInput {...args} />}

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/lib/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+export declare const Select: ({ label, options, onChange }: SelectProps) => React.JSX.Element;

package/lib/components/Select/Select.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const React = require("react");
+require("./Select.css");
+const Select = ({ label, options, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "select-container" },
+        label && React.createElement("label", null, label),
+        React.createElement("select", { onChange: handleChange },
+            React.createElement(React.Fragment, null,
+                React.createElement("option", null, "-"),
+                options))));
+};
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map

package/lib/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAClE,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAErF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC9B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAChC,gCAAQ,QAAQ,EAAE,YAAY;YAC5B;gBACE,wCAAkB;gBACjB,OAAO,CACP,CACI,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,MAAM,UAkBjB"}

package/lib/components/Select/Select.types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SelectProps = {
+    label?: string;
+    options: ReactNode[];
+    onChange: (val: string) => void;
+};

package/lib/components/Select/Select.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Select.types.js.map

package/lib/components/Select/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "0.8.14",
+  "version": "0.9.0",
   "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/__stories__/BooleanInput.stories.mdx

@@ -41,7 +41,7 @@ The Boolean input is used to quickly switch between two possible states. It is c
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
+    args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
     argTypes={inputArgType}
   >
     {args => <BooleanInput {...args} />}

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} />}

package/src/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+
+export const Select = ({ label, options, onChange }: SelectProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className="select-container">
+      {label && <label>{label}</label>}
+      <select onChange={handleChange}>
+        <>
+          <option>-</option>
+          {options}
+        </>
+      </select>
+    </div>
+  );
+};

package/src/components/Select/Select.types.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+
+export type SelectProps = { label?: string; options: ReactNode[]; onChange: (val: string) => void };

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />