jcicl 0.0.118 → 0.0.122

package/Nav/Nav.js

@@ -1,32 +1,35 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { n as c, i as C } from "../.chunks/emotion-styled.browser.esm.js";
-import d from "../theme.js";
-import S from "../ScrollContainer/ScrollContainer.js";
-import { B as k } from "../.chunks/ButtonBase.js";
-const w = c(k, {
-  shouldForwardProp: (o) => C(o)
-})(({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
+import { jsx as c, jsxs as u } from "react/jsx-runtime";
+import { useState as j } from "react";
+import { n as v, i as z } from "../.chunks/emotion-styled.browser.esm.js";
+import P from "../theme.js";
+import B from "../ScrollContainer/ScrollContainer.js";
+import { B as D } from "../.chunks/ButtonBase.js";
+const C = v(D, {
+  shouldForwardProp: (t) => z(t)
+})(({ active: t, isTablet: n, highlight1: r, highlight3: i, iconColor: e, isMobile: s, shadowSecondary: d }) => ({
   display: "flex",
-  flexDirection: t ? "row" : "column",
+  flexDirection: n ? "row" : "column",
   alignItems: "center",
-  justifyContent: t ? "flex-start" : "center",
+  justifyContent: n ? "flex-start" : "center",
   width: "100%",
-  padding: t ? "16px" : "0 8px 8px 8px",
+  padding: n ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: o ? r : "transparent",
-  boxShadow: o ? e : "none",
-  ...t && {
+  backgroundColor: t && !s ? r : "transparent",
+  boxShadow: t ? e : "none",
+  ...n && {
     gap: "0.5rem"
   },
+  ...s && {
+    padding: 0
+  },
   "&:hover, :focus-visible": {
     svg: {
-      ...!t && {
+      ...!n && {
         backgroundColor: r
       }
     },
-    ...t && {
-      boxShadow: d.boxShadows.darkGreen,
+    ...n && {
+      boxShadow: d,
       backgroundColor: i
     }
   },
@@ -39,7 +42,10 @@ const w = c(k, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    transition: "313ms all ease-in-out"
+    transition: "313ms all ease-in-out",
+    ...s && t && {
+      backgroundColor: r
+    }
   },
   span: {
     fontFamily: "Roboto, sans-serif",
@@ -47,51 +53,87 @@ const w = c(k, {
     fontWeight: "bold",
     color: e,
     textAlign: "center",
-    ...t && {
+    ...n && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), P = c("div")(({ navWidth: o, isTablet: t }) => ({
+})), y = v("div")(({ navWidth: t, isTablet: n, isMobile: r, shadowSecondary: i }) => ({
   display: "flex",
-  flexDirection: "column",
+  flexDirection: r ? "row" : "column",
   backgroundColor: "transparent",
   alignItems: "center",
-  justifyContent: "flex-start",
+  justifyContent: r ? "space-between" : "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: t ? 0 : "1rem",
-  width: o
-})), W = ({
-  navItems: o,
-  activeRoute: t,
-  navWidth: r = `${d.constants.navDefaultWidth}px`,
+  gap: n ? 0 : "1rem",
+  width: t,
+  boxSizing: "border-box",
+  ...r && {
+    boxShadow: i,
+    zIndex: 1313,
+    padding: "4px 8px"
+  }
+})), $ = ({
+  navItems: t,
+  activeRoute: n,
+  navWidth: r = `${P.constants.navDefaultWidth}px`,
   isTablet: i,
-  themeColors: e
+  isMobile: e,
+  themeColors: s
 }) => {
-  const [l, p] = v(""), m = (s, n) => {
-    p(s), n();
-  }, { highlightPrimary: f, highlightTertiary: h, iconPrimary: g } = e;
-  return /* @__PURE__ */ a(S, { direction: "vertical", width: r, styles: { minWidth: r }, children: /* @__PURE__ */ a(P, { ...{ navWidth: r, isTablet: i }, children: o.map(({ icon: s, label: n = "", onClick: x = () => {
-  }, ...u }) => /* @__PURE__ */ y(
-    w,
+  const [d, w] = j(""), f = (a, o) => {
+    w(a), o();
+  }, { highlightPrimary: g, highlightTertiary: m, iconPrimary: x, shadowSecondary: p, scrollColor: S } = s, k = { navWidth: r, isTablet: i, shadowSecondary: p };
+  return e ? /* @__PURE__ */ c(y, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: p, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
+  }, ...h }) => /* @__PURE__ */ u(
+    C,
     {
-      ...u,
-      active: t ? t === n : l === n,
-      onClick: () => m(n, x),
+      ...h,
+      active: n ? n === o : d === o,
+      onClick: () => f(o, l),
       isTablet: i,
-      highlight1: f,
-      highlight3: h,
-      iconColor: g,
+      highlight1: g,
+      highlight3: m,
+      iconColor: x,
+      shadowSecondary: p,
+      isMobile: !0,
       children: [
-        s,
-        /* @__PURE__ */ a("span", { children: n })
+        a,
+        /* @__PURE__ */ c("span", { children: o })
       ]
     },
-    n
-  )) }) });
+    o
+  )) }) : /* @__PURE__ */ c(
+    B,
+    {
+      scrollColor: S,
+      direction: "vertical",
+      width: r,
+      styles: { minWidth: r },
+      children: /* @__PURE__ */ c(y, { ...k, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
+      }, ...h }) => /* @__PURE__ */ u(
+        C,
+        {
+          ...h,
+          active: n ? n === o : d === o,
+          onClick: () => f(o, l),
+          isTablet: i,
+          highlight1: g,
+          highlight3: m,
+          iconColor: x,
+          shadowSecondary: p,
+          children: [
+            a,
+            /* @__PURE__ */ c("span", { children: o })
+          ]
+        },
+        o
+      )) })
+    }
+  );
 };
 export {
-  W as Nav,
-  W as default
+  $ as Nav,
+  $ as default
 };

package/Nav/index.d.ts

@@ -1 +1 @@
-export { default, type NavProps, type NavItemProps, type TemplateThemeProps } from './Nav';
+export { default, type NavProps, type NavItemProps } from './Nav';

package/ScrollContainer/ScrollContainer.d.ts

@@ -4,6 +4,7 @@ export interface ScrollContainerProps {
     /** Defines which direction scrolling is enabled for */
     direction?: 'vertical' | 'horizontal' | 'all' | 'none';
     styles?: React.CSSProperties;
+    scrollColor?: string;
 }
 declare const ScrollContainer: React.FC<ScrollContainerProps & {
     children: React.ReactNode;