@dktunited-techoff/techoff-suite-ui 0.8.0

package/lib/layouts/Navigation/Navigation.css

@@ -0,0 +1,74 @@
+.navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.breadcrumb-chevron {
+  padding: 0 8px;
+  color: #00689d;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 9999px;
+  color: #00689d;
+}
+.breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
+  color: #ffffff;
+}
+.breadcrumb-item--link {
+  cursor: pointer;
+}
+.breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #b3bac3;
+}
+
+/* ######### */
+/* ACTIONS   */
+.navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.navigation-actions > * {
+  margin-left: 16px;
+}
+
+/* ######### */
+/* 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/layouts/Navigation/Navigation.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './Navigation.css';
+export declare const Navigation: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Navigation/Navigation.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const React = require("react");
+const react_1 = require("react");
+const validator_utils_1 = require("../../utils/validator.utils");
+require("./Navigation.css");
+const Navigation = ({ children }) => {
+    const breadcrumbElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'NavigationBreadcrumb'));
+    const actionsElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'NavigationActions'));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "navigation" },
+        breadcrumbElement,
+        React.createElement("div", { className: "navigation-divider" }),
+        actionsElement));
+};
+exports.Navigation = Navigation;
+//# sourceMappingURL=Navigation.js.map

package/lib/layouts/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,iEAA6D;AAC7D,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC5D,MAAM,iBAAiB,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC1G,MAAM,cAAc,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,iBAAiB;QAClB,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACrC,cAAc,CACX,CACP,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,UAAU,cAarB"}

package/lib/layouts/Navigation/Navigation.types.d.ts

@@ -0,0 +1,5 @@
+export type NavigationBreadcrumbItemProps = {
+    icon?: string;
+    highlight?: boolean;
+    onClick?: () => void;
+};

package/lib/layouts/Navigation/Navigation.types.js

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

package/lib/layouts/Navigation/Navigation.types.js.map

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

package/lib/layouts/Navigation/NavigationActions.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './Navigation.css';
+export declare const NavigationActions: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Navigation/NavigationActions.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationActions = void 0;
+const React = require("react");
+require("./Navigation.css");
+const NavigationActions = ({ children }) => (React.createElement("div", { className: "navigation-actions" }, children));
+exports.NavigationActions = NavigationActions;
+//# sourceMappingURL=NavigationActions.js.map

package/lib/layouts/Navigation/NavigationActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationActions.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationActions.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,4BAA0B;AAEnB,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,CACpE,6BAAK,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAO,CACrD,CAAC;AAFW,QAAA,iBAAiB,qBAE5B"}

package/lib/layouts/Navigation/NavigationBreadcrumb.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { NavigationBreadcrumbItemProps } from './Navigation.types';
+import './Navigation.css';
+export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const NavigationBreadcrumb: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Navigation/NavigationBreadcrumb.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationBreadcrumb = exports.NavigationBreadcrumbItem = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Icon_1 = require("../../components/Icon/Icon");
+const validator_utils_1 = require("../../utils/validator.utils");
+require("./Navigation.css");
+const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        breadcrumb-item
+        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
+            React.createElement(Icon_1.Icon, { name: icon, size: "16" }))),
+        children));
+};
+exports.NavigationBreadcrumbItem = NavigationBreadcrumbItem;
+const NavigationBreadcrumb = ({ children }) => {
+    const breadcrumbItemElements = react_1.Children.toArray(children).filter(c => (0, validator_utils_1.isSuiteElement)(c, 'NavigationBreadcrumbItem'));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "breadcrumb" }, breadcrumbItemElements.map((child, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
+        child,
+        index !== breadcrumbItemElements.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
+            React.createElement(Icon_1.Icon, { name: "chevron-right" }))))))));
+};
+exports.NavigationBreadcrumb = NavigationBreadcrumb;
+//# sourceMappingURL=NavigationBreadcrumb.js.map

package/lib/layouts/Navigation/NavigationBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBreadcrumb.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationBreadcrumb.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AAEpD,qDAAkD;AAClD,iEAA6D;AAC7D,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACtE,MAAM,sBAAsB,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC;IAErH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,IACxB,sBAAsB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;QAC9C,KAAK;QAEL,KAAK,KAAK,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9C,6BAAK,SAAS,EAAC,oBAAoB;YACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,oBAAoB,wBAoB/B"}

package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Navigation } from '../Navigation';
+import { NavigationBreadcrumb, NavigationBreadcrumbItem } from '../NavigationBreadcrumb';
+import { NavigationActions } from '../NavigationActions';
+import { Button } from '../../../components/Button/Button';
+import { icons } from '../../../components/Icon/icons';
+
+<Meta title="Layouts/Navigation" />
+
+# Navigation
+
+Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <NavigationBreadcrumb>
+          <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
+            Home
+          </NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
+        </NavigationBreadcrumb>,
+        <NavigationActions>
+          <Button icon="check" onClick={() => {}}>
+            Action 1
+          </Button>
+          <Button icon="plus" onClick={() => {}}>
+            Action 2
+          </Button>
+        </NavigationActions>,
+      ],
+    }}
+  >
+    {args => <Navigation>{args.children}</Navigation>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Navigation} />

package/lib/utils/string.utils.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/lib/utils/string.utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+exports.capitalize = capitalize;
+//# sourceMappingURL=string.utils.js.map

package/lib/utils/string.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAAvF,QAAA,UAAU,cAA6E"}

package/lib/utils/validator.utils.d.ts

@@ -0,0 +1,2 @@
+import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal } from 'react';
+export declare const isSuiteElement: (element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal, name: string) => boolean;

package/lib/utils/validator.utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSuiteElement = void 0;
+const react_1 = require("react");
+const isSuiteElement = (element, name) => {
+    return (0, react_1.isValidElement)(element) && typeof element.type === 'function' && element.type.name === name;
+};
+exports.isSuiteElement = isSuiteElement;
+//# sourceMappingURL=validator.utils.js.map

package/lib/utils/validator.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":";;;AAAA,iCAAoG;AAE7F,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,IAAA,sBAAc,EAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC;AALW,QAAA,cAAc,kBAKzB"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@dktunited-techoff/techoff-suite-ui",
+  "version": "0.8.0",
+  "main": "lib/index.js",
+  "types": "./lib",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "npm run clean && npx ts-node ./bin/build.ts",
+    "build:cjs": "tsc",
+    "build:esm": "tsc -m es6 --outDir esm",
+    "build:icons": "npx ts-node ./bin/build-icons.ts",
+    "build:storybook": "storybook build",
+    "clean": "rm -rf lib && rm -rf esm",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "storybook": "storybook dev -p 6006"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "fs-extra": "^11.1.1",
+    "storybook": "^7.5.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

package/src/components/Button/Button.css

@@ -0,0 +1,93 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.button > div {
+  margin-right: 8px;
+}
+.button > div:last-child {
+  margin-right: 0px;
+}
+/* ####### */
+/* BLOCK   */
+.button--block {
+  width: 100%;
+}
+/* ####### */
+/* SIZES   */
+.button--md {
+  height: 32px;
+  padding: 0 14px;
+}
+.button--md.button--icon-only {
+  width: 32px;
+  padding: 0;
+}
+.button--lg {
+  height: 40px;
+  padding: 0 16px;
+}
+.button--lg.button--icon-only {
+  width: 40px;
+  padding: 0;
+}
+/* ########## */
+/* VARIANTS   */
+.button--primary {
+  background: #007dbc;
+  color: #ffffff;
+}
+.button--primary:hover {
+  background: #00689d;
+}
+.button--secondary {
+  background: #e7f3f9;
+  color: #007dbc;
+}
+.button--secondary:hover {
+  background: #bedeef;
+}
+.button--success {
+  background: #02be8a;
+  color: #ffffff;
+}
+.button--success:hover {
+  background: #029e73;
+  color: #ffffff;
+}
+.button--ghost {
+  background: #ffffff;
+  color: #1d1d1b;
+  font-weight: 400;
+}
+.button--ghost:hover {
+  background: #e7f3f9;
+}
+.button--shadow {
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: #ffffff;
+  color: #4e5d6b;
+}
+/* ######### */
+/* ROUNDED   */
+.button--rounded {
+  border-radius: 9999px;
+}
+
+/* ######### */
+/* 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/Button/Button.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { Icon } from '../Icon/Icon';
+import { ButtonProps } from './Button.types';
+import './Button.css';
+
+export const Button = ({
+  children,
+  icon,
+  iconDirection = 'left',
+  size = 'md',
+  variant = 'primary',
+  block,
+  rounded,
+  onClick,
+}: PropsWithChildren<ButtonProps>) => {
+  // #########
+  // Rendering
+  return (
+    <button
+      className={`
+        button button--${size} button--${variant}
+        ${block ? 'button--block' : ''}
+        ${rounded ? 'button--rounded' : ''}
+        ${icon && !children ? 'button--icon-only' : ''}
+      `}
+      onClick={onClick}
+    >
+      {icon && iconDirection === 'left' && <Icon name={icon} size="16" />}
+      {children && <div>{children}</div>}
+      {icon && iconDirection === 'right' && <Icon name={icon} size="16" />}
+    </button>
+  );
+};

package/src/components/Button/Button.types.ts

@@ -0,0 +1,9 @@
+export type ButtonProps = {
+  icon?: string;
+  iconDirection?: 'left' | 'right';
+  size?: 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
+  block?: boolean;
+  rounded?: boolean;
+  onClick: () => void;
+};

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Button } from '../Button';
+import { icons } from '../../Icon/icons';
+
+<Meta title="Components/Button" />
+
+export const buttonArgTypes = {
+  children: {
+    control: 'text',
+    description: 'Child of the button.',
+  },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  iconDirection: {
+    control: 'inline-radio',
+    options: ['left', 'right'],
+    description: 'Define the direction of the icon.',
+    table: { defaultValue: { summary: 'left' } },
+  },
+  size: {
+    control: 'inline-radio',
+    options: ['md', 'lg'],
+    description: 'Define the size of the button.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+  variant: {
+    control: 'inline-radio',
+    options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
+    description: "Variant of the button defining it's color and outline.",
+    table: { defaultValue: { summary: 'primary' } },
+  },
+  block: {
+    control: 'boolean',
+    description: 'Define if the button is full width',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  rounded: {
+    control: 'boolean',
+    description: 'Define if the button has its corner full rounded',
+    table: { defaultValue: { summary: 'false' } },
+  },
+};
+
+# Button
+
+Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: 'Button',
+      iconDirection: 'left',
+      size: 'md',
+      variant: 'primary',
+      block: false,
+      rounded: false,
+      onClick: () => {},
+    }}
+    argTypes={buttonArgTypes}
+  >
+    {args => <Button {...args}>{args.children}</Button>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Button} />

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,61 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+/* ##### */
+/* BOX   */
+.checkbox:hover .checkbox-box {
+  background: #e7f3f9;
+}
+.checkbox-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  color: #007dbc;
+  transition: all ease 0.3s;
+}
+.checkbox-box::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 6px;
+  background: #ffffff;
+  z-index: 10;
+}
+.checkbox-box .icon {
+  z-index: 20;
+}
+
+/* ################# */
+/* LABEL / CAPTION   */
+.checkbox-container {
+  width: 100%;
+  margin-left: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.checkbox-container--with-caption .checkbox-label {
+  color: #007dbc;
+  font-weight: 700;
+}
+.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/Checkbox/Checkbox.tsx

@@ -0,0 +1,30 @@
+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'));
+
+  // #########
+  // Rendering
+  return (
+    <div className="checkbox" onClick={() => onChange(!checked)}>
+      <div className="checkbox-box">
+        {checked && <Icon name="square-check-filled" />}
+        {!checked && <Icon name="square" />}
+      </div>
+
+      <div className={`checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}`}>
+        {labelElement}
+        {captionElement}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export type CheckboxProps = { checked?: boolean; onChange: (value: boolean) => void };