@dktunited-techoff/techoff-suite-ui 0.9.3 → 0.9.5

package/esm/layouts/Header/Header.css

@@ -0,0 +1,125 @@
+@font-face {
+  font-family: 'Montserrat-Medium';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('../../assets/fonts/Roboto-Light.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.header-left-side {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 100%;
+}
+.header-actions {
+  display: flex;
+}
+.header-actions > * {
+  margin-left: 12px;
+}
+
+/* ################ */
+/* HEADER TECHOFF   */
+.header-techoff {
+  display: flex;
+  height: 18px;
+  margin-left: 4px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.header-profile-container {
+  position: relative;
+}
+.header-profile-dropdown {
+  display: flex;
+  height: 40px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  color: #4e5d6b;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.header-profile-img-container {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 9999px;
+}
+.header-profile-img-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: rgb(229, 229, 229);
+}
+.header-profile-name {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-left: 4px;
+}
+.header-profile-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+}
+.header-profile-menu {
+  position: absolute;
+  right: 0;
+  top: 48px;
+  width: 288px;
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: #ffffff;
+  z-index: 10;
+}
+.header-profile-menu-item {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.header-profile-menu-item:hover {
+  background-color: #e7f3f9;
+}
+.header-profile-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+.header-profile-menu-item-label {
+  flex: 1;
+  padding: 0 2px;
+}
+
+/* ######### */
+/* 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/layouts/Header/Header.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { HeaderProps } from './Header.types';
+import './Header.css';
+export declare const Header: ({ actions, appName }: HeaderProps) => React.JSX.Element;

package/esm/layouts/Header/Header.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { cloneElement } from 'react';
+import { icons } from '../../components/Icon/icons';
+import './Header.css';
+export const Header = ({ actions, appName }) => {
+    // #########
+    // Rendering
+    return (React.createElement("header", null,
+        React.createElement("div", { className: "header-left-side" },
+            React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
+        React.createElement("div", null,
+            React.createElement("div", { className: "header-actions" }, actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))))));
+};
+//# sourceMappingURL=Header.js.map

package/esm/layouts/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/Header.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type HeaderProps = {
+    actions: ReactElement[];
+    appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
+};
+export type HeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+    supportLink?: string;
+};

package/esm/layouts/Header/Header.types.js

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

package/esm/layouts/Header/Header.types.js.map

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

package/esm/layouts/Header/HeaderProfile.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { HeaderProfileProps } from './Header.types';
+export declare const HeaderProfile: ({ firstname, lastname, supportLink }: HeaderProfileProps) => React.JSX.Element;

package/esm/layouts/Header/HeaderProfile.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Icon } from '../../components/Icon/Icon';
+import { useClickOutside } from '../../hooks/use-click-outside';
+import { capitalize } from '../../utils/string.utils';
+export const HeaderProfile = ({ firstname, lastname, supportLink }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useClickOutside(() => setIsOpen(false));
+    // ########
+    // Handlers
+    const handleToggleOpen = () => setIsOpen(prev => !prev);
+    const handleOpenSupport = () => window.open(supportLink, '_blank', 'noreferrer');
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-profile-container", ref: ref },
+        React.createElement("div", { className: "header-profile-dropdown", onClick: handleToggleOpen },
+            React.createElement("div", { className: "header-profile-img-container" },
+                React.createElement("div", { className: "header-profile-img-icon" },
+                    React.createElement(Icon, { name: "user", size: "16" }))),
+            React.createElement("div", { className: "header-profile-name" },
+                capitalize(firstname),
+                " ",
+                lastname.charAt(0).toUpperCase(),
+                "."),
+            React.createElement("div", { className: "header-profile-chevron" },
+                React.createElement(Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" }))),
+        isOpen && (React.createElement("div", { className: "header-profile-menu" },
+            React.createElement("div", { className: "header-profile-menu-item", onClick: handleOpenSupport },
+                React.createElement("div", { className: "header-profile-menu-item-icon" },
+                    React.createElement(Icon, { name: "alert-triangle", size: "16" })),
+                React.createElement("div", { className: "header-profile-menu-item-label" }, "Contact support"),
+                React.createElement("div", { className: "header-profile-menu-item-icon" },
+                    React.createElement(Icon, { name: "external-link", size: "16" })))))));
+};
+//# sourceMappingURL=HeaderProfile.js.map

package/esm/layouts/Header/HeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAsB,EAAE,EAAE;IACxF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,WAAW;IACX,WAAW;IACX,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEjF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,GAAG;QAChD,6BAAK,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,gBAAgB;YAChE,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B,CACF;YACN,6BAAK,SAAS,EAAC,qBAAqB;gBACjC,UAAU,CAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEN,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5D,CACF;QAEL,MAAM,IAAI,CACT,6BAAK,SAAS,EAAC,qBAAqB;YAClC,6BAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,iBAAiB;gBAClE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;gBACN,6BAAK,SAAS,EAAC,gCAAgC,sBAAsB;gBACrE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/__stories__/Header.stories.mdx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Header } from '../Header';
+import { HeaderProfile } from '../HeaderProfile';
+import { Button } from '../../../components/Button/Button';
+
+<Meta title="Layouts/Header" />
+
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    description: 'Icon of the button.',
+  },
+};
+
+# Header
+
+The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      actions: [
+        <Button icon="add" size="lg" variant="shadow" rounded />,
+        <HeaderProfile firstname="John" lastname="Doe" />,
+      ],
+      appName: 'repairability',
+    }}
+    argTypes={headerArgTypes}
+  >
+    {args => <Header {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Header} />

package/esm/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: #bedeef;
+}
+
+/* ######### */
+/* 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/esm/layouts/Navigation/Navigation.d.ts

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

package/esm/layouts/Navigation/Navigation.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { cloneElement } from 'react';
+import { Icon } from '../../components/Icon/Icon';
+import './Navigation.css';
+export 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, { name: icon, size: "16" }))),
+        children));
+};
+export const Navigation = ({ actions, breadcrumbs }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "navigation" },
+        React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
+            breadcrumb,
+            index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
+                React.createElement(Icon, { name: "chevron-right" }))))))),
+        React.createElement("div", { className: "navigation-divider" }),
+        React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => cloneElement(action, { key: index, ...action.props })))));
+};
+//# sourceMappingURL=Navigation.js.map

package/esm/layouts/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,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,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type NavigationProps = {
+    actions?: ReactElement[];
+    breadcrumbs: ReactElement[];
+};
+export type NavigationBreadcrumbItemProps = {
+    icon?: string;
+    highlight?: boolean;
+    onClick?: () => void;
+};

package/esm/layouts/Navigation/Navigation.types.js

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

package/esm/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/esm/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
+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={{
+      actions: [
+        <Button icon="check" onClick={() => {}}>
+          Action 1
+        </Button>,
+        <Button icon="add" onClick={() => {}}>
+          Action 2
+        </Button>,
+      ],
+      breadcrumbs: [
+        <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
+          Home
+        </NavigationBreadcrumbItem>,
+        <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
+        <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
+      ]
+    }}
+
+>
+
+    {args => <Navigation {...args} />}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Navigation} />

package/esm/utils/string.utils.d.ts

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

package/esm/utils/string.utils.js

@@ -0,0 +1,2 @@
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+//# sourceMappingURL=string.utils.js.map

package/esm/utils/string.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,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"}

package/lib/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/lib/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from './Button.types';
+import './Button.css';
+export declare const Button: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;

package/lib/components/Button/Button.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const React = require("react");
+const Icon_1 = require("../Icon/Icon");
+require("./Button.css");
+const Button = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("button", { className: `
+        button button--${size} button--${variant}
+        ${block ? 'button--block' : ''}
+        ${rounded ? 'button--rounded' : ''}
+        ${icon && !children ? 'button--icon-only' : ''}
+      `, onClick: onClick },
+        icon && iconDirection === 'left' && React.createElement(Icon_1.Icon, { name: icon, size: "16" }),
+        children && React.createElement("div", null, children),
+        icon && iconDirection === 'right' && React.createElement(Icon_1.Icon, { name: icon, size: "16" })));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,uCAAoC;AAEpC,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;yBACQ,IAAI,YAAY,OAAO;UACtC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;UAC5B,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;OAC/C,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,MAAM,UA2BjB"}

package/lib/components/Button/Button.types.d.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/lib/components/Button/Button.types.js

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

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

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