meticulous-ui 3.9.2 → 3.9.4

package/components/Sidebar/components/NavItem.js

@@ -0,0 +1,97 @@
+import { jsxs as r, jsx as a, Fragment as A } from "react/jsx-runtime";
+import "react";
+import { NavListItem as N, NavItemRow as $, NavIconWrapper as k, NavLabel as E, NavControls as j, InlineAction as g, SubList as w, ChildListItem as P, ChildLabel as F } from "./NavItem.styles.js";
+import { ChevronIcon as R, PlusIcon as S } from "./icons.js";
+import b from "./Badge.js";
+const G = ({
+  item: e,
+  collapsed: t,
+  isActive: d,
+  isHovered: p,
+  isExpanded: l,
+  hoveredId: x,
+  colors: o,
+  isDark: c,
+  onNavClick: s,
+  onHover: h,
+  onClearHover: v,
+  onToggleExpand: C
+}) => {
+  const u = e.children && e.children.length > 0, i = d(e.id), B = () => s(e.id), T = () => h(e.id), I = (n) => C(e.id, n), f = (n) => {
+    n.stopPropagation(), e.onAdd();
+  };
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r(
+      $,
+      {
+        $collapsed: t,
+        $isChild: !1,
+        $isActive: i,
+        $isHovered: p,
+        $activeText: o.activeText,
+        $text: o.text,
+        $activeBg: o.activeBg,
+        $hoverBg: o.hoverBg,
+        onClick: B,
+        onMouseEnter: T,
+        onMouseLeave: v,
+        "aria-current": i ? "page" : void 0,
+        children: [
+          /* @__PURE__ */ a(k, { $color: i ? o.activeText : o.subText, "aria-hidden": "true", children: e.icon }),
+          !t && /* @__PURE__ */ r(A, { children: [
+            /* @__PURE__ */ a(E, { children: e.label }),
+            /* @__PURE__ */ r(j, { children: [
+              e.badge != null && /* @__PURE__ */ a(b, { count: e.badge, isDark: c }),
+              u && /* @__PURE__ */ a(
+                g,
+                {
+                  $color: o.subText,
+                  onClick: I,
+                  "aria-label": l ? `Collapse ${e.label}` : `Expand ${e.label}`,
+                  "aria-expanded": l,
+                  children: /* @__PURE__ */ a(R, { direction: l ? "up" : "down" })
+                }
+              ),
+              e.onAdd && /* @__PURE__ */ a(
+                g,
+                {
+                  $color: o.subText,
+                  onClick: f,
+                  "aria-label": `Add ${e.label}`,
+                  children: /* @__PURE__ */ a(S, {})
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !t && u && l && /* @__PURE__ */ a(w, { children: e.children.map((n) => {
+      const L = () => s(n.id), M = () => h(n.id);
+      return /* @__PURE__ */ a(P, { children: /* @__PURE__ */ r(
+        $,
+        {
+          $collapsed: !1,
+          $isChild: !0,
+          $isActive: d(n.id),
+          $isHovered: x === n.id,
+          $activeText: o.activeText,
+          $text: o.text,
+          $activeBg: o.activeBg,
+          $hoverBg: o.hoverBg,
+          onClick: L,
+          onMouseEnter: M,
+          onMouseLeave: v,
+          "aria-current": d(n.id) ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ a(F, { children: n.label }),
+            n.badge != null && /* @__PURE__ */ a(b, { count: n.badge, isDark: c })
+          ]
+        }
+      ) }, n.id);
+    }) })
+  ] });
+};
+export {
+  G as default
+};

package/components/Sidebar/components/NavItem.styles.js

@@ -0,0 +1,69 @@
+import n from "styled-components";
+const s = n.li`
+  list-style: none;
+`, l = n.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ $collapsed: e }) => e ? "0" : "0.9375rem"};
+  justify-content: ${({ $collapsed: e }) => e ? "center" : "flex-start"};
+  padding: ${({ $isChild: e, $collapsed: t }) => e ? "0.75rem 1.5rem 0.75rem 4rem" : t ? "1rem" : "1rem 1.5rem"};
+  border-radius: 0.75rem;
+  cursor: pointer;
+  color: ${({ $isActive: e, $activeText: t, $text: r }) => e ? t : r};
+  background: ${({ $isActive: e, $activeBg: t, $isHovered: r, $hoverBg: o }) => e ? t : r ? o : "transparent"};
+  transition: background 0.15s;
+  font-size: ${({ $isChild: e }) => e ? "1.375rem" : "1.5rem"};
+  font-weight: ${({ $isChild: e }) => e ? "400" : "500"};
+  user-select: none;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+`, a = n.span`
+  flex-shrink: 0;
+  width: 1.6875rem;
+  height: 1.6875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ $color: e }) => e};
+`, c = n.span`
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, p = n.span`
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+`, d = n.button`
+  color: ${({ $color: e }) => e};
+  display: flex;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+`, m = n.ul`
+  margin-top: 0.125rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  list-style: none;
+  padding: 0;
+  margin-left: 0;
+`, f = n.li`
+  list-style: none;
+`, g = n.span`
+  flex: 1;
+`;
+export {
+  g as ChildLabel,
+  f as ChildListItem,
+  d as InlineAction,
+  p as NavControls,
+  a as NavIconWrapper,
+  l as NavItemRow,
+  c as NavLabel,
+  s as NavListItem,
+  m as SubList
+};

package/components/Sidebar/components/icons.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import t from "styled-components";
+const n = t.svg`
+  transform: ${({ $direction: r }) => r === "up" ? "rotate(180deg)" : "none"};
+  transition: transform 0.2s;
+`, s = ({ direction: r = "down" }) => /* @__PURE__ */ o(n, { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", $direction: r, children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M4 6l4 4 4-4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }), d = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ o("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }), c = ({ size: r = 16 }) => /* @__PURE__ */ o("svg", { width: r, height: r, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ o("path", { d: "M2 4h12M2 8h12M2 12h12", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }) }), l = () => /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M2 6h12M2 10h12M6 2l-4 4 4 4M10 14l4-4-4-4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+export {
+  s as ChevronIcon,
+  c as HamburgerIcon,
+  d as PlusIcon,
+  l as SwitchIcon
+};

package/components/Sidebar/index.js

@@ -0,0 +1,4 @@
+import a from "./Sidebar.js";
+export {
+  a as default
+};