@dktunited-techoff/techoff-suite-ui 1.2.0 → 1.3.1

package/{src/layouts/Header/Header.css → esm/layouts/TsHeader/TsHeader.css}

@@ -17,31 +17,31 @@ header {
   height: 64px;
   padding: 0 24px;
 }
-.header-aside {
+.ts-header-aside {
   display: flex;
   align-items: center;
   flex: 1;
   height: 100%;
 }
-.header-right-side {
+.ts-header-right-side {
   justify-content: flex-end;
 }
-.header-search-bar {
+.ts-header-search-bar {
   display: flex;
   align-items: center;
   width: 400px;
   height: 100%;
 }
-.header-actions {
+.ts-header-actions {
   display: flex;
 }
-.header-actions > * {
+.ts-header-actions > * {
   margin-left: 12px;
 }
 
 /* ################ */
 /* HEADER TECHOFF   */
-.header-techoff {
+.ts-header-techoff {
   display: flex;
   height: 18px;
   margin-left: 4px;
@@ -49,10 +49,10 @@ header {
 
 /* ################ */
 /* HEADER PROFILE   */
-.header-profile-container {
+.ts-header-profile-container {
   position: relative;
 }
-.header-profile-dropdown {
+.ts-header-profile-dropdown {
   display: flex;
   height: 40px;
   border-radius: 9999px;
@@ -61,13 +61,13 @@ header {
   background-color: #ffffff;
   cursor: pointer;
 }
-.header-profile-img-container {
+.ts-header-profile-img-container {
   width: 40px;
   height: 40px;
   padding: 4px;
   border-radius: 9999px;
 }
-.header-profile-img-icon {
+.ts-header-profile-img-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -76,14 +76,14 @@ header {
   border-radius: 9999px;
   background-color: rgb(229, 229, 229);
 }
-.header-profile-name {
+.ts-header-profile-name {
   display: flex;
   flex: 1;
   align-items: center;
   padding-left: 4px;
   padding-right: 16px;
 }
-.header-profile-chevron {
+.ts-header-profile-chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -91,7 +91,7 @@ header {
   padding-right: 14px;
   border-radius: 9999px;
 }
-.header-profile-menu {
+.ts-header-profile-menu {
   position: absolute;
   right: 0;
   top: 48px;
@@ -102,35 +102,35 @@ header {
   background-color: #ffffff;
   z-index: 10;
 }
-.header-profile-menu-item {
+.ts-header-profile-menu-item {
   display: flex;
   align-items: center;
   height: 36px;
   border-radius: 6px;
   cursor: pointer;
 }
-.header-profile-menu-item:hover {
+.ts-header-profile-menu-item:hover {
   background-color: #e7f3f9;
 }
-.header-profile-menu-item-icon {
+.ts-header-profile-menu-item-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
 }
-.header-profile-menu-item-label {
+.ts-header-profile-menu-item-label {
   flex: 1;
   padding: 0 2px;
 }
 
 /* ############### */
 /* HEADER SEARCH   */
-.header-search {
+.ts-header-search {
   position: relative;
   width: 100%;
 }
-.header-search-items-container {
+.ts-header-search-items-container {
   position: absolute;
   top: calc(100% + 4px);
   width: 100%;
@@ -141,13 +141,13 @@ header {
   overflow-y: auto;
   z-index: 100;
 }
-.header-search-loading {
+.ts-header-search-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 40px;
 }
-.header-search-no-items {
+.ts-header-search-no-items {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,10 +155,10 @@ header {
   color: #8c96a2;
   font-style: italic;
 }
-.header-search-items {
+.ts-header-search-items {
   padding: 8px;
 }
-.header-search-item {
+.ts-header-search-item {
   display: flex;
   align-items: center;
   height: 32px;
@@ -166,10 +166,10 @@ header {
   border-radius: 4px;
   cursor: pointer;
 }
-.header-search-item:hover {
+.ts-header-search-item:hover {
   background: #e7f3f9;
 }
-.header-search-item--match {
+.ts-header-search-item--match {
   background: #cce5f2;
   color: #007dbc;
   font-weight: 700;

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

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

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';
+    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/{src/layouts/Header/__stories__/Header.stories.mdx → esm/layouts/TsHeader/__stories__/TsHeader.stories.mdx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Header } from '../Header';
-import { HeaderProfile, HeaderProfileItem } from '../HeaderProfile';
-import { HeaderSearch } from '../HeaderSearch';
-import { Button } from '../../../components/Button/Button';
+import { TsHeader } from '../TsHeader';
+import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
+import { TsHeaderSearch } from '../TsHeaderSearch';
+import { TsButton } from '../../../components/TsButton/TsButton';
 
 <Meta title="Layouts/Header" />
 
@@ -41,16 +41,16 @@ The header will allow users to quickly find the information they need at a glanc
     args={{
       actions: (
         <>
-          <Button icon="add" size="lg" variant="shadow" rounded />
-          <HeaderProfile firstname="John" lastname="Doe">
-            <HeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
-            <HeaderProfileItem icon="award" label="Trainings" link="" />
-          </HeaderProfile>
+          <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: (
-        <HeaderSearch
+        <TsHeaderSearch
           getItemLabel={item => item.label}
           getItemValue={item => item.id}
           loadItems={loadItems}
@@ -62,10 +62,10 @@ The header will allow users to quickly find the information they need at a glanc
     }}
     argTypes={headerArgTypes}
   >
-    {args => <Header {...args} />}
+    {args => <TsHeader {...args} />}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={Header} />
+<ArgsTable story="Overview" of={TsHeader} />

package/{src/layouts/Navigation/Navigation.css → esm/layouts/TsNavigation/TsNavigation.css}

@@ -1,4 +1,4 @@
-.navigation {
+.ts-navigation {
   display: flex;
   align-items: center;
   height: 32px;
@@ -7,45 +7,45 @@
 
 /* ############ */
 /* BREADCRUMB   */
-.breadcrumb {
+.ts-breadcrumb {
   display: flex;
   align-items: center;
   padding-right: 20px;
 }
-.breadcrumb-container {
+.ts-breadcrumb-container {
   display: flex;
   align-items: center;
 }
-.breadcrumb-chevron {
+.ts-breadcrumb-chevron {
   padding: 0 8px;
   color: #3643ba;
 }
-.breadcrumb-item {
+.ts-breadcrumb-item {
   display: flex;
   align-items: center;
   height: 32px;
   border-radius: 9999px;
   color: #3643ba;
 }
-.breadcrumb-item--highlight {
+.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;
 }
-.breadcrumb-item--link {
+.ts-breadcrumb-item--link {
   cursor: pointer;
 }
-.breadcrumb-item--link:hover {
+.ts-breadcrumb-item--link:hover {
   text-decoration: underline;
 }
-.breadcrumb-item--icon {
+.ts-breadcrumb-item--icon {
   padding-right: 8px;
 }
 
 /* ######### */
 /* DIVIDER   */
-.navigation-divider {
+.ts-navigation-divider {
   flex: 1;
   height: 1px;
   margin: 4px 0;
@@ -54,12 +54,12 @@
 
 /* ######### */
 /* ACTIONS   */
-.navigation-actions {
+.ts-navigation-actions {
   /* flex items-center [&>*]:ml-4 */
   display: flex;
   align-items: center;
 }
-.navigation-actions > * {
+.ts-navigation-actions > * {
   margin-left: 16px;
 }
 

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"}