@dktunited-techoff/techoff-suite-ui 0.9.15 → 0.10.0

package/esm/components/Inputs/Input/Input.css

@@ -19,23 +19,26 @@
 }
 .input-container > input {
   width: 100%;
-  height: 32px;
-  padding: 0 40px 0 12px;
-  border: 1px solid #d4d4d4;
+  padding: 0 16px;
   border-radius: 6px;
+  background: #ffffff;
   color: #007dbc;
   font-weight: 700;
 }
 .input-container > input::placeholder {
   font-weight: 400;
 }
-.input-container > .icon {
+.input-container > .input-icon-container {
   position: absolute;
   top: 50%;
   right: 12px;
+  display: flex;
   color: #4e5d6b;
   transform: translateY(-50%);
 }
+.input-container > .input-icon-container > * {
+  margin-left: 8px;
+}
 .input--error {
   display: flex;
   align-items: center;
@@ -49,6 +52,30 @@
 .input-container--error > input {
   border: 2px solid #ed6a5e;
 }
+/* ########## */
+/* VARIANTS   */
+.input-primary .input-container > input {
+  border: 1px solid #d4d4d4;
+}
+.input-shadow .input-container > input {
+  border: 0;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+}
+
+/* ###### */
+/* SIZE   */
+.input-md .input-container > input {
+  height: 32px;
+}
+.input-lg .input-container > input {
+  height: 40px;
+}
+
+/* ######### */
+/* ROUNDED   */
+.input--rounded .input-container > input {
+  border-radius: 9999px;
+}
 
 /* ######### */
 /* GLOBALS   */

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

@@ -1,4 +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;
+export declare const Input: ({ errorLabel, icon, label, size, type, value, variant, disabled, resetable, rounded, onChange, ...props }: InputProps) => React.JSX.Element;

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

@@ -1,17 +1,24 @@
 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 }) => {
+export const Input = ({ errorLabel, icon, label, size = 'md', type = 'text', value, variant = 'primary', disabled, resetable, rounded, onChange, ...props }) => {
     // ########
     // Handlers
     const handleChange = (e) => onChange(e.target.value);
     // #########
     // Rendering
-    return (React.createElement("div", { className: `input ${disabled ? 'input--disabled' : ''}` },
+    return (React.createElement("div", { className: `
+        input input-${variant} input-${size}
+        ${disabled ? 'input--disabled' : ''}
+        ${rounded ? 'input--rounded' : ''}
+      ` },
         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" })),
+            React.createElement("input", { style: { paddingRight: icon && resetable ? '58px' : icon || resetable ? '36px' : '16px' }, type: type, value: value, disabled: disabled, onChange: handleChange, ...props }),
+            (icon || resetable) && (React.createElement("div", { className: "input-icon-container" },
+                resetable && (React.createElement("div", { style: { cursor: 'pointer' }, onClick: () => onChange('') },
+                    React.createElement(Icon, { name: "close", size: "16" }))),
+                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)))));

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

@@ -1 +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"}
+{"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,EACpB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACG,EAAE,EAAE;IACf,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,6BACE,SAAS,EAAE;sBACK,OAAO,UAAU,IAAI;UACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UACjC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;OAClC;QAEA,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,mBAAmB,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,+BACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EACzF,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,KAClB,KAAK,GACT;YAED,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI,CACtB,6BAAK,SAAS,EAAC,sBAAsB;gBAClC,SAAS,IAAI,CACZ,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC5D,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAC3B,CACP;gBACA,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACP,CACG;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

@@ -4,7 +4,20 @@ 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) => {
+export const Input = ({
+  errorLabel,
+  icon,
+  label,
+  size = 'md',
+  type = 'text',
+  value,
+  variant = 'primary',
+  disabled,
+  resetable,
+  rounded,
+  onChange,
+  ...props
+}: InputProps) => {
   // ########
   // Handlers
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
@@ -12,12 +25,35 @@ export const Input = ({ errorLabel, icon, label, type = 'text', value, disabled,
   // #########
   // Rendering
   return (
-    <div className={`input ${disabled ? 'input--disabled' : ''}`}>
+    <div
+      className={`
+        input input-${variant} input-${size}
+        ${disabled ? 'input--disabled' : ''}
+        ${rounded ? 'input--rounded' : ''}
+      `}
+    >
       {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" />}
+        <input
+          style={{ paddingRight: icon && resetable ? '58px' : icon || resetable ? '36px' : '16px' }}
+          type={type}
+          value={value}
+          disabled={disabled}
+          onChange={handleChange}
+          {...props}
+        />
+
+        {(icon || resetable) && (
+          <div className="input-icon-container">
+            {resetable && (
+              <div style={{ cursor: 'pointer' }} onClick={() => onChange('')}>
+                <Icon name="close" size="16" />
+              </div>
+            )}
+            {icon && <Icon name={icon} size="16" />}
+          </div>
+        )}
       </div>
 
       {errorLabel && (

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

@@ -3,8 +3,12 @@ export type InputProps = {
     errorLabel?: string;
     icon?: string;
     label?: string;
+    size?: 'md' | 'lg';
     type?: 'text' | 'number';
     value: string;
+    variant?: 'primary' | 'shadow';
     disabled?: boolean;
+    resetable?: boolean;
+    rounded?: boolean;
     onChange: (value: string) => void;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

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

@@ -4,8 +4,12 @@ export type InputProps = {
   errorLabel?: string;
   icon?: string;
   label?: string;
+  size?: 'md' | 'lg';
   type?: 'text' | 'number';
   value: string;
+  variant?: 'primary' | 'shadow';
   disabled?: boolean;
+  resetable?: boolean;
+  rounded?: boolean;
   onChange: (value: string) => void;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

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

@@ -20,18 +20,41 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder displayed when the input is empty.',
   },
+  size: {
+    control: 'inline-radio',
+    options: ['md', 'lg'],
+    description: 'Define the size of the input.',
+    table: { defaultValue: { summary: 'md' } },
+  },
   type: {
-    control: 'select',
+    control: 'inline-radio',
     options: ['text', 'number'],
     description: 'Type of the input.',
+    table: { defaultValue: { summary: 'text' } },
   },
   value: {
     control: 'text',
     description: 'Value of the input.',
   },
+  variant: {
+    control: 'inline-radio',
+    options: ['primary', 'shadow'],
+    description: 'Variant of the input.',
+    table: { defaultValue: { summary: 'primary' } },
+  },
   disabled: {
     control: 'boolean',
-    description: 'Auto focus the input once mounted',
+    description: 'Disabled the input',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  resetable: {
+    control: 'boolean',
+    description: 'Reset the input value',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  rounded: {
+    control: 'boolean',
+    description: 'Rounded the input',
     table: { defaultValue: { summary: 'false' } },
   },
   onChange: {
@@ -53,9 +76,13 @@ Text input allows the user to enter content and data when the expected user inpu
       errorLabel: '',
       label: 'Label',
       placeholder: 'This is a placeholder',
+      size: 'md',
       type: 'text',
       value: '',
+      variant: 'primary',
       disabled: false,
+      resetable: false,
+      rounded: false,
     }}
     argTypes={inputArgTypes}
   >

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

@@ -7,7 +7,11 @@ import { Select } from '../Select';
 export const selectArgTypes = {
   label: {
     control: 'text',
-    description: 'Label of the input.',
+    description: 'Label of the select.',
+  },
+  value: {
+    control: 'text',
+    description: 'Value of the select.',
   },
   onChange: {
     control: 'function',

package/esm/layouts/Header/Header.css

@@ -17,10 +17,19 @@ header {
   height: 64px;
   padding: 0 24px;
 }
-.header-left-side {
+.header-aside {
   display: flex;
+  align-items: center;
   flex: 1;
+  height: 100%;
+}
+.header-right-side {
+  justify-content: flex-end;
+}
+.header-search-bar {
+  display: flex;
   align-items: center;
+  width: 400px;
   height: 100%;
 }
 .header-actions {
@@ -115,6 +124,56 @@ header {
   padding: 0 2px;
 }
 
+/* ############### */
+/* HEADER SEARCH   */
+.header-search {
+  position: relative;
+  width: 100%;
+}
+.header-search-items-container {
+  position: absolute;
+  top: calc(100% + 4px);
+  width: 100%;
+  max-height: 200px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: white;
+  overflow-y: auto;
+}
+.header-search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+.header-search-no-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: #8c96a2;
+  font-style: italic;
+}
+.header-search-items {
+  padding: 8px;
+}
+.header-search-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.header-search-item:hover {
+  background: #e7f3f9;
+}
+.header-search-item--match {
+  background: #cce5f2;
+  color: #007dbc;
+  font-weight: 700;
+}
+
 /* ######### */
 /* GLOBALS   */
 * {

package/esm/layouts/Header/Header.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { HeaderProps } from './Header.types';
 import './Header.css';
-export declare const Header: ({ actions, appName }: HeaderProps) => React.JSX.Element;
+export declare const Header: ({ actions, appName, search }: HeaderProps) => React.JSX.Element;

package/esm/layouts/Header/Header.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { icons } from '../../components/Icon/icons';
 import './Header.css';
-export const Header = ({ actions, appName }) => {
+export const Header = ({ actions, appName, search }) => {
     // #########
     // Rendering
     return (React.createElement("header", null,
-        React.createElement("div", { className: "header-left-side" },
+        React.createElement("div", { className: "header-aside" },
             React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
-        React.createElement("div", null,
+        search && React.createElement("div", { className: "header-search-bar" }, search),
+        React.createElement("div", { className: "header-aside header-right-side" },
             React.createElement("div", { className: "header-actions" }, actions))));
 };
 //# sourceMappingURL=Header.js.map

package/esm/layouts/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAe,EAAE,EAAE;IAClE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACL,MAAM,IAAI,6BAAK,SAAS,EAAC,mBAAmB,IAAE,MAAM,CAAO;QAC5D,6BAAK,SAAS,EAAC,gCAAgC;YAC7C,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/Header.types.d.ts

@@ -2,9 +2,18 @@ import { ReactElement } from 'react';
 export type HeaderProps = {
     actions: ReactElement;
     appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
+    search?: ReactElement;
 };
 export type HeaderProfileProps = {
     firstname: string;
     lastname: string;
     supportLink?: string;
 };
+export type HeaderSearchProps = {
+    getItemLabel: (e: any) => string;
+    getItemValue: (e: any) => string;
+    loadItems: (search?: string) => Promise<any[]>;
+    noDataLabel?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+};

package/esm/layouts/Header/HeaderSearch.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { HeaderSearchProps } from './Header.types';
+export declare const HeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }: HeaderSearchProps) => React.JSX.Element;

package/esm/layouts/Header/HeaderSearch.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Input } from '../../components/Inputs/Input/Input';
+import { Loader } from '../../components/Loader/Loader';
+import { useClickOutside } from '../../hooks/use-click-outside';
+export const HeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [items, setItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showItems, setShowItems] = useState(false);
+    const ref = useClickOutside(() => setShowItems(false));
+    // #######
+    // Helpers
+    const getBeforeMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        return label.substring(0, matchStartIndex);
+    };
+    const getMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchStartIndex, matchEndIndex);
+    };
+    const getAfterMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchEndIndex);
+    };
+    // ########
+    // Watchers
+    useEffect(() => {
+        if (searchValue === '') {
+            setShowItems(false);
+            setItems([]);
+            setIsLoading(false);
+        }
+        else {
+            setShowItems(true);
+            setIsLoading(true);
+            loadItems(searchValue)
+                .then(setItems)
+                .finally(() => setIsLoading(false));
+        }
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-search", ref: ref },
+        React.createElement(Input, { placeholder: placeholder, icon: "search", size: "lg", value: searchValue, variant: "shadow", resetable: true, rounded: true, onChange: setSearchValue, onFocus: () => setShowItems(true) }),
+        showItems && searchValue !== '' && (React.createElement("div", { className: "header-search-items-container" },
+            isLoading && (React.createElement("div", { className: "header-search-loading" },
+                React.createElement(Loader, { size: "sm" }))),
+            !isLoading && items.length === 0 && React.createElement("div", { className: "header-search-no-items" }, noDataLabel),
+            !isLoading && items.length > 0 && (React.createElement("div", { className: "header-search-items" }, items.map(item => (React.createElement("div", { className: "header-search-item", onClick: () => onChange(getItemValue(item)) },
+                getBeforeMatch(item),
+                React.createElement("span", { className: "header-search-item--match" }, getMatch(item)),
+                getAfterMatch(item))))))))));
+};
+//# sourceMappingURL=HeaderSearch.js.map

package/esm/layouts/Header/HeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderSearch.tsx"],"names":[],"mappings":"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"}

package/esm/layouts/Header/__stories__/Header.stories.mdx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
 import { Header } from '../Header';
 import { HeaderProfile } from '../HeaderProfile';
+import { HeaderSearch } from '../HeaderSearch';
 import { Button } from '../../../components/Button/Button';
 
 <Meta title="Layouts/Header" />
@@ -14,6 +15,20 @@ export const headerArgTypes = {
   },
 };
 
+export const loadItems = () => {
+  return Promise.resolve([
+    { id: 1, label: 'Item 1' },
+    { id: 2, label: 'Item 2' },
+    { id: 3, label: 'Item 3' },
+    { id: 4, label: 'Item 4' },
+    { id: 5, label: 'Item 5' },
+    { id: 6, label: 'Item 6' },
+    { id: 7, label: 'Item 7' },
+    { id: 8, label: 'Item 8' },
+    { id: 9, label: 'Item 9' },
+  ]);
+};
+
 # Header
 
 The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
@@ -31,6 +46,16 @@ The header will allow users to quickly find the information they need at a glanc
         </>
       ),
       appName: 'repairability',
+      search: (
+        <HeaderSearch
+          getItemLabel={item => item.label}
+          getItemValue={item => item.id}
+          loadItems={loadItems}
+          noDataLabel="No item found."
+          placeholder="Search something in the application"
+          onChange={() => {}}
+        />
+      ),
     }}
     argTypes={headerArgTypes}
   >

package/lib/components/Inputs/Input/Input.css

@@ -19,23 +19,26 @@
 }
 .input-container > input {
   width: 100%;
-  height: 32px;
-  padding: 0 40px 0 12px;
-  border: 1px solid #d4d4d4;
+  padding: 0 16px;
   border-radius: 6px;
+  background: #ffffff;
   color: #007dbc;
   font-weight: 700;
 }
 .input-container > input::placeholder {
   font-weight: 400;
 }
-.input-container > .icon {
+.input-container > .input-icon-container {
   position: absolute;
   top: 50%;
   right: 12px;
+  display: flex;
   color: #4e5d6b;
   transform: translateY(-50%);
 }
+.input-container > .input-icon-container > * {
+  margin-left: 8px;
+}
 .input--error {
   display: flex;
   align-items: center;
@@ -49,6 +52,30 @@
 .input-container--error > input {
   border: 2px solid #ed6a5e;
 }
+/* ########## */
+/* VARIANTS   */
+.input-primary .input-container > input {
+  border: 1px solid #d4d4d4;
+}
+.input-shadow .input-container > input {
+  border: 0;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+}
+
+/* ###### */
+/* SIZE   */
+.input-md .input-container > input {
+  height: 32px;
+}
+.input-lg .input-container > input {
+  height: 40px;
+}
+
+/* ######### */
+/* ROUNDED   */
+.input--rounded .input-container > input {
+  border-radius: 9999px;
+}
 
 /* ######### */
 /* GLOBALS   */

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

@@ -1,4 +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;
+export declare const Input: ({ errorLabel, icon, label, size, type, value, variant, disabled, resetable, rounded, onChange, ...props }: InputProps) => React.JSX.Element;

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

@@ -4,17 +4,24 @@ 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 }) => {
+const Input = ({ errorLabel, icon, label, size = 'md', type = 'text', value, variant = 'primary', disabled, resetable, rounded, onChange, ...props }) => {
     // ########
     // Handlers
     const handleChange = (e) => onChange(e.target.value);
     // #########
     // Rendering
-    return (React.createElement("div", { className: `input ${disabled ? 'input--disabled' : ''}` },
+    return (React.createElement("div", { className: `
+        input input-${variant} input-${size}
+        ${disabled ? 'input--disabled' : ''}
+        ${rounded ? 'input--rounded' : ''}
+      ` },
         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" })),
+            React.createElement("input", { style: { paddingRight: icon && resetable ? '58px' : icon || resetable ? '36px' : '16px' }, type: type, value: value, disabled: disabled, onChange: handleChange, ...props }),
+            (icon || resetable) && (React.createElement("div", { className: "input-icon-container" },
+                resetable && (React.createElement("div", { style: { cursor: 'pointer' }, onClick: () => onChange('') },
+                    React.createElement(Icon_1.Icon, { name: "close", size: "16" }))),
+                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)))));

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

@@ -1 +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"}
+{"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,EACpB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACG,EAAE,EAAE;IACf,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,6BACE,SAAS,EAAE;sBACK,OAAO,UAAU,IAAI;UACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UACjC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;OAClC;QAEA,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,mBAAmB,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,+BACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EACzF,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,KAClB,KAAK,GACT;YAED,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI,CACtB,6BAAK,SAAS,EAAC,sBAAsB;gBAClC,SAAS,IAAI,CACZ,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC5D,oBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAC3B,CACP;gBACA,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACP,CACG;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;AA5DW,QAAA,KAAK,SA4DhB"}