@temp-spotwork/ui 1.4.3 → 1.4.5

package/dist/components/molecules/filter/context-search/context-search.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export type ContextSearchProps = {
     /**
      * value of the input
@@ -15,5 +17,17 @@ export type ContextSearchProps = {
      * disabled
      */
     disabled?: boolean;
+    /**
+     * class name for the container
+     */
+    className?: string;
+    /**
+     * css styles for the input
+     */
+    style?: React.CSSProperties;
+    /**
+     * prevent browser suggestions
+     */
+    preventBrowserSuggestions?: boolean;
 };
-export declare const ContextSearch: ({ value, onChange, placeholder, disabled, }: ContextSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextSearch: ({ value, onChange, placeholder, disabled, className, style, preventBrowserSuggestions, }: ContextSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/context-search/context-search.js

@@ -1,52 +1,51 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { Icons as n } from "../../../atoms/icons/icons.js";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { Icons as g } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
 import { t as s } from "../../../../bundle-mjs-CAy1p0fn.js";
 import { outlinedBorder as l } from "../../../styles/defaults/defaults.js";
 import "../../../../purify.es-eYFoHPwR.js";
-import { styleMap as b } from "../../../styles/typography/style.js";
+import { styleMap as v } from "../../../styles/typography/style.js";
 import "../../../styles/colors/colormap.js";
-const w = ({
+const $ = ({
   value: a,
   onChange: e,
   placeholder: i,
-  disabled: o = !1
+  disabled: o = !1,
+  className: c,
+  style: m,
+  preventBrowserSuggestions: u = !1
 }) => {
-  const [c, r] = p(!1), m = () => {
-    r(!0);
-  }, u = () => {
-    r(!1);
+  const [f, t] = x(!1), p = () => {
+    t(!0);
+  }, d = () => {
+    t(!1);
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ b(
     "div",
     {
       className: s(
         `h-[3rem] flex items-center gap-xs px-xs bg-surface-default ${l.base} border-bcolor-default `,
-        c && l.active,
-        o && "bg-surface-disabled border-bcolor-disabled"
+        f && l.active,
+        o && "bg-surface-disabled border-bcolor-disabled",
+        c
       ),
+      style: m,
       children: [
-        /* @__PURE__ */ t(
-          n,
-          {
-            disabled: !0,
-            icon: "MagnifyingGlassSmall",
-            color: o ? "disabled" : "active"
-          }
-        ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(g, { disabled: !0, icon: "MagnifyingGlassSmall", color: o ? "disabled" : "active" }),
+        /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            className: s(`focus:outline-none w-full ${b[1]}`),
+            className: s(`focus:outline-none w-full ${v[1]}`),
             placeholder: i,
-            onFocus: m,
-            onBlur: u,
-            onChange: (f) => e == null ? void 0 : e(f.target.value),
+            onFocus: p,
+            onBlur: d,
+            onChange: (n) => e == null ? void 0 : e(n.target.value),
             value: a,
-            disabled: o
+            disabled: o,
+            autoComplete: u ? "off" : "on"
           }
         )
       ]
@@ -54,5 +53,5 @@ const w = ({
   );
 };
 export {
-  w as ContextSearch
+  $ as ContextSearch
 };

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.d.ts

@@ -19,5 +19,6 @@ export type DropdownFilterProps = {
     multiselect?: boolean;
     disabled?: boolean;
     minWidth?: string | number;
+    className?: string;
 };
-export declare const DropdownFilter: ({ onChange, value, placeholder, options, multiselect, disabled, minWidth, }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownFilter: ({ onChange, value, placeholder, options, multiselect, disabled, minWidth, className, }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/dropdown-selector/dropdown-selector.js

@@ -1,63 +1,64 @@
 import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import { useRef as R, useState as V } from "react";
-import { R as P, T as $, I as F, P as K, C as z, V as L, a as M } from "../../../../index-CnWyMXBX.js";
-import { c as U } from "../../../../index-fN7hCOo3.js";
-import { outlinedBorder as N, border as W } from "../../../styles/defaults/defaults.js";
+import { useRef as V, useState as P } from "react";
+import { R as $, T as F, I as K, P as z, C as L, V as M, a as U } from "../../../../index-CnWyMXBX.js";
+import { c as W } from "../../../../index-fN7hCOo3.js";
+import { outlinedBorder as S, border as Z } from "../../../styles/defaults/defaults.js";
 import { Typography as g } from "../../../styles/typography/typography.js";
-import { filterDropdownStyles as Z, contentStyles as q } from "./styles.js";
-import { Badge as S } from "../../../atoms/badge/badge.js";
-import { Icons as k } from "../../../atoms/icons/icons.js";
+import { filterDropdownStyles as q, contentStyles as G } from "./styles.js";
+import { Badge as k } from "../../../atoms/badge/badge.js";
+import { Icons as A } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { CheckboxFilter as G } from "../checkbox/checkbox.js";
-import { t as A } from "../../../../bundle-mjs-CAy1p0fn.js";
-import { getBorderClasses as H } from "../../../atoms/form/utils-for-forms/state-functions.js";
-import { useStickyZIndex as J } from "../../../../hooks/use-sticky-z-index.js";
-const fe = ({
-  onChange: y,
+import { CheckboxFilter as H } from "../checkbox/checkbox.js";
+import { t as y } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { getBorderClasses as J } from "../../../atoms/form/utils-for-forms/state-functions.js";
+import { useStickyZIndex as Q } from "../../../../hooks/use-sticky-z-index.js";
+const me = ({
+  onChange: x,
   value: o,
   placeholder: C = "Select value",
   options: f,
   multiselect: t = !1,
   disabled: a = !1,
-  minWidth: D
+  minWidth: D,
+  className: O
 }) => {
-  const x = R(null), O = J(x), [c, i] = V(!1), v = H(c, !1, !1, a), I = a ? `bg-surface-disabled ${N.disabled}` : "bg-surface-default", u = Array.isArray(o) ? o.length - 1 : 0;
-  function w(e) {
+  const u = V(null), v = Q(u), [c, i] = P(!1), I = J(c, !1, !1, a), B = a ? `bg-surface-disabled ${S.disabled}` : "bg-surface-default", w = Array.isArray(o) ? o.length - 1 : 0;
+  function b(e) {
     return Array.isArray(e) && typeof e[0] == "object" && e[0] !== null && "label" in e[0] && "value" in e[0];
   }
-  const b = (e, r) => {
+  const N = (e, r) => {
     if (Array.isArray(r)) {
       if (!r.length) return "";
-      if (w(e)) {
+      if (b(e)) {
         const l = e.find((p) => p.value === r[0]);
         return l ? l.label : "";
       }
       return r[0];
     } else {
-      if (w(e)) {
+      if (b(e)) {
         const l = e.find((p) => p.value === r);
         return l ? l.label : "";
       }
       return r;
     }
-  }, d = (e) => typeof e == "string" ? e : e.value, B = (e) => typeof e == "string" ? e : e.label, m = (e) => {
+  }, d = (e) => typeof e == "string" ? e : e.value, T = (e) => typeof e == "string" ? e : e.label, m = (e) => {
     if (t) {
       let r = [];
-      Array.isArray(o) && o.includes(e) ? r = [...o.filter((l) => l !== e)] : r = [...o, e], y(r);
+      Array.isArray(o) && o.includes(e) ? r = [...o.filter((l) => l !== e)] : r = [...o, e], x(r);
     } else
-      y(e);
-  }, h = f.filter((e) => !e.hide), T = (e, r) => {
+      x(e);
+  }, h = f.filter((e) => !e.hide), j = (e, r) => {
     e.key === "Enter" && m(r);
-  }, j = (e) => {
+  }, E = (e) => {
     e.key === "Escape" && i(!1);
-  }, E = () => {
+  }, R = () => {
     i(!1);
   };
-  return /* @__PURE__ */ s("div", { className: "w-full", children: /* @__PURE__ */ n(
-    P,
+  return /* @__PURE__ */ s("div", { className: y("w-full", O), children: /* @__PURE__ */ n(
+    $,
     {
-      value: b(f, o),
+      value: N(f, o),
       onValueChange: (e) => !t && m(e),
       open: c,
       onOpenChange: (e) => {
@@ -66,10 +67,10 @@ const fe = ({
       disabled: a,
       children: [
         /* @__PURE__ */ n(
-          $,
+          F,
           {
-            className: A(Z, I, v),
-            ref: x,
+            className: y(q, B, I),
+            ref: u,
             style: { height: "3rem", padding: "0.75rem", minWidth: D },
             children: [
               o && o.length !== 0 ? /* @__PURE__ */ n("div", { className: "min-w-0 flex gap-xxs items-center", children: [
@@ -77,12 +78,12 @@ const fe = ({
                   g,
                   {
                     swStyle: 1,
-                    children: b(f, o),
+                    children: N(f, o),
                     className: "whitespace-nowrap overflow-hidden text-ellipsis",
                     color: a ? "disabled" : "default"
                   }
                 ),
-                t && u > 0 && /* @__PURE__ */ s(S, { text: "+" + u, color: "affirmative" })
+                t && w > 0 && /* @__PURE__ */ s(k, { text: "+" + w, color: "affirmative" })
               ] }) : /* @__PURE__ */ s(
                 g,
                 {
@@ -92,8 +93,8 @@ const fe = ({
                   className: "whitespace-nowrap overflow-hidden text-ellipsis"
                 }
               ),
-              /* @__PURE__ */ s(F, { className: "flex-shrink-0", children: /* @__PURE__ */ s(
-                k,
+              /* @__PURE__ */ s(K, { className: "flex-shrink-0", children: /* @__PURE__ */ s(
+                A,
                 {
                   id: "dropdown-icon",
                   disabled: !0,
@@ -104,44 +105,44 @@ const fe = ({
             ]
           }
         ),
-        /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(
-          z,
+        /* @__PURE__ */ s(z, { children: /* @__PURE__ */ s(
+          L,
           {
-            className: U(
-              q,
+            className: W(
+              G,
               "max-h-[27.3rem]",
               // to fit 9 items in timesheet filter (with border width)
-              c ? N.active : W.default
+              c ? S.active : Z.default
             ),
             position: "popper",
             side: "bottom",
-            onPointerDownOutside: E,
-            onKeyDown: j,
-            style: { minWidth: "auto", zIndex: O },
-            children: /* @__PURE__ */ s(L, { children: h == null ? void 0 : h.map((e, r) => /* @__PURE__ */ s(
-              M,
+            onPointerDownOutside: R,
+            onKeyDown: E,
+            style: { minWidth: "auto", zIndex: v },
+            children: /* @__PURE__ */ s(M, { children: h == null ? void 0 : h.map((e, r) => /* @__PURE__ */ s(
+              U,
               {
-                className: A(
+                className: y(
                   "flex flex-row items-center gap-xs py-sm  cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none",
                   e.hasTopBorder && "border-t border-e-bcolor-subdued",
                   t ? "pr-xs" : "px-md"
                 ),
                 value: d(e),
                 onClick: () => t && m(d(e)),
-                onKeyDown: (l) => T(l, d(e)),
+                onKeyDown: (l) => j(l, d(e)),
                 style: { height: "3rem" },
                 children: /* @__PURE__ */ n("div", { className: "flex items-center", style: { height: "100%" }, children: [
                   t && /* @__PURE__ */ s(
-                    G,
+                    H,
                     {
                       "data-testid": `checkbox-${r}`,
                       checked: o ? o.includes(d(e)) : !1
                     }
                   ),
                   /* @__PURE__ */ n("div", { className: "flex items-center gap-xxs", children: [
-                    e.icon && /* @__PURE__ */ s(k, { ...e.icon, color: e.color ? e.color : "default" }),
+                    e.icon && /* @__PURE__ */ s(A, { ...e.icon, color: e.color ? e.color : "default" }),
                     !e.icon && e.badgeText && /* @__PURE__ */ s(
-                      S,
+                      k,
                       {
                         text: e.badgeText,
                         color: e.color ? e.color : "default"
@@ -151,7 +152,7 @@ const fe = ({
                       g,
                       {
                         swStyle: 1,
-                        children: B(e),
+                        children: T(e),
                         color: e.color ? e.color : "default",
                         className: "whitespace-nowrap overflow-hidden text-ellipsis"
                       }
@@ -168,5 +169,5 @@ const fe = ({
   ) });
 };
 export {
-  fe as DropdownFilter
+  me as DropdownFilter
 };

package/dist/components/molecules/filter/dropdown-selector/styles.js

@@ -2,21 +2,21 @@ import { c as e } from "../../../../index-fN7hCOo3.js";
 const r = e(
   "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-md"
 ), s = e(
-  "px-md h-[4rem] w-auto flex flex-row justify-between items-center gap-xs"
-), n = e(
+  "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-xs"
+), l = e(
   "overflow-hidden bg-surface-default rounded-lg my-[0.3rem] border-[0.15rem] outline-none"
-), o = "flex flex-row items-center gap-xs py-sm px-md cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none ", l = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default", c = "flex items-center gap-xs self-stretch", a = {
+), n = "flex flex-row items-center gap-xs py-sm px-md cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none ", o = "flex items-center justify-center h-[1.5rem] bg-surface-default text-glyph-active cursor-default", c = "flex items-center gap-xs self-stretch", f = {
   default: "affirmative",
   warning: "warning",
   error: "alert",
   disabled: "disabled"
 };
 export {
-  a as badgeStyleMap,
-  n as contentStyles,
+  f as badgeStyleMap,
+  l as contentStyles,
   s as filterDropdownStyles,
   c as hintStyles,
-  o as itemStyles,
-  l as scrollButtonStyles,
+  n as itemStyles,
+  o as scrollButtonStyles,
   r as triggerStyles
 };

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.d.ts

@@ -4,4 +4,11 @@ import { Sidebar } from './';
 declare const meta: Meta<typeof Sidebar>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
+export declare const Basic: Story;
+export declare const WithTopAndBottomItems: Story;
+export declare const TopItemsOnly: Story;
+export declare const ManyItems: Story;
+export declare const TransparentOverlay: Story;
+export declare const CustomWidth: Story;
+export declare const SlowTransition: Story;
+export declare const FastTransition: Story;

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.js

@@ -1,20 +1,306 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
-import { Sidebar as r } from "./sidebar.js";
-const e = {
-  title: "@spotwork-ui/Sidebar",
-  component: r,
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { Sidebar as s } from "./sidebar.js";
+import { Button as d } from "../../button/button.js";
+const f = {
+  title: "@spotwork-ui/molecules/Sidebar",
+  component: s,
   parameters: {
-    layout: "centered"
+    layout: "fullscreen"
   },
   tags: ["autodocs"],
   argTypes: {
-    backgroundColor: { control: "color" }
-  },
-  args: { onClick: o() }
-}, s = {
-  args: {}
+    open: {
+      control: "boolean",
+      description: "Controls if the sidebar is open or closed"
+    },
+    width: {
+      control: "text",
+      description: "Width of the sidebar (can be px, %, rem, etc.)"
+    },
+    transitionDuration: {
+      control: { type: "number", min: 100, max: 2e3, step: 100 },
+      description: "Duration of the transition animation in milliseconds"
+    },
+    overlayTransparent: {
+      control: "boolean",
+      description: "If true, no overlay is rendered. If false, renders the overlay with background."
+    }
+  }
+}, m = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
+      {
+        icon: "Clock",
+        label: "Clock",
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/clock"
+      },
+      {
+        icon: "Maximize",
+        label: "Maximize",
+        isActive: !0,
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/maximize"
+      },
+      {
+        icon: "CalendarSmall",
+        label: "Calendar",
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/calendar"
+      }
+    ], open: t, setOpen: i })
+  ] });
+}, a = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar with Top & Bottom Items", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
+      {
+        icon: "Clock",
+        label: "Clock",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/clock"
+      },
+      {
+        icon: "Maximize",
+        label: "Maximize",
+        isActive: !0,
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/maximize"
+      },
+      {
+        icon: "CalendarSmall",
+        label: "Calendar",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/calendar"
+      },
+      {
+        icon: "Shifts",
+        label: "Shifts",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/shifts"
+      }
+    ], bottomItems: [
+      {
+        icon: "Settings",
+        label: "Settings",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/settings"
+      },
+      {
+        icon: "Support",
+        label: "Help & Support",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/help"
+      }
+    ], open: t, setOpen: i })
+  ] });
+}, p = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar (Top Items Only)", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
+      {
+        icon: "Clock",
+        label: "Clock",
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/clock"
+      },
+      {
+        icon: "Maximize",
+        label: "Maximize",
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/maximize"
+      },
+      {
+        icon: "CalendarSmall",
+        label: "Calendar",
+        onClick: (l) => {
+          console.log("Clicked:", l);
+        },
+        link: "/calendar"
+      }
+    ], open: t, setOpen: i })
+  ] });
+}, C = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar with Many Items", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
+      {
+        icon: "Clock",
+        label: "Clock",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/clock"
+      },
+      {
+        icon: "Maximize",
+        label: "Maximize",
+        isActive: !0,
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/maximize"
+      },
+      {
+        icon: "CalendarSmall",
+        label: "Calendar",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/calendar"
+      },
+      {
+        icon: "Shifts",
+        label: "Shifts",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/shifts"
+      },
+      {
+        icon: "Jobs",
+        label: "Jobs",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/jobs"
+      },
+      {
+        icon: "Contact",
+        label: "Contacts",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/contacts"
+      },
+      {
+        icon: "File",
+        label: "Files",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/files"
+      }
+    ], bottomItems: [
+      {
+        icon: "Settings",
+        label: "Settings",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/settings"
+      },
+      {
+        icon: "Support",
+        label: "Help & Support",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/help"
+      },
+      {
+        icon: "Feedback",
+        label: "Feedback",
+        onClick: (e) => {
+          console.log("Clicked:", e);
+        },
+        link: "/feedback"
+      }
+    ], open: t, setOpen: i })
+  ] });
+}, S = {
+  render: (o) => /* @__PURE__ */ n(m, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  }
+}, I = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  }
+}, x = {
+  render: (o) => /* @__PURE__ */ n(p, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  }
+}, y = {
+  render: (o) => /* @__PURE__ */ n(C, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  }
+}, O = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 300,
+    overlayTransparent: !0
+  }
+}, T = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+  args: {
+    width: "30rem",
+    transitionDuration: 300,
+    overlayTransparent: !1
+  }
+}, v = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 1e3,
+    overlayTransparent: !1
+  }
+}, w = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+  args: {
+    width: "22.5rem",
+    transitionDuration: 150,
+    overlayTransparent: !1
+  }
 };
 export {
-  s as Primary,
-  e as default
+  S as Basic,
+  T as CustomWidth,
+  w as FastTransition,
+  y as ManyItems,
+  v as SlowTransition,
+  x as TopItemsOnly,
+  O as TransparentOverlay,
+  I as WithTopAndBottomItems,
+  f as default
 };

package/dist/components/molecules/navigation/sidebar/sidebar.d.ts

@@ -14,9 +14,13 @@ export type SidebarProps = {
      */
     setOpen?: (state: boolean) => void;
     /**
-     * Navigation items
+     * Navigation items displayed at the top of the sidebar
      */
-    items: SidebarItemProps[];
+    topItems: SidebarItemProps[];
+    /**
+     * Navigation items displayed at the bottom of the sidebar
+     */
+    bottomItems?: SidebarItemProps[];
     /**
      * Sidebar width in rem
      */
@@ -30,4 +34,4 @@ export type SidebarProps = {
      */
     overlayTransparent?: boolean;
 };
-export declare function Sidebar({ open, setOpen, items, transitionDuration, width, overlayTransparent, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ open, setOpen, topItems, bottomItems, transitionDuration, width, overlayTransparent, }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/navigation/sidebar/sidebar.js

@@ -1,47 +1,51 @@
-import { jsx as e, jsxs as t, Fragment as u } from "react/jsx-runtime";
-import { NavigationItem as p } from "../../../atoms/navigation/navigation-item/navigation-item.js";
-import { u as h, a as n } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
-import { R as b, P as v, O as g, C as y, T as N, D as x } from "../../../../index-C0ZrzaoZ.js";
+import { jsx as e, jsxs as o, Fragment as h } from "react/jsx-runtime";
+import { NavigationItem as t } from "../../../atoms/navigation/navigation-item/navigation-item.js";
+import { u as g, a as s } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
+import { R as v, P as x, O as b, C as N, T as y, D as k } from "../../../../index-C0ZrzaoZ.js";
 import "../../../styles/colors/colors.js";
-import { surface as k } from "../../../styles/colors/colormap.js";
-function w({
-  open: o,
-  setOpen: s,
-  items: l,
-  transitionDuration: c = 300,
-  width: d = "22.5rem",
-  overlayTransparent: a = !1
+import { surface as C } from "../../../styles/colors/colormap.js";
+function z({
+  open: a,
+  setOpen: c,
+  topItems: d,
+  bottomItems: l = [],
+  transitionDuration: m = 300,
+  width: f = "22.5rem",
+  overlayTransparent: i = !1
 }) {
-  const m = h(o, {
+  const u = g(a, {
     from: { opacity: 0, transform: "translateX(-100%)" },
     enter: { opacity: 1, transform: "translateX(0%)" },
     leave: { opacity: 1 },
     config: {
-      duration: c
+      duration: m
     }
   });
-  return /* @__PURE__ */ e(b, { open: o, onOpenChange: s, modal: !a, children: /* @__PURE__ */ e(v, { children: m(
-    (i, f) => f ? /* @__PURE__ */ t(u, { children: [
-      !a && /* @__PURE__ */ e(n.div, { style: { opacity: i.opacity }, children: /* @__PURE__ */ e(
-        g,
+  return /* @__PURE__ */ e(v, { open: a, onOpenChange: c, modal: !i, children: /* @__PURE__ */ e(x, { children: u(
+    (n, p) => p ? /* @__PURE__ */ o(h, { children: [
+      !i && /* @__PURE__ */ e(s.div, { style: { opacity: n.opacity }, children: /* @__PURE__ */ e(
+        b,
         {
           forceMount: !0,
           className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
           style: {
-            background: k.subduedInverted,
+            background: C.subduedInverted,
             opacity: "50%"
           }
         }
       ) }),
-      /* @__PURE__ */ t(y, { forceMount: !0, "data-state": o ? "open" : "close", children: [
-        /* @__PURE__ */ e(N, { className: "sr-only", children: "Navigation Sidebar" }),
-        /* @__PURE__ */ e(x, { className: "sr-only", children: "Navigation menu with links to different sections" }),
-        /* @__PURE__ */ e(
-          n.div,
+      /* @__PURE__ */ o(N, { forceMount: !0, "data-state": a ? "open" : "close", children: [
+        /* @__PURE__ */ e(y, { className: "sr-only", children: "Navigation Sidebar" }),
+        /* @__PURE__ */ e(k, { className: "sr-only", children: "Navigation menu with links to different sections" }),
+        /* @__PURE__ */ o(
+          s.div,
           {
-            style: { transform: i.transform, width: d },
-            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none ${a ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
-            children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(p, { ...r, isNavigation: !0 }) }, r.label)) })
+            style: { transform: n.transform, width: f },
+            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${i ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
+            children: [
+              /* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) }),
+              l.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-lg p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) })
+            ]
           }
         )
       ] })
@@ -49,5 +53,5 @@ function w({
   ) }) });
 }
 export {
-  w as Sidebar
+  z as Sidebar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.4.3",
+  "version": "1.4.5",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",