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

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/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/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.0",
   "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/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';