@dktunited-techoff/techoff-suite-ui 0.8.11 → 0.8.13

package/esm/components/Checkbox/Checkbox.css

@@ -3,6 +3,17 @@
   align-items: center;
   cursor: pointer;
 }
+/* ########## */
+/* DISABLED   */
+.checkbox--disabled {
+  cursor: not-allowed;
+}
+.checkbox--disabled .checkbox-box {
+  color: #999999;
+}
+.checkbox--disabled:hover .checkbox-box {
+  background: transparent;
+}
 /* ##### */
 /* BOX   */
 .checkbox:hover .checkbox-box {

package/esm/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
 import { CheckboxProps } from './Checkbox.types';
 import './Checkbox.css';
-export declare const CheckboxLabel: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const CheckboxCaption: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const Checkbox: ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => React.JSX.Element;
+export declare const Checkbox: ({ caption, label, checked, disabled, onChange }: CheckboxProps) => React.JSX.Element;

package/esm/components/Checkbox/Checkbox.js

@@ -1,21 +1,18 @@
 import * as React from 'react';
-import { Children } from 'react';
-import { isSuiteElement } from '../../utils/validator.utils';
 import { Icon } from '../Icon/Icon';
 import './Checkbox.css';
-export const CheckboxLabel = ({ children }) => React.createElement("div", { className: "checkbox-label" }, children);
-export const CheckboxCaption = ({ children }) => React.createElement("div", { className: "checkbox-caption" }, children);
-export const Checkbox = ({ children, checked, onChange }) => {
-    const labelElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxLabel'));
-    const captionElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxCaption'));
+export const Checkbox = ({ caption, label, checked, disabled, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = () => !disabled && onChange(!checked);
     // #########
     // Rendering
-    return (React.createElement("div", { className: "checkbox", onClick: () => onChange(!checked) },
+    return (React.createElement("div", { className: `checkbox ${disabled ? 'checkbox--disabled' : ''}`, onClick: handleChange },
         React.createElement("div", { className: "checkbox-box" },
-            checked && React.createElement(Icon, { name: "square-check-filled" }),
+            checked && React.createElement(Icon, { name: "check-square-filled" }),
             !checked && React.createElement(Icon, { name: "square" })),
-        React.createElement("div", { className: `checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}` },
-            labelElement,
-            captionElement)));
+        React.createElement("div", { className: `checkbox-container ${caption ? 'checkbox-container--with-caption' : ''}` },
+            React.createElement("div", { className: "checkbox-label" }, label),
+            caption && React.createElement("div", { className: "checkbox-caption" }, caption))));
 };
 //# sourceMappingURL=Checkbox.js.map

package/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AACnH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CAAC;AAEvH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC5F,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;QACzD,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,cAAc,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,YAAY;YACZ,cAAc,CACX,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB,EAAE,EAAE;IACzF,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,YAAY,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QACvF,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YACvF,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;YAC5C,OAAO,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,OAAO,CAAO,CACzD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

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

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

@@ -1,15 +1,28 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
+import { Checkbox } from '../Checkbox';
 
 <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' } },
+  },
 };
 
 # Checkbox
@@ -22,14 +35,11 @@ Checkboxes are applied when users can select all, several, or none of the option
   <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>,
-      ],
+      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,
       onChange: () => {},
     }}
     argTypes={checkboxArgTypes}

package/esm/index.d.ts

@@ -1,5 +1,9 @@
 export * from './components/Button/Button';
+export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
+export * from './components/Inputs/BooleanInput/BooleanInput';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Loader/Loader';
 export * from './layouts/Header/Header';
 export * from './layouts/Header/HeaderProfile';
 export * from './layouts/Navigation/Navigation';

package/esm/index.js

@@ -1,5 +1,9 @@
 export * from './components/Button/Button';
+export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
+export * from './components/Inputs/BooleanInput/BooleanInput';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Loader/Loader';
 export * from './layouts/Header/Header';
 export * from './layouts/Header/HeaderProfile';
 export * from './layouts/Navigation/Navigation';

package/esm/index.js.map

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

package/lib/components/Checkbox/Checkbox.css

@@ -3,6 +3,17 @@
   align-items: center;
   cursor: pointer;
 }
+/* ########## */
+/* DISABLED   */
+.checkbox--disabled {
+  cursor: not-allowed;
+}
+.checkbox--disabled .checkbox-box {
+  color: #999999;
+}
+.checkbox--disabled:hover .checkbox-box {
+  background: transparent;
+}
 /* ##### */
 /* BOX   */
 .checkbox:hover .checkbox-box {

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
 import { CheckboxProps } from './Checkbox.types';
 import './Checkbox.css';
-export declare const CheckboxLabel: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const CheckboxCaption: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const Checkbox: ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => React.JSX.Element;
+export declare const Checkbox: ({ caption, label, checked, disabled, onChange }: CheckboxProps) => React.JSX.Element;

package/lib/components/Checkbox/Checkbox.js

@@ -1,27 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.CheckboxCaption = exports.CheckboxLabel = void 0;
+exports.Checkbox = void 0;
 const React = require("react");
-const react_1 = require("react");
-const validator_utils_1 = require("../../utils/validator.utils");
 const Icon_1 = require("../Icon/Icon");
 require("./Checkbox.css");
-const CheckboxLabel = ({ children }) => React.createElement("div", { className: "checkbox-label" }, children);
-exports.CheckboxLabel = CheckboxLabel;
-const CheckboxCaption = ({ children }) => React.createElement("div", { className: "checkbox-caption" }, children);
-exports.CheckboxCaption = CheckboxCaption;
-const Checkbox = ({ children, checked, onChange }) => {
-    const labelElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'CheckboxLabel'));
-    const captionElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'CheckboxCaption'));
+const Checkbox = ({ caption, label, checked, disabled, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = () => !disabled && onChange(!checked);
     // #########
     // Rendering
-    return (React.createElement("div", { className: "checkbox", onClick: () => onChange(!checked) },
+    return (React.createElement("div", { className: `checkbox ${disabled ? 'checkbox--disabled' : ''}`, onClick: handleChange },
         React.createElement("div", { className: "checkbox-box" },
-            checked && React.createElement(Icon_1.Icon, { name: "square-check-filled" }),
+            checked && React.createElement(Icon_1.Icon, { name: "check-square-filled" }),
             !checked && React.createElement(Icon_1.Icon, { name: "square" })),
-        React.createElement("div", { className: `checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}` },
-            labelElement,
-            captionElement)));
+        React.createElement("div", { className: `checkbox-container ${caption ? 'checkbox-container--with-caption' : ''}` },
+            React.createElement("div", { className: "checkbox-label" }, label),
+            caption && React.createElement("div", { className: "checkbox-caption" }, caption))));
 };
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,iEAA6D;AAC7D,uCAAoC;AAEpC,0BAAwB;AAEjB,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AAAtG,QAAA,aAAa,iBAAyF;AAC5G,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CAAC;AAA1G,QAAA,eAAe,mBAA2F;AAEhH,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC5F,MAAM,YAAY,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;QACzD,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,cAAc,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,YAAY;YACZ,cAAc,CACX,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,QAAQ,YAmBnB"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uCAAoC;AAEpC,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB,EAAE,EAAE;IACzF,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,YAAY,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QACvF,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YACvF,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;YAC5C,OAAO,IAAI,6BAAK,SAAS,EAAC,kBAAkB,IAAE,OAAO,CAAO,CACzD,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,QAAQ,YAoBnB"}

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

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

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

@@ -1,15 +1,28 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
+import { Checkbox } from '../Checkbox';
 
 <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' } },
+  },
 };
 
 # Checkbox
@@ -22,14 +35,11 @@ Checkboxes are applied when users can select all, several, or none of the option
   <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>,
-      ],
+      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,
       onChange: () => {},
     }}
     argTypes={checkboxArgTypes}

package/lib/index.d.ts

@@ -1,5 +1,9 @@
 export * from './components/Button/Button';
+export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
+export * from './components/Inputs/BooleanInput/BooleanInput';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Loader/Loader';
 export * from './layouts/Header/Header';
 export * from './layouts/Header/HeaderProfile';
 export * from './layouts/Navigation/Navigation';

package/lib/index.js

@@ -15,7 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/Button/Button"), exports);
+__exportStar(require("./components/Checkbox/Checkbox"), exports);
 __exportStar(require("./components/Icon/Icon"), exports);
+__exportStar(require("./components/Inputs/BooleanInput/BooleanInput"), exports);
+__exportStar(require("./components/Inputs/TextInput/TextInput"), exports);
+__exportStar(require("./components/Loader/Loader"), exports);
 __exportStar(require("./layouts/Header/Header"), exports);
 __exportStar(require("./layouts/Header/HeaderProfile"), exports);
 __exportStar(require("./layouts/Navigation/Navigation"), exports);

package/lib/index.js.map

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

package/package.json

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

package/src/components/Checkbox/Checkbox.css

@@ -3,6 +3,17 @@
   align-items: center;
   cursor: pointer;
 }
+/* ########## */
+/* DISABLED   */
+.checkbox--disabled {
+  cursor: not-allowed;
+}
+.checkbox--disabled .checkbox-box {
+  color: #999999;
+}
+.checkbox--disabled:hover .checkbox-box {
+  background: transparent;
+}
 /* ##### */
 /* BOX   */
 .checkbox:hover .checkbox-box {

package/src/components/Checkbox/Checkbox.tsx

@@ -1,29 +1,25 @@
 import * as React from 'react';
-import { Children, PropsWithChildren } from 'react';
-import { isSuiteElement } from '../../utils/validator.utils';
 import { Icon } from '../Icon/Icon';
 import { CheckboxProps } from './Checkbox.types';
 import './Checkbox.css';
 
-export const CheckboxLabel = ({ children }: PropsWithChildren) => <div className="checkbox-label">{children}</div>;
-export const CheckboxCaption = ({ children }: PropsWithChildren) => <div className="checkbox-caption">{children}</div>;
-
-export const Checkbox = ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => {
-  const labelElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxLabel'));
-  const captionElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxCaption'));
+export const Checkbox = ({ caption, label, checked, disabled, onChange }: CheckboxProps) => {
+  // ########
+  // Handlers
+  const handleChange = () => !disabled && onChange(!checked);
 
   // #########
   // Rendering
   return (
-    <div className="checkbox" onClick={() => onChange(!checked)}>
+    <div className={`checkbox ${disabled ? 'checkbox--disabled' : ''}`} onClick={handleChange}>
       <div className="checkbox-box">
-        {checked && <Icon name="square-check-filled" />}
+        {checked && <Icon name="check-square-filled" />}
         {!checked && <Icon name="square" />}
       </div>
 
-      <div className={`checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}`}>
-        {labelElement}
-        {captionElement}
+      <div className={`checkbox-container ${caption ? 'checkbox-container--with-caption' : ''}`}>
+        <div className="checkbox-label">{label}</div>
+        {caption && <div className="checkbox-caption">{caption}</div>}
       </div>
     </div>
   );

package/src/components/Checkbox/Checkbox.types.ts

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

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

@@ -1,15 +1,28 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
+import { Checkbox } from '../Checkbox';
 
 <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' } },
+  },
 };
 
 # Checkbox
@@ -22,14 +35,11 @@ Checkboxes are applied when users can select all, several, or none of the option
   <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>,
-      ],
+      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,
       onChange: () => {},
     }}
     argTypes={checkboxArgTypes}

package/src/index.ts

@@ -1,5 +1,9 @@
 export * from './components/Button/Button';
+export * from './components/Checkbox/Checkbox';
 export * from './components/Icon/Icon';
+export * from './components/Inputs/BooleanInput/BooleanInput';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Loader/Loader';
 export * from './layouts/Header/Header';
 export * from './layouts/Header/HeaderProfile';
 export * from './layouts/Navigation/Navigation';