@dktunited-techoff/techoff-suite-ui 1.4.4 → 1.5.1

package/esm/components/TsCheckbox/TsCheckbox.css

@@ -0,0 +1,73 @@
+.ts-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+/* ########## */
+/* DISABLED   */
+.ts-checkbox--disabled {
+  cursor: not-allowed;
+}
+.ts-checkbox--disabled .ts-checkbox-box {
+  color: #d7daf1;
+}
+.ts-checkbox--disabled:hover .ts-checkbox-box {
+  background: transparent;
+}
+/* ##### */
+/* BOX   */
+.ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
+  background: #e1e3f5;
+}
+.ts-checkbox-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  border-radius: 6px;
+  color: #3643ba;
+  transition: all ease 0.3s;
+}
+.ts-checkbox-box::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #ffffff;
+  z-index: 10;
+}
+.ts-checkbox-box .ts-icon {
+  z-index: 20;
+}
+
+/* ################# */
+/* LABEL / CAPTION   */
+.ts-checkbox-container {
+  width: 100%;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.ts-checkbox-container--with-caption .ts-checkbox-label {
+  color: #3643ba;
+  font-weight: 700;
+}
+.ts-checkbox-caption {
+  color: #404040;
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* ######### */
+/* 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/TsCheckbox/TsCheckbox.d.ts

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

package/esm/components/TsCheckbox/TsCheckbox.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsCheckbox.css';
+export const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = () => !disabled && onChange(!checked);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
+        React.createElement("div", { className: "ts-checkbox-box" },
+            React.createElement(TsIcon, { name: checked ? 'check-square-filled' : 'square' })),
+        React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
+            React.createElement("div", { className: "ts-checkbox-label" }, label),
+            caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
+};
+//# sourceMappingURL=TsCheckbox.js.map

package/esm/components/TsCheckbox/TsCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,MAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,GAAI,CACxD;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+export type TsCheckboxProps = {
+    caption?: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (value: boolean) => void;
+};

package/esm/components/TsCheckbox/TsCheckbox.types.js

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

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

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsCheckbox } from '../TsCheckbox';
+
+<Meta title="Components/Checkbox" />
+
+export const checkboxArgTypes = {
+  caption: {
+    control: 'text',
+    description: 'Caption of the checkbox.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the checkbox.',
+  },
+  checked: {
+    control: 'boolean',
+    description: 'State of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
+};
+
+# Checkbox
+
+Checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+      caption:
+        '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,
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {args => <TsCheckbox {...args}>{args.children}</TsCheckbox>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsCheckbox} />

package/esm/components/TsInput/TsInput/TsInput.css

@@ -19,6 +19,13 @@ input:focus {
 .ts-input--padding-1 input {
   padding: 0 30px 0 10px;
 }
+/* ####### */
+/* LABEL   */
+.ts-input-label {
+  padding-bottom: 10px;
+}
+/* ###### */
+/* ICON   */
 .ts-input-icon {
   position: absolute;
   top: 0;

package/esm/components/TsInput/TsInput/TsInput.d.ts

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

package/esm/components/TsInput/TsInput/TsInput.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { TsIcon } from '../../TsIcon/TsIcon';
 import './TsInput.css';
-export const TsInput = ({ icon, value, onChange, ...props }) => {
+export const TsInput = ({ icon, label, value, onChange, ...props }) => {
     // #########
     // Rendering
     return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
+        label && React.createElement("div", { className: "ts-input-label" }, label),
         React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
         icon && (React.createElement("div", { className: "ts-input-icon" },
             React.createElement(TsIcon, { name: icon, size: "16" })))));

package/esm/components/TsInput/TsInput/TsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7D,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsInput/TsInput/TsInput.tsx

@@ -3,11 +3,12 @@ import { TsIcon } from '../../TsIcon/TsIcon';
 import { TsInputProps } from './TsInput.types';
 import './TsInput.css';
 
-export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps) => {
   // #########
   // Rendering
   return (
     <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      {label && <div className="ts-input-label">{label}</div>}
       <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
       {icon && (
         <div className="ts-input-icon">

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

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 export type TsInputProps = {
     icon?: string;
+    label?: string;
     onChange: (value: string) => void;
 } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/esm/components/TsInput/TsInput/TsInput.types.tsx

@@ -2,5 +2,6 @@ import { InputHTMLAttributes } from 'react';
 
 export type TsInputProps = {
   icon?: string;
+  label?: string;
   onChange: (value: string) => void;
 } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

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

@@ -9,11 +9,15 @@ export const inputArgTypes = {
   icon: {
     control: 'select',
     options: Object.keys(icons),
-    description: 'Icon of the button.',
+    description: 'Icon of the input.',
+  },
+  label: {
+    control: 'text',
+    description: 'label of the input.',
   },
   placeholder: {
     control: 'text',
-    description: 'Placeholder of the button.',
+    description: 'Placeholder of the input.',
   },
 };
 
@@ -24,7 +28,11 @@ Input allows the user to enter content and data when the expected user input is
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+  <Story
+    name="Overview"
+    args={{ label: '', placeholder: 'Enter some text', onChange: () => {} }}
+    argTypes={inputArgTypes}
+  >
     {args => <TsInput {...args} />}
   </Story>
 </Canvas>

package/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/esm/index.js

@@ -1,4 +1,5 @@
 export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

package/lib/components/TsCheckbox/TsCheckbox.css

@@ -0,0 +1,73 @@
+.ts-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+/* ########## */
+/* DISABLED   */
+.ts-checkbox--disabled {
+  cursor: not-allowed;
+}
+.ts-checkbox--disabled .ts-checkbox-box {
+  color: #d7daf1;
+}
+.ts-checkbox--disabled:hover .ts-checkbox-box {
+  background: transparent;
+}
+/* ##### */
+/* BOX   */
+.ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
+  background: #e1e3f5;
+}
+.ts-checkbox-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  border-radius: 6px;
+  color: #3643ba;
+  transition: all ease 0.3s;
+}
+.ts-checkbox-box::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #ffffff;
+  z-index: 10;
+}
+.ts-checkbox-box .ts-icon {
+  z-index: 20;
+}
+
+/* ################# */
+/* LABEL / CAPTION   */
+.ts-checkbox-container {
+  width: 100%;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.ts-checkbox-container--with-caption .ts-checkbox-label {
+  color: #3643ba;
+  font-weight: 700;
+}
+.ts-checkbox-caption {
+  color: #404040;
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* ######### */
+/* 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/TsCheckbox/TsCheckbox.d.ts

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

package/lib/components/TsCheckbox/TsCheckbox.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsCheckbox = void 0;
+const React = require("react");
+const TsIcon_1 = require("../TsIcon/TsIcon");
+require("./TsCheckbox.css");
+const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = () => !disabled && onChange(!checked);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
+        React.createElement("div", { className: "ts-checkbox-box" },
+            React.createElement(TsIcon_1.TsIcon, { name: checked ? 'check-square-filled' : 'square' })),
+        React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
+            React.createElement("div", { className: "ts-checkbox-label" }, label),
+            caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
+};
+exports.TsCheckbox = TsCheckbox;
+//# sourceMappingURL=TsCheckbox.js.map

package/lib/components/TsCheckbox/TsCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,6CAA0C;AAE1C,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,eAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,GAAI,CACxD;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB"}

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

@@ -0,0 +1,7 @@
+export type TsCheckboxProps = {
+    caption?: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (value: boolean) => void;
+};

package/lib/components/TsCheckbox/TsCheckbox.types.js

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

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

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsCheckbox } from '../TsCheckbox';
+
+<Meta title="Components/Checkbox" />
+
+export const checkboxArgTypes = {
+  caption: {
+    control: 'text',
+    description: 'Caption of the checkbox.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the checkbox.',
+  },
+  checked: {
+    control: 'boolean',
+    description: 'State of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
+};
+
+# Checkbox
+
+Checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+      caption:
+        '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,
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {args => <TsCheckbox {...args}>{args.children}</TsCheckbox>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsCheckbox} />

package/lib/components/TsInput/TsInput/TsInput.css

@@ -19,6 +19,13 @@ input:focus {
 .ts-input--padding-1 input {
   padding: 0 30px 0 10px;
 }
+/* ####### */
+/* LABEL   */
+.ts-input-label {
+  padding-bottom: 10px;
+}
+/* ###### */
+/* ICON   */
 .ts-input-icon {
   position: absolute;
   top: 0;

package/lib/components/TsInput/TsInput/TsInput.d.ts

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

package/lib/components/TsInput/TsInput/TsInput.js

@@ -4,10 +4,11 @@ exports.TsInput = void 0;
 const React = require("react");
 const TsIcon_1 = require("../../TsIcon/TsIcon");
 require("./TsInput.css");
-const TsInput = ({ icon, value, onChange, ...props }) => {
+const TsInput = ({ icon, label, value, onChange, ...props }) => {
     // #########
     // Rendering
     return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
+        label && React.createElement("div", { className: "ts-input-label" }, label),
         React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
         icon && (React.createElement("div", { className: "ts-input-icon" },
             React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })))));

package/lib/components/TsInput/TsInput/TsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7D,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,OAAO,WAalB"}
+{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,OAAO,WAclB"}

package/lib/components/TsInput/TsInput/TsInput.tsx

@@ -3,11 +3,12 @@ import { TsIcon } from '../../TsIcon/TsIcon';
 import { TsInputProps } from './TsInput.types';
 import './TsInput.css';
 
-export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps) => {
   // #########
   // Rendering
   return (
     <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      {label && <div className="ts-input-label">{label}</div>}
       <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
       {icon && (
         <div className="ts-input-icon">

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

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 export type TsInputProps = {
     icon?: string;
+    label?: string;
     onChange: (value: string) => void;
 } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/lib/components/TsInput/TsInput/TsInput.types.tsx

@@ -2,5 +2,6 @@ import { InputHTMLAttributes } from 'react';
 
 export type TsInputProps = {
   icon?: string;
+  label?: string;
   onChange: (value: string) => void;
 } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

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

@@ -9,11 +9,15 @@ export const inputArgTypes = {
   icon: {
     control: 'select',
     options: Object.keys(icons),
-    description: 'Icon of the button.',
+    description: 'Icon of the input.',
+  },
+  label: {
+    control: 'text',
+    description: 'label of the input.',
   },
   placeholder: {
     control: 'text',
-    description: 'Placeholder of the button.',
+    description: 'Placeholder of the input.',
   },
 };
 
@@ -24,7 +28,11 @@ Input allows the user to enter content and data when the expected user input is
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+  <Story
+    name="Overview"
+    args={{ label: '', placeholder: 'Enter some text', onChange: () => {} }}
+    argTypes={inputArgTypes}
+  >
     {args => <TsInput {...args} />}
   </Story>
 </Canvas>

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/lib/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/TsButton/TsButton"), exports);
+__exportStar(require("./components/TsCheckbox/TsCheckbox"), exports);
 __exportStar(require("./components/TsIcon/TsIcon"), exports);
 __exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
 __exportStar(require("./components/TsLoader/TsLoader"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,6DAA2C;AAC3C,uEAAqD;AACrD,iEAA+C;AAC/C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,6DAA2C;AAC3C,uEAAqD;AACrD,iEAA+C;AAC/C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}

package/package.json

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

package/src/components/TsCheckbox/TsCheckbox.css

@@ -0,0 +1,73 @@
+.ts-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+/* ########## */
+/* DISABLED   */
+.ts-checkbox--disabled {
+  cursor: not-allowed;
+}
+.ts-checkbox--disabled .ts-checkbox-box {
+  color: #d7daf1;
+}
+.ts-checkbox--disabled:hover .ts-checkbox-box {
+  background: transparent;
+}
+/* ##### */
+/* BOX   */
+.ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
+  background: #e1e3f5;
+}
+.ts-checkbox-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  border-radius: 6px;
+  color: #3643ba;
+  transition: all ease 0.3s;
+}
+.ts-checkbox-box::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #ffffff;
+  z-index: 10;
+}
+.ts-checkbox-box .ts-icon {
+  z-index: 20;
+}
+
+/* ################# */
+/* LABEL / CAPTION   */
+.ts-checkbox-container {
+  width: 100%;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.ts-checkbox-container--with-caption .ts-checkbox-label {
+  color: #3643ba;
+  font-weight: 700;
+}
+.ts-checkbox-caption {
+  color: #404040;
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* ######### */
+/* 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/TsCheckbox/TsCheckbox.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import { TsCheckboxProps } from './TsCheckbox.types';
+import './TsCheckbox.css';
+
+export const TsCheckbox = ({ caption, label, checked, disabled, onChange }: TsCheckboxProps) => {
+  // ########
+  // Handlers
+  const handleChange = () => !disabled && onChange(!checked);
+
+  // #########
+  // Rendering
+  return (
+    <div className={`ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`} onClick={handleChange}>
+      <div className="ts-checkbox-box">
+        <TsIcon name={checked ? 'check-square-filled' : 'square'} />
+      </div>
+
+      <div className={`ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}`}>
+        <div className="ts-checkbox-label">{label}</div>
+        {caption && <div className="ts-checkbox-caption">{caption}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/TsCheckbox/TsCheckbox.types.ts

@@ -0,0 +1,7 @@
+export type TsCheckboxProps = {
+  caption?: string;
+  label: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsCheckbox } from '../TsCheckbox';
+
+<Meta title="Components/Checkbox" />
+
+export const checkboxArgTypes = {
+  caption: {
+    control: 'text',
+    description: 'Caption of the checkbox.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the checkbox.',
+  },
+  checked: {
+    control: 'boolean',
+    description: 'State of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the checkbox.',
+  },
+};
+
+# Checkbox
+
+Checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+      caption:
+        '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,
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {args => <TsCheckbox {...args}>{args.children}</TsCheckbox>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsCheckbox} />

package/src/components/TsInput/TsInput/TsInput.css

@@ -19,6 +19,13 @@ input:focus {
 .ts-input--padding-1 input {
   padding: 0 30px 0 10px;
 }
+/* ####### */
+/* LABEL   */
+.ts-input-label {
+  padding-bottom: 10px;
+}
+/* ###### */
+/* ICON   */
 .ts-input-icon {
   position: absolute;
   top: 0;

package/src/components/TsInput/TsInput/TsInput.tsx

@@ -3,11 +3,12 @@ import { TsIcon } from '../../TsIcon/TsIcon';
 import { TsInputProps } from './TsInput.types';
 import './TsInput.css';
 
-export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps) => {
   // #########
   // Rendering
   return (
     <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      {label && <div className="ts-input-label">{label}</div>}
       <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
       {icon && (
         <div className="ts-input-icon">

package/src/components/TsInput/TsInput/TsInput.types.tsx

@@ -2,5 +2,6 @@ import { InputHTMLAttributes } from 'react';
 
 export type TsInputProps = {
   icon?: string;
+  label?: string;
   onChange: (value: string) => void;
 } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

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

@@ -9,11 +9,15 @@ export const inputArgTypes = {
   icon: {
     control: 'select',
     options: Object.keys(icons),
-    description: 'Icon of the button.',
+    description: 'Icon of the input.',
+  },
+  label: {
+    control: 'text',
+    description: 'label of the input.',
   },
   placeholder: {
     control: 'text',
-    description: 'Placeholder of the button.',
+    description: 'Placeholder of the input.',
   },
 };
 
@@ -24,7 +28,11 @@ Input allows the user to enter content and data when the expected user input is
 ## Overview
 
 <Canvas>
-  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+  <Story
+    name="Overview"
+    args={{ label: '', placeholder: 'Enter some text', onChange: () => {} }}
+    argTypes={inputArgTypes}
+  >
     {args => <TsInput {...args} />}
   </Story>
 </Canvas>

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';