@dktunited-techoff/techoff-suite-ui 1.8.1 → 1.8.2

package/esm/layouts/TsHeader/TsHeader.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { icons } from '../../components/TsIcon/icons';
+import './TsHeader.css';
+export const TsHeader = ({ actions, appName }) => {
+    // #########
+    // Rendering
+    return (React.createElement("header", null,
+        React.createElement("div", { className: "ts-header-aside" },
+            React.createElement("div", { className: "ts-header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
+        React.createElement("div", { className: "ts-header-aside ts-header-right-side" },
+            React.createElement("div", { className: "ts-header-actions" }, actions))));
+};
+//# sourceMappingURL=TsHeader.js.map

package/esm/layouts/TsHeader/TsHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAiB,EAAE,EAAE;IAC9D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,6BAAK,SAAS,EAAC,mBAAmB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAClG;QAEN,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAO,CAC9C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+export type TsHeaderProps = {
+    actions: ReactElement;
+    appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' | 'techoff-suite';
+    search?: ReactElement;
+};
+export type TsHeaderProfileItemProps = {
+    icon: string;
+    label: string;
+    link: string;
+};
+export type TsHeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+};
+export type TsHeaderSearchProps = {
+    getItemLabel: (e: any) => string;
+    getItemValue: (e: any) => string;
+    loadItems: (search?: string) => Promise<any[]>;
+    noDataLabel?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+};

package/esm/layouts/TsHeader/TsHeader.types.js

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

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

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

package/esm/layouts/TsHeader/TsHeaderProfile.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsHeaderProfileItemProps, TsHeaderProfileProps } from './TsHeader.types';
+export declare const TsHeaderProfileItem: ({ icon, label, link }: TsHeaderProfileItemProps) => React.JSX.Element;
+export declare const TsHeaderProfile: ({ children, firstname, lastname }: TsHeaderProfileProps & PropsWithChildren) => React.JSX.Element;

package/esm/layouts/TsHeader/TsHeaderProfile.js

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

package/esm/layouts/TsHeader/TsHeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA4B,EAAE,EAAE;IACrF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,cAAc;QAClE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B;QACN,6BAAK,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAO;QAChE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,MAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,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,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAE,GAAG;QACnD,6BAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC7F,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,UAAU,CAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC9D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/TsHeader/TsHeaderSearch.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TsHeaderSearchProps } from './TsHeader.types';
+export declare const TsHeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }: TsHeaderSearchProps) => React.JSX.Element;

package/esm/layouts/TsHeader/TsHeaderSearch.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+// import { Input } from '../../components/Inputs/Input/Input';
+import { TsLoader } from '../../components/TsLoader/TsLoader';
+import { useClickOutside } from '../../hooks/use-click-outside';
+export const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
+    const [searchValue] = useState('');
+    const [items, setItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showItems, setShowItems] = useState(false);
+    const ref = useClickOutside(() => setShowItems(false));
+    // #######
+    // Helpers
+    const getBeforeMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        return label.substring(0, matchStartIndex);
+    };
+    const getMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchStartIndex, matchEndIndex);
+    };
+    const getAfterMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchEndIndex);
+    };
+    // ########
+    // Watchers
+    useEffect(() => {
+        if (searchValue === '') {
+            setShowItems(false);
+            setItems([]);
+            setIsLoading(false);
+        }
+        else {
+            setShowItems(true);
+            setIsLoading(true);
+            loadItems(searchValue)
+                .then(setItems)
+                .finally(() => setIsLoading(false));
+        }
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-search", ref: ref }, showItems && searchValue !== '' && (React.createElement("div", { className: "ts-header-search-items-container" },
+        isLoading && (React.createElement("div", { className: "ts-header-search-loading" },
+            React.createElement(TsLoader, { size: "sm" }))),
+        !isLoading && items.length === 0 && React.createElement("div", { className: "ts-header-search-no-items" }, noDataLabel),
+        !isLoading && items.length > 0 && (React.createElement("div", { className: "ts-header-search-items" }, items.map(item => (React.createElement("div", { className: "ts-header-search-item", onClick: () => onChange(getItemValue(item)) },
+            getBeforeMatch(item),
+            React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(item)),
+            getAfterMatch(item))))))))));
+};
+//# sourceMappingURL=TsHeaderSearch.js.map

package/esm/layouts/TsHeader/TsHeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderSearch.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsHeader } from '../TsHeader';
+import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
+import { TsHeaderSearch } from '../TsHeaderSearch';
+import { TsButton } from '../../../components/TsButton/TsButton';
+
+<Meta title="Layouts/Header" />
+
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability', 'techoff-suite'],
+    description: 'Icon of the button.',
+  },
+};
+
+export const loadItems = () => {
+  return Promise.resolve([
+    { id: 1, label: 'Item 1' },
+    { id: 2, label: 'Item 2' },
+    { id: 3, label: 'Item 3' },
+    { id: 4, label: 'Item 4' },
+    { id: 5, label: 'Item 5' },
+    { id: 6, label: 'Item 6' },
+    { id: 7, label: 'Item 7' },
+    { id: 8, label: 'Item 8' },
+    { id: 9, label: 'Item 9' },
+  ]);
+};
+
+# 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: (
+        <>
+          <TsButton icon="add" size="lg" variant="shadow" rounded />
+          <TsHeaderProfile firstname="John" lastname="Doe">
+            <TsHeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
+            <TsHeaderProfileItem icon="award" label="Trainings" link="" />
+          </TsHeaderProfile>
+        </>
+      ),
+      appName: 'repairability',
+      search: (
+        <TsHeaderSearch
+          getItemLabel={item => item.label}
+          getItemValue={item => item.id}
+          loadItems={loadItems}
+          noDataLabel="No item found."
+          placeholder="Search something in the application"
+          onChange={() => {}}
+        />
+      ),
+    }}
+    argTypes={headerArgTypes}
+  >
+    {args => <TsHeader {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsHeader} />

package/esm/layouts/TsNavigation/TsNavigation.css

@@ -0,0 +1,72 @@
+.ts-navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.ts-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.ts-breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.ts-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 9999px;
+  color: #3643ba;
+}
+.ts-breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270deg, #3643ba 0%, rgba(54, 67, 186, 0.6) 100%);
+  color: #ffffff;
+}
+.ts-breadcrumb-item--link:hover {
+  background: #ebecf7;
+  cursor: pointer;
+}
+.ts-breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.ts-navigation-divider {
+  flex: 1;
+  height: 2px;
+  background: #ebecf7;
+}
+.ts-breadcrumb-chevron {
+  padding: 0 2px;
+  color: #3643ba;
+}
+
+/* ######### */
+/* ACTIONS   */
+.ts-navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.ts-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/TsNavigation/TsNavigation.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
+import './TsNavigation.css';
+export declare const TsNavigationBreadcrumbDivider: () => React.JSX.Element;
+export declare const TsNavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const TsNavigation: ({ actions, breadcrumbs }: TsNavigationProps) => React.JSX.Element;

package/esm/layouts/TsNavigation/TsNavigation.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import './TsNavigation.css';
+export const TsNavigationBreadcrumbDivider = () => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
+        React.createElement(TsIcon, { name: "chevron-right" })));
+};
+export const TsNavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        ts-breadcrumb-item
+        ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "ts-breadcrumb-item--icon" },
+            React.createElement(TsIcon, { name: icon, size: "16" }))),
+        children));
+};
+export const TsNavigation = ({ actions, breadcrumbs }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-navigation" },
+        React.createElement("div", { className: "ts-breadcrumb" }, breadcrumbs),
+        React.createElement("div", { className: "ts-navigation-divider" }),
+        React.createElement("div", { className: "ts-navigation-actions" }, actions)));
+};
+//# sourceMappingURL=TsNavigation.js.map

package/esm/layouts/TsNavigation/TsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC4C,EAAE,EAAE;IACvD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;OAChG,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,0BAA0B;YACvC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAqB,EAAE,EAAE;IAC1E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,6BAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO;QAClD,6BAAK,SAAS,EAAC,uBAAuB,GAAG;QACzC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAC;AACJ,CAAC,CAAC"}

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

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

package/esm/layouts/TsNavigation/TsNavigation.types.js

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

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

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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsNavigation, TsNavigationBreadcrumbItem, TsNavigationBreadcrumbDivider } from '../TsNavigation';
+import { TsButton } from '../../../components/TsButton/TsButton';
+import { icons } from '../../../components/TsIcon/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: (
+        <>
+          <TsButton icon="check" onClick={() => {}}>
+            Action 1
+          </TsButton>
+          <TsButton icon="add" onClick={() => {}}>
+            Action 2
+          </TsButton>
+        </>
+      ),
+      breadcrumbs: (
+        <>
+        <TsNavigationBreadcrumbItem icon="home" onClick={() => {}}>
+          Home
+        </TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem highlight>Menu Item 2</TsNavigationBreadcrumbItem>
+        </>
+      )
+    }}
+
+>
+
+    {args => <TsNavigation {...args} />}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsNavigation} />

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/TsButton/TsButton.css

@@ -0,0 +1,121 @@
+.ts-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16px;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.ts-button > div {
+  margin-right: 8px;
+}
+.ts-button > div:last-child {
+  margin-right: 0px;
+}
+button:disabled {
+  cursor: not-allowed;
+}
+/* ####### */
+/* BLOCK   */
+.ts-button--block {
+  width: 100%;
+}
+/* ####### */
+/* SIZES   */
+.ts-button--md {
+  height: 32px;
+  padding: 0 14px;
+}
+.ts-button--md.ts-button--icon-only {
+  width: 32px;
+  padding: 0;
+}
+.ts-button--lg {
+  height: 40px;
+  padding: 0 16px;
+}
+.ts-button--lg.ts-button--icon-only {
+  width: 40px;
+  padding: 0;
+}
+/* ########## */
+/* VARIANTS   */
+.ts-button--primary:not(:disabled) {
+  background: #3643ba;
+  color: #ffffff;
+}
+.ts-button--primary:not(:disabled):hover {
+  background: #2e3998;
+}
+.ts-button--primary:not(:disabled):active {
+  background: #272f76;
+}
+.ts-button--primary:disabled {
+  background: #3643ba61;
+  color: #ffffff;
+}
+.ts-button--secondary:not(:disabled) {
+  background: #ebecf7;
+  color: #3643ba;
+}
+.ts-button--secondary:not(:disabled):hover {
+  background: #e3e3f4;
+}
+.ts-button--secondary:not(:disabled):active {
+  background: #d7daf1;
+}
+.ts-button--secondary:disabled {
+  background: #3643ba0d;
+  color: #3643ba80;
+}
+.ts-button--success:not(:disabled) {
+  background: #02be8a;
+  color: #ffffff;
+}
+.ts-button--success:not(:disabled):hover {
+  background: #029e73;
+}
+.ts-button--success:not(:disabled):active {
+  background: #017f5c;
+}
+.ts-button--success:disabled {
+  background: #02be8a61;
+  color: #ffffff;
+}
+.ts-button--ghost:not(:disabled) {
+  background: #ffffff;
+  color: #3643ba;
+}
+.ts-button--ghost:not(:disabled):hover {
+  background: #ebecf7;
+}
+.ts-button--ghost:not(:disabled):active {
+  background: #e3e3f4;
+}
+.ts-button--ghost:disabled {
+  background: #ffffff61;
+  color: #1d1d1b61;
+}
+.ts-button--shadow {
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: #ffffff;
+  color: #4e5d6b;
+}
+/* ######### */
+/* ROUNDED   */
+.ts-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/TsButton/TsButton.d.ts

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

package/lib/components/TsButton/TsButton.js

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

package/lib/components/TsButton/TsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}

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

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+export type TsButtonProps = {
+    icon?: string;
+    iconDirection?: 'left' | 'right';
+    size?: 'md' | 'lg';
+    variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
+    block?: boolean;
+    rounded?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;

package/lib/components/TsButton/TsButton.types.js

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

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

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