@pol-studios/ui 1.0.0

package/dist/nav/index.js

@@ -0,0 +1,1556 @@
+"use client";
+
+// src/nav/BottomNav.tsx
+import { Tooltip } from "flowbite-react";
+import { HiCog } from "react-icons/hi";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BottomNav({ settingsRoute = "/settings" }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-x-5", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Settings page", children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: settingsRoute,
+      className: "inline-flex cursor-pointer justify-center rounded p-2 text-text-500 hover:bg-muted-100 hover:text-text-900 ",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Settings page" }),
+        /* @__PURE__ */ jsx(HiCog, { className: "text-2xl text-text-400 text-text-500 hover:text-text-900 " })
+      ]
+    }
+  ) }) }) });
+}
+
+// src/nav/MenuToggle.tsx
+import { motion } from "framer-motion";
+
+// src/primitives/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@pol-studios/utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/nav/MenuToggle.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Path = (props) => /* @__PURE__ */ jsx3(
+  motion.path,
+  {
+    animate: props.isOpen ? "open" : "closed",
+    fill: "transparent",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    ...props
+  }
+);
+var MenuToggle = ({ toggle, isOpen }) => {
+  return /* @__PURE__ */ jsx3(Button, { onClick: toggle, className: "z-[100000] p-2", variant: "ghost", "data-testid": "nav-button", children: /* @__PURE__ */ jsxs2("svg", { width: "23", height: "23", className: "stroke-text-50 ", viewBox: "0 0 22 18", children: [
+    /* @__PURE__ */ jsx3(
+      Path,
+      {
+        isOpen,
+        variants: {
+          closed: { d: "M 2 2.5 L 20 2.5" },
+          open: { d: "M 3 16.5 L 17 2.5" }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Path,
+      {
+        isOpen,
+        d: "M 2 9.423 L 20 9.423",
+        variants: {
+          closed: { opacity: 1 },
+          open: { opacity: 0 }
+        },
+        transition: { duration: 0.1 }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Path,
+      {
+        isOpen,
+        variants: {
+          closed: { d: "M 2 16.346 L 20 16.346" },
+          open: { d: "M 3 2.5 L 17 16.346" }
+        }
+      }
+    )
+  ] }) });
+};
+var MenuToggle_default = MenuToggle;
+
+// src/nav/NavBarGroupItem.tsx
+import { Collapse } from "@mui/material";
+import { useState } from "react";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function NavBarGroupItem({ title, icon, children, className }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs3("div", { className, children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "grid cursor-pointer grid-flow-col grid-cols-[auto_1fr]\n            rounded-md bg-background-950 px-2 py-0.5 transition-all hover:bg-slate-100\n            ",
+        children: [
+          icon && /* @__PURE__ */ jsx4("span", { className: "my-auto mr-5", children: icon }),
+          /* @__PURE__ */ jsx4("span", { className: "text-left align-bottom leading-[2.5rem] font-semibold", children: title }),
+          /* @__PURE__ */ jsx4("span", { className: "mb-auto ml-5 mr-0.5 mt-auto", children: isExpanded ? /* @__PURE__ */ jsx4(ChevronUp, {}) : /* @__PURE__ */ jsx4(ChevronDown, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, style: {}, children })
+  ] });
+}
+
+// src/nav/UserProfileName.tsx
+import { cn as cn2 } from "@pol-studios/utils";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function UserProfileName({
+  userId,
+  className,
+  size = "1rem",
+  firstName,
+  lastName,
+  isLoading = false
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5("span", { className: cn2("animate-pulse bg-muted-200 rounded h-4 w-24 inline-block", className) });
+  }
+  return /* @__PURE__ */ jsx5("span", { className, style: { fontSize: size }, children: userId ? (firstName ?? "") + " " + (lastName ?? "") : "Application" });
+}
+
+// src/nav/UserProfilePicture.tsx
+import { cn as cn4, isUsable } from "@pol-studios/utils";
+
+// src/primitives/spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { cn as cn3 } from "@pol-studios/utils";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn3("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/nav/UserProfilePicture.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function UserProfilePicture({
+  userId,
+  className = "w-10 h-10",
+  size = "1rem",
+  onMouseEnter,
+  onMouseLeave,
+  firstName,
+  lastName,
+  profileImageUrl,
+  isLoading = false
+}) {
+  const initials = (firstName?.[0] ?? "") + (lastName?.[0] ?? "");
+  const fallBack = /* @__PURE__ */ jsx7("span", { className: cn4("m-auto p-0 leading-[unset] text-text-50 text-sm"), children: firstName || lastName ? initials : "" });
+  const hasProfilePath = isUsable(profileImageUrl);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      onMouseEnter: () => {
+        onMouseEnter && onMouseEnter();
+      },
+      onMouseLeave: () => {
+        onMouseLeave && onMouseLeave();
+      },
+      className: cn4(
+        "m-auto cursor-pointer rounded-full bg-primary-700 transition hover:bg-primary-800 flex items-center justify-center",
+        className
+      ),
+      children: isLoading ? /* @__PURE__ */ jsx7("div", { className: "center-Items grid h-full", children: /* @__PURE__ */ jsx7(
+        Spinner,
+        {
+          className: cn4("m-auto h-full", className)
+        }
+      ) }) : hasProfilePath ? /* @__PURE__ */ jsx7(
+        "img",
+        {
+          src: profileImageUrl,
+          alt: `${firstName} ${lastName}`,
+          className: cn4("transition rounded-full object-cover", className)
+        }
+      ) : fallBack
+    }
+  );
+}
+
+// src/nav/aceternity/breadcrumb.config.ts
+var globalBreadcrumbConfigs = [];
+var globalHierarchicalConfigs = [];
+var setBreadcrumbConfigs = (configs) => {
+  globalBreadcrumbConfigs = configs;
+};
+var setHierarchicalBreadcrumbConfigs = (configs) => {
+  globalHierarchicalConfigs = configs;
+  globalBreadcrumbConfigs = flattenHierarchicalConfigs(configs);
+};
+var flattenHierarchicalConfigs = (configs) => {
+  const flattened = [];
+  const flatten = (config, parentPattern = "", parentHref = "", inheritedSegments = []) => {
+    let fullPattern;
+    if (parentPattern === "" && config.pattern.startsWith("/")) {
+      fullPattern = config.pattern;
+    } else {
+      const childPattern = config.pattern.startsWith("/") ? config.pattern.substring(1) : config.pattern;
+      fullPattern = parentPattern + "/" + childPattern;
+    }
+    const segments = config.segments.map((segment) => {
+      let href = segment.href;
+      if (segment.path !== void 0) {
+        if (segment.isAbsolute || segment.path.startsWith("/")) {
+          href = segment.path;
+        } else {
+          const baseHref = parentHref || fullPattern;
+          const relativePath = segment.path.startsWith("/") ? segment.path : "/" + segment.path;
+          if (baseHref.includes(":")) {
+            href = (pathname) => {
+              const dynamicValues = extractDynamicValues(pathname, fullPattern);
+              let resolvedBaseHref = baseHref;
+              Object.entries(dynamicValues).forEach(([key, value]) => {
+                resolvedBaseHref = resolvedBaseHref.replace(`:${key}`, value);
+              });
+              return resolvedBaseHref + relativePath;
+            };
+          } else {
+            href = baseHref + relativePath;
+          }
+        }
+      } else if (segment.href === void 0) {
+        href = fullPattern;
+      }
+      if (typeof href === "string" && href.includes(":")) {
+        const originalHref = href;
+        href = (pathname) => {
+          const dynamicValues = extractDynamicValues(pathname, fullPattern);
+          let resolvedHref = originalHref;
+          Object.entries(dynamicValues).forEach(([key, value]) => {
+            resolvedHref = resolvedHref.replace(`:${key}`, value);
+          });
+          return resolvedHref;
+        };
+      }
+      return {
+        label: segment.label,
+        href,
+        icon: segment.icon,
+        dynamic: segment.dynamic,
+        dynamicLabel: segment.dynamicLabel,
+        path: segment.path,
+        isAbsolute: segment.isAbsolute
+      };
+    });
+    const allSegments = [...inheritedSegments, ...segments];
+    flattened.push({
+      pattern: fullPattern,
+      segments: allSegments,
+      priority: config.priority
+    });
+    if (config.children) {
+      config.children.forEach(
+        (child) => flatten(child, fullPattern, fullPattern, allSegments)
+      );
+    }
+  };
+  configs.forEach((config) => flatten(config));
+  return flattened;
+};
+var addBreadcrumbConfigs = (configs) => {
+  globalBreadcrumbConfigs = [...globalBreadcrumbConfigs, ...configs];
+};
+var addHierarchicalBreadcrumbConfigs = (configs) => {
+  globalHierarchicalConfigs = [...globalHierarchicalConfigs, ...configs];
+  globalBreadcrumbConfigs = [
+    ...globalBreadcrumbConfigs,
+    ...flattenHierarchicalConfigs(configs)
+  ];
+};
+var getBreadcrumbConfigs = () => {
+  return globalBreadcrumbConfigs;
+};
+var getHierarchicalBreadcrumbConfigs = () => {
+  return globalHierarchicalConfigs;
+};
+var clearBreadcrumbConfigs = () => {
+  globalBreadcrumbConfigs = [];
+  globalHierarchicalConfigs = [];
+};
+var findParentConfig = (pattern, allConfigs) => {
+  const patternSegments = pattern.split("/").filter(Boolean);
+  if (patternSegments.length === 0) {
+    return null;
+  }
+  for (let i = patternSegments.length - 1; i > 0; i--) {
+    const parentPattern = "/" + patternSegments.slice(0, i).join("/");
+    const parentConfig = allConfigs.find((c) => c.pattern === parentPattern);
+    if (parentConfig) {
+      return parentConfig;
+    }
+  }
+  const rootConfig = allConfigs.find((c) => c.pattern === "/");
+  return rootConfig || null;
+};
+var buildInheritedBreadcrumbConfig = (config, allConfigs, visitedPatterns = /* @__PURE__ */ new Set()) => {
+  if (visitedPatterns.has(config.pattern)) {
+    console.warn(
+      `Circular reference detected in breadcrumb pattern: ${config.pattern}`
+    );
+    return config;
+  }
+  visitedPatterns.add(config.pattern);
+  const parentConfig = findParentConfig(config.pattern, allConfigs);
+  if (!parentConfig) {
+    return config;
+  }
+  const builtParent = buildInheritedBreadcrumbConfig(
+    parentConfig,
+    allConfigs,
+    visitedPatterns
+  );
+  return {
+    ...config,
+    segments: [...builtParent.segments, ...config.segments]
+  };
+};
+var findBreadcrumbConfig = (pathname) => {
+  const sortedConfigs = [...globalBreadcrumbConfigs].sort(
+    (a, b) => (b.priority || 0) - (a.priority || 0)
+  );
+  for (const config of sortedConfigs) {
+    const matches = matchesPattern(pathname, config.pattern);
+    if (matches) {
+      return config;
+    }
+  }
+  const pathSegments = pathname.split("/").filter(Boolean);
+  const prefixCandidates = sortedConfigs.filter((c) => matchesPrefix(pathname, c.pattern)).sort((a, b) => {
+    const aLen = a.pattern.split("/").filter(Boolean).length;
+    const bLen = b.pattern.split("/").filter(Boolean).length;
+    if (bLen !== aLen) return bLen - aLen;
+    return (b.priority || 0) - (a.priority || 0);
+  });
+  if (prefixCandidates.length > 0) {
+    const best = prefixCandidates[0];
+    const inherited = buildInheritedBreadcrumbConfig(best, sortedConfigs);
+    const patternSegments = best.pattern.split("/").filter(Boolean);
+    const remaining = pathSegments.slice(patternSegments.length);
+    let currentPath2 = best.pattern === "/" ? "" : best.pattern;
+    const remainingSegments = [];
+    remaining.forEach((segment) => {
+      currentPath2 += `/${segment}`;
+      const isId = /^\d+$/.test(segment);
+      remainingSegments.push({
+        label: isId ? `Item ${segment}` : segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, " "),
+        href: currentPath2,
+        icon: void 0
+      });
+    });
+    return {
+      pattern: pathname,
+      segments: normalizeSegments([
+        ...inherited.segments,
+        ...remainingSegments
+      ]),
+      priority: inherited.priority ?? 0
+    };
+  }
+  const fallbackSegments = [
+    {
+      label: "Home",
+      href: "/",
+      icon: void 0
+    }
+  ];
+  let currentPath = "";
+  pathSegments.forEach((segment) => {
+    currentPath += `/${segment}`;
+    const isId = /^\d+$/.test(segment);
+    fallbackSegments.push({
+      label: isId ? `Item ${segment}` : segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, " "),
+      href: currentPath,
+      icon: void 0
+    });
+  });
+  return {
+    pattern: pathname,
+    segments: fallbackSegments,
+    priority: 0
+  };
+};
+var matchesPattern = (pathname, pattern) => {
+  if (pattern === "/" && pathname === "/") {
+    return true;
+  }
+  const pathSegments = pathname.split("/").filter(Boolean);
+  const patternSegments = pattern.split("/").filter(Boolean);
+  if (pattern !== "/") {
+    if (pathSegments.length !== patternSegments.length) {
+      return false;
+    }
+    for (let i = 0; i < patternSegments.length; i++) {
+      if (patternSegments[i].startsWith(":")) {
+        continue;
+      }
+      if (patternSegments[i] !== pathSegments[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+};
+var matchesPrefix = (pathname, pattern) => {
+  if (pattern === "/") return true;
+  const pathSegs = pathname.split("/").filter(Boolean);
+  const patSegs = pattern.split("/").filter(Boolean);
+  if (patSegs.length > pathSegs.length) return false;
+  for (let i = 0; i < patSegs.length; i++) {
+    const pat = patSegs[i];
+    const seg = pathSegs[i];
+    if (pat.startsWith(":")) continue;
+    if (pat !== seg) return false;
+  }
+  return true;
+};
+var normalizeSegments = (segments) => {
+  if (segments.length === 0) return segments;
+  const result = [];
+  for (const seg of segments) {
+    if (result.length === 0) {
+      result.push(seg);
+      continue;
+    }
+    const prev = result[result.length - 1];
+    const prevHref = typeof prev.href === "function" ? void 0 : prev.href;
+    const currHref = typeof seg.href === "function" ? void 0 : seg.href;
+    const isPrevHome = typeof prev.label === "string" && prev.label.trim().toLowerCase() === "home" && prevHref === "/";
+    const isCurrHome = typeof seg.label === "string" && seg.label.trim().toLowerCase() === "home" && currHref === "/";
+    if (isPrevHome && isCurrHome) {
+      continue;
+    }
+    if (prevHref && currHref && prevHref === currHref) {
+      continue;
+    }
+    result.push(seg);
+  }
+  return result;
+};
+var extractDynamicValues = (pathname, pattern) => {
+  const pathSegments = pathname.split("/").filter(Boolean);
+  const patternSegments = pattern.split("/").filter(Boolean);
+  const dynamicValues = {};
+  for (let i = 0; i < patternSegments.length; i++) {
+    if (patternSegments[i].startsWith(":")) {
+      const key = patternSegments[i].slice(1);
+      if (i < pathSegments.length) {
+        dynamicValues[key] = pathSegments[i];
+      }
+    }
+  }
+  return dynamicValues;
+};
+var resolveBreadcrumbLabel = async (label, supabase, pathname) => {
+  if (typeof label === "function") {
+    try {
+      if (supabase && pathname && label.length >= 2) {
+        return await label(supabase, pathname);
+      } else if (supabase && label.length >= 1) {
+        return await label(
+          supabase
+        );
+      } else {
+        return await label();
+      }
+    } catch (error) {
+      if (supabase) {
+        try {
+          return await label();
+        } catch (fallbackError) {
+          console.warn("Failed to resolve breadcrumb label:", fallbackError);
+          return "Error";
+        }
+      }
+      throw error;
+    }
+  }
+  return label;
+};
+var resolveBreadcrumbConfig = async (config, supabase, pathname) => {
+  const resolvedSegments = await Promise.all(
+    config.segments.map(async (segment) => {
+      const resolvedLabel = await resolveBreadcrumbLabel(
+        segment.label,
+        supabase,
+        pathname
+      );
+      let resolvedHref = segment.href;
+      if (typeof segment.href === "function" && pathname) {
+        try {
+          resolvedHref = segment.href(pathname);
+        } catch (error) {
+          console.warn("Error resolving href:", error);
+          resolvedHref = typeof segment.href === "string" ? segment.href : "#";
+        }
+      }
+      return {
+        ...segment,
+        label: resolvedLabel,
+        href: resolvedHref
+      };
+    })
+  );
+  return {
+    ...config,
+    segments: resolvedSegments
+  };
+};
+
+// src/nav/aceternity/useBreadcrumbs.ts
+import { useCallback, useEffect, useState as useState2 } from "react";
+var useBreadcrumbs = ({
+  pathname,
+  supabase,
+  autoResolve = true
+}) => {
+  const [breadcrumbs, setBreadcrumbs] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [rawConfig, setRawConfig] = useState2(null);
+  const generateBreadcrumbs = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const breadcrumbConfig = findBreadcrumbConfig(pathname);
+      if (!breadcrumbConfig) {
+        setBreadcrumbs([]);
+        setRawConfig(null);
+        return;
+      }
+      setRawConfig(breadcrumbConfig);
+      if (!autoResolve) {
+        const rawBreadcrumbs = breadcrumbConfig.segments.map((segment) => ({
+          label: typeof segment.label === "string" ? segment.label : "Loading...",
+          href: typeof segment.href === "function" && pathname ? segment.href(pathname) : segment.href,
+          icon: segment.icon
+        }));
+        setBreadcrumbs(rawBreadcrumbs);
+        return;
+      }
+      const resolvedConfig = await resolveBreadcrumbConfig(
+        breadcrumbConfig,
+        supabase,
+        pathname
+      );
+      const resolvedBreadcrumbs = resolvedConfig.segments.map((segment) => ({
+        label: typeof segment.label === "string" ? segment.label : "Loading...",
+        href: segment.href,
+        icon: segment.icon
+      }));
+      setBreadcrumbs(resolvedBreadcrumbs);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      setError(errorMessage);
+      console.error("Error generating breadcrumbs:", err);
+      setBreadcrumbs([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [pathname, supabase, autoResolve]);
+  const refresh = useCallback(async () => {
+    await generateBreadcrumbs();
+  }, [generateBreadcrumbs]);
+  useEffect(() => {
+    generateBreadcrumbs();
+  }, [generateBreadcrumbs]);
+  return {
+    breadcrumbs,
+    isLoading,
+    error,
+    refresh,
+    rawConfig
+  };
+};
+var usePageHeaderBreadcrumbs = (pathname, supabase) => {
+  const { breadcrumbs, isLoading, error } = useBreadcrumbs({
+    pathname,
+    supabase,
+    autoResolve: true
+  });
+  const customBreadcrumbs = breadcrumbs.map((item) => ({
+    label: item.label,
+    href: item.href,
+    icon: item.icon
+  }));
+  return {
+    customBreadcrumbs,
+    showBreadcrumbs: true,
+    isLoading,
+    error
+  };
+};
+
+// src/nav/aceternity/usePageHeader.ts
+import { useEffect as useEffect2 } from "react";
+
+// src/nav/aceternity/BreadcrumbContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var BreadcrumbContext = createContext(
+  void 0
+);
+var useBreadcrumbContext = () => {
+  const context = useContext(BreadcrumbContext);
+  if (!context) {
+    throw new Error(
+      "useBreadcrumbContext must be used within a BreadcrumbProvider"
+    );
+  }
+  return context;
+};
+var BreadcrumbProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx8(BreadcrumbContext.Provider, { value, children });
+};
+
+// src/nav/aceternity/usePageHeader.ts
+var usePageHeader = (options) => {
+  const {
+    setPageTitle,
+    setPageSubtitle,
+    setCustomBreadcrumbs,
+    setBreadcrumbsVisibility,
+    clearCustomBreadcrumbs,
+    resetBreadcrumbs
+  } = useBreadcrumbContext();
+  useEffect2(() => {
+    if (options.title !== void 0) {
+      setPageTitle(options.title);
+    }
+    if (options.subtitle !== void 0) {
+      setPageSubtitle(options.subtitle);
+    }
+    if (options.customBreadcrumbs !== void 0) {
+      setCustomBreadcrumbs(options.customBreadcrumbs);
+    }
+    if (options.showBreadcrumbs !== void 0) {
+      setBreadcrumbsVisibility(options.showBreadcrumbs);
+    }
+    return () => {
+      if (options.customBreadcrumbs !== void 0) {
+        clearCustomBreadcrumbs();
+      }
+      if (options.title !== void 0 || options.subtitle !== void 0) {
+        resetBreadcrumbs();
+      }
+    };
+  }, [
+    options.title,
+    options.subtitle,
+    options.customBreadcrumbs,
+    options.showBreadcrumbs,
+    setPageTitle,
+    setPageSubtitle,
+    setCustomBreadcrumbs,
+    setBreadcrumbsVisibility,
+    clearCustomBreadcrumbs,
+    resetBreadcrumbs
+  ]);
+  return {
+    setPageTitle,
+    setPageSubtitle,
+    setCustomBreadcrumbs,
+    setBreadcrumbsVisibility,
+    clearCustomBreadcrumbs,
+    resetBreadcrumbs
+  };
+};
+
+// src/nav/aceternity/PageHeader.tsx
+import { cn as cn6 } from "@pol-studios/utils";
+
+// src/nav/aceternity/Breadcrumbs.tsx
+import React3, { useEffect as useEffect3, useState as useState3 } from "react";
+import { Link } from "@tanstack/react-router";
+import { cn as cn5 } from "@pol-studios/utils";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Breadcrumbs = ({
+  config,
+  customSegments,
+  pathname,
+  className,
+  showHome = true
+}) => {
+  const [resolvedSegments, setResolvedSegments] = useState3([]);
+  const [isLoading, setIsLoading] = useState3(false);
+  useEffect3(() => {
+    const processSegments = async () => {
+      setIsLoading(true);
+      const segments = customSegments || config?.segments || [];
+      const processedSegments = await Promise.all(
+        segments.map(async (segment) => {
+          const resolvedLabel = await resolveBreadcrumbLabel(segment.label);
+          return {
+            ...segment,
+            label: resolvedLabel,
+            resolvedLabel
+          };
+        })
+      );
+      setResolvedSegments(processedSegments);
+      setIsLoading(false);
+    };
+    processSegments();
+  }, [config, customSegments, pathname]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx9(
+      "nav",
+      {
+        className: cn5(
+          "flex items-center space-x-1 text-sm text-muted-600",
+          className
+        ),
+        children: /* @__PURE__ */ jsx9("div", { className: "animate-pulse bg-muted-200 h-4 w-24 rounded" })
+      }
+    );
+  }
+  if (!config && !customSegments) {
+    return null;
+  }
+  const displaySegments = showHome ? resolvedSegments : resolvedSegments.filter((segment) => segment.href !== "/");
+  if (displaySegments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx9(
+    "nav",
+    {
+      className: cn5(
+        "flex items-center gap-2 text-sm",
+        className
+      ),
+      "aria-label": "Breadcrumb navigation",
+      children: displaySegments.map((segment, index) => {
+        const isLast = index === displaySegments.length - 1;
+        const isClickable = segment.href && !isLast;
+        return /* @__PURE__ */ jsxs4(React3.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx9("span", { className: "text-muted-400", children: "/" }),
+          isClickable ? /* @__PURE__ */ jsx9(
+            Link,
+            {
+              to: segment.href,
+              className: cn5(
+                "transition-colors duration-200",
+                "hover:text-muted-900",
+                "text-muted-600"
+              ),
+              "aria-label": `Navigate to ${segment.label}`,
+              children: segment.resolvedLabel
+            }
+          ) : /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn5(
+                isLast ? "text-muted-900 font-medium" : "text-muted-600"
+              ),
+              "aria-current": isLast ? "page" : void 0,
+              children: segment.resolvedLabel
+            }
+          )
+        ] }, `${segment.label}-${index}`);
+      })
+    }
+  );
+};
+var Breadcrumbs_default = Breadcrumbs;
+
+// src/nav/aceternity/PageHeader.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var PageHeader = ({
+  title,
+  subtitle,
+  breadcrumbs,
+  showBreadcrumbs = true,
+  className,
+  children,
+  actions
+}) => {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn6(
+        "sticky top-0 h-[40px] z-40 bg-muted-100 backdrop-blur-xl box-border border-b border-muted-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsx10("div", { className: "px-4 py-1 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx10("div", { className: "flex-1", children: showBreadcrumbs && /* @__PURE__ */ jsx10(Breadcrumbs, { customSegments: breadcrumbs }) }),
+        actions && /* @__PURE__ */ jsx10("div", { className: "ml-4 flex items-center gap-2", children: actions })
+      ] }) })
+    }
+  );
+};
+var PageHeader_default = PageHeader;
+
+// src/nav/aceternity/side-bar-2.tsx
+import { useState as useState5, createContext as createContext3, useContext as useContext3 } from "react";
+import { AnimatePresence as AnimatePresence2, motion as motion3 } from "framer-motion";
+import { cn as cn8 } from "@pol-studios/utils";
+import { Link as Link2, useLocation } from "@tanstack/react-router";
+import { ChevronLeft, ChevronRight, PanelRight } from "lucide-react";
+
+// src/animate-primitives/primitives/radix/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import {
+  AnimatePresence,
+  motion as motion2,
+  useMotionValue,
+  useSpring
+} from "motion/react";
+
+// src/lib/get-strict-context.tsx
+import * as React4 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function getStrictContext(name) {
+  const Context = React4.createContext(null);
+  Context.displayName = name;
+  function Provider({ value, children }) {
+    return /* @__PURE__ */ jsx11(Context.Provider, { value, children });
+  }
+  function useContext4() {
+    const context = React4.useContext(Context);
+    if (context === null) {
+      throw new Error(`${name} must be used within its provider`);
+    }
+    return context;
+  }
+  return [Provider, useContext4];
+}
+
+// src/hooks/use-controlled-state.tsx
+import * as React5 from "react";
+function useControlledState(props) {
+  const { value, defaultValue, onChange } = props;
+  const [state, setInternalState] = React5.useState(
+    value !== void 0 ? value : defaultValue
+  );
+  React5.useEffect(() => {
+    if (value !== void 0) setInternalState(value);
+  }, [value]);
+  const setState = React5.useCallback(
+    (next, ...args) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange]
+  );
+  return [state, setState];
+}
+
+// src/animate-primitives/primitives/radix/tooltip.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var [LocalTooltipProvider, useTooltip] = getStrictContext("TooltipContext");
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx12(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", ...props });
+}
+function Tooltip2({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange
+  });
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  return /* @__PURE__ */ jsx12(
+    LocalTooltipProvider,
+    {
+      value: {
+        isOpen,
+        setIsOpen,
+        x,
+        y,
+        followCursor,
+        followCursorSpringOptions
+      },
+      children: /* @__PURE__ */ jsx12(
+        TooltipPrimitive.Root,
+        {
+          "data-slot": "tooltip",
+          ...props,
+          onOpenChange: setIsOpen
+        }
+      )
+    }
+  );
+}
+function TooltipTrigger({ onMouseMove, ...props }) {
+  const { x, y, followCursor } = useTooltip();
+  const handleMouseMove = (event) => {
+    onMouseMove?.(event);
+    const target = event.currentTarget.getBoundingClientRect();
+    if (followCursor === "x" || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left;
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
+      x.set(offsetXFromCenter);
+    }
+    if (followCursor === "y" || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top;
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
+      y.set(offsetYFromCenter);
+    }
+  };
+  return /* @__PURE__ */ jsx12(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      onMouseMove: handleMouseMove,
+      ...props
+    }
+  );
+}
+function TooltipPortal(props) {
+  const { isOpen } = useTooltip();
+  return /* @__PURE__ */ jsx12(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx12(
+    TooltipPrimitive.Portal,
+    {
+      forceMount: true,
+      "data-slot": "tooltip-portal",
+      ...props
+    }
+  ) });
+}
+function TooltipContent({
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  style,
+  transition = { type: "spring", stiffness: 300, damping: 25 },
+  ...props
+}) {
+  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();
+  const translateX = useSpring(x, followCursorSpringOptions);
+  const translateY = useSpring(y, followCursorSpringOptions);
+  return /* @__PURE__ */ jsx12(
+    TooltipPrimitive.Content,
+    {
+      asChild: true,
+      forceMount: true,
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      avoidCollisions,
+      collisionBoundary,
+      collisionPadding,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      children: /* @__PURE__ */ jsx12(
+        motion2.div,
+        {
+          "data-slot": "popover-content",
+          initial: { opacity: 0, scale: 0.5 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.5 },
+          transition,
+          style: {
+            x: followCursor === "x" || followCursor === true ? translateX : void 0,
+            y: followCursor === "y" || followCursor === true ? translateY : void 0,
+            ...style
+          },
+          ...props
+        },
+        "popover-content"
+      )
+    }
+  );
+}
+function TooltipArrow(props) {
+  return /* @__PURE__ */ jsx12(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow", ...props });
+}
+
+// src/animate-primitives/components/radix/tooltip.tsx
+import { cn as cn7 } from "@pol-studios/utils/tailwind";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function TooltipProvider2({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipProvider, { delayDuration, ...props });
+}
+function Tooltip3({ delayDuration = 0, ...props }) {
+  return /* @__PURE__ */ jsx13(TooltipProvider2, { delayDuration, children: /* @__PURE__ */ jsx13(Tooltip2, { ...props }) });
+}
+function TooltipTrigger2({ ...props }) {
+  return /* @__PURE__ */ jsx13(TooltipTrigger, { ...props });
+}
+function TooltipContent2({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipPortal, { children: /* @__PURE__ */ jsxs6(
+    TooltipContent,
+    {
+      sideOffset,
+      className: cn7(
+        "bg-foreground text-background z-50 w-fit origin-[var(--radix-tooltip-content-transform-origin)] rounded-md px-3 py-1.5 text-xs text-balance animate-in fade-in-0 zoom-in-[0.98] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx13(TooltipArrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/nav/aceternity/sidebar.config.tsx
+import { Home, Contact, FolderGit2, BookImage, Database, Calendar, Receipt, WalletCards, History, MessageSquarePlus, Settings2, ArrowLeft } from "lucide-react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var defaultSidebarLinks = [
+  {
+    label: "Home",
+    icon: /* @__PURE__ */ jsx14(Home, { className: "w-5 h-5" }),
+    href: "/",
+    section: "main"
+  },
+  {
+    label: "Clients",
+    icon: /* @__PURE__ */ jsx14(Contact, { className: "w-5 h-5" }),
+    href: "/clients",
+    userAccess: "admin_project",
+    section: "main"
+  },
+  {
+    label: "Projects",
+    icon: /* @__PURE__ */ jsx14(FolderGit2, { className: "w-5 h-5" }),
+    href: "/projects",
+    userAccess: "admin_project",
+    section: "main"
+  },
+  {
+    label: "Fixture Catalog",
+    icon: /* @__PURE__ */ jsx14(BookImage, { className: "w-5 h-5" }),
+    href: "/fixtures",
+    userAccess: "fixture_catalog",
+    section: "main"
+  },
+  {
+    label: "Project Database",
+    icon: /* @__PURE__ */ jsx14(Database, { className: "w-5 h-5" }),
+    href: "/project-databases",
+    userAccess: "project_database",
+    section: "main"
+  },
+  {
+    label: "Timesheet",
+    icon: /* @__PURE__ */ jsx14(Calendar, { className: "w-5 h-5" }),
+    href: "/timesheet",
+    userAccess: "timesheet",
+    section: "main"
+  },
+  {
+    label: "Expense Reports",
+    icon: /* @__PURE__ */ jsx14(Receipt, { className: "w-5 h-5" }),
+    href: "/expense",
+    userAccess: "expense_report",
+    section: "main"
+  },
+  {
+    label: "Invoice",
+    icon: /* @__PURE__ */ jsx14(WalletCards, { className: "w-5 h-5" }),
+    href: "/invoices",
+    userAccess: "invoicing",
+    section: "main"
+  },
+  {
+    label: "Change Log",
+    icon: /* @__PURE__ */ jsx14(History, { className: "w-5 h-5" }),
+    href: "/changelog",
+    section: "secondary"
+  },
+  {
+    label: "Support",
+    icon: /* @__PURE__ */ jsx14(MessageSquarePlus, { className: "w-5 h-5" }),
+    href: "/support/tickets",
+    section: "secondary"
+  },
+  {
+    label: "Admin",
+    icon: /* @__PURE__ */ jsx14(Settings2, { className: "w-5 h-5" }),
+    href: "/admin",
+    userAccess: "admin",
+    section: "secondary"
+  },
+  {
+    label: "Log Out",
+    icon: /* @__PURE__ */ jsx14(ArrowLeft, { className: "w-5 h-5" }),
+    onClick: void 0,
+    section: "auth"
+  }
+];
+var sidebarLinks = [...defaultSidebarLinks];
+var setSidebarLinks = (links) => {
+  sidebarLinks = links;
+};
+var addSidebarLinks = (links) => {
+  sidebarLinks = [...sidebarLinks, ...links];
+};
+var resetSidebarLinks = () => {
+  sidebarLinks = [...defaultSidebarLinks];
+};
+
+// src/nav/aceternity/side-bar-2.tsx
+import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var SidebarContext = createContext3(
+  void 0
+);
+var useSidebar = () => {
+  const context = useContext3(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+var SidebarProvider = ({
+  children,
+  open: openProp,
+  setOpen: setOpenProp,
+  animate = true
+}) => {
+  const [openState, setOpenState] = useState5(false);
+  const open = openProp !== void 0 ? openProp : openState;
+  const setOpen = setOpenProp !== void 0 ? setOpenProp : setOpenState;
+  return /* @__PURE__ */ jsx15(SidebarContext.Provider, { value: { open, setOpen, animate }, children });
+};
+var Sidebar = ({
+  children,
+  open,
+  setOpen,
+  animate
+}) => {
+  return /* @__PURE__ */ jsx15(SidebarProvider, { open, setOpen, animate, children });
+};
+function SidebarLayout({
+  className,
+  children,
+  links = sidebarLinks,
+  onSignOut,
+  loginRoute = "/login",
+  profile,
+  hasAccess = () => true,
+  headerActions,
+  supabase,
+  userProfilePicture,
+  notificationIcon
+}) {
+  const location = useLocation();
+  const mainLinks = links.filter((l) => l.section === "main");
+  const secondaryLinks = links.filter((l) => l.section === "secondary");
+  const authLinks = links.filter((l) => l.section === "auth");
+  if (authLinks.length > 0 && onSignOut) {
+    authLinks[0].onClick = () => onSignOut();
+  }
+  const [open, setOpen] = useState5(false);
+  const { customBreadcrumbs, showBreadcrumbs, isLoading } = usePageHeaderBreadcrumbs(location.pathname, supabase);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn8(
+        "mx-auto flex w-full flex-1 flex-col overflow-hidden md:flex-row min-h-screen z-[100]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx15(Sidebar, { open, setOpen, children: /* @__PURE__ */ jsx15(SidebarBody, { className: "justify-between z-50 gap-5", children: /* @__PURE__ */ jsxs7(
+          "aside",
+          {
+            "data-testId": "side-bar",
+            className: "flex flex-1 gap-4 flex-col p-2 px-3 overflow-y-auto overflow-x-hidden",
+            role: "navigation",
+            "aria-label": "Main sidebar navigation",
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "section",
+                {
+                  className: cn8(
+                    "flex items-center gap-2 py-4 px-2 transition-all",
+                    open ? "justify-between" : "justify-center flex-col gap-3"
+                  ),
+                  "aria-label": "User profile and notifications",
+                  children: [
+                    /* @__PURE__ */ jsxs7(
+                      "div",
+                      {
+                        className: cn8(
+                          "flex items-center gap-2",
+                          open ? "" : "flex-col"
+                        ),
+                        children: [
+                          userProfilePicture,
+                          open && profile && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col ml-2", children: [
+                            /* @__PURE__ */ jsxs7("span", { className: "font-semibold text-base text-muted-900 ", children: [
+                              profile.firstName,
+                              " ",
+                              profile.lastName
+                            ] }),
+                            /* @__PURE__ */ jsx15("span", { className: "text-xs text-muted-500 ", children: profile.email })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      "div",
+                      {
+                        className: cn8(
+                          "flex items-center gap-2",
+                          open ? "" : "flex-col"
+                        ),
+                        children: notificationIcon
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "nav",
+                {
+                  className: "flex flex-col gap-0.5 mt-2",
+                  "aria-label": "Sidebar controls",
+                  children: /* @__PURE__ */ jsx15(SidebarCollapseExpandButton, { open, setOpen })
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "nav",
+                {
+                  className: "flex flex-col gap-0.5 mt-2",
+                  "aria-label": "Main navigation",
+                  children: mainLinks.map((link, idx) => /* @__PURE__ */ jsx15(
+                    SidebarLink,
+                    {
+                      link,
+                      activePath: location.pathname,
+                      sidebarOpen: open,
+                      hasAccess,
+                      tabIndex: 0
+                    },
+                    idx
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx15("div", { className: "my-4 h-px w-full bg-muted-200" }),
+              /* @__PURE__ */ jsx15("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", children: secondaryLinks.map((link, idx) => /* @__PURE__ */ jsx15(
+                SidebarLink,
+                {
+                  link,
+                  activePath: location.pathname,
+                  sidebarOpen: open,
+                  hasAccess,
+                  tabIndex: 0
+                },
+                idx
+              )) }),
+              /* @__PURE__ */ jsx15("div", { className: "my-4 h-px w-full bg-muted-200" }),
+              /* @__PURE__ */ jsx15("nav", { className: "flex flex-col", "aria-label": "Auth navigation", children: authLinks.map((link, idx) => /* @__PURE__ */ jsx15(
+                SidebarLink,
+                {
+                  link,
+                  activePath: location.pathname,
+                  sidebarOpen: open,
+                  hasAccess,
+                  tabIndex: 0
+                },
+                idx
+              )) })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx15(
+            PageHeader,
+            {
+              title: void 0,
+              subtitle: void 0,
+              breadcrumbs: (() => {
+                const breadcrumbs = customBreadcrumbs || [];
+                if (isLoading && breadcrumbs.length > 0) {
+                  return breadcrumbs.map((b) => ({
+                    ...b,
+                    label: "Loading...",
+                    href: typeof b.href === "function" ? "#" : b.href
+                  }));
+                }
+                return breadcrumbs.map((b) => ({
+                  ...b,
+                  href: typeof b.href === "function" ? "#" : b.href
+                }));
+              })(),
+              showBreadcrumbs,
+              actions: headerActions
+            }
+          ),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 overflow-auto", children })
+        ] })
+      ] })
+    }
+  );
+}
+var SidebarBody = (props) => {
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx15(DesktopSidebar, { ...props }),
+    /* @__PURE__ */ jsx15(MobileSidebar, { ...props })
+  ] });
+};
+var DesktopSidebar = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { open, setOpen, animate } = useSidebar();
+  return /* @__PURE__ */ jsx15(Fragment, { children: /* @__PURE__ */ jsx15(
+    motion3.div,
+    {
+      className: cn8(
+        "h-[100dvh] hidden md:flex md:flex-col w-[300px] shrink-0 bg-muted-100/85 drop-shadow-2xl md:drop-shadow-md sticky top-0 left-0 backdrop-blur-xl backdrop-saturate-150",
+        className,
+        open && "px-4 py-4 "
+      ),
+      animate: {
+        width: animate ? open ? "300px" : "75px" : "300px"
+      },
+      ...props,
+      children
+    }
+  ) });
+};
+var MobileSidebar = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { open, setOpen } = useSidebar();
+  return /* @__PURE__ */ jsx15(Fragment, { children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn8(
+        "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between w-full z-[98] bg-muted-100/85"
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex z-20 w-full gap-2 justify-between", children: [
+          /* @__PURE__ */ jsx15("div", { className: "font-semibold", children: "Menu" }),
+          /* @__PURE__ */ jsx15(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "ml-auto p-1 min-h-[unset] h-min my-auto",
+              onClick: () => setOpen((p) => !p),
+              children: /* @__PURE__ */ jsx15(PanelRight, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx15(AnimatePresence2, { children: open && /* @__PURE__ */ jsx15(
+          motion3.div,
+          {
+            initial: { x: "100%", opacity: 1 },
+            animate: { x: 0, opacity: 1 },
+            exit: { x: "100%", opacity: 1 },
+            transition: { duration: 0.3, ease: "easeInOut" },
+            className: cn8(
+              "fixed inset-y-0 right-0 w-80 z-[100] flex flex-col justify-between bg-muted-100/85 drop-shadow-2xl rounded-2xl border border-muted-200 backdrop-blur-xl backdrop-saturate-150",
+              className
+            ),
+            children
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+var SidebarLink = ({
+  link,
+  className,
+  activePath,
+  sidebarOpen,
+  tabIndex,
+  hasAccess = () => true
+}) => {
+  const { open, setOpen, animate } = useSidebar();
+  const isActive = link.href === "/" ? activePath === "/" : activePath && link.href && activePath.startsWith(link.href);
+  const canAccess = link.userAccess ? hasAccess(link.userAccess) : true;
+  if (!canAccess) return null;
+  const linkContent = /* @__PURE__ */ jsxs7(
+    Link2,
+    {
+      to: link.href || "/",
+      className: cn8(
+        "flex items-center gap-3 w-full rounded-xl px-3 py-2 transition cursor-pointer group/sidebar relative focus:outline-none",
+        isActive && (sidebarOpen ? "bg-muted-100 text-muted-900" : "bg-muted-100/80 text-muted-900"),
+        className
+      ),
+      onClick: (e) => {
+        setOpen(false);
+        link.onClick && link.onClick(e);
+      },
+      "aria-current": isActive ? "page" : void 0,
+      "aria-label": link.label,
+      tabIndex,
+      children: [
+        isActive && /* @__PURE__ */ jsx15(
+          "span",
+          {
+            className: cn8(
+              "absolute left-0 top-1/2 -translate-y-1/2 h-8 w-1 rounded bg-primary-400 shadow transition-all",
+              sidebarOpen ? "opacity-100 left-1" : "opacity-80 left-1"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { className: "flex items-center justify-center", children: link.icon }),
+        /* @__PURE__ */ jsx15(
+          motion3.span,
+          {
+            animate: {
+              display: animate ? open ? "inline-block" : "none" : "inline-block",
+              opacity: animate ? open ? 1 : 0 : 1,
+              width: animate ? open ? "auto" : 0 : "auto"
+            },
+            className: cn8(
+              isActive ? "text-muted-900 font-semibold w-max text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0" : "text-muted-700 w-max text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0",
+              sidebarOpen === false && "hidden"
+            ),
+            children: link.label
+          }
+        )
+      ]
+    }
+  );
+  if (!open) {
+    return /* @__PURE__ */ jsx15(TooltipProvider2, { children: /* @__PURE__ */ jsxs7(Tooltip3, { children: [
+      /* @__PURE__ */ jsx15(TooltipTrigger2, { asChild: true, children: linkContent }),
+      /* @__PURE__ */ jsx15(TooltipContent2, { side: "right", children: link.label })
+    ] }) });
+  }
+  return linkContent;
+};
+var SidebarCollapseExpandButton = ({
+  open,
+  setOpen
+}) => /* @__PURE__ */ jsx15(
+  Button,
+  {
+    variant: "ghost",
+    size: "icon",
+    className: cn8(
+      "rounded-xl w-full flex items-center justify-center px-3 py-2 mb-1 border border-transparent bg-transparent hover:bg-muted-200 transition"
+    ),
+    "aria-label": open ? "Collapse sidebar" : "Expand sidebar",
+    onClick: () => setOpen((p) => !p),
+    children: open ? /* @__PURE__ */ jsx15(ChevronLeft, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx15(ChevronRight, { className: "w-5 h-5" })
+  }
+);
+export {
+  BottomNav,
+  BreadcrumbProvider,
+  Breadcrumbs_default as Breadcrumbs,
+  DesktopSidebar,
+  MenuToggle,
+  MenuToggle_default as MenuToggleDefault,
+  MobileSidebar,
+  NavBarGroupItem,
+  PageHeader_default as PageHeader,
+  Sidebar,
+  SidebarBody,
+  SidebarCollapseExpandButton,
+  SidebarLayout,
+  SidebarLink,
+  SidebarProvider,
+  UserProfileName,
+  UserProfilePicture,
+  addBreadcrumbConfigs,
+  addHierarchicalBreadcrumbConfigs,
+  addSidebarLinks,
+  buildInheritedBreadcrumbConfig,
+  clearBreadcrumbConfigs,
+  defaultSidebarLinks,
+  extractDynamicValues,
+  findBreadcrumbConfig,
+  getBreadcrumbConfigs,
+  getHierarchicalBreadcrumbConfigs,
+  resetSidebarLinks,
+  resolveBreadcrumbConfig,
+  resolveBreadcrumbLabel,
+  setBreadcrumbConfigs,
+  setHierarchicalBreadcrumbConfigs,
+  setSidebarLinks,
+  sidebarLinks,
+  useBreadcrumbContext,
+  useBreadcrumbs,
+  usePageHeader,
+  usePageHeaderBreadcrumbs,
+  useSidebar
+};