@dktunited-techoff/techoff-suite-ui 0.8.0

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
+
+<Meta title="Components/Checkbox" />
+
+export const checkboxArgTypes = {
+  checked: {
+    control: 'boolean',
+    description: 'State of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+};
+
+# Checkbox
+
+The checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <CheckboxLabel>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</CheckboxLabel>,
+        <CheckboxCaption>
+          auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo
+          viverra nisl, in posuere dui urna eget quam.
+        </CheckboxCaption>,
+      ],
+      checked: false,
+      onChange: () => {},
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {args => <Checkbox {...args}>{args.children}</Checkbox>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Checkbox} />

package/src/components/Icon/Icon.css

@@ -0,0 +1,26 @@
+.icon--16 {
+  width: 16px;
+  height: 16px;
+}
+.icon--20 {
+  width: 20px;
+  height: 20px;
+}
+.icon--24 {
+  width: 24px;
+  height: 24px;
+}
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ######### */
+/* 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/Icon/Icon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconProps } from './Icon.types';
+import { icons } from './icons';
+import './Icon.css';
+
+export const Icon = ({ name, size = '20' }: IconProps) => {
+  const icon = icons[name];
+
+  // #########
+  // Rendering
+  if (!icon) return <></>;
+  return <div className={`icon icon--${size}`} dangerouslySetInnerHTML={{ __html: icon }} />;
+};

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1 @@
+export type IconProps = { name: string; size?: '16' | '20' | '24' };

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Icon } from '../Icon';
+import { icons } from '../icons';
+
+<Meta title="Guidelines/Iconography" />
+
+<style>
+  {`
+    .icons {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 20px;
+    }
+    .icon-container {
+      display: flex;
+      flex-direction: column;
+      width: 140px;
+      height: 110px;
+      margin: 0 10px 10px 0;
+      box-shadow: rgba(0, 0, 0, 0.10) 0 1px 3px 0;
+      border: 1px solid hsla(203, 50%, 30%, 0.15);
+      border-radius: 5px;
+      color: #27272a;
+      overflow: hidden;
+    }
+    .icon {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+      border-top: 1px solid hsla(203, 50%, 30%, 0.15);
+      background: #fafafa;
+      font-size: 13px;
+    }
+  `}
+</style>
+
+export const iconArgTypes = {
+  name: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Name of an icon.',
+  },
+  size: {
+    control: 'inline-radio',
+    options: ['16', '20', '24'],
+    description: 'Define the size of an icon.',
+    table: { defaultValue: { summary: '20' } },
+  },
+};
+
+# Iconography
+
+Icons are visual symbols used to represent ideas, objects or actions. They communicate messages at a glance, allow interactivity and draw attention to important information.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ name: 'heart', size: '20' }} argTypes={iconArgTypes}>
+    {args => <Icon {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Icon} />
+
+## Icons
+
+<div className="icons">
+  {Object.keys(icons).map(icon => (
+    <div className="icon-container" key={icon}>
+      <div className="icon">
+        <Icon name={icon} />
+      </div>
+      <div className="icon-label">{icon}</div>
+    </div>
+  ))}
+</div>

package/src/components/Icon/icons/check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M5 12l5 5l10 -10"></path>
+</svg>

package/src/components/Icon/icons/chevron-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6 9l6 6l6 -6"></path>
+</svg>

package/src/components/Icon/icons/chevron-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M15 6l-6 6l6 6"></path>
+</svg>

package/src/components/Icon/icons/chevron-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M9 6l6 6l-6 6"></path>
+</svg>

package/src/components/Icon/icons/chevron-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6 15l6 -6l6 6"></path>
+</svg>

package/src/components/Icon/icons/heart-filled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>

package/src/components/Icon/icons/heart.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>

package/src/components/Icon/icons/home.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+   <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+   <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
+</svg>

package/src/components/Icon/icons/index.ts

@@ -0,0 +1,15 @@
+export const icons: { [k: string]: string } = {
+  'check': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M5 12l5 5l10 -10"></path></svg>',
+  'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6 9l6 6l6 -6"></path></svg>',
+  'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M15 6l-6 6l6 6"></path></svg>',
+  'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M9 6l6 6l-6 6"></path></svg>',
+  'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6 15l6 -6l6 6"></path></svg>',
+  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path></svg>',
+  'heart': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>',
+  'home': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>   <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>   <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>',
+  'plus': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M12 5l0 14"></path>   <path d="M5 12l14 0"></path></svg>',
+  'search': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>   <path d="M21 21l-6 -6"></path></svg>',
+  'square-check-filled': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" /></svg>',
+  'square': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>',
+  'user': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>   <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>',
+};

package/src/components/Icon/icons/plus.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M12 5l0 14"></path>
+   <path d="M5 12l14 0"></path>
+</svg>

package/src/components/Icon/icons/search.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
+   <path d="M21 21l-6 -6"></path>
+</svg>

package/src/components/Icon/icons/square-check-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" /></svg>

package/src/components/Icon/icons/square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>

package/src/components/Icon/icons/user.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
+   <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+</svg>

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

@@ -0,0 +1,51 @@
+.boolean-input {
+  display: flex;
+  flex-direction: column;
+}
+.boolean-input > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.boolean-input-container {
+  display: flex;
+}
+
+/* ######## */
+/* INPUTS   */
+.boolean-input-content {
+  display: flex;
+  height: 32px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.boolean-input-content > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  padding: 12px;
+  background: #e7f3f9;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.boolean-input-content > div:first-child {
+  border-right: 1px solid #007dbc;
+}
+.boolean-input-content > .boolean-input--selected {
+  background: #007dbc;
+  color: #ffffff;
+}
+
+/* ######### */
+/* 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/Inputs/BooleanInput/BooleanInput.tsx

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

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { BooleanInput } from '../BooleanInput';
+
+<Meta title="Components/Inputs/BooleanInput" />
+
+export const inputArgType = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  labelFalse: {
+    control: 'text',
+    description: 'Label of the FALSE value.',
+  },
+  labelTrue: {
+    control: 'text',
+    description: 'Label of the TRUE value.',
+  },
+  value: {
+    control: 'boolean',
+    description: 'Value of the input (can be undefined).',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on input.',
+  },
+};
+
+# Boolean Input
+
+The Boolean input is used to quickly switch between two possible states. It is commonly used for "yes/no" switches. The input can in some cases have a 3rd state, EMPTY.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
+    {args => <BooleanInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={BooleanInput} />

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

@@ -0,0 +1,42 @@
+.text-input {
+  display: flex;
+  flex-direction: column;
+}
+.text-input > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.text-input-container {
+  position: relative;
+}
+.text-input-container > input {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+}
+.text-input-container > input::placeholder {
+  font-weight: 400;
+}
+.text-input-container > .icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  color: #4e5d6b;
+  transform: translateY(-50%);
+}
+
+/* ######### */
+/* 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/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,24 @@
+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 = ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className="text-input">
+      {label && <label>{label}</label>}
+
+      <div className="text-input-container">
+        <input type="text" placeholder={placeholder} value={value} autoFocus={autofocus} onChange={handleChange} />
+        {icon && <Icon name={icon} size="16" />}
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TextInput } from '../TextInput';
+import { icons } from '../../../Icon/icons';
+
+<Meta title="Components/Inputs/TextInput" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Name of an icon.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder displayed when the input is empty.',
+  },
+  value: {
+    control: 'text',
+    description: 'Value of the input.',
+  },
+  autofocus: {
+    control: 'boolean',
+    description: 'Auto focus the input once mounted',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the input changes.',
+  },
+};
+
+# Text Input
+
+Text input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{ label: 'Label', placeholder: 'This is a placeholder', autofocus: false, onChange: () => {} }}
+    argTypes={inputArgTypes}
+  >
+    {args => <TextInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TextInput} />

package/src/components/Loader/Loader.css

@@ -0,0 +1,42 @@
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  border: 2px solid;
+  border-color: #00689d transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1.5s linear infinite;
+}
+
+/* ####### */
+/* SIZES   */
+.loader--sm {
+  width: 24px;
+  height: 24px;
+}
+.loader--md {
+  width: 32px;
+  height: 32px;
+}
+.loader--lg {
+  width: 44px;
+  height: 44px;
+}
+
+/* ######### */
+/* 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/Loader/Loader.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { LoaderProps } from './Loader.types';
+import './Loader.css';
+
+export const Loader = ({ size = 'md' }: LoaderProps) => {
+  return <div className={`loader loader--${size}`} />;
+};

package/src/components/Loader/Loader.types.ts

@@ -0,0 +1 @@
+export type LoaderProps = { size?: 'sm' | 'md' | 'lg' };

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Loader } from '../Loader';
+
+<Meta title="Components/Loader" />
+
+export const loaderArgTypes = {
+  size: {
+    control: 'inline-radio',
+    options: ['sm', 'md', 'lg'],
+    description: 'Define the size of the loader.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
+    {args => <Loader {...args}>{args.children}</Loader>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Loader} />

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './components/Button/Button';
+export * from './components/Icon/Icon';
+
+export * from './layouts/Header/Header';
+export * from './layouts/Header/HeaderActions';
+export * from './layouts/Header/HeaderProfile';
+export * from './layouts/Header/HeaderTitle';
+export * from './layouts/Navigation/Navigation';
+export * from './layouts/Navigation/NavigationActions';
+export * from './layouts/Navigation/NavigationBreadcrumb';