@dktunited-techoff/techoff-suite-ui 0.9.9 → 0.9.11

package/esm/components/Inputs/{TextInput/TextInput.css → Input/Input.css}

@@ -1,23 +1,23 @@
-.text-input {
+.input {
   display: flex;
   flex-direction: column;
 }
-.text-input > label {
+.input > label {
   display: block;
   margin-bottom: 4px;
   color: #012b49;
   font-weight: 700;
 }
-.text-input--disabled {
+.input--disabled {
   opacity: 0.5;
 }
-.text-input--disabled .boolean-input-container > div {
+.input--disabled .boolean-input-container > div {
   cursor: not-allowed;
 }
-.text-input-container {
+.input-container {
   position: relative;
 }
-.text-input-container > input {
+.input-container > input {
   width: 100%;
   height: 32px;
   padding: 0 40px 0 12px;
@@ -26,24 +26,27 @@
   color: #007dbc;
   font-weight: 700;
 }
-.text-input-container > input::placeholder {
+.input-container > input::placeholder {
   font-weight: 400;
 }
-.text-input-container > .icon {
+.input-container > .icon {
   position: absolute;
   top: 50%;
   right: 12px;
   color: #4e5d6b;
   transform: translateY(-50%);
 }
-.text-input--error {
+.input--error {
   display: flex;
   align-items: center;
   color: #ed6a5e;
   font-size: 12px;
   font-weight: 600;
 }
-.text-input-container--error > input {
+.input--error-label {
+  margin-left: 4px;
+}
+.input-container--error > input {
   border: 2px solid #ed6a5e;
 }
 

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { InputProps } from './Input.types';
+import './Input.css';
+export declare const Input: ({ errorLabel, icon, label, type, value, disabled, onChange, ...props }: InputProps) => React.JSX.Element;

package/esm/components/Inputs/Input/Input.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Inputs/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IACnH,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,SAAS,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzD,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,mBAAmB,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,+BAAO,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI;YACzF,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC;QAEL,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,cAAc;YAC3B,oBAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YACnC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,UAAU,CAAO,CAClD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Inputs/Input/Input.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { Icon } from '../../Icon/Icon';
+import { InputProps } from './Input.types';
+import './Input.css';
+
+export const Input = ({ errorLabel, icon, label, type = 'text', value, disabled, onChange, ...props }: InputProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className={`input ${disabled ? 'input--disabled' : ''}`}>
+      {label && <label>{label}</label>}
+
+      <div className={`input-container ${errorLabel ? 'input-container--error' : ''}`}>
+        <input type={type} value={value} disabled={disabled} onChange={handleChange} {...props} />
+        {icon && <Icon name={icon} size="16" />}
+      </div>
+
+      {errorLabel && (
+        <div className="input--error">
+          <Icon name="alert-circle-filled" />
+          <div className="input--error-label">{errorLabel}</div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+export type InputProps = {
+    errorLabel?: string;
+    icon?: string;
+    label?: string;
+    type?: 'text' | 'number';
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;

package/esm/components/Inputs/Input/Input.types.js

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

package/esm/components/Inputs/Input/Input.types.js.map

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

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

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+
+export type InputProps = {
+  errorLabel?: string;
+  icon?: string;
+  label?: string;
+  type?: 'text' | 'number';
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;

package/{src/components/Inputs/TextInput/__stories__/TextInput.stories.mdx → esm/components/Inputs/Input/__stories__/Input.stories.mdx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TextInput } from '../TextInput';
+import { Input } from '../Input';
 import { icons } from '../../../Icon/icons';
 
-<Meta title="Components/Inputs/TextInput" />
+<Meta title="Components/Inputs/Input" />
 
 export const inputArgTypes = {
   errorLabel: { control: 'text', description: 'Show error on the input.' },
@@ -20,32 +20,24 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder displayed when the input is empty.',
   },
+  type: {
+    control: 'select',
+    options: ['text', 'number'],
+    description: 'Type of the input.',
+  },
   value: {
     control: 'text',
     description: 'Value of the input.',
   },
-  autofocus: {
-    control: 'boolean',
-    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
@@ -61,16 +53,16 @@ Text input allows the user to enter content and data when the expected user inpu
       errorLabel: '',
       label: 'Label',
       placeholder: 'This is a placeholder',
+      type: 'text',
       value: '',
-      autofocus: false,
       disabled: false,
     }}
     argTypes={inputArgTypes}
   >
-    {args => <TextInput {...args} />}
+    {args => <Input type="number" {...args} />}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={TextInput} />
+<ArgsTable story="Overview" of={Input} />

package/esm/index.d.ts

@@ -2,7 +2,7 @@ export * from './components/Button/Button';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
 export * from './components/Inputs/BooleanInput/BooleanInput';
-export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Inputs/Input/Input';
 export * from './components/Loader/Loader';
 export * from './components/Select/Select';
 export * from './layouts/Header/Header';

package/esm/index.js

@@ -2,7 +2,7 @@ export * from './components/Button/Button';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
 export * from './components/Inputs/BooleanInput/BooleanInput';
-export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Inputs/Input/Input';
 export * from './components/Loader/Loader';
 export * from './components/Select/Select';
 export * from './layouts/Header/Header';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC"}

package/{src/components/Inputs/TextInput/TextInput.css → lib/components/Inputs/Input/Input.css}

@@ -1,23 +1,23 @@
-.text-input {
+.input {
   display: flex;
   flex-direction: column;
 }
-.text-input > label {
+.input > label {
   display: block;
   margin-bottom: 4px;
   color: #012b49;
   font-weight: 700;
 }
-.text-input--disabled {
+.input--disabled {
   opacity: 0.5;
 }
-.text-input--disabled .boolean-input-container > div {
+.input--disabled .boolean-input-container > div {
   cursor: not-allowed;
 }
-.text-input-container {
+.input-container {
   position: relative;
 }
-.text-input-container > input {
+.input-container > input {
   width: 100%;
   height: 32px;
   padding: 0 40px 0 12px;
@@ -26,24 +26,27 @@
   color: #007dbc;
   font-weight: 700;
 }
-.text-input-container > input::placeholder {
+.input-container > input::placeholder {
   font-weight: 400;
 }
-.text-input-container > .icon {
+.input-container > .icon {
   position: absolute;
   top: 50%;
   right: 12px;
   color: #4e5d6b;
   transform: translateY(-50%);
 }
-.text-input--error {
+.input--error {
   display: flex;
   align-items: center;
   color: #ed6a5e;
   font-size: 12px;
   font-weight: 600;
 }
-.text-input-container--error > input {
+.input--error-label {
+  margin-left: 4px;
+}
+.input-container--error > input {
   border: 2px solid #ed6a5e;
 }
 

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { InputProps } from './Input.types';
+import './Input.css';
+export declare const Input: ({ errorLabel, icon, label, type, value, disabled, onChange, ...props }: InputProps) => React.JSX.Element;

package/lib/components/Inputs/Input/Input.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const React = require("react");
+const Icon_1 = require("../../Icon/Icon");
+require("./Input.css");
+const Input = ({ errorLabel, icon, label, type = 'text', value, disabled, onChange, ...props }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `input ${disabled ? 'input--disabled' : ''}` },
+        label && React.createElement("label", null, label),
+        React.createElement("div", { className: `input-container ${errorLabel ? 'input-container--error' : ''}` },
+            React.createElement("input", { type: type, value: value, disabled: disabled, onChange: handleChange, ...props }),
+            icon && React.createElement(Icon_1.Icon, { name: icon, size: "16" })),
+        errorLabel && (React.createElement("div", { className: "input--error" },
+            React.createElement(Icon_1.Icon, { name: "alert-circle-filled" }),
+            React.createElement("div", { className: "input--error-label" }, errorLabel)))));
+};
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Inputs/Input/Input.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0CAAuC;AAEvC,uBAAqB;AAEd,MAAM,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IACnH,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,SAAS,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzD,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,mBAAmB,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,+BAAO,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI;YACzF,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC;QAEL,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,cAAc;YAC3B,oBAAC,WAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YACnC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,UAAU,CAAO,CAClD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,KAAK,SAwBhB"}

package/lib/components/Inputs/Input/Input.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { Icon } from '../../Icon/Icon';
+import { InputProps } from './Input.types';
+import './Input.css';
+
+export const Input = ({ errorLabel, icon, label, type = 'text', value, disabled, onChange, ...props }: InputProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className={`input ${disabled ? 'input--disabled' : ''}`}>
+      {label && <label>{label}</label>}
+
+      <div className={`input-container ${errorLabel ? 'input-container--error' : ''}`}>
+        <input type={type} value={value} disabled={disabled} onChange={handleChange} {...props} />
+        {icon && <Icon name={icon} size="16" />}
+      </div>
+
+      {errorLabel && (
+        <div className="input--error">
+          <Icon name="alert-circle-filled" />
+          <div className="input--error-label">{errorLabel}</div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+export type InputProps = {
+    errorLabel?: string;
+    icon?: string;
+    label?: string;
+    type?: 'text' | 'number';
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;

package/lib/components/Inputs/{TextInput/TextInput.types.js → Input/Input.types.js}

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

package/lib/components/Inputs/Input/Input.types.js.map

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

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

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+
+export type InputProps = {
+  errorLabel?: string;
+  icon?: string;
+  label?: string;
+  type?: 'text' | 'number';
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;

package/lib/components/Inputs/{TextInput/__stories__/TextInput.stories.mdx → Input/__stories__/Input.stories.mdx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TextInput } from '../TextInput';
+import { Input } from '../Input';
 import { icons } from '../../../Icon/icons';
 
-<Meta title="Components/Inputs/TextInput" />
+<Meta title="Components/Inputs/Input" />
 
 export const inputArgTypes = {
   errorLabel: { control: 'text', description: 'Show error on the input.' },
@@ -20,32 +20,24 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder displayed when the input is empty.',
   },
+  type: {
+    control: 'select',
+    options: ['text', 'number'],
+    description: 'Type of the input.',
+  },
   value: {
     control: 'text',
     description: 'Value of the input.',
   },
-  autofocus: {
-    control: 'boolean',
-    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
@@ -61,16 +53,16 @@ Text input allows the user to enter content and data when the expected user inpu
       errorLabel: '',
       label: 'Label',
       placeholder: 'This is a placeholder',
+      type: 'text',
       value: '',
-      autofocus: false,
       disabled: false,
     }}
     argTypes={inputArgTypes}
   >
-    {args => <TextInput {...args} />}
+    {args => <Input type="number" {...args} />}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={TextInput} />
+<ArgsTable story="Overview" of={Input} />

package/lib/index.d.ts

@@ -2,7 +2,7 @@ export * from './components/Button/Button';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
 export * from './components/Inputs/BooleanInput/BooleanInput';
-export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Inputs/Input/Input';
 export * from './components/Loader/Loader';
 export * from './components/Select/Select';
 export * from './layouts/Header/Header';

package/lib/index.js

@@ -18,7 +18,7 @@ __exportStar(require("./components/Button/Button"), exports);
 __exportStar(require("./components/Checkbox/Checkbox"), exports);
 __exportStar(require("./components/Icon/Icon"), exports);
 __exportStar(require("./components/Inputs/BooleanInput/BooleanInput"), exports);
-__exportStar(require("./components/Inputs/TextInput/TextInput"), exports);
+__exportStar(require("./components/Inputs/Input/Input"), exports);
 __exportStar(require("./components/Loader/Loader"), exports);
 __exportStar(require("./components/Select/Select"), exports);
 __exportStar(require("./layouts/Header/Header"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6DAA2C;AAC3C,iEAA+C;AAC/C,yDAAuC;AACvC,gFAA8D;AAC9D,0EAAwD;AACxD,6DAA2C;AAC3C,6DAA2C;AAC3C,0DAAwC;AACxC,iEAA+C;AAC/C,kEAAgD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6DAA2C;AAC3C,iEAA+C;AAC/C,yDAAuC;AACvC,gFAA8D;AAC9D,kEAAgD;AAChD,6DAA2C;AAC3C,6DAA2C;AAC3C,0DAAwC;AACxC,iEAA+C;AAC/C,kEAAgD"}

package/package.json

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

package/{lib/components/Inputs/TextInput/TextInput.css → src/components/Inputs/Input/Input.css}

@@ -1,23 +1,23 @@
-.text-input {
+.input {
   display: flex;
   flex-direction: column;
 }
-.text-input > label {
+.input > label {
   display: block;
   margin-bottom: 4px;
   color: #012b49;
   font-weight: 700;
 }
-.text-input--disabled {
+.input--disabled {
   opacity: 0.5;
 }
-.text-input--disabled .boolean-input-container > div {
+.input--disabled .boolean-input-container > div {
   cursor: not-allowed;
 }
-.text-input-container {
+.input-container {
   position: relative;
 }
-.text-input-container > input {
+.input-container > input {
   width: 100%;
   height: 32px;
   padding: 0 40px 0 12px;
@@ -26,24 +26,27 @@
   color: #007dbc;
   font-weight: 700;
 }
-.text-input-container > input::placeholder {
+.input-container > input::placeholder {
   font-weight: 400;
 }
-.text-input-container > .icon {
+.input-container > .icon {
   position: absolute;
   top: 50%;
   right: 12px;
   color: #4e5d6b;
   transform: translateY(-50%);
 }
-.text-input--error {
+.input--error {
   display: flex;
   align-items: center;
   color: #ed6a5e;
   font-size: 12px;
   font-weight: 600;
 }
-.text-input-container--error > input {
+.input--error-label {
+  margin-left: 4px;
+}
+.input-container--error > input {
   border: 2px solid #ed6a5e;
 }
 

package/src/components/Inputs/Input/Input.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { Icon } from '../../Icon/Icon';
+import { InputProps } from './Input.types';
+import './Input.css';
+
+export const Input = ({ errorLabel, icon, label, type = 'text', value, disabled, onChange, ...props }: InputProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className={`input ${disabled ? 'input--disabled' : ''}`}>
+      {label && <label>{label}</label>}
+
+      <div className={`input-container ${errorLabel ? 'input-container--error' : ''}`}>
+        <input type={type} value={value} disabled={disabled} onChange={handleChange} {...props} />
+        {icon && <Icon name={icon} size="16" />}
+      </div>
+
+      {errorLabel && (
+        <div className="input--error">
+          <Icon name="alert-circle-filled" />
+          <div className="input--error-label">{errorLabel}</div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+
+export type InputProps = {
+  errorLabel?: string;
+  icon?: string;
+  label?: string;
+  type?: 'text' | 'number';
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;

package/{esm/components/Inputs/TextInput/__stories__/TextInput.stories.mdx → src/components/Inputs/Input/__stories__/Input.stories.mdx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TextInput } from '../TextInput';
+import { Input } from '../Input';
 import { icons } from '../../../Icon/icons';
 
-<Meta title="Components/Inputs/TextInput" />
+<Meta title="Components/Inputs/Input" />
 
 export const inputArgTypes = {
   errorLabel: { control: 'text', description: 'Show error on the input.' },
@@ -20,32 +20,24 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder displayed when the input is empty.',
   },
+  type: {
+    control: 'select',
+    options: ['text', 'number'],
+    description: 'Type of the input.',
+  },
   value: {
     control: 'text',
     description: 'Value of the input.',
   },
-  autofocus: {
-    control: 'boolean',
-    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
@@ -61,16 +53,16 @@ Text input allows the user to enter content and data when the expected user inpu
       errorLabel: '',
       label: 'Label',
       placeholder: 'This is a placeholder',
+      type: 'text',
       value: '',
-      autofocus: false,
       disabled: false,
     }}
     argTypes={inputArgTypes}
   >
-    {args => <TextInput {...args} />}
+    {args => <Input type="number" {...args} />}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={TextInput} />
+<ArgsTable story="Overview" of={Input} />

package/src/index.ts

@@ -2,7 +2,7 @@ export * from './components/Button/Button';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
 export * from './components/Inputs/BooleanInput/BooleanInput';
-export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Inputs/Input/Input';
 export * from './components/Loader/Loader';
 export * from './components/Select/Select';
 export * from './layouts/Header/Header';

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TextInputProps } from './TextInput.types';
-import './TextInput.css';
-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,17 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../../Icon/Icon';
-import './TextInput.css';
-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 ${disabled ? 'text-input--disabled' : ''}` },
-        label && React.createElement("label", null, label),
-        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 +0,0 @@
-{"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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { ChangeEvent } from 'react';
-import { Icon } from '../../Icon/Icon';
-import { TextInputProps } from './TextInput.types';
-import './TextInput.css';
-
-export const TextInput = ({
-  errorLabel,
-  icon,
-  label,
-  placeholder,
-  value,
-  autofocus,
-  disabled,
-  onBlur,
-  onChange,
-  onFocus,
-}: TextInputProps) => {
-  // ########
-  // Handlers
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
-
-  // #########
-  // Rendering
-  return (
-    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
-      {label && <label>{label}</label>}
-
-      <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,12 +0,0 @@
-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.js

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

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

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

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

@@ -1,12 +0,0 @@
-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.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TextInputProps } from './TextInput.types';
-import './TextInput.css';
-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

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
-const React = require("react");
-const Icon_1 = require("../../Icon/Icon");
-require("./TextInput.css");
-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 ${disabled ? 'text-input--disabled' : ''}` },
-        label && React.createElement("label", null, label),
-        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 +0,0 @@
-{"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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { ChangeEvent } from 'react';
-import { Icon } from '../../Icon/Icon';
-import { TextInputProps } from './TextInput.types';
-import './TextInput.css';
-
-export const TextInput = ({
-  errorLabel,
-  icon,
-  label,
-  placeholder,
-  value,
-  autofocus,
-  disabled,
-  onBlur,
-  onChange,
-  onFocus,
-}: TextInputProps) => {
-  // ########
-  // Handlers
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
-
-  // #########
-  // Rendering
-  return (
-    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
-      {label && <label>{label}</label>}
-
-      <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,12 +0,0 @@
-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.js.map

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

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

@@ -1,12 +0,0 @@
-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/TextInput.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { ChangeEvent } from 'react';
-import { Icon } from '../../Icon/Icon';
-import { TextInputProps } from './TextInput.types';
-import './TextInput.css';
-
-export const TextInput = ({
-  errorLabel,
-  icon,
-  label,
-  placeholder,
-  value,
-  autofocus,
-  disabled,
-  onBlur,
-  onChange,
-  onFocus,
-}: TextInputProps) => {
-  // ########
-  // Handlers
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
-
-  // #########
-  // Rendering
-  return (
-    <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
-      {label && <label>{label}</label>}
-
-      <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,12 +0,0 @@
-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;
-};